// Lists Library — gallery of curated list templates, plus a full-page
// preview that renders any template AS IF it were a real list (using the
// same list2-* visual language as the live list editor). Adoption is a
// separate explicit action: card-level "Add to my lists" button, OR
// "Add to my lists" CTA inside the preview page.
const { useState: _lle, useEffect: _llef, useMemo: _llm } = React;
// ─────────────────────── Template helpers ───────────────────────
function getAllListTemplates() {
const stageTemplates = Object.values(window.ESSENTIALS_BY_STAGE || {}).map(stage => {
const items = stage.sections.flatMap(section =>
section.items.map(it => ({ ...it, category: section.id }))
);
return {
id: `essentials-${stage.key}`,
name: `${stage.label} essentials`,
blurb: stage.sub,
eyebrow: `${stage.label} · essentials`,
ageBand: stage.key === 'pre' ? 'pre'
: stage.key === '0-6m' || stage.key === '6-12m' ? '0-1'
: stage.key === '1-2y' ? '1-3'
: stage.key === '3-4y' ? '3-5'
: stage.key === '5+' ? '5-8'
: 'any',
type: 'essentials',
iconKey: '⭐',
_sourceStage: stage.key,
_sourceData: stage,
items,
};
});
return [...stageTemplates, ...(window.LIST_TEMPLATES || [])];
}
// Normalise a template into a single tree we can render. Flat templates
// get the retroactive F treatment (1 product → item, 2+ → shortlist).
function normaliseTemplateToTree(template) {
if (Array.isArray(template.tree) && template.tree.length > 0) return template.tree;
return (template.items || [])
.filter(it => (it.productIds || []).length > 0)
.map(it => {
const ids = it.productIds || [];
return ids.length === 1
? { type: 'item', label: it.label, productIds: ids, necessity: it.necessity, blurb: it.blurb }
: { type: 'shortlist', label: it.label, productIds: ids, necessity: it.necessity, blurb: it.blurb };
});
}
// Up to N product objects pulled from a template — used for the hero
// strip on library cards. Prefers shortlist candidates first.
function templatePreviewProducts(t, limit = 5) {
const map = {};
(window.PRODUCTS || []).forEach(p => { map[p.id] = p; });
const seen = new Set();
const out = [];
const push = (pid) => {
if (!pid || seen.has(pid) || out.length >= limit) return;
const p = map[pid];
if (!p) return;
seen.add(pid);
out.push(p);
};
const walk = (nodes) => {
(nodes || []).forEach(n => {
if (n.type === 'shortlist') (n.productIds || []).forEach(push);
else if (n.type === 'item') push((n.productIds || [])[0]);
else if (n.type === 'group' && Array.isArray(n.children)) walk(n.children);
});
};
if (Array.isArray(t.tree)) walk(t.tree);
if (out.length < limit) {
(t.items || []).forEach(it => (it.productIds || []).forEach(push));
}
return out;
}
// Count nodes — handles both shapes. Returns a short summary string.
function templateSummary(t) {
let items = 0, shortlists = 0, groups = 0;
const walk = (nodes) => {
(nodes || []).forEach(n => {
if (n.type === 'item') items++;
else if (n.type === 'shortlist') { shortlists++; items += (n.productIds || []).length; }
else if (n.type === 'group') { groups++; walk(n.children); }
});
};
if (Array.isArray(t.tree)) walk(t.tree);
if (Array.isArray(t.items) && (!Array.isArray(t.tree) || t.tree.length === 0)) {
t.items.forEach(it => {
const ids = it.productIds || [];
if (ids.length === 0) return;
if (ids.length === 1) items++;
else { shortlists++; items += ids.length; }
});
}
const parts = [];
if (items > 0) parts.push(`${items} item${items === 1 ? '' : 's'}`);
if (shortlists > 0) parts.push(`${shortlists} shortlist${shortlists === 1 ? '' : 's'}`);
if (groups > 0) parts.push(`${groups} group${groups === 1 ? '' : 's'}`);
return parts.join(' · ') || 'Empty';
}
// ─────────────────────── Library gallery page ───────────────────────
function ListLibraryPage({ audience, stage, userLists, onAdoptOne, onAdoptMany, onOpenProduct, onPreviewTemplate }) {
const allTemplates = _llm(() => getAllListTemplates(), [audience, stage]);
const [ageBand, setAgeBand] = _lle('any');
const [type, setType] = _lle('all');
const [selected, setSelected] = _lle(() => new Set());
const adoptedNames = _llm(() => {
const s = new Set();
(userLists || []).forEach(l => { if (l.isMine !== false) s.add(l.name); });
return s;
}, [userLists]);
const canonicalName = (t) => t._sourceData ? `${t._sourceData.label} essentials` : t.name;
const isAdopted = (t) => adoptedNames.has(canonicalName(t));
const filtered = _llm(() => allTemplates.filter(t => {
if (ageBand !== 'any' && t.ageBand !== ageBand && t.ageBand !== 'any') return false;
if (type !== 'all' && t.type !== type) return false;
return true;
}), [allTemplates, ageBand, type]);
const toggle = (id) => setSelected(prev => {
const next = new Set(prev);
if (next.has(id)) next.delete(id); else next.add(id);
return next;
});
_llef(() => {
if (typeof window.resolveTemplateProducts === 'function') {
window.resolveTemplateProducts();
}
}, []);
const adoptSelected = () => {
const picks = allTemplates.filter(t => selected.has(t.id) && !isAdopted(t));
if (picks.length === 0) return;
onAdoptMany(picks);
setSelected(new Set());
};
return (
Lists Library
Starter lists, .
Tap a card to view the list — you'll see everything inside, just like an
actual list. Check the box on multiple cards to bulk-add. Or use the per-card
Add to my lists button.
{adopted && ✓ Already added}
);
}
// ─────────────────────── Template preview page (full route) ───────────────────────
// Renders any template as if it were a real list — same list2-* visual
// language as the live list editor. The user gets the proper list form
// they want to inspect before deciding to adopt. Read-only.
function TemplatePreviewPage({ templateId, userLists, onBack, onAdopt, onOpenProduct }) {
const allTemplates = _llm(() => getAllListTemplates(), []);
const template = _llm(() => allTemplates.find(t => t.id === templateId) || null, [allTemplates, templateId]);
_llef(() => {
if (typeof window.resolveTemplateProducts === 'function') {
window.resolveTemplateProducts();
}
}, []);
// Re-derive after the resolver runs so productIds are populated.
const tree = _llm(() => template ? normaliseTemplateToTree(template) : [], [template]);
const productMap = _llm(() => {
const m = {}; (window.PRODUCTS || []).forEach(p => { m[p.id] = p; });
return m;
}, []);
if (!template) {
return (
{/* Hero header — mirrors the list2 page header pattern but with a
clear "preview" eyebrow so the user knows it isn't a real list yet. */}
Preview · not yet in My lists
{template.name}
{template.blurb}
{templateSummary(template)}
{tree.length === 0 ? (
No items match the catalog yet
This template's products didn't resolve. Try a different one.
) : (
)}
{/* Sticky bottom CTA — single primary action: adopt (or open if
already in My lists). Same visual weight as the list-library
stickybar so the user has a consistent mental model. */}
{isAdopted ? 'Already in your lists' : 'Like what you see?'}
);
}
// Renders the template tree using the SAME list2-* classes as the live
// list editor so the preview matches what the user gets after adopt.
function PreviewTreeAsList({ nodes, productMap, depth, onOpenProduct }) {
const openable = typeof onOpenProduct === 'function';
return (
);
}
// One product row — same shape as list2-item but read-only and clickable
// to open the full DetailPanel.
function PreviewItemRow({ product, label, necessity, openable, onOpenProduct }) {
const handle = (e) => {
if (!openable) return;
e.stopPropagation();
onOpenProduct(product);
};
const price = product.price;
const currency = product.currency || 'AUD';
return (