4f: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 50: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 51:T2099,'use client' import { useMemo, useState } from 'react' import { ChevronLeft, ChevronRight } from 'lucide-react' import { Button } from '@/components/ui/button' import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' import { cn } from '@/lib/utils' import { compactTime, simpleEvents, toDateString, type SimpleEvent } from "@/components/data/calendar-8-data" import { Calendar8DayPanel } from './calendar-8-day-panel' const monthFormat = new Intl.DateTimeFormat('en-US', { month: 'long', year: 'numeric' }) const dayNames = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] /** Two chips is what a cell this size holds; the rest roll into a "+n more" line. */ const MAX_CHIPS = 2 const startOfDay = (date: Date) => new Date(date.getFullYear(), date.getMonth(), date.getDate()) const addDays = (date: Date, days: number) => { const next = new Date(date) next.setDate(next.getDate() + days) return next } /** * Weeks start on Monday, which is what most of the world outside the US expects. The row count is * derived rather than fixed at six, so a short month never renders a whole empty trailing week. */ function monthGrid(anchor: Date) { const first = new Date(anchor.getFullYear(), anchor.getMonth(), 1) const offset = (first.getDay() + 6) % 7 const dayCount = new Date(anchor.getFullYear(), anchor.getMonth() + 1, 0).getDate() const weeks = Math.ceil((offset + dayCount) / 7) const start = addDays(first, -offset) return Array.from({ length: weeks * 7 }, (_, index) => addDays(start, index)) } /** * The plain month view: a grid, a day panel, and nothing else. * * Deliberately not an application shell. No sidebar, no mini month, no calendar filters, no search, * no attendees, no create dialog — those are what the paid calendar blocks are for. This one is the * piece you drop into a page that just needs to show a month. */ export function Calendar8() { const today = useMemo(() => startOfDay(new Date()), []) const [anchor, setAnchor] = useState(() => new Date(today.getFullYear(), today.getMonth(), 1)) const [selected, setSelected] = useState(today) const events = useMemo(() => { const map = new Map() for (const event of simpleEvents) { const date = toDateString(addDays(today, event.dayOffset)) const list = map.get(date) ?? [] list.push(event) map.set(date, list) } for (const list of map.values()) { list.sort((left, right) => left.start - right.start) } return map }, [today]) const days = useMemo(() => monthGrid(anchor), [anchor]) const todayStr = toDateString(today) const selectedStr = toDateString(selected) const shiftMonth = (delta: number) => setAnchor(new Date(anchor.getFullYear(), anchor.getMonth() + delta, 1)) const goToToday = () => { setAnchor(new Date(today.getFullYear(), today.getMonth(), 1)) setSelected(today) } return (

{monthFormat.format(anchor)}

{dayNames.map(name => (

{name} {name.slice(0, 1)}

))}

{days.map(day => { const dateStr = toDateString(day) const inMonth = day.getMonth() === anchor.getMonth() const isToday = dateStr === todayStr const isSelected = dateStr === selectedStr const dayEvents = events.get(dateStr) ?? [] const shown = dayEvents.slice(0, MAX_CHIPS) const overflow = dayEvents.length - shown.length return ( ) })}

) } export default Calendar8 52:T894,'use client' import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from '@/components/ui/empty' import { Item, ItemContent, ItemDescription, ItemMedia, ItemTitle } from '@/components/ui/item' import { formatRange, type SimpleEvent } from "@/components/data/calendar-8-data" const longDate = new Intl.DateTimeFormat('en-US', { weekday: 'long', month: 'long', day: 'numeric' }) /** The whole detail surface of the free block: the selected day, listed. No sheet, no actions. */ export function Calendar8DayPanel({ date, events }: { date: Date; events: SimpleEvent[] }) { return (

{longDate.format(date)} {events.length === 0 ? 'Clear' : `${events.length} event${events.length === 1 ? '' : 's'}`}

{events.length === 0 ? ( Nothing scheduled Pick another day to see what is on. ) : ( events.map(event => ( {/* `ItemMedia` self-starts and nudges down half a step once a description is present — tuned for a 40px avatar, which left this 8px dot pinned to the top of the row. A box the height of the title's line puts the dot on the title instead. */} {event.title} {formatRange(event)} )) )}

) } export default Calendar8DayPanel 53:Tb90,/** * The free block's fixture. Deliberately small: one list of events, one label per event, no * calendars to filter, no attendees, no rooms. Everything the paid blocks add lives there, not here. */ export interface SimpleEvent { id: string title: string /** Day offset from today, so the month always has something in it whenever it is opened. */ dayOffset: number /** Decimal hours, so 9.5 is 09:30. Keeps the formatting maths readable. */ start: number end: number allDay?: boolean } export const simpleEvents: SimpleEvent[] = [ { id: 'v1', title: 'Release review', dayOffset: 0, start: 10, end: 11 }, { id: 'v2', title: 'ShadcnStore call', dayOffset: 0, start: 15, end: 16 }, { id: 'v3', title: 'Design critique', dayOffset: 1, start: 11, end: 12 }, { id: 'v4', title: 'Deep work', dayOffset: 1, start: 13, end: 16 }, { id: 'v5', title: 'Roadmap planning', dayOffset: 2, start: 10, end: 12 }, { id: 'v6', title: 'Onboarding: Priya', dayOffset: 3, start: 14, end: 14.75 }, { id: 'v7', title: 'All hands', dayOffset: 4, start: 11, end: 12 }, { id: 'v8', title: 'Support handover', dayOffset: 4, start: 16.5, end: 17 }, { id: 'v9', title: 'Parkrun', dayOffset: 5, start: 8, end: 9 }, { id: 'v10', title: 'Quarterly review', dayOffset: 8, start: 13, end: 15 }, { id: 'v11', title: 'Security review', dayOffset: 9, start: 16.5, end: 17.5 }, { id: 'v12', title: 'Offsite', dayOffset: 11, start: 0, end: 24, allDay: true }, { id: 'v13', title: 'Pricing workshop', dayOffset: 14, start: 14, end: 16 }, { id: 'v14', title: 'Renewal: Halcyon', dayOffset: 16, start: 11, end: 11.75 }, { id: 'v15', title: 'Incident retro', dayOffset: 18, start: 15, end: 16 }, { id: 'v16', title: 'Board update', dayOffset: -3, start: 10, end: 11.5 }, { id: 'v17', title: 'Vendor review', dayOffset: -5, start: 15, end: 16 }, { id: 'v18', title: 'Dentist', dayOffset: -8, start: 8, end: 8.75 }, { id: 'v19', title: 'Team lunch', dayOffset: -11, start: 12.5, end: 13.5 }, ] export const toDateString = (date: Date) => `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}` export const formatRange = (event: SimpleEvent) => { if (event.allDay) { return 'All day' } const format = (value: number) => { const hours = Math.floor(value) const minutes = Math.round((value - hours) * 60) return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}` } return `${format(event.start)} – ${format(event.end)}` } /** The compact time a month cell has room for: `9a`, `9:15a`, `4:30p`. */ export const compactTime = (value: number) => { const hours = Math.floor(value) const minutes = Math.round((value - hours) * 60) const suffix = hours >= 12 ? 'p' : 'a' const display = hours % 12 === 0 ? 12 : hours % 12 return minutes === 0 ? `${display}${suffix}` : `${display}:${String(minutes).padStart(2, '0')}${suffix}` } 4e:["$","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"}]]}]}]]}],["$","$L4f",null,{"namespace":"@shadcnstore","registryDependencies":["button","card","empty","item"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"storage/app/registry-sources/application/calendar/calendar-8/page.tsx","content":"import { Calendar8 } from '@/components/blocks/application/calendar/calendar-8/components/calendar-8'\n\nexport default function Page() {\n return (\n \n )\n}\n","type":"registry:page","target":"app/calendar-8/page.tsx"},{"path":"storage/app/registry-sources/application/calendar/calendar-8/calendar-8.tsx","content":"$51","type":"registry:component","target":"@components/calendar-8.tsx"},{"path":"storage/app/registry-sources/application/calendar/calendar-8/calendar-8-day-panel.tsx","content":"$52","type":"registry:component","target":"@components/calendar-8-day-panel.tsx"},{"path":"storage/app/registry-sources/application/calendar/calendar-8/calendar-8-data.ts","content":"$53","type":"registry:lib","target":"@components/data/calendar-8-data.ts"}],"className":"h-[70svh] min-h-80"}]]}]