62:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 63:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 64:Tb043,'use client' /** * EventCalendar -- a full month-view event calendar with stats strip, * drag/shift range select, side rail (selected day or range summary), * upcoming list, and per-event/per-cell context menus. * * Configurable surface: * - events / onEventsChange CalendarEvent[] the source of truth * - eventTypes Record visual config per type * - initialDate YYYY-MM-DD which month opens first * - weekStartsOn 0 | 1 Sunday vs Monday * - loading skeleton state during fetch * - title / description / show* toggles per pane * * Render-prop slots: * - headerActions extra controls to the right of search/view/new * - eventDialog full override of the detail dialog body * - emptyDay node shown when a selected day has no events * * Callbacks: * - onEventClick(event) * - onEventCreate(dateKey) requested from "New event" or * the per-cell context menu * - onEventEdit / onEventDuplicate / onEventDelete(event) * - onRangeChange({ lo, hi }) fires when the selection range moves */ import * as React from 'react' import { ChevronLeft, ChevronRight, Plus, Clock, MapPin, Users, Search, CalendarDays, ListFilter, Copy, X, CalendarPlus, ArrowRight, MousePointer2, Pencil, Trash2, Eye, CopyPlus, } from 'lucide-react' import { useMonthGrid, dateFromKey } from '@/lib/use-month-grid' import type { CalendarEvent, EventTypeMeta } from './types' import { defaultEventTypes } from './defaults' export type { CalendarEvent, EventTypeMeta } from './types' export { defaultEventTypes } from './defaults' import { Button } from '@/components/ui/button' import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from '@/components/ui/dialog' import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select' import { Avatar, AvatarFallback } from '@/components/ui/avatar' import { Separator } from '@/components/ui/separator' import { Skeleton } from '@/components/ui/skeleton' import { Input } from '@/components/ui/input' import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuTrigger, ContextMenuLabel, } from '@/components/ui/context-menu' export interface EventCalendarProps { /** Source of truth. Pair with onEventsChange. */ events?: CalendarEvent[] onEventsChange?: (value: CalendarEvent[]) => void /** Visual + semantic theme per event type. Falls back to defaultEventTypes. */ eventTypes?: Record /** YYYY-MM-DD -- month to open first. Defaults to today. */ initialDate?: string /** 0 = Sunday (default), 1 = Monday. */ weekStartsOn?: 0 | 1 /** Show the skeleton placeholders instead of cells / rail rows. */ loading?: boolean title?: string description?: string /** Default = true. Stats strip across the top. */ showStats?: boolean /** Default = true. Side rail to the right of the grid. */ showSideRail?: boolean /** Default = true. Search input in the header. */ showSearch?: boolean /** Default = true. Month/Week/Day select. Week/Day not implemented yet * -- the select is purely visual until you wire up the modes. */ showViewSelect?: boolean /** Default = true. Legend strip under the grid. */ showLegend?: boolean /** Default = true. "Up next" pane under the side rail. */ showUpcoming?: boolean onEventClick?: (event: CalendarEvent) => void onEventCreate?: (dateKey: string) => void onEventEdit?: (event: CalendarEvent) => void onEventDuplicate?: (event: CalendarEvent) => void onEventDelete?: (event: CalendarEvent) => void onRangeChange?: (bounds: { lo: string; hi: string }) => void /** Render-prop override for the controls to the right of search/view. */ headerActions?: React.ReactNode /** Render-prop override for the dialog body. */ eventDialog?: (event: CalendarEvent) => React.ReactNode /** Render-prop override for the empty selected-day state. */ emptyDay?: React.ReactNode } export function EventCalendar({ events = [], onEventsChange: _onEventsChange, eventTypes = defaultEventTypes, initialDate, weekStartsOn = 0, loading = false, title = 'Calendar', description = 'Schedule, meetings, and deadlines. Drag or shift-click to select a range.', showStats = true, showSideRail = true, showSearch = true, showViewSelect = true, showLegend = true, showUpcoming = true, onEventClick, onEventCreate, onEventEdit, onEventDuplicate, onEventDelete, onRangeChange, headerActions, eventDialog, emptyDay, }: EventCalendarProps) { const [view, setView] = React.useState<'month' | 'week' | 'day'>('month') const [eventOpen, setEventOpen] = React.useState(false) const [selectedEvent, setSelectedEvent] = React.useState(null) const [search, setSearch] = React.useState('') const { todayKey, cursor, monthLabel, gridDays, weekdays, rangeStart, rangeBounds, rangeDayCount, isRange, inRange, prevMonth, nextMonth, goToToday, selectWeekOf, clearRange, onCellMouseDown, onCellMouseEnter, endDrag, } = useMonthGrid({ initialDate, weekStartsOn }) React.useEffect(() => { onRangeChange?.(rangeBounds) // eslint-disable-next-line react-hooks/exhaustive-deps }, [rangeBounds.lo, rangeBounds.hi]) // Fall through to a neutral style for unknown event types so the calendar // doesn't crash when a consumer passes a type that's missing from the map. const neutralMeta: EventTypeMeta = { label: 'Event', icon: CalendarDays, chip: 'bg-muted text-muted-foreground ring-muted-foreground/20', bar: 'bg-muted-foreground', dot: 'bg-muted-foreground', glow: 'bg-muted-foreground/10', text: 'text-muted-foreground', ring: 'hover:ring-muted-foreground/30', } function metaFor(type: string): EventTypeMeta { return eventTypes[type] ?? neutralMeta } const typeKeys = React.useMemo(() => Object.keys(eventTypes), [eventTypes]) const filtered = React.useMemo(() => { const q = search.trim().toLowerCase() if (!q) return events return events.filter( (e) => e.title.toLowerCase().includes(q) || (e.description ?? '').toLowerCase().includes(q) || (e.location ?? '').toLowerCase().includes(q), ) }, [events, search]) const eventsByDate = React.useMemo(() => { const map = new Map() for (const e of filtered) { if (!map.has(e.date)) map.set(e.date, []) map.get(e.date)!.push(e) } for (const arr of map.values()) arr.sort((a, b) => a.start.localeCompare(b.start)) return map }, [filtered]) const monthCounts = React.useMemo(() => { const y = cursor.getFullYear() const m = cursor.getMonth() const out: Record & { total: number } = { total: 0 } for (const k of typeKeys) out[k] = 0 for (const e of events) { const d = new Date(e.date) if (d.getFullYear() === y && d.getMonth() === m) { if (out[e.type] !== undefined) out[e.type]!++ out.total++ } } return out }, [cursor, typeKeys, events]) const typeStats = React.useMemo(() => { const y = cursor.getFullYear() const m = cursor.getMonth() const out: Record = {} for (const k of typeKeys) out[k] = { weeks: [0, 0, 0, 0, 0, 0], next: null } const firstOffset = new Date(y, m, 1).getDay() for (const e of events) { const d = new Date(e.date) if (d.getFullYear() === y && d.getMonth() === m && out[e.type]) { const week = Math.floor((d.getDate() - 1 + firstOffset) / 7) out[e.type]!.weeks[week]!++ } } for (const t of typeKeys) { const next = events .filter((e) => e.type === t && e.date >= todayKey) .sort((a, b) => a.date.localeCompare(b.date) || a.start.localeCompare(b.start))[0] out[t]!.next = next ?? null } return out }, [cursor, typeKeys, events, todayKey]) function fmtNextDate(key: string) { if (key === todayKey) return 'Today' return dateFromKey(key).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) } const rangeEvents = React.useMemo(() => { const { lo, hi } = rangeBounds return filtered .filter((e) => e.date >= lo && e.date <= hi) .sort((a, b) => a.date.localeCompare(b.date) || a.start.localeCompare(b.start)) }, [filtered, rangeBounds]) const rangeTypeCounts = React.useMemo(() => { const init: Record = {} for (const k of typeKeys) init[k] = 0 for (const e of rangeEvents) { if (init[e.type] !== undefined) init[e.type]!++ } return init }, [typeKeys, rangeEvents]) const selectedDayEvents = eventsByDate.get(rangeStart) ?? [] const upcoming = React.useMemo( () => filtered .filter((e) => e.date > todayKey) .sort((a, b) => a.date.localeCompare(b.date) || a.start.localeCompare(b.start)) .slice(0, 4), [filtered, todayKey], ) function openEvent(e: CalendarEvent) { setSelectedEvent(e) setEventOpen(true) onEventClick?.(e) } function copyDate(key: string) { if (typeof navigator !== 'undefined' && navigator.clipboard) { navigator.clipboard.writeText(key).catch(() => { /* clipboard may be denied; nothing to do */ }) } } function fmtDayLong(key: string) { return dateFromKey(key).toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' }) } function fmtDayShort(key: string) { return dateFromKey(key).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) } function initials(name: string) { return name .split(' ') .map((n) => n[0]) .join('') .slice(0, 2) } function cellRangeClass(key: string, inMonth: boolean) { const { lo, hi } = rangeBounds if (!inRange(key)) return inMonth ? 'bg-background hover:bg-accent/40' : 'bg-muted/20 hover:bg-muted/30' if (key === lo && key === hi) return 'bg-accent/30 ring-1 ring-inset ring-primary/60' let cls = 'bg-primary/10 hover:bg-primary/15' if (key === lo) cls += ' ring-1 ring-inset ring-primary/60' if (key === hi) cls += ' ring-1 ring-inset ring-primary/60' return cls } return (

{/* Header */}

{title}

{description &&

{description}

}

{showSearch && (

setSearch(e.target.value)} placeholder="Search events" className="h-8 w-56 pl-8 text-xs" />

)} {showViewSelect && ( )} {headerActions ?? ( )}

{/* Stats strip */} {showStats && (

{typeKeys.map((key) => { const Icon = eventTypes[key]!.icon return ( ) })}

)} {/* Main: calendar + side rail */}

{/* Month grid */}

{monthLabel}

{isRange && (

{rangeDayCount} days, {rangeEvents.length} events

)}

{monthCounts.total} event{monthCounts.total === 1 ? '' : 's'} this month

{weekdays.map((w) => (

{w}

))}

{loading ? Array.from({ length: 42 }).map((_, i) => (

)) : gridDays.map((d, i) => ( {fmtDayLong(d.key)} onEventCreate?.(d.key)}> New event N selectWeekOf(d.key)}> Select this week copyDate(d.key)}> Copy date {d.key} Go to today {isRange && ( Clear range )} ))}

{showLegend && (

{typeKeys.map((key) => (

{eventTypes[key]!.label}

))} Tip: drag or shift-click to range. Right-click for actions.

)}

{/* Side rail */} {showSideRail && (

{!isRange ? (

{rangeStart === todayKey ? 'Today' : 'Selected'}

{fmtDayLong(rangeStart)}

Events

{selectedDayEvents.length}

{loading ? Array.from({ length: 3 }).map((_, i) => (

)) : selectedDayEvents.length === 0 ? (emptyDay ?? (

Nothing scheduled

Click a date or add a new event.

)) : selectedDayEvents.map((e) => (

openEvent(e)} >

{e.title}

{metaFor(e.type).label}

{e.start}-{e.end} {e.location && ( {e.location} )}

{e.attendees?.length ? (

{e.attendees.slice(0, 4).map((a, i) => ( {initials(a)} ))} {e.attendees.length > 4 && ( +{e.attendees.length - 4} )}

) : null}

{e.title} openEvent(e)}> View details onEventEdit?.(e)}> Edit onEventDuplicate?.(e)}> Duplicate onEventDelete?.(e)} > Cancel event ))}

) : (

Range, {rangeDayCount} days

{fmtDayShort(rangeBounds.lo)} -> {fmtDayShort(rangeBounds.hi)}

{typeKeys.map((key) => (

{eventTypes[key]!.label}

{rangeTypeCounts[key] ?? 0}

))}

{rangeEvents.length === 0 ? (

No events in range.

) : ( rangeEvents.map((e) => (

openEvent(e)} >

{new Date(e.date).toLocaleDateString('en-US', { month: 'short' })} {new Date(e.date).getDate()}

{e.title}

{e.start}-{e.end} {e.location && {e.location}}

{metaFor(e.type).label}

)) )}

)} {showUpcoming && (

Up next

After today

{loading ? ( Array.from({ length: 3 }).map((_, i) => (

)) ) : upcoming.length === 0 ? (

Nothing on the horizon.

) : ( upcoming.map((e) => ( )) )}

)}

{/* Event Detail Dialog */}

) } 65:T5ce,import { Video, CheckCircle2, AlertCircle, Plane } from 'lucide-react' import type { EventTypeMeta } from './types' /** * Default event-type theme. Mirrors the boilerplate dashboard but routes * every color through OKLCH tokens (chart-1..4, success, warning) so it * follows light/dark mode and any consumer theme override. * * Override per-type or replace the whole map via ``. */ export const defaultEventTypes: Record = { meeting: { label: 'Meeting', icon: Video, chip: 'bg-chart-1/10 text-chart-1 ring-chart-1/20', bar: 'bg-chart-1', dot: 'bg-chart-1', glow: 'bg-chart-1/10', text: 'text-chart-1', ring: 'hover:ring-chart-1/30', }, task: { label: 'Task', icon: CheckCircle2, chip: 'bg-success/10 text-success ring-success/20', bar: 'bg-success', dot: 'bg-success', glow: 'bg-success/10', text: 'text-success', ring: 'hover:ring-success/30', }, reminder: { label: 'Reminder', icon: AlertCircle, chip: 'bg-warning/10 text-warning ring-warning/20', bar: 'bg-warning', dot: 'bg-warning', glow: 'bg-warning/10', text: 'text-warning', ring: 'hover:ring-warning/30', }, travel: { label: 'Travel', icon: Plane, chip: 'bg-chart-3/10 text-chart-3 ring-chart-3/20', bar: 'bg-chart-3', dot: 'bg-chart-3', glow: 'bg-chart-3/10', text: 'text-chart-3', ring: 'hover:ring-chart-3/30', }, } 66:T621,import type { LucideIcon } from 'lucide-react' /** * Single event on the calendar. `type` is a free-form string (e.g. `'meeting'`, * `'task'`, anything) -- the matching key must exist in the `eventTypes` map * passed to . Unknown types fall through to a neutral style. */ export interface CalendarEvent { id: string title: string /** YYYY-MM-DD */ date: string /** HH:mm */ start: string /** HH:mm */ end: string type: string description?: string location?: string attendees?: string[] /** Free-form status tag rendered next to the type label in the dialog. */ status?: string } /** * Visual + semantic config per event type. The default theme uses OKLCH * tokens (chart-1..4, success, warning) so consumers get sensible colors * out of the box, but you can override per-type to wire any palette. */ export interface EventTypeMeta { label: string /** Lucide icon component for the stat tile + chip + dialog header. */ icon: LucideIcon /** Tailwind classes for the colored chip on event rows + dialog header. * Shape: `bg-X/10 text-X ring-X/20` is what the default theme uses. */ chip: string /** Tailwind class for the vertical bar to the left of side-rail rows. */ bar: string /** Tailwind class for the legend / stat-tile dot. */ dot: string /** Tailwind class for the soft watermark glow behind stat tiles. */ glow: string /** Tailwind class for the small text accent on "Next: ..." date labels. */ text: string /** Tailwind class for the stat-tile hover ring. */ ring: string } 61:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L62",null,{"namespace":"@registrydirectory","registryDependencies":["https://uipkge.dev/r/react/use-month-grid.json","https://uipkge.dev/r/react/button.json","https://uipkge.dev/r/react/dialog.json","https://uipkge.dev/r/react/select.json","https://uipkge.dev/r/react/avatar.json","https://uipkge.dev/r/react/separator.json","https://uipkge.dev/r/react/skeleton.json","https://uipkge.dev/r/react/input.json","https://uipkge.dev/r/react/context-menu.json"]}]]}],null]}],["$","$L63",null,{"files":[{"path":"packages/registry-react/blocks/event-calendar-dashboard/EventCalendar.tsx","content":"$64","type":"registry:block","target":"~/components/blocks/event-calendar-dashboard/EventCalendar.tsx"},{"path":"packages/registry-react/blocks/event-calendar-dashboard/defaults.ts","content":"$65","type":"registry:block","target":"~/components/blocks/event-calendar-dashboard/defaults.ts"},{"path":"packages/registry-react/blocks/event-calendar-dashboard/types.ts","content":"$66","type":"registry:block","target":"~/components/blocks/event-calendar-dashboard/types.ts"},{"path":"packages/registry-react/blocks/event-calendar-dashboard/index.ts","content":"export { EventCalendar, type EventCalendarProps } from './EventCalendar'\nexport type { CalendarEvent, EventTypeMeta } from './types'\nexport { defaultEventTypes } from './defaults'\n","type":"registry:block","target":"~/components/blocks/event-calendar-dashboard/index.ts"}],"className":"h-[70svh] min-h-80"}]]}]