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:T5346,import { useEffect, useRef, useState } from "react"; import type { CSSProperties, KeyboardEvent as ReactKeyboardEvent, PointerEvent as ReactPointerEvent, ReactNode } from "react"; import { animate, motion, useMotionValue, useReducedMotion, useSpring, useTransform } from "framer-motion"; import type { MotionValue } from "framer-motion"; const VENUE = "Kiln & Ash supper club"; // the small line under the date const NOTE = "one long table, 7 pm"; // second half of that line const AUTOPLAY = true; // turn a block every few seconds until the calendar is first touched const OPEN_ON = 6; // weekday the calendar opens on (0 Sunday ... 6 Saturday), the next one after today const S = 200, BAR = 66, GAP = 6, W = S * 2 + GAP, CHEEK = 28, CHEEK_H = 178, BASE_H = 30, DEPTH = 236, BASE_W = W + CHEEK * 2 + 34; const DOW = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; const MON = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; const NUMERALS = '"Bodoni 72", Didot, "Bodoni MT", "Times New Roman", serif'; const mod = (a: number, n: number) => ((a % n) + n) % n; // Wood drawn once into a small canvas: long grain, upright grain or end grain. function wood(w: number, h: number, lo: number[], hi: number[], seed: number, kind: "long" | "upright" | "end") { const c = document.createElement("canvas"); c.width = w; c.height = h; const x = c.getContext("2d"); if (!x) return ""; const img = x.createImageData(w, h), d = img.data; const hash = (i: number, j: number) => { const n = Math.sin(i * 127.1 + j * 311.7 + seed * 74.7) * 43758.5453; return n - Math.floor(n); }; const noise = (a: number, b: number) => { const i = Math.floor(a), j = Math.floor(b), u = a - i, v = b - j, p = u * u * (3 - 2 * u), q = v * v * (3 - 2 * v); return hash(i, j) * (1 - p) * (1 - q) + hash(i + 1, j) * p * (1 - q) + hash(i, j + 1) * (1 - p) * q + hash(i + 1, j + 1) * p * q; }; for (let py = 0; py < h; py++) for (let px = 0; px < w; px++) { const a = kind === "upright" ? py : px, b = kind === "upright" ? px : py; let t: number; if (kind === "end") { const dx = px - w * 0.15, dy = py - h * 1.5, r = Math.sqrt(dx * dx + dy * dy) + 16 * noise(px * 0.011, py * 0.011); t = 0.34 + 0.3 * (0.5 + 0.5 * Math.sin(r * 0.36 + 4 * noise(r * 0.015, 2))) + 0.3 * noise(px * 0.35, py * 0.35) + 0.12 * noise(px * 0.05, py * 0.05); } else { const u = b + 30 * noise(a * 0.0035, b * 0.011) + 7 * noise(a * 0.018, b * 0.05); t = 0.5 * noise(u * 0.2, a * 0.0018) + 0.32 * noise(u * 0.62, a * 0.005) + 0.2 * noise(u * 1.9, a * 0.02) + 0.06 * hash(px, py); const pore = noise(a * 0.04, u * 1.7); if (pore > 0.76) t -= (pore - 0.76) * 1.5; t += 0.1 * Math.sin(a * 0.011 + 5 * noise(u * 0.02, 7)); // slow shimmer along the board } t = Math.max(0, Math.min(1, t)); const q = (py * w + px) * 4; d[q] = lo[0] + (hi[0] - lo[0]) * t; d[q + 1] = lo[1] + (hi[1] - lo[1]) * t; d[q + 2] = lo[2] + (hi[2] - lo[2]) * t; d[q + 3] = 255; } x.putImageData(img, 0, 0); return c.toDataURL("image/jpeg", 0.88); } type Tex = { maple: string; mapleEnd: string; walnut: string; walnutUp: string; walnutEnd: string }; // Each face shows its own patch of the sheet, chosen so the edge of the sheet never crosses it. const skin = (url: string, fallback: string, seed: number, w: number, h: number, size = 512): CSSProperties => ({ backgroundColor: fallback, backgroundImage: url ? `url(${url})` : undefined, backgroundSize: `${size}px ${size}px`, backgroundPosition: `-${Math.round(mod(seed * 97.3, Math.max(1, size - w)))}px -${Math.round(mod(seed * 61.7, Math.max(1, size - h)))}px` }); const BEVEL = "inset 0 3px 2px -1px rgba(255,247,230,0.55), inset 3px 0 2px -1px rgba(255,247,230,0.28), inset 0 -4px 3px -1px rgba(70,36,8,0.55), inset -4px 0 3px -1px rgba(70,36,8,0.45), inset 0 0 18px rgba(120,70,24,0.3)"; // A fixed block of wood: front, top and both ends, each shaded for one light from the upper left. function Box({ w, h, d, x, y, z, front, top, side, children }: { w: number; h: number; d: number; x: number; y: number; z: number; front: CSSProperties; top: CSSProperties; side: CSSProperties; children?: ReactNode }) { const face = (fw: number, fh: number, transform: string, s: CSSProperties, shade: string) => (

); return (

{face(w, h, `translateZ(${d / 2}px)`, front, "linear-gradient(180deg,rgba(255,225,190,0.1),rgba(20,8,0,0.2) 55%,rgba(10,4,0,0.42))")} {face(w, d, `rotateX(90deg) translateZ(${h / 2}px)`, top, "linear-gradient(180deg,rgba(255,240,215,0.02),rgba(255,236,205,0.2))")} {face(d, h, `rotateY(90deg) translateZ(${w / 2}px)`, side, "linear-gradient(90deg,rgba(10,4,0,0.5),rgba(10,4,0,0.66))")} {face(d, h, `rotateY(-90deg) translateZ(${w / 2}px)`, side, "rgba(10,4,0,0.2)")} {children}

); } // One of the four long faces of a turning block. Its shade follows the angle it is held at. function Side({ i, rot, w, s, style, ring, children }: { i: number; rot: MotionValue; w: number; s: number; style: CSSProperties; ring: boolean; children: ReactNode }) { const lit = (r: number) => { const a = ((r + i * 90) * Math.PI) / 180; return Math.max(0, 0.86 * Math.sin(a) + 0.5 * Math.cos(a)); }; const dark = useTransform(rot, (r) => Math.min(0.62, (1 - lit(r)) * 0.56)); const shine = useTransform(rot, (r) => Math.max(0, lit(r) - 0.7) * 0.55); return (

{children}

); } // A block that shows `value` on its front. A new value comes up from underneath (or down from the top when it is already there): // the block is lifted clear, turned a quarter and dropped back. function Turner({ value, before, w, s, x, y, z, slide, tex, seed, ring, render }: { value: string; before: string; w: number; s: number; x: number; y: number; z: number; slide: boolean; tex: Tex | null; seed: number; ring: boolean; render: (v: string) => ReactNode }) { const reduce = useReducedMotion(); const st = useRef({ step: 0, faces: [value, before, "", ""] }); const [, bump] = useState(0); const rot = useMotionValue(0), lift = useMotionValue(0); const my = useTransform(lift, (v) => y - v * (slide ? 5 : 78)), mz = useTransform(lift, (v) => z + (slide ? v * 96 : 0)); const shadow = useTransform(lift, (v) => 0.85 - v * 0.5), spread = useTransform(lift, (v) => 1 + v * 0.14); useEffect(() => { const q = st.current, f = mod(q.step, 4); if (q.faces[f] === value) return; if (q.faces[mod(f + 1, 4)] === value) { q.step += 1; q.faces[mod(q.step + 1, 4)] = before; } else { q.faces[mod(f - 1, 4)] = value; q.step -= 1; } bump((n) => n + 1); if (reduce) { rot.set(-90 * q.step); return; } const a = animate(lift, [0, 1, 1, 0, 0.07, 0], { duration: 0.74, times: [0, 0.24, 0.56, 0.8, 0.9, 1], ease: ["easeOut", "linear", "easeIn", "easeOut", "easeIn"] }); const b = animate(rot, -90 * q.step, { delay: 0.1, duration: 0.4, ease: [0.4, 0, 0.2, 1] }); return () => { a.stop(); b.stop(); rot.set(-90 * q.step); lift.set(0); }; }, [value, before, reduce, rot, lift]); const maple = tex?.maple ?? "", core = s - 6; return ( <> {!slide && ( )} {[0, 1, 2, 3].map((i) =>

)} {[0, 1, 2, 3].map((i) => ( {render(st.current.faces[i])} ))} {[1, -1].map((dir) => (

0 ? "linear-gradient(90deg,rgba(24,10,0,0.42),rgba(24,10,0,0.6))" : "rgba(24,10,0,0.2)" }} />

))} ); } export default function WoodenBlockPerpetualCalendar() { const reduce = useReducedMotion(); const [today] = useState(() => { const n = new Date(); return new Date(n.getFullYear(), n.getMonth(), n.getDate()); }); const [pick, setPick] = useState(() => { const d = new Date(today.getFullYear(), today.getMonth(), today.getDate() + (mod(OPEN_ON - today.getDay(), 7) || 7)); return { m: d.getMonth(), d: d.getDate() }; }); const [tex, setTex] = useState(null); const [focus, setFocus] = useState<"" | "day" | "month">(""); const touched = useRef(false), stage = useRef(null), drag = useRef({ y: 0, moved: false, on: false }); const px = useMotionValue(0), py = useMotionValue(0), sway = useMotionValue(0); const sx = useSpring(px, { stiffness: 60, damping: 14 }), sy = useSpring(py, { stiffness: 60, damping: 14 }); const rotateY = useTransform([sx, sway], ([a, b]: number[]) => -25 + a * 9 + b * 2.4), rotateX = useTransform(sy, (v) => -17 - v * 5); // The year is not on the blocks: it is the next time that date comes round. const yearOf = (m: number, d: number) => (new Date(today.getFullYear(), m, d) < today ? today.getFullYear() + 1 : today.getFullYear()); const lengthOf = (m: number) => new Date(yearOf(m, 28), m + 1, 0).getDate(); const date = new Date(yearOf(pick.m, pick.d), pick.m, pick.d), len = lengthOf(pick.m); const label = `${DOW[date.getDay()]} ${pick.d} ${MON[pick.m]}`; const stepDay = (n: number) => setPick((p) => { const y = new Date(today.getFullYear(), p.m, p.d) < today ? today.getFullYear() + 1 : today.getFullYear(), d = new Date(y, p.m, p.d + n); return { m: d.getMonth(), d: d.getDate() }; }); const setDay = (d: number) => setPick((p) => ({ m: p.m, d: Math.max(1, Math.min(lengthOf(p.m), d)) })); const stepMonth = (n: number) => setPick((p) => { const m = mod(p.m + n, 12); return { m, d: Math.min(p.d, lengthOf(m)) }; }); const touch = () => { touched.current = true; }; useEffect(() => { setTex({ maple: wood(512, 512, [200, 154, 98], [240, 212, 166], 3, "long"), mapleEnd: wood(256, 256, [168, 120, 70], [226, 190, 140], 5, "end"), walnut: wood(512, 512, [44, 26, 16], [122, 80, 48], 8, "long"), walnutUp: wood(512, 512, [44, 26, 16], [118, 76, 46], 11, "upright"), walnutEnd: wood(256, 256, [40, 24, 14], [104, 68, 40], 13, "end") }); }, []); useEffect(() => { if (reduce) return; const s = animate(sway, [-1, 1], { duration: 7, repeat: Infinity, repeatType: "mirror", ease: "easeInOut" }); let seen = true; const io = new IntersectionObserver(([e]) => { seen = e.isIntersecting; }); if (stage.current) io.observe(stage.current); let timer = 0; const first = window.setTimeout(() => { const tick = () => { if (!touched.current && seen && !document.hidden) stepDay(1); }; if (AUTOPLAY) { tick(); timer = window.setInterval(tick, 2600); } }, 3050); return () => { s.stop(); io.disconnect(); window.clearTimeout(first); window.clearInterval(timer); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [reduce]); const onMove = (e: ReactPointerEvent) => { const b = e.currentTarget.getBoundingClientRect(); px.set(((e.clientX - b.left) / b.width - 0.5) * 2); py.set(((e.clientY - b.top) / b.height - 0.5) * 2); }; const onLeave = () => { px.set(0); py.set(0); }; // Drag a block up to roll on, down to roll back; a plain press rolls it on once. const grab = (step: (n: number) => void, press: () => void) => ({ onPointerDown: (e: ReactPointerEvent) => { touch(); drag.current = { y: e.clientY, moved: false, on: true }; e.currentTarget.setPointerCapture(e.pointerId); }, onPointerMove: (e: ReactPointerEvent) => { const g = drag.current; if (!g.on) return; const dy = e.clientY - g.y; if (Math.abs(dy) > 34) { step(dy < 0 ? 1 : -1); g.y = e.clientY; g.moved = true; } }, onPointerUp: () => { const g = drag.current; if (g.on && !g.moved) press(); g.on = false; }, onPointerCancel: () => { drag.current.on = false; }, }); const keys = (step: (n: number) => void, big: number, home: () => void, end: () => void) => (e: ReactKeyboardEvent) => { const k = e.key; if (k === "ArrowUp" || k === "ArrowRight") step(1); else if (k === "ArrowDown" || k === "ArrowLeft") step(-1); else if (k === "PageUp") step(big); else if (k === "PageDown") step(-big); else if (k === "Home") home(); else if (k === "End") end(); else return; e.preventDefault(); touch(); }; const watch = (name: "day" | "month") => ({ onFocus: (e: { currentTarget: Element }) => setFocus(e.currentTarget.matches(":focus-visible") ? name : ""), onBlur: () => setFocus("") }); const tens = Math.floor(pick.d / 10), ones = pick.d % 10; const prev = new Date(date.getFullYear(), pick.m, pick.d - 1).getDate(); const digit = (v: string) => {v}; const word = (v: string) => {v}; const wal = (seed: number, w: number, h: number) => skin(tex?.walnut ?? "", "#5a3a22", seed, w, h), walUp = (seed: number, w: number) => skin(tex?.walnutUp ?? "", "#573821", seed, w, CHEEK_H), walEnd = (seed: number) => skin(tex?.walnutEnd ?? "", "#4a2e1a", seed, DEPTH, BASE_H, 256); const map = (seed: number, h: number) => skin(tex?.maple ?? "", "#dcb680", seed, W, h); const arrow = "flex h-10 w-10 items-center justify-center rounded-full text-[#b9d2cf] outline-none transition-colors hover:bg-white/10 hover:text-white focus-visible:ring-2 focus-visible:ring-white motion-reduce:transition-none"; const cubeY = -BAR - S / 2, barZ = (DEPTH - 38) / 3; return (

{[-1, 1].map((dir) => )} {[-1, 0].map((k) => )}

setPick((p) => ({ m: 0, d: Math.min(p.d, lengthOf(0)) })), () => setPick((p) => ({ m: 11, d: p.d })))} {...watch("month")} {...grab(stepMonth, () => stepMonth(1))} className="cursor-grab touch-none outline-none active:cursor-grabbing" style={{ position: "absolute", transformStyle: "preserve-3d" }}>

setDay(1), () => setDay(31))} {...watch("day")} className="cursor-grab touch-none outline-none active:cursor-grabbing" style={{ position: "absolute", transformStyle: "preserve-3d" }}>

stepDay(n * 10), () => setDay(pick.d + 10 <= len ? pick.d + 10 : pick.d % 10 || 10))} style={{ position: "absolute", transformStyle: "preserve-3d" }}>

stepDay(1))} style={{ position: "absolute", transformStyle: "preserve-3d" }}>

{label} {date.getFullYear()} {VENUE} / {NOTE}

); } 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/wooden-block-perpetual-calendar-date-picker-with-number-cubes-you-lift-turn-and-drop-into-a-walnut-cradle.tsx","content":"$62","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]