2c:I[522016,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],""] 2d:I[406394,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"BlockTabs"] 2e:I[966139,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"PreviewFrame"] 2f:I[967833,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"CodeView"] 30:Ta170,"use client"; import * as React from "react"; import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react"; import { Button } from "@/components/ui/button"; import { Calendar } from "@/components/ui/calendar"; import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; import { ScrollArea } from "@/components/ui/scroll-area"; import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"; import { cn } from "@/lib/utils"; import { addDays, addMinutes, atMinutes, dayDiff, dayKey, fmt, isWeekend, layoutLanes, minutesOfDay, monthGrid, sameDay, startOfDay, startOfWeek, } from "./dates"; export type AgendaView = "day" | "week" | "month"; export type AgendaTone = "default" | "info" | "success" | "warning" | "error"; export type AgendaEvent = { id: string; title: string; start: Date; end: Date; allDay?: boolean; tone?: AgendaTone; location?: string; /** Blocks move, resize and delete for this event. */ readOnly?: boolean; }; export type WeekDay = 0 | 1 | 2 | 3 | 4 | 5 | 6; export type AgendaRange = { start: Date; end: Date }; const SNAP = 15; const snap = (m: number) => Math.round(m / SNAP) * SNAP; const clamp = (n: number, lo: number, hi: number) => Math.min(Math.max(n, lo), hi); const toneClass: Record = { default: "border-s-foreground/50 bg-foreground/10", info: "border-s-info bg-info/15", success: "border-s-success bg-success/15", warning: "border-s-warning bg-warning/15", error: "border-s-error bg-error/15", }; /* -------------------------------------------------------------------------- */ /* Context */ /* -------------------------------------------------------------------------- */ type AgendaContextValue = { view: AgendaView; setView: (v: AgendaView) => void; date: Date; setDate: (d: Date) => void; events: AgendaEvent[]; startHour: number; endHour: number; slotDuration: number; weekStartsOn: WeekDay; highlightWeekends: boolean; now: Date | null; locale: string; selectedId: string | null; select: (event: AgendaEvent | null) => void; latest: React.RefObject; }; type Handlers = Pick & { events: AgendaEvent[] }; const AgendaContext = React.createContext(null); function useAgenda() { const ctx = React.useContext(AgendaContext); if (!ctx) throw new Error("Agenda parts must be rendered inside ."); return ctx; } function useControllable(value: T | undefined, defaultValue: T, onChange?: (v: T) => void) { const [inner, setInner] = React.useState(defaultValue); const controlled = value !== undefined; const set = React.useCallback( (next: T) => { if (!controlled) setInner(next); onChange?.(next); }, [controlled, onChange], ); return [controlled ? value : inner, set] as const; } /* -------------------------------------------------------------------------- */ /* Root */ /* -------------------------------------------------------------------------- */ export type AgendaProps = Omit, "defaultValue" | "onChange"> & { view?: AgendaView; defaultView?: AgendaView; onViewChange?: (view: AgendaView) => void; /** Any date inside the range being shown. */ date?: Date; defaultDate?: Date; onDateChange?: (date: Date) => void; events?: AgendaEvent[]; onEventCreate?: (range: AgendaRange & { allDay?: boolean }) => void; onEventMove?: (event: AgendaEvent, range: AgendaRange) => void; onEventResize?: (event: AgendaEvent, range: AgendaRange) => void; onEventDelete?: (event: AgendaEvent) => void; onEventSelect?: (event: AgendaEvent | null) => void; /** First visible hour of the time grid. */ startHour?: number; /** Hour the time grid ends at (exclusive). */ endHour?: number; /** Minutes between grid lines. */ slotDuration?: 15 | 30 | 60; /** 0 is Sunday. */ weekStartsOn?: WeekDay; highlightWeekends?: boolean; /** Overrides the clock. Leave empty for a live current-time line. */ now?: Date; showCurrentTime?: boolean; locale?: string; }; function Agenda({ className, view: viewProp, defaultView = "week", onViewChange, date: dateProp, defaultDate, onDateChange, events = [], onEventCreate, onEventMove, onEventResize, onEventDelete, onEventSelect, startHour = 7, endHour = 21, slotDuration = 30, weekStartsOn = 1, highlightWeekends = true, now: nowProp, showCurrentTime = true, locale = "en-US", children, ...props }: AgendaProps) { const [view, setView] = useControllable(viewProp, defaultView, onViewChange); const [initialDate] = React.useState(() => defaultDate ?? new Date()); const [date, setDate] = useControllable(dateProp, initialDate, onDateChange); const [selectedId, setSelectedId] = React.useState(null); const [clock, setClock] = React.useState(null); React.useEffect(() => { if (nowProp || !showCurrentTime) return; const tick = () => setClock(new Date()); tick(); const id = setInterval(tick, 30_000); return () => clearInterval(id); }, [nowProp, showCurrentTime]); const now = showCurrentTime ? (nowProp ?? clock) : null; const latest = React.useRef({ events }); React.useLayoutEffect(() => { latest.current = { events, onEventCreate, onEventMove, onEventResize, onEventDelete }; }); const select = React.useCallback( (event: AgendaEvent | null) => { setSelectedId(event?.id ?? null); onEventSelect?.(event); }, [onEventSelect], ); const ctx = React.useMemo( () => ({ view, setView, date, setDate, events, startHour, endHour, slotDuration, weekStartsOn, highlightWeekends, now, locale, selectedId, select, latest, }), [view, setView, date, setDate, events, startHour, endHour, slotDuration, weekStartsOn, highlightWeekends, now, locale, selectedId, select], ); return (

{children ?? ( <>

)}

); } /* -------------------------------------------------------------------------- */ /* Toolbar and sidebar */ /* -------------------------------------------------------------------------- */ function titleFor(view: AgendaView, date: Date, weekStartsOn: number, locale: string) { if (view === "month") return fmt(locale, { month: "long", year: "numeric" }).format(date); if (view === "day") return fmt(locale, { weekday: "short", month: "short", day: "numeric", year: "numeric" }).format(date); const a = startOfWeek(date, weekStartsOn); const b = addDays(a, 6); const sameMonth = a.getMonth() === b.getMonth(); const left = fmt(locale, { month: "short", day: "numeric" }).format(a); const right = sameMonth ? String(b.getDate()) : fmt(locale, { month: "short", day: "numeric" }).format(b); return `${left} – ${right}, ${b.getFullYear()}`; } function shift(view: AgendaView, date: Date, dir: 1 | -1) { if (view === "month") return new Date(date.getFullYear(), date.getMonth() + dir, 1); return addDays(date, dir * (view === "week" ? 7 : 1)); } function AgendaToolbar({ className, ...props }: React.ComponentProps<"div">) { const { view, setView, date, setDate, weekStartsOn, locale, now } = useAgenda(); const [open, setOpen] = React.useState(false); const title = titleFor(view, date, weekStartsOn, locale); const unit = view === "month" ? "month" : view; return (

}>{title} { if (d) { setDate(d); setOpen(false); } }} /> next[0] && setView(next[0] as AgendaView)} > {(["day", "week", "month"] as const).map((v) => ( {v} ))}

); } function AgendaSidebar({ className, ...props }: React.ComponentProps<"aside">) { const { date, setDate, events, weekStartsOn, now } = useAgenda(); const days = React.useMemo(() => events.map((e) => startOfDay(e.start)), [events]); return ( ); } function AgendaBody({ className, ...props }: React.ComponentProps<"div">) { const { view } = useAgenda(); return (

{view === "month" ? : }

); } /* -------------------------------------------------------------------------- */ /* Event card */ /* -------------------------------------------------------------------------- */ function EventCard({ event, locale, selected, short, ghost, className, style, children, ...props }: Omit, "title"> & { event: Pick & { id?: string }; locale: string; selected?: boolean; short?: boolean; ghost?: boolean; }) { const time = fmt(locale, { hour: "numeric", minute: "2-digit" }); const range = `${time.format(event.start)} – ${time.format(event.end)}`; return (

{short ? ( {event.title} {time.format(event.start)} ) : ( {event.title} {range} {event.location ? {event.location} : null} )} {children}

); } /* -------------------------------------------------------------------------- */ /* Time grid (day and week) */ /* -------------------------------------------------------------------------- */ type Gesture = { kind: "move" | "resize-start" | "resize-end" | "create"; pointerId: number; x: number; y: number; touch: boolean; armed: boolean; active: boolean; timer?: ReturnType; event?: AgendaEvent; dayIndex: number; /** Minutes between the pointer and the event's start when grabbed. */ grab: number; anchor: number; }; type Preview = { kind: Gesture["kind"]; id?: string; start: Date; end: Date }; function TimeGrid() { const { view, date, events, startHour, endHour, slotDuration, weekStartsOn, highlightWeekends, now, locale, selectedId, select, latest } = useAgenda(); const days = React.useMemo( () => (view === "day" ? [startOfDay(date)] : Array.from({ length: 7 }, (_, i) => addDays(startOfWeek(date, weekStartsOn), i))), [view, date, weekStartsOn], ); const startMin = startHour * 60; const endMin = endHour * 60; const total = endMin - startMin; const hours = endHour - startHour; const bodyRef = React.useRef(null); const [preview, setPreview] = React.useState(null); const gesture = React.useRef(null); const handlers = React.useRef<{ move: (e: PointerEvent) => void; up: (e: PointerEvent) => void; key: (e: KeyboardEvent) => void }>({ move: () => {}, up: () => {}, key: () => {}, }); const stable = React.useRef({ move: (e: PointerEvent) => handlers.current.move(e), up: (e: PointerEvent) => handlers.current.up(e), key: (e: KeyboardEvent) => handlers.current.key(e), block: (e: TouchEvent) => { if (gesture.current?.armed) e.preventDefault(); }, }); const hourFmt = React.useMemo(() => fmt(locale, { hour: "numeric" }), [locale]); const dayFmt = React.useMemo(() => fmt(locale, { weekday: "short" }), [locale]); // Open scrolled to the working day: an hour above now, or 8:00. React.useLayoutEffect(() => { const body = bodyRef.current; const viewport = body?.closest('[data-slot="scroll-area-viewport"]'); if (!body || !viewport) return; const target = Math.floor(((now && days.some((d) => sameDay(d, now)) ? minutesOfDay(now) : 8 * 60) - 60) / 60) * 60; viewport.scrollTop = Math.max(0, ((target - startMin) / total) * body.offsetHeight); // Only when the range or hours change, not on every clock tick. // eslint-disable-next-line react-hooks/exhaustive-deps }, [view, startMin, total]); const locate = (clientX: number, clientY: number, lock?: number) => { const cols = Array.from(bodyRef.current?.querySelectorAll("[data-day-col]") ?? []); if (!cols.length) return { idx: 0, min: startMin }; let idx = cols.findIndex((c) => { const r = c.getBoundingClientRect(); return clientX >= r.left && clientX < r.right; }); if (idx < 0) idx = clientX < cols[0].getBoundingClientRect().left ? 0 : cols.length - 1; if (lock !== undefined) idx = lock; const r = cols[idx].getBoundingClientRect(); return { idx, min: startMin + ((clientY - r.top) / r.height) * total }; }; const cleanup = () => { const g = gesture.current; if (g?.timer) clearTimeout(g.timer); gesture.current = null; setPreview(null); window.removeEventListener("pointermove", stable.current.move); window.removeEventListener("pointerup", stable.current.up); window.removeEventListener("pointercancel", stable.current.up); window.removeEventListener("keydown", stable.current.key); window.removeEventListener("touchmove", stable.current.block); }; const compute = (g: Gesture, clientX: number, clientY: number): Preview | null => { if (g.kind === "move" && g.event) { const loc = locate(clientX, clientY); const dur = clamp((g.event.end.getTime() - g.event.start.getTime()) / 60_000, SNAP, total); const s = clamp(snap(loc.min - g.grab), startMin, endMin - dur); const start = atMinutes(days[loc.idx], s); return { kind: "move", id: g.event.id, start, end: addMinutes(start, dur) }; } if (g.kind === "resize-end" && g.event) { const loc = locate(clientX, clientY, g.dayIndex); const s = minutesOfDay(g.event.start); const e = clamp(snap(loc.min), s + SNAP, endMin); return { kind: g.kind, id: g.event.id, start: g.event.start, end: atMinutes(days[g.dayIndex], e) }; } if (g.kind === "resize-start" && g.event) { const loc = locate(clientX, clientY, g.dayIndex); const e = minutesOfDay(g.event.end) || 24 * 60; const s = clamp(snap(loc.min), startMin, e - SNAP); return { kind: g.kind, id: g.event.id, start: atMinutes(days[g.dayIndex], s), end: g.event.end }; } if (g.kind === "create") { const loc = locate(clientX, clientY, g.dayIndex); const lo = Math.min(g.anchor, loc.min); const hi = Math.max(g.anchor, loc.min); const s = clamp(Math.floor(lo / SNAP) * SNAP, startMin, endMin - SNAP); const e = clamp(Math.max(Math.ceil(hi / SNAP) * SNAP, s + SNAP), s + SNAP, endMin); return { kind: "create", start: atMinutes(days[g.dayIndex], s), end: atMinutes(days[g.dayIndex], e) }; } return null; }; const onMove = (e: PointerEvent) => { const g = gesture.current; if (!g || e.pointerId !== g.pointerId) return; if (!g.active) { if (Math.hypot(e.clientX - g.x, e.clientY - g.y) < 4) return; if (!g.armed) return cleanup(); // a touch moved before the hold finished: that was a scroll g.active = true; } setPreview(compute(g, e.clientX, e.clientY)); }; const onUp = (e: PointerEvent) => { const g = gesture.current; if (!g || e.pointerId !== g.pointerId) return; const h = latest.current; if (e.type === "pointercancel") return cleanup(); if (!g.active) { if (g.kind === "move" && g.event) select(g.event); if (g.kind === "create") { const s = clamp(Math.floor(g.anchor / slotDuration) * slotDuration, startMin, endMin - slotDuration); const start = atMinutes(days[g.dayIndex], s); h.onEventCreate?.({ start, end: addMinutes(start, slotDuration) }); } return cleanup(); } const p = compute(g, e.clientX, e.clientY); if (p && g.event) { const changed = p.start.getTime() !== g.event.start.getTime() || p.end.getTime() !== g.event.end.getTime(); if (changed) { if (g.kind === "move") h.onEventMove?.(g.event, { start: p.start, end: p.end }); else h.onEventResize?.(g.event, { start: p.start, end: p.end }); } } else if (p && g.kind === "create") h.onEventCreate?.({ start: p.start, end: p.end }); cleanup(); }; const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") cleanup(); }; React.useLayoutEffect(() => { handlers.current = { move: onMove, up: onUp, key: onKey }; }); const begin = (e: React.PointerEvent, init: Pick & Partial) => { if (e.pointerType === "mouse" && e.button !== 0) return; if (gesture.current) return; // ignore a second touch while one is under way const touch = e.pointerType === "touch"; const g: Gesture = { pointerId: e.pointerId, x: e.clientX, y: e.clientY, touch, armed: !touch || init.kind.startsWith("resize"), active: false, grab: 0, anchor: 0, ...init, }; if (touch && !g.armed) g.timer = setTimeout(() => (g.armed = true), 260); gesture.current = g; window.addEventListener("pointermove", stable.current.move); window.addEventListener("pointerup", stable.current.up); window.addEventListener("pointercancel", stable.current.up); window.addEventListener("keydown", stable.current.key); window.addEventListener("touchmove", stable.current.block, { passive: false }); }; React.useEffect(() => cleanup, []); const onEventKey = (e: React.KeyboardEvent, ev: AgendaEvent) => { const h = latest.current; if (e.key === "Enter" || e.key === " ") { e.preventDefault(); return select(ev); } if (ev.readOnly) return; if (e.key === "Delete" || e.key === "Backspace") { e.preventDefault(); return h.onEventDelete?.(ev); } const dur = (ev.end.getTime() - ev.start.getTime()) / 60_000; if (e.key === "ArrowUp" || e.key === "ArrowDown") { e.preventDefault(); const dir = e.key === "ArrowDown" ? SNAP : -SNAP; if (e.shiftKey) { const end = addMinutes(ev.end, dir); if (dur + dir >= SNAP && minutesOfDay(end) <= endMin && minutesOfDay(end) !== 0) h.onEventResize?.(ev, { start: ev.start, end }); } else { const start = addMinutes(ev.start, dir); const s = minutesOfDay(start); if (s >= startMin && s + dur <= endMin) h.onEventMove?.(ev, { start, end: addMinutes(ev.end, dir) }); } } if ((e.key === "ArrowLeft" || e.key === "ArrowRight") && view !== "day") { e.preventDefault(); const dir = e.key === "ArrowRight" ? 1 : -1; h.onEventMove?.(ev, { start: addDays(ev.start, dir), end: addDays(ev.end, dir) }); refocus(ev.id); } }; const slotFraction = slotDuration / 60; const gridLines: React.CSSProperties = { backgroundImage: "linear-gradient(to bottom, var(--color-border) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in oklab, var(--color-border) 45%, transparent) 1px, transparent 1px)", backgroundSize: `100% var(--agenda-hour), 100% calc(var(--agenda-hour) * ${slotFraction})`, }; const cols = `3.5rem repeat(${days.length}, minmax(0, 1fr))`; const allDay = events.filter((e) => e.allDay); const hasAllDay = allDay.some((e) => days.some((d) => allDayOn(e, d))); const timeFmt = fmt(locale, { hour: "numeric", minute: "2-digit" }); const live = now ? days.findIndex((d) => sameDay(d, now)) : -1; const nowMin = now ? minutesOfDay(now) : 0; return (

{/* sticky header: day heads and the all-day row */}

{days.map((d) => { const today = now ? sameDay(d, now) : false; return (

{dayFmt.format(d)} {d.getDate()}

); })}

{hasAllDay ? (

All day

{days.map((d) => (

{allDay .filter((e) => allDayOn(e, d)) .map((e) => ( select(e)} onKeyDown={(k) => onEventKey(k, e)} /> ))}

))}

) : null}

{/* body */}

{days.map((d, di) => { const timed = events .filter((e) => !e.allDay && sameDay(e.start, d)) .map((e) => { const s = clamp(minutesOfDay(e.start), startMin, endMin); const en = sameDay(e.end, d) ? clamp(minutesOfDay(e.end) || 24 * 60, startMin, endMin) : endMin; return { e, s, en }; }) .filter((x) => x.en > x.s); const lanes = layoutLanes(timed.map((x) => ({ id: x.e.id, start: x.s, end: x.en }))); const previewHere = preview && sameDay(preview.start, d) ? preview : null; return (

{ if (e.target !== e.currentTarget) return; begin(e, { kind: "create", dayIndex: di, anchor: locate(e.clientX, e.clientY, di).min }); }} > {timed.map(({ e, s, en }) => { const lane = lanes.get(e.id) ?? { lane: 0, lanes: 1 }; const dur = en - s; const moving = preview?.id === e.id; return (

onEventKey(k, e)} onPointerDown={(p) => { p.stopPropagation(); if (e.readOnly) return select(e); const loc = locate(p.clientX, p.clientY, di); begin(p, { kind: "move", event: e, dayIndex: di, grab: loc.min - minutesOfDay(e.start) }); }} > {!e.readOnly ? ( <> { p.stopPropagation(); begin(p, { kind: "resize-start", event: e, dayIndex: di }); }} />

); })} {previewHere ? : null} {live === di && nowMin >= startMin && nowMin <= endMin ? ( ); })}

{preview ? `${timeFmt.format(preview.start)} to ${timeFmt.format(preview.end)}` : ""} ); } /** A moved event can remount in another column; hand focus back to it. */ function refocus(id: string) { requestAnimationFrame(() => requestAnimationFrame(() => document.querySelector(`[data-slot="agenda-event"][data-event-id="${CSS.escape(id)}"]`)?.focus()), ); } function allDayOn(e: AgendaEvent, d: Date) { const s = startOfDay(e.start).getTime(); const en = startOfDay(e.end).getTime(); const t = startOfDay(d).getTime(); return t >= s && t <= en; } function PreviewBlock({ preview, startMin, endMin, locale, events, }: { preview: Preview; startMin: number; endMin: number; locale: string; events: AgendaEvent[]; }) { const source = preview.id ? events.find((e) => e.id === preview.id) : undefined; const s = clamp(minutesOfDay(preview.start), startMin, endMin); const en = clamp(minutesOfDay(preview.end) || 24 * 60, startMin, endMin); return (

); } /* -------------------------------------------------------------------------- */ /* Month grid */ /* -------------------------------------------------------------------------- */ const MAX_CHIPS = 3; function MonthGrid() { const { date, setDate, setView, events, weekStartsOn, highlightWeekends, now, locale, selectedId, select, latest } = useAgenda(); const cells = React.useMemo(() => monthGrid(date, weekStartsOn), [date, weekStartsOn]); const [drag, setDrag] = React.useState<{ id: string; over: Date } | null>(null); const gesture = React.useRef<{ event: AgendaEvent; x: number; y: number; active: boolean; over: Date; id: number } | null>(null); const weekdayFmt = React.useMemo(() => fmt(locale, { weekday: "short" }), [locale]); const byDay = React.useMemo(() => { const map = new Map(); for (const e of events) { const span = e.allDay ? dayDiff(e.start, e.end) : 0; for (let i = 0; i <= span; i++) { const k = dayKey(addDays(startOfDay(e.start), i)); map.set(k, [...(map.get(k) ?? []), e]); } } for (const list of map.values()) list.sort((a, b) => Number(!!b.allDay) - Number(!!a.allDay) || a.start.getTime() - b.start.getTime()); return map; }, [events]); const cellAt = (x: number, y: number) => { const el = document.elementFromPoint(x, y)?.closest("[data-month-cell]"); const key = el?.dataset.monthCell; return key ? cells.find((c) => dayKey(c) === key) : undefined; }; const handlers = React.useRef<{ move: (e: PointerEvent) => void; up: (e: PointerEvent) => void }>({ move: () => {}, up: () => {} }); const stable = React.useRef({ move: (e: PointerEvent) => handlers.current.move(e), up: (e: PointerEvent) => handlers.current.up(e), }); const end = () => { gesture.current = null; setDrag(null); window.removeEventListener("pointermove", stable.current.move); window.removeEventListener("pointerup", stable.current.up); window.removeEventListener("pointercancel", stable.current.up); }; const onMove = (e: PointerEvent) => { const g = gesture.current; if (!g || e.pointerId !== g.id) return; if (!g.active && Math.hypot(e.clientX - g.x, e.clientY - g.y) < 4) return; g.active = true; const over = cellAt(e.clientX, e.clientY); if (over) { g.over = over; setDrag({ id: g.event.id, over }); } }; const onUp = (e: PointerEvent) => { const g = gesture.current; if (!g || e.pointerId !== g.id) return; if (e.type !== "pointercancel") { if (!g.active) select(g.event); else { const delta = dayDiff(g.event.start, g.over); if (delta !== 0) latest.current.onEventMove?.(g.event, { start: addDays(g.event.start, delta), end: addDays(g.event.end, delta) }); } } end(); }; React.useLayoutEffect(() => { handlers.current = { move: onMove, up: onUp }; }); React.useEffect(() => end, []); const chipKey = (k: React.KeyboardEvent, e: AgendaEvent) => { if (k.key === "Enter" || k.key === " ") { k.preventDefault(); select(e); } else if ((k.key === "Delete" || k.key === "Backspace") && !e.readOnly) { k.preventDefault(); latest.current.onEventDelete?.(e); } else if ((k.key === "ArrowLeft" || k.key === "ArrowRight") && !e.readOnly) { k.preventDefault(); const dir = k.key === "ArrowRight" ? 1 : -1; latest.current.onEventMove?.(e, { start: addDays(e.start, dir), end: addDays(e.end, dir) }); refocus(e.id); } }; const weekdays = cells.slice(0, 7); return (

{weekdays.map((d) => (

{weekdayFmt.format(d)}

))}

{cells.map((d) => { const list = byDay.get(dayKey(d)) ?? []; const outside = d.getMonth() !== date.getMonth(); const today = now ? sameDay(d, now) : false; const shown = list.length > MAX_CHIPS ? list.slice(0, MAX_CHIPS - 1) : list; const more = list.length - shown.length; return (

{ if (e.target !== e.currentTarget) return; const start = atMinutes(d, 9 * 60); latest.current.onEventCreate?.({ start, end: addMinutes(start, 60) }); }} > {shown.map((e) => ( chipKey(k, e)} onPointerDown={(p) => { if (gesture.current || (p.pointerType === "mouse" && p.button !== 0)) return; if (e.readOnly) return select(e); gesture.current = { event: e, x: p.clientX, y: p.clientY, active: false, over: d, id: p.pointerId }; window.addEventListener("pointermove", stable.current.move); window.addEventListener("pointerup", stable.current.up); window.addEventListener("pointercancel", stable.current.up); }} /> ))} {more > 0 ? ( ) : null}

); })}

); } export { Agenda, AgendaToolbar, AgendaSidebar, AgendaBody }; 31:Ta12,// Small date helpers. Local time throughout, no dependencies. export const MINUTE = 60_000; export const startOfDay = (d: Date) => new Date(d.getFullYear(), d.getMonth(), d.getDate()); export const addDays = (d: Date, n: number) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + n, d.getHours(), d.getMinutes()); export const addMinutes = (d: Date, n: number) => new Date(d.getTime() + n * MINUTE); export const sameDay = (a: Date, b: Date) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate(); export const minutesOfDay = (d: Date) => d.getHours() * 60 + d.getMinutes(); export const atMinutes = (day: Date, minutes: number) => new Date(day.getFullYear(), day.getMonth(), day.getDate(), 0, minutes); export const startOfWeek = (d: Date, weekStartsOn: number) => { const day = startOfDay(d); return addDays(day, -((day.getDay() - weekStartsOn + 7) % 7)); }; export const startOfMonth = (d: Date) => new Date(d.getFullYear(), d.getMonth(), 1); export const dayDiff = (a: Date, b: Date) => Math.round((startOfDay(b).getTime() - startOfDay(a).getTime()) / 86_400_000); export const isWeekend = (d: Date) => d.getDay() === 0 || d.getDay() === 6; export const dayKey = (d: Date) => `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`; export function monthGrid(date: Date, weekStartsOn: number): Date[] { const first = startOfWeek(startOfMonth(date), weekStartsOn); return Array.from({ length: 42 }, (_, i) => addDays(first, i)); } export function fmt(locale: string, options: Intl.DateTimeFormatOptions) { return new Intl.DateTimeFormat(locale, options); } /** Lay out overlapping timed events into side-by-side lanes. */ export function layoutLanes(items: T[]) { const sorted = [...items].sort((a, b) => a.start - b.start || b.end - a.end); const out = new Map(); let cluster: { id: string; lane: number }[] = []; let laneEnds: number[] = []; let clusterEnd = -1; const flush = () => { for (const c of cluster) out.set(c.id, { lane: c.lane, lanes: laneEnds.length }); cluster = []; laneEnds = []; }; for (const item of sorted) { if (item.start >= clusterEnd) flush(); let lane = laneEnds.findIndex((end) => end <= item.start); if (lane === -1) { lane = laneEnds.length; laneEnds.push(item.end); } else laneEnds[lane] = item.end; cluster.push({ id: item.id, lane }); clusterEnd = Math.max(clusterEnd, item.end); } flush(); return out; } 32:T13cd,"use client"; import * as React from "react"; import { DemoPage, DemoSection } from "../../_shared/variant-frame"; import { IconTrash } from "@tabler/icons-react"; import { Button } from "@/components/ui/button"; import { Agenda, type AgendaEvent, type AgendaRange, type AgendaView, } from "./agenda"; import { AGENDA_NOW, agendaEvents } from "../_fixtures-b"; const clone = (list: AgendaEvent[]) => list.map((e) => ({ ...e, start: new Date(e.start), end: new Date(e.end) })); const time = new Intl.DateTimeFormat("en-US", { weekday: "short", hour: "numeric", minute: "2-digit" }); function useEvents(initial: AgendaEvent[]) { const [events, setEvents] = React.useState(() => clone(initial)); const [log, setLog] = React.useState("Drag an event, drag a handle, or drag across empty space."); const [selected, setSelected] = React.useState(null); const [count, setCount] = React.useState(0); const patch = (id: string, range: AgendaRange, what: string) => { setEvents((list) => list.map((e) => (e.id === id ? { ...e, ...range } : e))); setSelected((s) => (s?.id === id ? { ...s, ...range } : s)); const e = events.find((x) => x.id === id); setLog(`${what} ${e?.title}: ${time.format(range.start)} to ${time.format(range.end)}`); }; const handlers = { onEventCreate: (r: AgendaRange & { allDay?: boolean }) => { const id = `new-${count + 1}`; setCount((c) => c + 1); const e: AgendaEvent = { id, title: "New event", start: r.start, end: r.end, tone: "info", allDay: r.allDay }; setEvents((l) => [...l, e]); setSelected(e); setLog(`Created: ${time.format(r.start)} to ${time.format(r.end)}`); }, onEventMove: (e: AgendaEvent, r: AgendaRange) => patch(e.id, r, "Moved"), onEventResize: (e: AgendaEvent, r: AgendaRange) => patch(e.id, r, "Resized"), onEventDelete: (e: AgendaEvent) => { setEvents((l) => l.filter((x) => x.id !== e.id)); setSelected((s) => (s?.id === e.id ? null : s)); setLog(`Deleted ${e.title}`); }, onEventSelect: (e: AgendaEvent | null) => setSelected(e), }; return { events, log, selected, handlers }; } function Status({ log, selected, onDelete }: { log: string; selected: AgendaEvent | null; onDelete: (e: AgendaEvent) => void }) { return (

{log} {selected ? ( {selected.title} ) : null}

); } function FullAgenda() { const { events, log, selected, handlers } = useEvents(agendaEvents); const [view, setView] = React.useState("week"); const [date, setDate] = React.useState(AGENDA_NOW); return (

); } function DayAgenda() { const day = React.useMemo(() => agendaEvents.filter((e) => !e.allDay && e.start.getDate() === 7), []); const { events, log, selected, handlers } = useEvents(day); return (

); } function MonthAgenda() { const { events, log, selected, handlers } = useEvents(agendaEvents); return (

); } export function AgendaDemo() { return ( ); } export default AgendaDemo; 33:T988,import type { BlockMeta } from "../../../lib/block-meta"; export const agendaMeta: BlockMeta = { slug: "agenda", title: "Agenda", description: "Day, week and month calendar on the Kobra Calendar picker. Time grid with slot duration and start and end hour, overlap lanes, all-day row, drag to move and resize with 15-minute snapping, drag on empty space to create, current-time line, weekend highlight, keyboard moves. Controlled view, date and events with onEventCreate, Move, Resize and Delete.", group: "data", kobraDeps: ["button", "calendar", "popover", "scroll-area", "toggle-group"], files: ["blocks/data/agenda/agenda.tsx", "blocks/data/agenda/dates.ts"], props: [ { name: "view / defaultView / onViewChange", type: "'day' | 'week' | 'month'", default: "'week'", description: "Visible view." }, { name: "date / defaultDate / onDateChange", type: "Date", description: "Any date inside the visible range." }, { name: "events", type: "AgendaEvent[]", description: "{ id, title, start, end, allDay?, tone?, location?, readOnly? }. Controlled: the consumer applies changes." }, { name: "onEventCreate", type: "({ start, end, allDay? }) => void", description: "Drag on empty grid space, click a slot, or double-click a month cell." }, { name: "onEventMove", type: "(event, { start, end }) => void", description: "Drop after a drag, or arrow keys on a focused event." }, { name: "onEventResize", type: "(event, { start, end }) => void", description: "Drag a top or bottom handle, or Shift+Up and Shift+Down." }, { name: "onEventDelete", type: "(event) => void", description: "Delete or Backspace on a focused event." }, { name: "onEventSelect", type: "(event | null) => void", description: "Click or Enter." }, { name: "startHour / endHour", type: "number", default: "7 / 21", description: "Visible hours of the time grid." }, { name: "slotDuration", type: "15 | 30 | 60", default: "30", description: "Minutes between grid lines (drops always snap to 15)." }, { name: "weekStartsOn", type: "0-6", default: "1", description: "First day of the week." }, { name: "highlightWeekends", type: "boolean", default: "true", description: "Tints Saturday and Sunday." }, { name: "now / showCurrentTime", type: "Date / boolean", description: "Overrides the clock for the current-time line." }, ], tags: ["calendar", "schedule", "agenda", "drag", "data"], status: "ready", }; 23:["$","article",null,{"className":"grid gap-6","children":[["$","header",null,{"className":"grid gap-3","children":[["$","nav",null,{"aria-label":"breadcrumb","data-slot":"breadcrumb","className":"","children":["$","ol",null,{"data-slot":"breadcrumb-list","className":"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground","children":[["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2c",null,{"href":"/","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Kobra Commerce"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2c",null,{"href":"/#data","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Data display"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","span",null,{"data-slot":"breadcrumb-page","role":"link","aria-disabled":"true","aria-current":"page","className":"font-normal text-foreground","children":"Agenda"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Agenda"}],["$","span",null,{"data-slot":"badge","data-variant":"green","className":"group/badge t-label relative isolate inline-flex w-fit shrink-0 items-center justify-center gap-1 rounded-full border border-transparent py-0.5 font-medium [--surface-calm:0.5] whitespace-nowrap transition-ring before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:border before:border-transparent before:transition-[scale,background-color,border-color] before:duration-150 before:ease-out focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:before:transition-none has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [a,button]:active:before:scale-[0.97] motion-reduce:[a,button]:active:before:scale-100 [&>svg]:pointer-events-none [&>svg]:size-3! t-surface t-surface-success text-[var(--badge-green-fg)] h-5 px-1.5 text-xs","children":"Ready"}]]}],["$","p",null,{"className":"max-w-[65ch] text-sm text-muted-foreground","children":"Day, week and month calendar on the Kobra Calendar picker. Time grid with slot duration and start and end hour, overlap lanes, all-day row, drag to move and resize with 15-minute snapping, drag on empty space to create, current-time line, weekend highlight, keyboard moves. Controlled view, date and events with onEventCreate, Move, Resize and Delete."}]]}],["$","$L2d",null,{"preview":["$","$L2e",null,{"slug":"agenda","group":"data","minHeight":640,"fixedHeight":"$undefined"}],"code":["$","$L2f",null,{"files":[{"path":"blocks/data/agenda/agenda.tsx","code":"$30"},{"path":"blocks/data/agenda/dates.ts","code":"$31"},{"path":"blocks/data/agenda/demo.tsx","code":"$32"},{"path":"blocks/data/agenda/meta.ts","code":"$33"}]}],"props":"$L34"}],"$L35"]}]