// VELOUR Wardrobe — Step 2: shop-your-closet outfit builder + lifestyle formulas. // Reads the live closet (passed from DashWardrobe), assembles outfits from owned // pieces against a formula recipe, flags gaps, and can log a whole look as worn. const { Card } = window.VelourDesignSystem_380ed4; const OUTFITS_KEY = (window.VELOUR_FRESH ? "velour_fresh_outfits_v1" : "velour_outfits_v1"); // Lifestyle formulas — each slot accepts pieces from certain categories. // // EVERY FORMULA MUST HAVE A DEFINING CATEGORY THE OTHERS DO NOT CLAIM. Smart-Casual // and Weekend Ease used to read ["Knits","Tops"] and ["Tops","Knits"] — the same set // of rules written in a different order — so they returned byte-identical outfits for // every member who ever used them, whatever their closet held. Four buttons, three // formulas. It looked like a thin closet and was not. // // The progression is now structural rather than cosmetic: four pieces, three with a // knit, three with a top, and a dress. A member who owns no knits gets a gap on // Smart-Casual, which is the honest answer and the one the gap-filler can act on — // a silent fallback to a shirt is what hid the duplication in the first place. // THE NAMES MUST MATCH `AM_FORMULAS` IN src/ui_kits/app/AppWardrobeMore.jsx, CHARACTER FOR // CHARACTER — see the note there for what happened when they did not. These names are read // by members, not just rendered: the gap-filler builds sentences out of them. const FORMULAS = [ { id: "uniform", name: "The Uniform", note: "Polished, repeatable, hard to get wrong", icon: "coat-hanger", slots: [ { label: "Layer", cats: ["Outerwear"] }, { label: "Top", cats: ["Tops"] }, { label: "Bottom", cats: ["Denim"] }, { label: "Shoes", cats: ["Shoes"] } ] }, { id: "smart", name: "Smart-Casual", note: "Considered, not trying too hard", icon: "sparkle", slots: [ { label: "Knit", cats: ["Knits"] }, { label: "Bottom", cats: ["Denim"] }, { label: "Shoes", cats: ["Shoes"] } ] }, { id: "weekend", name: "Weekend Ease", note: "Comfort that still reads put-together", icon: "sun", slots: [ { label: "Top", cats: ["Tops"] }, { label: "Bottom", cats: ["Denim"] }, { label: "Shoes", cats: ["Shoes"] } ] }, { id: "evening", name: "Evening Out", note: "One step up, for dinners and dates", icon: "moon-stars", slots: [ { label: "Dress", cats: ["Dresses"] }, { label: "Layer", cats: ["Outerwear"] }, { label: "Shoes", cats: ["Shoes"] } ], // A SECOND RECIPE, used when the closet holds no dress (13 Sep 2026). Evening // Out used to be a dress look and nothing else, so a member who dresses up in // trousers was shown a bodysuit and mules and told the missing piece was a // blazer. Reported from the phone; the missing piece was the trousers. // Its defining category, Trousers & skirts, is claimed by no other formula, so // it cannot collapse into Weekend Ease — see the rule at the top of this list. alt: [ { label: "Top", cats: ["Tops"] }, { label: "Bottom", cats: ["Trousers & skirts"] }, { label: "Shoes", cats: ["Shoes"] } ] }, ]; // The recipe this closet gets. Only Evening Out has two, and the rule is as plain // as it can be: a closet with a dress in it gets the dress look. Resolved once, // before building or counting, so the outfit, its gap note and the coverage card // can never be describing different recipes. Mirrored by amResolve() on mobile. function resolveFormula(formula, items) { if (!formula || !formula.alt) return formula; const hasDress = items.some((it) => it.category === "Dresses"); return hasDress ? formula : { ...formula, slots: formula.alt }; } function cpwVal(it) { return it.wears > 0 ? it.price / it.wears : null; } // Build an outfit: for each slot pick a matching owned item, rotated by `seed` for variety. function buildOutfit(formula, items, seed) { const used = new Set(); return formula.slots.map((slot) => { const matches = items.filter((it) => slot.cats.includes(it.category) && !used.has(it.id)); if (!matches.length) return { slot, item: null }; const pick = matches[seed % matches.length]; used.add(pick.id); return { slot, item: pick }; }); } // Would pressing Shuffle actually change anything? // // Asked by building the NEXT outfit and comparing, rather than by counting matches // per slot: `used` means a slot's options depend on what earlier slots took, so a // count is a guess and this is the real answer. Cheap — the same pure function over // a handful of items. // // It matters because Shuffle is `seed + 1` and each slot picks matches[seed % n]. // When every slot has exactly one match, n is 1, the modulo is always 0, and the // button silently does nothing forever. A control that promises variety it cannot // deliver is worse than no control: the member concludes the product is broken // rather than that their closet is small. function shuffleWouldChange(formula, items, seed) { const a = buildOutfit(formula, items, seed); const b = buildOutfit(formula, items, seed + 1); return a.some((e, i) => (e.item && e.item.id) !== (b[i].item && b[i].item.id)); } // Ask the budget planner further down the page to take over this gap. A custom event // rather than a prop, because the two sections are siblings under DashWardrobe with no // shared state — and threading a callback through three components to move the page // would couple them for one interaction. function requestGapFill(slot) { window.dispatchEvent(new CustomEvent("velour:fill-gap", { detail: { category: (slot.cats && slot.cats[0]) || null, label: slot.label }, })); } function SlotThumb({ entry }) { const { slot, item } = entry; if (!item) { // A dashed tile with a plus in it promises an action, so it has to have one: // it hands the gap to the budget planner below, which is what the note under // this look already tells the member to go and do. return (
{slot.label}
); } return (
{item.photo ? {item.name} : }
{item.name}
{cpwVal(item) != null ? `${window.velourMoney(cpwVal(item))}/wear` : "new"}
); } // ---- what to add next -------------------------------------------------------- // // A member who has photographed three pieces opens this section and sees dashed // boxes in most of the four formulas. That is an honest picture of a thin closet, // but on its own it reads as the product failing rather than as a closet that is // three pieces deep — and nothing on the screen says which three photographs would // change it. Gap tiles hand the gap to the budget planner, which answers "what // should I buy"; the more common answer at this stage is "you already own one, it // just is not in here yet." // // The advice is DERIVED FROM `FORMULAS`, never a second hand-written list. A slot // edited above has to move this guidance with it, or the tips will one day ask for // a knit that no formula wants. const CATEGORY_ADVICE = { Outerwear: "a blazer, coat or jacket", Tops: "a shirt or blouse", // The second half is the whole point of the line: a closet full of tees reads as a // filing error to the member unless the advice says a tee is not what is missing. Knits: "a jumper or cardigan, not a jersey tee", Denim: "jeans, or a denim skirt", Dresses: "a dress", "Trousers & skirts": "tailored trousers, or a skirt", Shoes: "the pair you reach for most", }; // Per category: how many pieces the member owns, the most any single formula asks // for, and which formulas are waiting on it. Counting the *most any one formula // needs* rather than the total across formulas matters because slots consume from a // shared pool within a look but not between looks — one pair of shoes completes all // four formulas, and telling someone to buy four pairs would be nonsense. // WHAT THIS COUNTS AGAINST IS THE SELECTED FORMULA, and it used to be all four. // // `need` was the MAXIMUM any one formula asked for, so the amber chips named // categories the look on screen does not want — denim and shoes listed as gaps // while the member is looking at a capsule that needs neither. Reported from the // phone on 7 September; the same maths was here, so the same fix is. This card sits // under a formula picker, and everything on it reads as being about the formula // that is selected. // // THE CROSS-FORMULA ANNOTATIONS STAY. `completes` and `neededBy` are still computed // across all four, because "also completes Evening Out" is a true and useful thing // to say about a piece the SELECTED look needs. Sourcing the LIST from all four was // the error; describing its entries in terms of all four is the point. function coverageReport(items, formula) { const owned = {}; items.forEach((it) => { owned[it.category] = (owned[it.category] || 0) + 1; }); const need = {}; // category -> what the SELECTED formula asks for const completes = {}; // category -> formulas this ALONE would finish const neededBy = {}; // category -> formulas that want it but need more besides if (formula) { formula.slots.forEach((s) => { s.cats.forEach((c) => { need[c] = (need[c] || 0) + 1; }); }); } FORMULAS.map((f) => resolveFormula(f, items)).forEach((f) => { const perFormula = {}; f.slots.forEach((s) => { s.cats.forEach((c) => { perFormula[c] = (perFormula[c] || 0) + 1; }); }); const short = Object.keys(perFormula).filter((c) => (owned[c] || 0) < perFormula[c]); if (!formula) Object.keys(perFormula).forEach((c) => { need[c] = Math.max(need[c] || 0, perFormula[c]); }); // "Completes Evening Out" is a promise, and it is only true when this category // is the formula's ONLY shortfall. A member two categories short who adds the // one we named and watches the look stay broken has been told something false // by the part of the screen whose whole job is to be trustworthy about gaps. short.forEach((c) => { if (short.length === 1) (completes[c] = completes[c] || []).push(f.name); else (neededBy[c] = neededBy[c] || []).push(f.name); }); }); const missing = Object.keys(need) .filter((c) => (owned[c] || 0) < need[c]) .map((c) => ({ cat: c, have: owned[c] || 0, need: need[c], completes: completes[c] || [], neededBy: neededBy[c] || [] })) .sort((a, b) => (b.completes.length - a.completes.length) || (b.neededBy.length - a.neededBy.length)); // Owned, but only just: one piece in a slot means Shuffle has nowhere to go. const thin = Object.keys(need).filter((c) => (owned[c] || 0) === need[c]).sort(); const complete = FORMULAS.map((f) => resolveFormula(f, items)).filter((f) => { const perFormula = {}; f.slots.forEach((s) => { s.cats.forEach((c) => { perFormula[c] = (perFormula[c] || 0) + 1; }); }); return Object.keys(perFormula).every((c) => (owned[c] || 0) >= perFormula[c]); }).length; return { missing, thin, complete, total: FORMULAS.length }; } const NUM_WORD = ["No", "One", "Two", "Three", "Four", "Five", "Six"]; // One reading measure for the card. The amber rows are why it exists: at a wide // desktop width a one-line row stretched its fill nearly the width of the page, so // the colour read as a banner across the section rather than as a note inside it. // Text-only blocks share it so the left edge stays a single column. const COVERAGE_MEASURE = 760; function CapsuleCoverage({ items, formula }) { const { missing, thin, complete, total } = coverageReport(items, formula); const [openTips, setOpenTips] = React.useState(false); // Nothing missing and every slot has room to vary — the member needs no advice. if (!missing.length && !thin.length) return null; const headline = complete === total ? "All four formulas are complete." : complete === 0 ? "None of the four formulas is complete yet." : `${NUM_WORD[complete]} of ${NUM_WORD[total].toLowerCase()} formulas ${complete === 1 ? "is" : "are"} complete.`; return (
What to add next
{headline}
{/* This line explains gaps, so it only belongs where there are gaps. Shown under "All four formulas are complete." it contradicted the headline immediately above it. */}

{missing.length > 0 ? `${formula.name} asks for a particular kind of piece. Most gaps here are pieces you already own and have not photographed yet.` : "Every formula has something to work with. Depth is what turns four looks into a rotation."}

{missing.length > 0 && (
{missing.map((m) => (
{m.need > 1 ? `${m.need} ${m.cat.toLowerCase()}` : m.cat} {" — "}{CATEGORY_ADVICE[m.cat] || `a piece filed under ${m.cat.toLowerCase()}`}. {m.completes.length > 0 && {" "}Completes {m.completes.join(" and ")}.} {m.neededBy.length > 0 && {" "}Also needed for {m.neededBy.join(" and ")}.}
))}
)} {thin.length > 0 && (

You own exactly one piece in {thin.map((c) => c.toLowerCase()).join(", ")}. A second gives Shuffle somewhere to go, and the looks start to vary.

)} {openTips && (
{/* Three rules in the order the evidence says they matter — docs/WARDROBE_PHOTO_STANDARD.md */}

Thirty to forty pieces is a capsule. Start with what you actually reach for.

)}
); } function WardrobeOutfits({ items, onWearMany }) { const [active, setActive] = React.useState("uniform"); const [seed, setSeed] = React.useState(0); const [saved, setSaved] = React.useState(() => { try { return JSON.parse(localStorage.getItem(OUTFITS_KEY)) || []; } catch (e) { return []; } }); React.useEffect(() => { try { localStorage.setItem(OUTFITS_KEY, JSON.stringify(saved)); } catch (e) {} }, [saved]); // Saved looks arrive with the rest of the wardrobe on a second device. if (window.useVelourSynced) window.useVelourSynced("wardrobe", () => { try { setSaved(JSON.parse(localStorage.getItem(OUTFITS_KEY)) || []); } catch (e) {} }); const formula = resolveFormula(FORMULAS.find((f) => f.id === active), items); const outfit = buildOutfit(formula, items, seed); const canShuffle = shuffleWouldChange(formula, items, seed); const filled = outfit.filter((e) => e.item); const gaps = outfit.length - filled.length; const outfitCpw = filled.reduce((s, e) => s + (cpwVal(e.item) || 0), 0); const allOwned = gaps === 0; const wearLook = () => { onWearMany(filled.map((e) => e.item.id)); }; // Every piece in this look already worn today. `wornToday` is DashWardrobe.jsx's // helper, global here because the web entry loads each screen as its own classic // script — the mobile build wraps its screens in IIFEs instead, which is why the // same change there needed an explicit window export. const outfitWorn = filled.length > 0 && filled.every((e) => wornToday(e.item)); const saveLook = () => { const look = { id: "o" + Math.random().toString(36).slice(2, 7), formula: formula.name, itemIds: filled.map((e) => e.item.id), names: filled.map((e) => e.item.name) }; if (!saved.some((s) => s.itemIds.join() === look.itemIds.join())) setSaved([look, ...saved].slice(0, 6)); }; const removeSaved = (id) => setSaved(saved.filter((s) => s.id !== id)); return (

Shop your capsule

Pick a formula — VELOUR builds the look from pieces you already own.

{/* Formula selector */}
{FORMULAS.map((f) => { const on = active === f.id; return ( ); })}
{/* Built outfit */}
{formula.name}
{allOwned ? "Built entirely from your capsule" : `${filled.length} of ${outfit.length} from your capsule`}
{window.velourMoney(outfitCpw)}
this outfit · per wear
{outfit.map((entry, i) => ( {i < outfit.length - 1 &&
+
} ))}
{gaps > 0 && (
{gaps === 1 ? "This look is one piece short." : `This look is ${gaps} pieces short.`} VELOUR can suggest the exact gap-filler worth buying — never a duplicate of what you own. {" "}
)}
{/* Mirrors the closet card in DashWardrobe.jsx, which already flips on wornToday. Reported on mobile, but the web button had the same gap: a permanent check icon and a label that never acknowledged the tap. */}
{!canShuffle && filled.length > 0 && (
Every slot in this look has one match, so there is nothing to shuffle to yet. Add a second top, bottom or pair of shoes and the looks will start to vary.
)} {/* Saved looks */} {saved.length > 0 && (
Saved looks
{saved.map((look) => (
{look.formula}
{look.names.join(" · ")}
))}
)}
); } window.WardrobeOutfits = WardrobeOutfits;