50: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"] 51: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"] 52:T4ec5,"use client"; import * as React from "react"; import { Autopilot, type AutopilotChapter } from "@/components/ui/autopilot"; const days = [ { key: "mon", label: "Mon", date: 13, wide: true }, { key: "tue", label: "Tue", date: 14 }, { key: "wed", label: "Wed", date: 15 }, { key: "thu", label: "Thu", date: 16 }, { key: "fri", label: "Fri", date: 17, wide: true }, ]; const hours = [9, 10, 11, 12, 13, 14, 15, 16]; const ROW = 40; // px per hour const tones = { sky: "border-sky-500 bg-sky-50 text-sky-900 dark:bg-sky-400/15 dark:text-sky-100", teal: "border-teal-500 bg-teal-50 text-teal-900 dark:bg-teal-400/15 dark:text-teal-100", amber: "border-amber-500 bg-amber-50 text-amber-900 dark:bg-amber-400/15 dark:text-amber-100", rose: "border-rose-500 bg-rose-50 text-rose-900 dark:bg-rose-400/15 dark:text-rose-100", slate: "border-zinc-400 bg-zinc-100 text-zinc-700 dark:bg-white/10 dark:text-zinc-200", }; const events: { id: string; day: string; start: number; end: number; title: string; tone: keyof typeof tones }[] = [ { id: "mon-standup", day: "mon", start: 9, end: 9.5, title: "Standup", tone: "sky" }, { id: "mon-1on1", day: "mon", start: 10.5, end: 11.5, title: "1:1 with Sam", tone: "teal" }, { id: "mon-focus", day: "mon", start: 14, end: 16, title: "Focus time", tone: "slate" }, { id: "tue-standup", day: "tue", start: 9, end: 9.5, title: "Standup", tone: "sky" }, { id: "tue-roadmap", day: "tue", start: 11, end: 12.5, title: "Roadmap sync", tone: "rose" }, { id: "calls", day: "tue", start: 13, end: 15, title: "Customer calls", tone: "amber" }, { id: "wed-standup", day: "wed", start: 9, end: 9.5, title: "Standup", tone: "sky" }, { id: "wed-lunch", day: "wed", start: 12, end: 13, title: "Lunch & learn", tone: "teal" }, { id: "wed-review", day: "wed", start: 15, end: 17, title: "Sprint review", tone: "rose" }, { id: "thu-panel", day: "thu", start: 10, end: 11.5, title: "Hiring panel", tone: "amber" }, { id: "thu-crit", day: "thu", start: 13, end: 14, title: "Design crit", tone: "slate" }, { id: "fri-standup", day: "fri", start: 9, end: 9.5, title: "Standup", tone: "sky" }, { id: "fri-retro", day: "fri", start: 11, end: 12, title: "Retro", tone: "teal" }, ]; const people = [ { id: "priya", name: "Priya Raman", email: "priya@northwind.co", tint: "bg-rose-500" }, { id: "pablo", name: "Pablo Ortiz", email: "pablo@northwind.co", tint: "bg-sky-500" }, { id: "maya", name: "Maya Chen", email: "maya@northwind.co", tint: "bg-amber-500" }, { id: "sam", name: "Sam Okafor", email: "sam@northwind.co", tint: "bg-teal-500" }, ]; const isFree = (day: string, hour: number) => !events.some((event) => event.day === day && event.start < hour + 1 && event.end > hour); const clock = (hour: number) => `${((hour + 11) % 12) + 1}${hour < 12 ? " AM" : " PM"}`; const hm = (hour: number) => { const h = ((Math.floor(hour) + 11) % 12) + 1; return hour % 1 ? `${h}:${String(Math.round((hour % 1) * 60)).padStart(2, "0")}` : `${h}`; }; const range = (start: number, end: number) => `${hm(start)} – ${hm(end)}${end < 12 ? "am" : "pm"}`; type Booking = { open: boolean; title: string; slot: { day: string; hour: number } | null; query: string; guests: string[]; sent: boolean; }; const blank: Booking = { open: false, title: "", slot: null, query: "", guests: [], sent: false }; const named: Booking = { ...blank, open: true, title: "Design review" }; export function AutopilotDemo() { const [booking, setBooking] = React.useState(blank); const [toast, setToast] = React.useState(false); const update = (patch: Partial) => setBooking((current) => ({ ...current, ...patch })); React.useEffect(() => { if (!toast) return; const timer = window.setTimeout(() => setToast(false), 4000); return () => window.clearTimeout(timer); }, [toast]); const chapters: AutopilotChapter[] = [ { title: "Draft", setup: () => { setBooking(blank); setToast(false); }, steps: [ { move: "new-event", say: "Booking a design review" }, { click: "new-event" }, { wait: 350 }, { type: "Design review", into: "title", say: "Giving it a name" }, ], }, { title: "Schedule", setup: () => { setBooking(named); setToast(false); }, steps: [ { move: "calls", at: [0.55, 0.7], say: "Finding a free slot…" }, { wait: 450 }, { click: "slot-tue-15", say: "Tuesday at 3 is free" }, { wait: 300 }, ], }, { title: "Invite", setup: () => { setBooking({ ...named, slot: { day: "tue", hour: 15 } }); setToast(false); }, steps: [ { type: "pri", into: "guests", say: "Adding Priya" }, { click: "guest-priya" }, { click: "send", say: "Sending the invite" }, { wait: 1400, say: "Booked for Tuesday at 3" }, ], }, ]; const matches = booking.query ? people.filter( (person) => !booking.guests.includes(person.id) && person.name.toLowerCase().includes(booking.query.toLowerCase()), ) : []; const slotDay = days.find((day) => day.key === booking.slot?.day); const canSend = booking.title.trim() !== "" && booking.slot !== null; return (

{/* Toolbar */}

14 Calendar

‹ Oct 13 – 17, 2026 ›

{/* Week */}

{days.map((day) => (

{day.label} {day.date}

))}

{hours.map((hour) => (

{hour === 9 ? "" : clock(hour)}

))}

{days.map((day) => (

{hours.map((hour) => (

{isFree(day.key, hour) && ( )}

))} {day.key === "mon" && (

)} {events .filter((event) => event.day === day.key) .map((event) => (

{event.title}

{event.end - event.start >= 1 && (

{range(event.start, event.end)}

)}

))} {booking.slot?.day === day.key && (

{booking.title || "(No title)"}

)}

))}

{/* New event panel */}

New event

update({ title: event.target.value })} placeholder="Add title" aria-label="Title" className="h-10 w-full rounded-lg border border-zinc-200 bg-transparent px-3 text-base font-medium outline-none placeholder:text-zinc-400 focus:border-violet-500 focus:ring-3 focus:ring-violet-500/20 data-[autopilot-focus]:border-violet-500 data-[autopilot-focus]:ring-3 data-[autopilot-focus]:ring-violet-500/20 sm:text-sm dark:border-white/10" />

{booking.slot && slotDay ? (

{slotDay.label}, Oct {slotDay.date} {clock(booking.slot.hour)} – {clock(booking.slot.hour + 1)}

) : (

Pick a time on the calendar

)}

{booking.guests.length > 0 && (

{booking.guests.map((id) => { const person = people.find((p) => p.id === id)!; return ( {person.name} ); })}

)} update({ query: event.target.value })} placeholder="Add guests" aria-label="Add guests" className="h-8 w-full rounded-lg border border-zinc-200 bg-transparent px-2.5 text-base outline-none placeholder:text-zinc-400 focus:border-violet-500 focus:ring-3 focus:ring-violet-500/20 data-[autopilot-focus]:border-violet-500 data-[autopilot-focus]:ring-3 data-[autopilot-focus]:ring-violet-500/20 sm:text-sm dark:border-white/10" /> {matches.length > 0 && (

)}

{/* Toast */}

{toast && ( <> ✓ Invite sent to {booking.guests.length ? people.find((p) => p.id === booking.guests[0])?.name : "your guests"} )}

); } function Avatar({ person }: { person: (typeof people)[number] }) { return ( {person.name .split(" ") .map((part) => part[0]) .join("")} ); } function ClockIcon() { return ( ); } function PeopleIcon() { return ( ); } 4f:["$","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":[null,["$","$L50",null,{"namespace":"@keyframeui","registryDependencies":["https://keyframeui.com/r/autopilot.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/demos/autopilot-demo.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]