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:T40b6,import { useCallback, useEffect, useRef, useState } from "react"; import type { CSSProperties, ReactNode } from "react"; import { motion, useReducedMotion } from "framer-motion"; const sentence = "A quote calculator for my window cleaning round."; const kitName = "Window quote"; const RATE = 4; // price per window on the ground floor const floors = [{ label: "1", name: "one floor", extra: 0 }, { label: "2", name: "two floors", extra: 0.25 }, { label: "3", name: "three floors", extra: 0.5 }]; const BLUE = "#4F98FB"; const FONT = '"Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif'; // Each moulded part: where it sits on the sprue (s) and where it seats in the calculator (t). const parts = [ { id: "plate", w: 256, h: 36, s: { x: 37, y: 36 }, t: { x: 22, y: 22 }, tag: 165, row: 6 }, { id: "minus", w: 62, h: 62, s: { x: 40, y: 130 }, t: { x: 22, y: 180 }, tag: 108, row: 100 }, { id: "plus", w: 62, h: 62, s: { x: 228, y: 130 }, t: { x: 216, y: 180 }, tag: 296, row: 100 }, { id: "thumb", w: 82, h: 42, s: { x: 124, y: 140 }, t: { x: 26, y: 272 }, tag: 200, row: 100 }, { id: "send", w: 256, h: 62, s: { x: 37, y: 252 }, t: { x: 22, y: 330 }, tag: 165, row: 222 }, ]; const SPRUE = { w: 330, h: 420 }, TOOL = { w: 300, h: 412 }; const RUNNERS = "M20 6H310A14 14 0 0 1 324 20V400A14 14 0 0 1 310 414H20A14 14 0 0 1 6 400V20A14 14 0 0 1 20 6ZM6 100H324M6 222H324M6 340H324"; const GATES = "M100 8V38M230 8V38M71 100V132M165 100V142M259 100V132M100 222V254M230 222V254M90 340V366M251 340V370M287 340V370"; const PLASTIC = "linear-gradient(180deg,#7cb7ff 0%,#4F98FB 44%,#3d86ec 100%)"; const EDGE = "inset 0 1px 0 rgba(255,255,255,0.7), inset 0 -2px 2px rgba(18,58,140,0.38), 0 1px 0 #2f6fd6, 0 2px 0 #2a64c6, 0 3px 0 #2459b4"; const ring = "outline-none focus-visible:ring-2 focus-visible:ring-[#0B0D12] focus-visible:ring-offset-2 focus-visible:ring-offset-[#4F98FB]"; function Part({ seated, from, at, w, h, order, children, shift }: { seated: boolean; from: { x: number; y: number }; at: { x: number; y: number }; w: number; h: number; order: number; children: ReactNode; shift?: string }) { const reduce = useReducedMotion(); const dx = from.x - at.x, dy = from.y - at.y; // The outer element carries the flight (twist on the gate, lift, drop into the socket); the inner one is the plastic and any press or slide. return (

{children}

); } export default function MouldedKitSprueCalculator() { const reduce = useReducedMotion(); const root = useRef(null); const [fit, setFit] = useState({ wide: true, scale: 1 }); const [seated, setSeated] = useState(parts.length); // how many parts have been snapped in, in order const [windows, setWindows] = useState(10); const [floor, setFloor] = useState(0); const [sent, setSent] = useState(false); const [down, setDown] = useState(""); const [auto, setAuto] = useState(true); const [run, setRun] = useState(0); useEffect(() => { const el = root.current; if (!el) return; const measure = () => { const wide = el.clientWidth >= 780; setFit({ wide, scale: wide ? Math.min(1.12, (el.clientWidth - 32) / 710) : Math.min(0.88, (el.clientWidth - 24) / SPRUE.w) }); }; measure(); const ro = new ResizeObserver(measure); ro.observe(el); return () => ro.disconnect(); }, []); // The demo: work out a quote on the finished tool, put the parts back on the sprue, snap them out one by one, repeat. useEffect(() => { if (reduce || (!auto && run === 0)) return; const ids: number[] = []; const at = (ms: number, fn: () => void) => ids.push(window.setTimeout(fn, ms)); const build = (start: number) => { at(start, () => { setSeated(0); setSent(false); if (auto) { setWindows(10); setFloor(0); } }); parts.forEach((_, i) => at(start + 1300 + i * 640, () => setSeated(i + 1))); return start + 1300 + parts.length * 640 + 700; }; const press = (ms: number, id: string, fn: () => void) => { at(ms, () => { setDown(id); fn(); }); at(ms + 170, () => setDown("")); }; const cycle = () => { if (!auto) { build(200); return; } // Work out a quote on the finished tool first, so the piece opens complete and alive. press(800, "plus", () => setWindows((n) => Math.min(40, n + 1))); press(1250, "plus", () => setWindows((n) => Math.min(40, n + 1))); at(1900, () => setFloor(1)); press(3900, "send", () => setSent(true)); at(build(6400), cycle); }; cycle(); return () => ids.forEach((id) => window.clearTimeout(id)); }, [auto, run, reduce]); const touch = useCallback(() => { setAuto(false); setRun(0); setSeated(parts.length); setDown(""); }, []); const ready = seated >= parts.length; const total = windows * RATE * (1 + floors[floor].extra); const S = fit.wide ? { x: 0, y: 25 } : { x: 0, y: 0 }, T = fit.wide ? { x: 410, y: 29 } : { x: 15, y: 438 }; const W = fit.wide ? 710 : SPRUE.w, H = fit.wide ? 470 : 850; const on = (i: number) => seated > i; const from = (i: number) => ({ x: S.x + parts[i].s.x, y: S.y + parts[i].s.y }); const seat = (i: number) => ({ x: T.x + parts[i].t.x, y: T.y + parts[i].t.y }); const legend = "text-[#0B0D12] [text-shadow:0_1px_0_rgba(255,255,255,0.28)]"; const socket = "absolute bg-[#d6d1c6] shadow-[inset_0_3px_5px_rgba(11,13,18,0.32),inset_0_0_0_1px_rgba(11,13,18,0.08),0_1px_0_#ffffff]"; const printed = "absolute font-mono text-[8.5px] font-semibold uppercase tracking-[0.24em] text-[#0B0D12]/60"; return (

{sentence}

{/* The sprue: frame, runners, gates, number tabs and the kit tag, all one shot of blue plastic. */} {/* The calculator shell, with a socket for every part. */}

{sent ? "Sent" : "Quote"} {ready ? `${windows} win / ${floors[floor].label} fl` : "No parts"} {sent ? "Quote sent: " : "Quote: "}{ready ? `$${total.toFixed(2)}` : "$--.--"}
Windows {windows} Floors
{floors.map((f) => {f.label})}

{/* 1. Name plate */} {kitName}QC-05 {/* 2 and 3. Fewer and more windows */} {([[1, "minus", "One window fewer", -1, "M4 10h12"], [2, "plus", "One window more", 1, "M4 10h12M10 4v12"]] as const).map(([i, id, label, d, icon]) => ( ))} {/* 4. The slider thumb, which rides in the floors slot once seated */}
{floors.map((f, i) =>
{/* 5. Send */}

); } 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/moulded-kit-sprue-whose-blue-parts-twist-off-the-runners-and-click-into-a-working-quote-calculator.tsx","content":"$62","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]