51: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"] 52: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"] 53:T467a,"use client"; import * as React from "react"; import { Autopilot, type AutopilotChapter } from "@/components/ui/autopilot"; const team = { maya: { name: "Maya", color: "#e0457b" }, leo: { name: "Leo", color: "#2f7cf6" }, you: { name: "You", color: "#18181b" }, }; type Author = keyof typeof team; type Pos = { x: number; y: number }; // percent of the canvas const SIZE = { w: 43, h: 38 }; const HERO: Pos = { x: 5, y: 9 }; const PRICING: Pos = { x: 52, y: 9 }; const SLOT: Pos = { x: 5, y: 55 }; // under the hero, on its left edge const ASTRAY: Pos = { x: 55, y: 58 }; const PIN: Pos = { x: 33, y: 27 }; type Message = { author: Author; text: string }; type Board = { features: Pos; tool: "move" | "comment"; pin: Pos | null; draft: string; author: Author; messages: Message[]; liked: boolean; }; const fresh: Board = { features: ASTRAY, tool: "move", pin: null, draft: "", author: "you", messages: [], liked: false }; const asked: Board = { ...fresh, features: SLOT, pin: PIN, messages: [{ author: "leo", text: "Can we try a darker hero image?" }], }; const near = (a: Pos, b: Pos) => Math.abs(a.x - b.x) < 4 && Math.abs(a.y - b.y) < 5; export function AutopilotMultiplayerDemo() { const [board, setBoard] = React.useState(fresh); const [snapping, setSnapping] = React.useState(false); const update = (patch: Partial) => setBoard((current) => ({ ...current, ...patch })); const canvasRef = React.useRef(null); const grab = React.useRef<{ x: number; y: number; from: Pos } | null>(null); const chapters: AutopilotChapter[] = [ { title: "Arrange", setup: () => setBoard(fresh), steps: [ { cursor: "maya", move: "features", at: [0.3, 0.2] }, { cursor: "maya", drag: "features", to: "slot", drop: () => update({ features: SLOT }), }, { cursor: "maya", move: "pricing", at: [0.4, 0.8] }, { cursor: "leo", wait: 500 }, { cursor: "leo", click: "tool-comment" }, { cursor: "leo", click: "hero", at: [0.65, 0.48] }, { cursor: "leo", do: () => update({ author: "leo" }) }, { cursor: "leo", type: "Can we try a darker hero image?", into: "reply" }, { cursor: "leo", click: "post" }, ], }, { title: "Reply", setup: () => setBoard(asked), steps: [ { cursor: "maya", do: () => update({ author: "maya" }) }, { cursor: "maya", type: "On it, trying v4 now", into: "reply" }, { cursor: "maya", click: "post" }, { cursor: "maya", move: "pricing", at: [0.3, 0.75] }, { cursor: "leo", wait: 2600 }, { cursor: "leo", click: "like" }, { cursor: "leo", wait: 1200 }, ], }, ]; const post = () => { const text = board.draft.trim(); if (!text) return; update({ messages: [...board.messages, { author: board.author, text }], draft: "", author: "you" }); }; const place = (event: React.MouseEvent) => { const canvas = canvasRef.current?.getBoundingClientRect(); if (board.tool !== "comment" || !canvas) return; update({ tool: "move", pin: { x: ((event.clientX - canvas.left) / canvas.width) * 100, y: ((event.clientY - canvas.top) / canvas.height) * 100, }, messages: [], liked: false, }); }; // The visitor drags the frame themselves; it snaps when it's close to the hero's edge. const dragHandlers = { onPointerDown: (event: React.PointerEvent) => { if (board.tool !== "move" || !event.nativeEvent.isTrusted) return; event.currentTarget.setPointerCapture(event.pointerId); grab.current = { x: event.clientX, y: event.clientY, from: board.features }; }, onPointerMove: (event: React.PointerEvent) => { const start = grab.current; const canvas = canvasRef.current?.getBoundingClientRect(); if (!start || !canvas) return; const next = { x: start.from.x + ((event.clientX - start.x) / canvas.width) * 100, y: start.from.y + ((event.clientY - start.y) / canvas.height) * 100, }; setSnapping(near(next, SLOT)); update({ features: next }); }, onPointerUp: () => { if (!grab.current) return; grab.current = null; setSnapping(false); setBoard((current) => (near(current.features, SLOT) ? { ...current, features: SLOT } : current)); }, }; const threadLeft = board.pin && board.pin.x > 55; return (

{/* Toolbar */}

Landing v3 / Review

update({ tool: "move" })}> update({ tool: board.tool === "comment" ? "move" : "comment" })} >

{(["maya", "leo", "you"] as const).map((id) => ( {team[id].name[0]} ))}

{/* Layers */}

Layers

{["Hero", "Pricing", "Features"].map((layer) => (

{layer}

))}

{/* Canvas */}

{[0, 1, 2].map((i) => (

))}

{/* Where the features frame belongs: guides show as it nears */}

{[0, 1, 2, 3].map((i) => (

))}

{/* Comment */} {board.pin && ( <> {team[board.messages[0]?.author ?? board.author].name[0]}

event.stopPropagation()} className="absolute z-20 rounded-xl border border-zinc-200 bg-white p-2.5 text-xs shadow-xl dark:border-white/10 dark:bg-zinc-800" style={{ top: `calc(${board.pin.y}% - 1.5rem)`, ...(threadLeft ? { right: `calc(${100 - board.pin.x}% + 0.5rem)`, width: `min(13rem, ${board.pin.x}% - 1rem)` } : { left: `calc(${board.pin.x}% + 2rem)`, width: `min(13rem, ${100 - board.pin.x}% - 2.5rem)` }), }} > {board.messages.map((message, i) => (

{team[message.author].name[0]}

{team[message.author].name} now

{message.text}

{message.author === "maya" && ( )}

))}

)}

); } function Frame({ name, label, at, className, children, ...props }: { name: string; label: string; at: Pos; className?: string; children: React.ReactNode; } & React.HTMLAttributes) { return (

{label} {children}

); } function Tool({ label, name, active, onClick, children, }: { label: string; name?: string; active: boolean; onClick: () => void; children: React.ReactNode; }) { return ( ); } 50:["$","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,["$","$L51",null,{"namespace":"@keyframeui","registryDependencies":["https://keyframeui.com/r/autopilot.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/demos/autopilot-multiplayer-demo.tsx","content":"$53","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]