60: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"] 61: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"] 62:T4b74,import { useCallback, useEffect, useRef, useState } from "react"; import { useReducedMotion } from "framer-motion"; /** What gets printed, in order. `alert: true` prints the heading bar in red. */ const feed = [ { kind: "New order", ref: "0412", time: "09:14", lines: ["2 Flat white", "1 Croissant"], foot: "Table 6", alert: false }, { kind: "Paid", ref: "0409", time: "09:11", lines: ["Card payment", "$18.40 settled"], foot: "Tip added", alert: false }, { kind: "Booking", ref: "B-77", time: "09:08", lines: ["Table for five", "Today at 12:30"], foot: "Name: Okafor", alert: false }, { kind: "Low stock", ref: "S-03", time: "09:02", lines: ["Oat milk", "2 cartons left"], foot: "Reorder by noon", alert: true }, { kind: "Collected", ref: "0410", time: "08:57", lines: ["Order 0410", "Left with rider"], foot: "Rider: Imre", alert: false }, { kind: "Message", ref: "M-21", time: "09:16", lines: ["Can we move our", "table to 1 pm?"], foot: "From: Lena", alert: false }, { kind: "New order", ref: "0413", time: "09:18", lines: ["1 Shakshuka", "1 Orange juice", " no coriander"], foot: "Table 2", alert: false }, { kind: "Refund", ref: "0398", time: "09:21", lines: ["Order 0398", "$6.50 returned"], foot: "Reason: wrong milk", alert: true }, ]; const EVERY = 3800; // milliseconds between tickets while the rail feeds itself const RAIL_TOP = 104; type Ticket = { uid: number; item: number; leaving: boolean }; type Body = { x: number; vx: number; a: number; va: number; y: number; vy: number; spin: number; falling: boolean }; const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v)); const BARS = [2, 1, 3, 1, 1, 2, 1, 3, 2, 1, 1, 3, 1, 2, 2, 1, 3, 1, 1, 2, 1, 1, 3, 2]; // glazed brick tiles, drawn once as a repeating picture const TILES = `url("data:image/svg+xml,${encodeURIComponent( ``, )}")`; function layout(width: number) { const small = width < 600; const tw = small ? 142 : 188; const gap = small ? 14 : 26; const slot = tw + gap; const cap = clamp(Math.floor((width - 28 + gap) / slot), 2, 5); const left = (width - cap * slot + gap) / 2; return { tw, slot, cap, left, rail: Math.min(width - 20, cap * slot - gap + 120) }; } export default function KitchenOrderRailNotifications() { const reduce = !!useReducedMotion(); const stageRef = useRef(null); const nodes = useRef(new Map()); const bodies = useRef(new Map()); const sim = useRef({ order: [] as number[], lay: layout(1100), uid: 5, item: 5, seen: true, ready: false, lastX: 0, lastT: 0, held: false }); const [tickets, setTickets] = useState(() => [0, 1, 2, 3, 4].map((i) => ({ uid: i, item: i, leaving: false }))); const [lay, setLay] = useState(() => layout(1100)); const [said, setSaid] = useState(""); const place = useCallback((uid: number) => { const el = nodes.current.get(uid); const b = bodies.current.get(uid); if (!el || !b) return; const bend = clamp(-b.va * 1.5, -5, 5); el.style.transform = `translate3d(${b.x.toFixed(2)}px, ${b.y.toFixed(1)}px, 0) rotate(${(b.a + b.spin + (((uid * 37) % 7) - 3) * 0.0045).toFixed(4)}rad) skewX(${bend.toFixed(2)}deg)`; el.style.opacity = b.falling ? String(clamp(1.2 - b.y / 420, 0, 1)) : "1"; }, []); // keep the list the physics reads in step with what React shows useEffect(() => { const s = sim.current; s.order = tickets.filter((t) => !t.leaving).map((t) => t.uid); s.order.forEach((uid, i) => { if (!bodies.current.has(uid)) { // a ticket nobody has seen yet starts off the left end of the rail, unless the rail is still being laid out bodies.current.set(uid, { x: s.ready && !reduce ? -s.lay.tw - 40 : s.lay.left + i * s.lay.slot, vx: 0, a: 0, va: 0, y: 0, vy: 0, spin: 0, falling: false }); } if (reduce || !s.ready) { const b = bodies.current.get(uid)!; b.x = s.lay.left + i * s.lay.slot; b.a = 0; } place(uid); }); bodies.current.forEach((_, uid) => { if (!tickets.some((t) => t.uid === uid)) bodies.current.delete(uid); }); }, [tickets, lay, place, reduce]); const drop = useCallback( (uid: number, tell: boolean) => { const b = bodies.current.get(uid); if (!b || b.falling) return; if (reduce) { setTickets((list) => list.filter((t) => t.uid !== uid)); } else { b.falling = true; b.vy = 180; b.va = b.va + (uid % 2 ? 1.4 : -1.4); setTickets((list) => list.map((t) => (t.uid === uid ? { ...t, leaving: true } : t))); } if (tell) setSaid("Ticket pulled off the rail."); }, [reduce], ); const print = useCallback(() => { const s = sim.current; const item = s.item % feed.length; const uid = s.uid; s.uid += 1; s.item += 1; const f = feed[item]; setSaid(`New ticket. ${f.kind} ${f.ref}: ${f.lines.join(", ").replace(/\s+/g, " ")}. ${f.foot}.`); // the oldest ticket makes room when the rail is full if (s.order.length >= s.lay.cap) drop(s.order[s.order.length - 1], false); setTickets((list) => [{ uid, item, leaving: false }, ...list]); }, [drop]); const pull = (uid: number, byKey: boolean) => { const s = sim.current; s.held = true; if (byKey) { const at = s.order.indexOf(uid); const next = s.order[at + 1] ?? s.order[at - 1]; const target = next === undefined ? stageRef.current?.querySelector("[data-print]") : nodes.current.get(next)?.querySelector("button"); target?.focus(); } drop(uid, true); }; // measure the wall and decide how many tickets fit useEffect(() => { const stage = stageRef.current; if (!stage) return; const s = sim.current; const measure = () => { const next = layout(stage.clientWidth); const first = !s.ready; s.lay = next; setLay(next); if (first) { setTickets((list) => list.slice(0, next.cap)); list_ready(); } else { const extra = s.order.slice(next.cap); extra.forEach((uid) => drop(uid, false)); } }; const list_ready = () => window.setTimeout(() => (s.ready = true), 60); measure(); const ro = new ResizeObserver(measure); ro.observe(stage); const io = new IntersectionObserver(([e]) => (s.seen = e.isIntersecting)); io.observe(stage); return () => { ro.disconnect(); io.disconnect(); }; }, [drop]); // the rail: tickets are sprung to their places, hang as pendulums and are swung by how hard they are shoved useEffect(() => { if (reduce) return; const s = sim.current; let raf = 0; let last = performance.now(); const step = (now: number) => { raf = requestAnimationFrame(step); if (!s.seen || document.hidden) { last = now; return; } const dt = Math.min(0.03, (now - last) / 1000); last = now; const done: number[] = []; bodies.current.forEach((b, uid) => { if (b.falling) { b.vy += 2900 * dt; b.y += b.vy * dt; b.spin += b.va * dt * 0.5; if (b.y > 620) done.push(uid); } else { const i = s.order.indexOf(uid); const ax = (s.lay.left + i * s.lay.slot - b.x) * 74 - b.vx * 13.5; b.vx += ax * dt; b.x += b.vx * dt; const draught = Math.sin(now / 760 + uid * 1.9) * 0.42 + Math.sin(now / 310 + uid) * 0.14; b.va += (-b.a * 44 - b.va * 2.3 - ax * 0.00042 + draught) * dt; b.a = clamp(b.a + b.va * dt, -0.6, 0.6); } place(uid); }); if (done.length) setTickets((list) => list.filter((t) => !done.includes(t.uid))); }; raf = requestAnimationFrame(step); // the first ticket waits a little longer, so the rail is seen full and still before anything moves let loop = 0; const feedOne = () => { if (s.seen && !document.hidden && !s.held) print(); loop = window.setTimeout(feedOne, EVERY); }; loop = window.setTimeout(feedOne, EVERY + 1400); return () => { cancelAnimationFrame(raf); window.clearTimeout(loop); }; }, [place, print, reduce]); // a hand moving past sets the paper swinging const brush = (e: React.PointerEvent) => { const s = sim.current; const box = stageRef.current?.getBoundingClientRect(); if (!box || reduce) return; const x = e.clientX - box.left; const y = e.clientY - box.top; const dx = performance.now() - s.lastT < 80 ? x - s.lastX : 0; s.lastX = x; s.lastT = performance.now(); if (y < RAIL_TOP + 40 || y > RAIL_TOP + 360) return; bodies.current.forEach((b) => { if (!b.falling && x > b.x && x < b.x + s.lay.tw) b.va = clamp(b.va + dx * 0.012 * ((y - RAIL_TOP) / 300), -3, 3); }); }; return (

(sim.current.held = false)} className="relative h-[600px] sm:h-[660px]"> {/* the tiled wall and the light on its glaze */}

{/* the tickets */}

{ if (el) nodes.current.set(t.uid, el); else nodes.current.delete(t.uid); }} aria-hidden={t.leaving} className="absolute left-0 top-0" style={{ width: lay.tw, transformOrigin: "50% 0", willChange: "transform", filter: "drop-shadow(9px 13px 9px rgba(1,24,22,0.5))" }} >

{/* the rail: an aluminium extrusion screwed to the wall, its lip gripping the paper */}

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

))} {["11%", "50%", "89%"].map((x) => (

))}

{/* the pass: a steel shelf under the rail */}

Order rail Press a ticket to pull it

{said}

); } 5f:["$","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","framer-motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/framer-motion","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":"framer-motion"}]]}]}]]}],["$","$L60",null,{"namespace":"@weinc","registryDependencies":[]}]]}],null]}],["$","$L61",null,{"files":[{"path":"components/we-inc/kitchen-order-rail-notifications-with-printed-paper-tickets-that-slide-under-a-steel-rail-swing-and-pull-off.tsx","content":"$62","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]