// ── flow.jsx ─────────────────────────────────────────────────────────────── // The redesigned, mobile-first progressive flow: // GarmentPicker → GarmentChip → SizeFit → YarnRow → FineTune → ResultContent / ResultBar // Beginner path is garment → size → yarn → answer. Depth (gauge, stitch, per- // piece dims) reveals one tap at a time, never buried in a dialog. const { useState: useStateF, useRef: useRefF } = React // ── full-screen entry: "What are you making?" ─────────────────────────────── function GarmentPicker({ onPick, onBlank, embedded }) { const t = useT() const Wrap = embedded ? "div" : "div" return ( {!embedded && (

{t("How much yarn?")}

{t("Pick what you're making. You'll get an estimate right away \u2014 fine-tune only if you want to.")}

)}
{Object.entries(PRESETS).map(([key, p]) => ( ))}
) } // ── compact garment selector (top of the build view) ──────────────────────── function GarmentChip({ presetKey, onClick }) { const t = useT() const label = presetKey ? t(PRESETS[presetKey].label) : t("Custom build") return ( ) } // ── size & fit ─────────────────────────────────────────────────────────────── function SizeFit({ presetKey, size, fit, onSize, onFit, step, blocks, effDims }) { const t = useT() const S = SIZING[presetKey] if (!S) return null const fm = actualFinishedMeasure(presetKey, size, fit, blocks, effDims) // "custom" iff the user has actually hand-edited the finished dimension (a pin // on the finished role's key) — not a value comparison, which would always // fire for hats where the derived circ carries a negative-ease factor. const finBlock = blocks && blocks.find(b => b.role === S.finishedRole) const isCustom = !!(finBlock && finBlock.pinnedDims && finBlock.pinnedDims[S.finishedKey]) return ( {t(S.finishedLabel)} {fm}cm{isCustom ? · {t("custom")} : null}}>
{S.sizes.map(s => { const on = s === size return ( ) })}
{t("Fit")} ({ value: name, label: t(name), sub: (ease >= 0 ? "+" : "") + ease + "cm" }))} />
) } // ── yarn weight picker — visual thickness chips ───────────────────────────── function YarnRow({ value, onChange, onCustom, customYarn, step }) { const t = useT() const order = ["lace", "fingering", "sport", "dk", "worsted", "bulky", "superbulky"] const nearestWeight = (m) => { let best = "dk", bd = Infinity order.forEach(k => { const dd = Math.abs(YARN[k].mPer100g - m); if (dd < bd) { bd = dd; best = k } }) return best } const chip = (key, label, sub, weightKey, marked) => { const on = value === key return ( ) } const thin = value === "lace" || value === "fingering" || (value === "custom" && customYarn && customYarn.mPer100g > YARN.fingering.mPer100g) return ( {customYarn && chip("custom", t("My yarn"), customYarn.label || `${customYarn.mPer100g} m/100g`, nearestWeight(customYarn.mPer100g), true)} {order.map(k => chip(k, YARN[k].label, `${YARN[k].mPer100g} m/100g`, k))} {thin && (

{t("Using a fuzzy yarn (mohair, alpaca, cashmere…)? We recommend entering the gauge you plan to knit at, or the gauge from the label, in Fine-tune below.")}

)} ) } // ── fine-tune accordion: gauge (first-class) + row gauge + construction ────── function FineTune({ presetKey, effGauge, baseGauge, gaugeOverride, onGauge, effRows, rowOverride, onRows, construction, onConstruction, open, onToggle, step }) { const t = useT() const showConstruction = presetKey === "sweater" const overridden = gaugeOverride != null && gaugeOverride > 0 && Math.round(gaugeOverride) !== Math.round(baseGauge) const stdRows = Math.round(stdRowsFor(effGauge)) const rowsEstimated = !(rowOverride != null && rowOverride > 0) const constrLabel = (JUNCTION[construction] || {}).label || "Set-in" return (
{open && (
{/* stitch gauge */}
{t("Stitch gauge")} {overridden ? : {t("from your yarn")}}
onGauge(Number(e.target.value))} style={{ flex: 1 }} />
{Math.round(effGauge)} {t("sts / 10cm")}

{t("Knit a swatch? Set its gauge here \u2014 it's the biggest factor in how much yarn you'll use.")}

{/* row gauge — visibly estimated, editable (audit A11) */}
{t("Row gauge")} {rowsEstimated ? {t("estimated")} : }
onRows(Number(e.target.value))} style={{ flex: 1, opacity: rowsEstimated ? 0.75 : 1 }} />
{Math.round(effRows)} {t("rows / 10cm")}

{t("Rows can't be read from the ball band \u2014 we estimate them. A row-dense fabric (lace, slip-stitch) uses more yarn; set yours if you counted it.")}

{/* construction → junction allowance */} {showConstruction && (
{t("Construction")} ({ value: k, label: t((JUNCTION[k] || {}).label || k) }))} />

{t("How the sleeves join the body. Set-in and raglan sit closest to the body; a circular yoke deepens the upper body, while a drop shoulder swaps shaping for a wider body and roomier sleeves \u2014 each spends yarn a little differently.")}

)}
)}
) } // ── reusable section card with title + optional hint + optional step badge ─── function SectionCard({ title, hint, action, step, children }) { return (
{step != null && } {title} {hint && {hint}} {action}
{children}
) } function StepDot({ n }) { return ( {n} ) } // ── result content (used both in the desktop rail and the mobile sheet) ────── // One headline figure: YARN TO BUY = flat-swatch metres × (1 + spare). Shown as // balls (100g, rounded up), ≈ metres and grams. No consumption / weight figure. function ResultContent({ pieces, baseTotal, strands, byYarn, garmentYarn, stash, onStash, buffer, onBuffer, ballGrams, onBallGrams, selectedId, onSelect, onShare, onSave, onAddPiece, justSaved }) { const t = useT() const stashNum = parseInt(stash) || 0 const spare = Math.max(0, Math.min(25, buffer ?? 0)) const spareFrac = spare / 100 const bg = (ballGrams && ballGrams > 0) ? ballGrams : 100 const has = baseTotal > 0 const knit = buyFromYarns(byYarn, 0, bg) // 0-spare: exactly enough to knit const buy = buyFromYarns(byYarn, spareFrac, bg) // the one number to buy const extraM = buy.metres - knit.metres const extraBalls = buy.balls - knit.balls const ss = stashStatus(buy.metres, knit.metres, stash) const covered = ss.state === "covered" const tight = ss.state === "tight" const positive = covered || tight const multi = byYarn.length > 1 return (
{/* hero — the single "yarn to buy" figure */}
{t("Yarn to buy")}
{has ? buy.metres : "—"} m {has && ≈ {buy.balls} {buy.balls === 1 ? t("ball") : t("balls")} · {buy.grams} g · {t("{g}g balls", { g: bg })}}
{has && strands === 2 && (
{t("2 strands held together — total single-strand metres")}
)}
{/* ball / skein size — sets how the metres round into balls to buy */} {has && onBallGrams && (
{t("Ball size")}
{ const v = parseInt(e.target.value); if (v > 0) onBallGrams(v) }} style={{ width: 56, background: "var(--card)", border: "1px solid var(--line-strong)", borderRadius: 8, padding: "5px 8px", fontSize: 13, fontWeight: 700, color: "var(--ink)", outline: "none", fontFamily: "var(--font-ui)", textAlign: "right", fontVariantNumeric: "tabular-nums" }} /> g
{[25, 50, 100, 150, 200].map(g => { const on = bg === g return ( ) })}
)} {/* spare slider — 0–25%, default 0 */} {has && (
{t("Spare")} +{spare}%
onBuffer(Number(e.target.value))} style={{ width: "100%", margin: "9px 0 7px" }} />
{spare === 0 ? t("our estimate — add a little spare with the slider above") : t("+{m}m spare{b}", { m: extraM, b: extraBalls > 0 ? ` · +${extraBalls} ${extraBalls === 1 ? t("ball") : t("balls")}` : "" })}
{t("An estimate — real use shifts with tension, blocking and ends. A little spare keeps you from running short.")}
)} {/* stash check */}
0 ? "var(--accent-2-soft)" : "var(--field)"), border: `1px solid ${positive ? "var(--ok)" : (stashNum > 0 ? "var(--accent-2)" : "var(--line)")}`, borderRadius: 12, padding: "10px 12px" }}>
{t("Already have some?")} onStash(e.target.value)} style={{ width: 72, background: "var(--card)", border: "1px solid var(--line-strong)", borderRadius: 8, padding: "6px 8px", fontSize: 13.5, fontWeight: 700, color: "var(--ink)", outline: "none", fontFamily: "var(--font-ui)", textAlign: "right", fontVariantNumeric: "tabular-nums" }} /> m
{stashNum > 0 && has && (
{covered ? <> {t("You're covered \u2014 {n}m to spare", { n: ss.spare })} : tight ? <> {t("Enough to knit it \u2014 {n}m short of your spare", { n: ss.buy })} : <>{t("Buy about {n}m more", { n: ss.buy })}}
)}
{/* per-piece breakdown */}
{t("Pieces")} {onAddPiece && }
{pieces.map((p, i) => { const sel = p.blockId != null && p.blockId === selectedId const clickable = p.blockId != null const stitchLabel = p.stitch && p.stitch !== "stockinette" ? t((CONSTRUCTION[p.stitch] || {}).label || p.stitch) : null return ( ) })}
{/* buy summary per yarn — only when more than one yarn is in play */} {has && multi && (
{byYarn.map(({ key: k, metres, basis }) => { const mBuf = metres * (1 + spareFrac) const g = basis ? Math.round(mBuf * 100 / basis) : 0 const balls = basis ? Math.ceil(mBuf / (basis * bg / 100)) : 0 return (
{k === "custom" ? t("My yarn") : YARN[k].label} ≈{g}g · {t("buy")} {balls}×{bg}g
) })}
)} {/* actions */}
{/* shop brand — prominent in shared screenshots */}
{t("yarn estimator")}
) } // ── mobile sticky result bar ──────────────────────────────────────────────── function ResultBar({ baseTotal, byYarn, buffer, ballGrams, stash, onExpand }) { const t = useT() const stashNum = parseInt(stash) || 0 const spareFrac = Math.max(0, Math.min(25, buffer ?? 0)) / 100 const bg = (ballGrams && ballGrams > 0) ? ballGrams : 100 const has = baseTotal > 0 const knit = buyFromYarns(byYarn, 0, bg) const buy = buyFromYarns(byYarn, spareFrac, bg) const ss = stashStatus(buy.metres, knit.metres, stash) const positive = ss.state === "covered" || ss.state === "tight" return ( ) } Object.assign(window, { GarmentPicker, GarmentChip, SizeFit, YarnRow, FineTune, SectionCard, StepDot, ResultContent, ResultBar })