@neatico/visual-core 0.14.3 → 0.14.64

package/dist/designSystem.js

@@ -1,119 +1,577 @@
-import { AUTHORED_COMPOSITIONS, sceneRecipePreference } from './compositionScenes.js';
-import { PRESENTATION_LAYOUT_IDS } from './layouts.js';
-import { SOCIAL_LAYOUT_CATALOG } from './socialLayouts.js';
-import { contentBlockText } from './content.js';
+import { AUTHORED_COMPOSITIONS, sceneRecipePreference, } from "./compositionScenes.js";
+import { SOCIAL_LAYOUT_CATALOG } from "./socialLayouts.js";
+import { contentBlockText, } from "./content.js";
 /** Complete, deterministic token sets; decorative geometry belongs to individual compositions. */
 export const DESIGN_THEMES = [
-    { id: 'studio', palette: { background: '#F5F3EE', surface: '#FFFFFF', ink: '#20251F', muted: '#5F685C', accent: '#376346', line: '#D7DED3' }, typography: { heading: 'Inter', body: 'Inter', code: 'monospace', headingWeight: 700 }, geometry: { radius: 4, spacing: 1, rule: 'hairline' } },
-    { id: 'ink', palette: { background: '#121B29', surface: '#1D2B3E', ink: '#F5F7FB', muted: '#B3C2D6', accent: '#85C8F3', line: '#3D526C' }, typography: { heading: 'Inter', body: 'Inter', code: 'monospace', headingWeight: 700 }, geometry: { radius: 12, spacing: 1, rule: 'accent' } },
-    { id: 'editorial', palette: { background: '#FCF8F1', surface: '#FFFFFF', ink: '#30281F', muted: '#756657', accent: '#A74328', line: '#DED2C1' }, typography: { heading: 'Georgia', body: 'Inter', code: 'monospace', headingWeight: 700 }, geometry: { radius: 0, spacing: 1.1, rule: 'hairline' } },
-    { id: 'electric', palette: { background: '#F3F4FF', surface: '#FFFFFF', ink: '#222047', muted: '#615D7B', accent: '#5340D9', line: '#DAD5F2' }, typography: { heading: 'Inter', body: 'Inter', code: 'monospace', headingWeight: 800 }, geometry: { radius: 16, spacing: 1, rule: 'none' } },
-    { id: 'signal', palette: { background: '#FFE04B', surface: '#FFF5B7', ink: '#242418', muted: '#535039', accent: '#272B21', line: '#B8A233' }, typography: { heading: 'Inter', body: 'Inter', code: 'monospace', headingWeight: 800 }, geometry: { radius: 2, spacing: 1.05, rule: 'none' } },
+    {
+        id: "neatico",
+        palette: { background: "#FAF9F6", surface: "#FFFFFF", ink: "#202124", muted: "#62646B", accent: "#F4CE36", line: "#E4E1D9" },
+        typography: { heading: "Manrope", body: "Inter", code: "monospace", headingWeight: 700 },
+        geometry: { radius: 12, spacing: 1, rule: "accent" },
+    },
+    {
+        id: "archive",
+        palette: { background: "#F6F1E7", surface: "#FFFCF5", ink: "#19382E", muted: "#59665B", accent: "#C17A35", line: "#D7CEBC" },
+        typography: { heading: "Instrument Serif", body: "DM Sans", code: "JetBrains Mono", headingWeight: 400 },
+        geometry: { radius: 4, spacing: 1.1, rule: "hairline" },
+    },
+    {
+        "id": "bloom",
+        "palette": {
+            "background": "#FFF1F6",
+            "surface": "#FFFFFF",
+            "ink": "#341838",
+            "muted": "#70536D",
+            "accent": "#CC1D61",
+            "line": "#F3BED5"
+        },
+        "typography": {
+            "heading": "Montserrat",
+            "body": "Nunito Sans",
+            "code": "JetBrains Mono",
+            "headingWeight": 800
+        },
+        "geometry": {
+            "radius": 20,
+            "spacing": 1,
+            "rule": "accent"
+        }
+    },
+    {
+        "id": "splash",
+        "palette": {
+            "background": "#E9FAFF",
+            "surface": "#FFFFFF",
+            "ink": "#162E60",
+            "muted": "#4D637E",
+            "accent": "#2454E6",
+            "line": "#B8DEFA"
+        },
+        "typography": {
+            "heading": "Space Grotesk",
+            "body": "DM Sans",
+            "code": "JetBrains Mono",
+            "headingWeight": 700
+        },
+        "geometry": {
+            "radius": 20,
+            "spacing": 1,
+            "rule": "accent"
+        }
+    },
+    {
+        "id": "candy",
+        "palette": {
+            "background": "#F3EDFF",
+            "surface": "#FFFFFF",
+            "ink": "#35205C",
+            "muted": "#69557F",
+            "accent": "#7841D5",
+            "line": "#DCCAF6"
+        },
+        "typography": {
+            "heading": "Manrope",
+            "body": "Nunito Sans",
+            "code": "JetBrains Mono",
+            "headingWeight": 800
+        },
+        "geometry": {
+            "radius": 20,
+            "spacing": 1,
+            "rule": "accent"
+        }
+    },
+    {
+        id: "studio",
+        palette: {
+            background: "#F5F3EE",
+            surface: "#FFFFFF",
+            ink: "#20251F",
+            muted: "#5F685C",
+            accent: "#376346",
+            line: "#D7DED3",
+        },
+        typography: {
+            heading: "DM Sans",
+            body: "Source Sans 3",
+            code: "monospace",
+            headingWeight: 700,
+        },
+        geometry: { radius: 4, spacing: 1, rule: "hairline" },
+    },
+    {
+        id: "ink",
+        palette: {
+            background: "#121B29",
+            surface: "#1D2B3E",
+            ink: "#F5F7FB",
+            muted: "#B3C2D6",
+            accent: "#85C8F3",
+            line: "#3D526C",
+        },
+        typography: {
+            heading: "Space Grotesk",
+            body: "Inter",
+            code: "monospace",
+            headingWeight: 700,
+        },
+        geometry: { radius: 12, spacing: 1, rule: "accent" },
+    },
+    {
+        id: "editorial",
+        palette: {
+            background: "#FCF8F1",
+            surface: "#FFFFFF",
+            ink: "#30281F",
+            muted: "#756657",
+            accent: "#A74328",
+            line: "#DED2C1",
+        },
+        typography: {
+            heading: "Lora",
+            body: "Source Sans 3",
+            code: "monospace",
+            headingWeight: 700,
+        },
+        geometry: { radius: 0, spacing: 1.1, rule: "hairline" },
+    },
+    {
+        id: "electric",
+        palette: {
+            background: "#F3F4FF",
+            surface: "#FFFFFF",
+            ink: "#222047",
+            muted: "#615D7B",
+            accent: "#5340D9",
+            line: "#DAD5F2",
+        },
+        typography: {
+            heading: "Space Grotesk",
+            body: "DM Sans",
+            code: "monospace",
+            headingWeight: 800,
+        },
+        geometry: { radius: 16, spacing: 1, rule: "none" },
+    },
+    {
+        id: "signal",
+        palette: {
+            background: "#FFE04B",
+            surface: "#FFF5B7",
+            ink: "#242418",
+            muted: "#535039",
+            accent: "#272B21",
+            line: "#B8A233",
+        },
+        typography: {
+            heading: "Oswald",
+            body: "Inter",
+            code: "monospace",
+            headingWeight: 800,
+        },
+        geometry: { radius: 2, spacing: 1.05, rule: "none" },
+    },
 ];
 export function designTheme(id) {
-    const alias = { neatico: 'electric', paper: 'studio', midnight: 'ink', ocean: 'ink', plum: 'electric' };
-    return DESIGN_THEMES.find(theme => theme.id === (alias[id] || id)) || DESIGN_THEMES[0];
+    const alias = {
+        paper: "studio",
+        midnight: "ink",
+        ocean: "ink",
+        plum: "electric",
+    };
+    return (DESIGN_THEMES.find((theme) => theme.id === (alias[id] || id)) ||
+        DESIGN_THEMES[0]);
 }
 const family = (id, semantic) => {
     if (/code|terminal/.test(id))
-        return 'code';
+        return "code";
     if (/comparison|compare|before-after|myth|problem-solution/.test(id))
-        return 'comparison';
+        return "comparison";
     if (/process|steps|timeline|roadmap|journey|syllabus|workflow/.test(id))
-        return 'steps';
+        return "steps";
     if (/chart|metric|stat|score|usage-breakdown/.test(id))
-        return 'chart';
+        return "chart";
     if (/quote/.test(id))
-        return 'quote';
+        return "quote";
     if (/table|specification/.test(id))
-        return 'parameters';
+        return "parameters";
     if (/image|photo|gallery/.test(id))
-        return 'image';
+        return "image";
     if (/cover|hero|banner|statement|closing|section/.test(id))
-        return 'hero';
-    if (semantic === 'steps')
-        return 'steps';
-    if (semantic === 'comparison')
-        return 'comparison';
-    return 'features';
+        return "hero";
+    if (semantic === "steps")
+        return "steps";
+    if (semantic === "comparison")
+        return "comparison";
+    return "features";
 };
-const accepted = (family) => ({ code: ['code'], comparison: ['comparison'], steps: ['steps'], chart: ['chart'], quote: ['quote'], parameters: ['parameters'], image: ['image'], hero: ['paragraph'], prose: ['paragraph'], features: ['features', 'paragraph'] }[family]);
+const accepted = (family) => ({
+    code: ["code"],
+    comparison: ["comparison"],
+    steps: ["steps"],
+    chart: ["chart"],
+    quote: ["quote"],
+    parameters: ["parameters"],
+    image: ["image"],
+    hero: ["paragraph", "image"],
+    prose: ["paragraph"],
+    features: ["features", "paragraph"],
+})[family];
 // Explicit semantic contracts, not name/scene guesses. A travel itinerary, calendar,
 // price promotion or fake UI cannot be inferred from an arbitrary paragraph.
 const socialContracts = {
-    'news-focus': ['paragraph'], manifesto: ['paragraph'], editorial: ['paragraph'], notice: ['paragraph'],
-    'block-banner': ['paragraph'], 'definition-card': ['paragraph'], 'concept-explainer': ['paragraph'],
-    'og-cover': ['paragraph'], 'gradient-cover': ['paragraph'], 'bold-diagonal-cover': ['paragraph'], 'split-cover': ['paragraph'],
-    'article-summary-card': ['paragraph'], 'paragraph-summary-card': ['paragraph'],
-    bento: ['features'], spotlight: ['features'], report: ['features'], checklist: ['features'],
-    'contents-index': ['features'], 'contents-grid': ['features'], 'tips-card': ['features'],
-    'digest-card': ['features'], 'tips-grid': ['features'], 'feature-chip-hero': ['features'],
-    steps: ['steps'], 'contents-chapters': ['steps'], 'illustration-process': ['steps'],
-    comparison: ['comparison'], 'before-after': ['comparison'],
-    'code-snippet': ['code'], specification: ['parameters'],
-    quote: ['quote'], 'editorial-quote': ['quote'], 'magazine-pull-quote': ['quote'],
+    "note-question": ["paragraph"], "note-marker": ["paragraph"], "note-editorial": ["paragraph"], "note-news": ["paragraph"], "note-checklist": ["features", "steps", "paragraph"], "note-photo": ["image", "paragraph"],
+    "news-focus": ["paragraph"],
+    manifesto: ["paragraph"],
+    editorial: ["paragraph"],
+    notice: ["paragraph"],
+    "block-banner": ["paragraph"],
+    "definition-card": ["paragraph"],
+    "concept-explainer": ["paragraph"],
+    "og-cover": ["paragraph"],
+    "gradient-cover": ["paragraph"],
+    "bold-diagonal-cover": ["paragraph"],
+    "split-cover": ["paragraph"],
+    "article-summary-card": ["paragraph"],
+    "paragraph-summary-card": ["paragraph"],
+    bento: ["features"],
+    spotlight: ["features"],
+    report: ["features"],
+    checklist: ["features"],
+    "contents-index": ["features"],
+    "contents-grid": ["features"],
+    "tips-card": ["features"],
+    "digest-card": ["features"],
+    "tips-grid": ["features"],
+    "feature-chip-hero": ["features"],
+    steps: ["steps"],
+    "contents-chapters": ["steps"],
+    "illustration-process": ["steps"],
+    comparison: ["comparison"],
+    "before-after": ["comparison"],
+    "code-snippet": ["code"],
+    specification: ["parameters"],
+    course: ["steps"],
+    "case-study": ["features"],
+    safety: ["features"],
+    faq: ["features"],
+    testimonial: ["quote"],
+    quote: ["quote"],
+    "editorial-quote": ["quote"],
+    "magazine-pull-quote": ["quote"],
+};
+/** Domain compositions require explicit semantic intent, never a keyword guess. */
+const socialScenes = {
+    course: ["tutorial", "roadmap"],
+    safety: ["checklist"],
+    faq: ["questions"],
+    "case-study": ["case-study"],
+    testimonial: ["testimonial"],
+};
+export const MANUAL_COMPOSITION_REASONS = {
+    launch: "Legacy artwork simulates product UI; use authored-feature-bento or authored-image-split with a resolved asset.",
+    metric: "Legacy value slot lacks a chart-to-value binding; use typed chart compositions.",
+    myth: "Fixed wrong/right semantics cannot be inferred from ordinary comparison columns.",
+    story: "Legacy artwork is illustrative; use authored-image-editorial with a resolved image.",
+    team: "Requires typed people and corresponding portrait assets.",
+    "split-bar-compare": "Requires paired measured series; generic comparison text is insufficient.",
+    "benchmark-bars": "Requires explicit benchmark values, not invented percentages.",
+    "usage-breakdown": "Requires typed parts and a validated total; current chart blocks support bar/line measurements, not inferred percentage shares.",
+    organization: "Requires an explicit parent/child relationship contract.",
+    "research-highlight": "Requires methodology and limitations mapped independently.",
+    "product-showcase": "Use authored-image-split/campaign with a resolved image, not legacy fake UI.",
+};
+const parameterScenes = {
+    "time-notice": ["event-details"],
+    ticket: ["event-details"],
+    webinar: ["event-details"],
+    community: ["event-details"],
+    schedule: ["event-details"],
+    pricing: ["pricing-details"],
+    offer: ["offer-details"],
+    hiring: ["recruitment-details"],
+    menu: ["menu-details"],
+    itinerary: ["travel-details"],
 };
 // Automatic presentation matching requires an explicit semantic contract too.
 // A feature paragraph must never become a price plan, employee or risk entry.
-const presentationContracts = {
-    cover: ['paragraph'], section: ['paragraph'], statement: ['paragraph'], closing: ['paragraph'],
-    agenda: ['features'], bullets: ['features'], 'two-column': ['features'],
-    'three-column': ['features'], cards: ['features'], checklist: ['features'],
-    process: ['steps'], timeline: ['steps'], roadmap: ['steps'], 'progress-roadmap': ['steps'],
-    comparison: ['comparison'], 'before-after': ['comparison'], 'problem-solution': ['comparison'],
-    metrics: ['chart'], 'bar-chart': ['chart'], 'usage-breakdown': ['chart'],
-    quote: ['quote'], 'editorial-quote': ['quote'], 'magazine-pull-quote': ['quote'],
-    table: ['parameters'], specification: ['parameters'], 'code-snippet': ['code'],
-    'image-left': ['image'], 'image-right': ['image'], 'image-full': ['image'],
-    'product-showcase': ['image'],
-};
 const recipe = (id, kind, semantic) => {
-    const contract = (kind === 'social' ? socialContracts : presentationContracts)[id];
+    if (parameterScenes[id])
+        return {
+            id,
+            kind,
+            renderer: "semantic",
+            automatic: true,
+            family: `domain-${id}`,
+            accepts: ["parameters"],
+            minEntries: 1,
+            maxEntries: 6,
+            requiresImage: false,
+            scenes: parameterScenes[id],
+        };
+    const contract = socialContracts[id];
     const group = contract?.[0] || family(id, semantic);
-    return { id, kind, renderer: 'catalog', automatic: Boolean(contract), family: group, accepts: contract || accepted(group), minEntries: group === 'comparison' ? 2 : kind === 'social' && (group === 'features' || group === 'steps' || group === 'parameters') ? 1 : 0, maxEntries: group === 'hero' ? 0 : kind === 'presentation' ? 4 : 6, requiresImage: group === 'image' };
+    return {
+        id,
+        kind,
+        renderer: "catalog",
+        automatic: Boolean(contract),
+        scenes: socialScenes[id],
+        ...(!contract
+            ? {
+                manualReason: MANUAL_COMPOSITION_REASONS[id] ||
+                    "No verified semantic projection.",
+            }
+            : {}),
+        family: group,
+        accepts: contract || accepted(group),
+        minEntries: group === "comparison"
+            ? 2
+            : kind === "social" &&
+                (group === "features" ||
+                    group === "steps" ||
+                    group === "parameters")
+                ? 1
+                : 0,
+        maxEntries: group === "hero" ? 0 : kind === "presentation" ? 4 : 6,
+        requiresImage: group === "image",
+    };
 };
+/** Stable aliases keep saved documents readable while excluding duplicate candidates. */
+export function canonicalRecipeId(id, kind) {
+    if (/^semantic-(code|parameters|comparison|chart)-editorial$/.test(id))
+        return canonicalRecipeId(id.replace(/-editorial$/, "-stack"), kind);
+    if (id === "semantic-code-stack")
+        return "authored-code-editorial";
+    if (id === "semantic-comparison-stack")
+        return "authored-comparison-panels";
+    if (kind === "social" && id === "semantic-hero-split")
+        return "semantic-hero-editorial";
+    if (id === "semantic-quote-stack")
+        return "authored-quote-poster";
+    if (id === "semantic-quote-editorial")
+        return "authored-quote-editorial";
+    if (kind === "presentation" && id === "semantic-hero-split")
+        return "bookend-cover-split";
+    if (kind === "presentation" &&
+        ["semantic-hero-stack", "semantic-hero-editorial"].includes(id))
+        return "bookend-cover-editorial";
+    if (kind === "social" && id === "semantic-hero-stack")
+        return "semantic-hero-editorial";
+    return id;
+}
 /** Existing authored catalogs remain first-class candidates, rather than being discarded. */
-export const DESIGN_RECIPES = [
-    ...['cover', 'closing'].flatMap(role => ['editorial', 'panel', 'split'].map(style => ({ id: `bookend-${role}-${style}`, kind: 'presentation', renderer: 'semantic', family: `${role}-${style}`, accepts: ['paragraph'], minEntries: 0, maxEntries: 0, requiresImage: false }))),
-    ...['presentation', 'social'].map(kind => ({ id: 'brand-collection-grid', kind, renderer: 'semantic', family: 'brand-collection', accepts: ['features'], minEntries: 2, maxEntries: 12, requiresImage: false })),
-    ...PRESENTATION_LAYOUT_IDS.map(id => recipe(id, 'presentation')),
-    ...SOCIAL_LAYOUT_CATALOG.map(item => recipe(item.id, 'social', item.scene)),
-    ...['presentation', 'social'].flatMap(kind => [
-        ...['banner', 'split', 'editorial', 'campaign', 'inset'].map(style => ({ id: `authored-image-${style}`, kind, renderer: 'semantic', family: `image-${style}`, accepts: ['image'], minEntries: 0, maxEntries: 0, requiresImage: true })),
-        { id: 'authored-prose-inset', kind, renderer: 'semantic', family: 'prose-inset', accepts: ['paragraph'], minEntries: 0, maxEntries: 0, requiresImage: false },
-        ...AUTHORED_COMPOSITIONS.map(composition => ({ id: `authored-${composition.id}`, kind, renderer: 'semantic', family: composition.id, accepts: [composition.kind], minEntries: composition.min, maxEntries: composition.max, requiresImage: false })),
-        ...['code', 'parameters', 'steps', 'comparison', 'features', 'quote', 'chart', 'hero', 'prose'].flatMap(group => ['split', 'stack', 'editorial'].map(variant => ({ id: `semantic-${group}-${variant}`, kind, renderer: 'semantic', family: `${group}-${variant}`, accepts: accepted(group), minEntries: 0, maxEntries: 20, requiresImage: false }))),
-        { id: 'semantic-mixed-stack', kind, renderer: 'semantic', family: 'mixed-stack', accepts: ['paragraph', 'steps', 'features', 'comparison', 'code', 'parameters', 'quote', 'chart', 'image'], minEntries: 0, maxEntries: 20, requiresImage: false },
+const ALL_DESIGN_RECIPES = [
+    ...["cover", "closing"].flatMap((role) => ["editorial", "panel", "split"].map((style) => ({
+        id: `bookend-${role}-${style}`,
+        kind: "presentation",
+        renderer: "semantic",
+        family: `${role}-${style}`,
+        accepts: ["paragraph", "image"],
+        minEntries: 0,
+        maxEntries: 0,
+        requiresImage: false,
+    }))),
+    ...["presentation", "social"].map((kind) => ({
+        id: "brand-collection-grid",
+        kind,
+        renderer: "semantic",
+        family: "brand-collection",
+        accepts: ["features"],
+        minEntries: 2,
+        maxEntries: 12,
+        requiresImage: false,
+    })),
+    ...SOCIAL_LAYOUT_CATALOG.map((item) => recipe(item.id, "social", item.scene)),
+    ...["presentation", "social"].flatMap((kind) => [
+        {
+            id: "authored-plan-cards",
+            kind,
+            renderer: "semantic",
+            family: "plan-cards",
+            accepts: ["comparison", "paragraph"],
+            minEntries: 2,
+            maxEntries: 4,
+            requiresImage: false,
+        },
+        ...["banner", "split", "editorial", "campaign", "inset"].map((style) => ({
+            id: `authored-image-${style}`,
+            kind,
+            renderer: "semantic",
+            family: `image-${style}`,
+            accepts: ["image", "paragraph", "features"],
+            minEntries: 0,
+            maxEntries: 3,
+            requiresImage: true,
+        })),
+        {
+            id: "authored-prose-inset",
+            kind,
+            renderer: "semantic",
+            family: "prose-inset",
+            accepts: ["paragraph"],
+            minEntries: 0,
+            maxEntries: 0,
+            requiresImage: false,
+        },
+        ...AUTHORED_COMPOSITIONS.map((composition) => ({
+            id: `authored-${composition.id}`,
+            kind,
+            renderer: "semantic",
+            family: composition.id,
+            accepts: [composition.kind, "paragraph"],
+            minEntries: composition.min,
+            maxEntries: composition.max,
+            requiresImage: false,
+        })),
+        ...[
+            "code",
+            "parameters",
+            "steps",
+            "comparison",
+            "features",
+            "quote",
+            "chart",
+            "hero",
+            "prose",
+        ].flatMap((group) => (["code", "parameters", "comparison", "chart"].includes(group)
+            ? ["split", "stack"]
+            : ["split", "stack", "editorial"]).map((variant) => ({
+            id: `semantic-${group}-${variant}`,
+            kind,
+            renderer: "semantic",
+            family: `${group}-${variant}`,
+            accepts: group === "prose" && variant === "editorial"
+                ? ["paragraph", "image"]
+                : accepted(group),
+            minEntries: 0,
+            maxEntries: 20,
+            requiresImage: false,
+        }))),
+        {
+            id: "semantic-mixed-stack",
+            kind,
+            renderer: "semantic",
+            family: "mixed-stack",
+            accepts: [
+                "paragraph",
+                "steps",
+                "features",
+                "comparison",
+                "code",
+                "parameters",
+                "quote",
+                "chart",
+                "image",
+            ],
+            minEntries: 0,
+            maxEntries: 20,
+            requiresImage: false,
+        },
     ]),
 ];
+export const DESIGN_RECIPES = ALL_DESIGN_RECIPES.filter((r) => canonicalRecipeId(r.id, r.kind) === r.id);
 export function pageEntryCount(page) {
-    return page.blocks.reduce((sum, block) => sum + (block.kind === 'steps' || block.kind === 'features' ? block.entries.length : block.kind === 'comparison' ? block.columns.length : block.kind === 'parameters' ? block.rows.length : block.kind === 'chart' ? block.values.length : 0), 0);
+    return page.blocks.reduce((sum, block) => sum +
+        (block.kind === "steps" || block.kind === "features"
+            ? block.entries.length
+            : block.kind === "comparison"
+                ? block.columns.length
+                : block.kind === "parameters"
+                    ? block.rows.length
+                    : block.kind === "chart"
+                        ? block.values.length
+                        : 0), 0);
 }
 export function designCandidates(page, context) {
-    if (!Number.isFinite(context.ratio) || context.ratio < .25 || context.ratio > 4)
+    if (!Number.isFinite(context.ratio) ||
+        context.ratio < 0.25 ||
+        context.ratio > 4)
         return [];
-    const primary = page.blocks.filter(b => b.kind !== 'paragraph' && !(b.kind === 'image' && b.status === 'missing'));
-    const kinds = [...new Set((primary.length ? primary : page.blocks.filter(b => b.kind !== 'image')).map(b => b.kind))];
-    const count = pageEntryCount(page), characters = page.blocks.flatMap(contentBlockText).join('').length;
-    const available = page.blocks.some(b => b.kind === 'image' && b.status === 'available');
+    const primary = page.blocks.filter((b) => b.kind !== "paragraph" && !(b.kind === "image" && b.status === "missing"));
+    const kinds = [
+        ...new Set((primary.length
+            ? primary
+            : page.blocks.filter((b) => b.kind !== "image")).map((b) => b.kind)),
+    ];
+    const richComparison = page.blocks.some((b) => b.kind === "comparison" &&
+        b.columns.some((c) => c.price || c.values || c.statuses));
+    const count = pageEntryCount(page), characters = page.blocks.flatMap(contentBlockText).join("").length;
+    const available = page.blocks.some((b) => b.kind === "image" && b.status === "available");
     const exclude = new Set(context.excluded || []);
-    const candidates = DESIGN_RECIPES.filter(r => r.kind === context.kind && r.automatic !== false && (!(r.family.startsWith('hero') && page.purpose !== 'cover' && page.purpose !== 'conclude' && characters > 120)) && (!r.id.startsWith('bookend-') || (page.purpose === 'cover' ? r.id.startsWith('bookend-cover-') : page.purpose === 'conclude' && r.id.startsWith('bookend-closing-'))) && (r.id !== 'brand-collection-grid' || page.scene === 'brand-collection') && !exclude.has(r.id) && count >= r.minEntries && count <= r.maxEntries && (!r.requiresImage || available) && kinds.every(k => r.accepts.includes(k)) && !(r.renderer === 'catalog' && (primary.length > 1 || characters > 1000)));
+    const candidates = DESIGN_RECIPES.filter((r) => r.kind === context.kind &&
+        r.automatic !== false &&
+        (!r.scenes || Boolean(page.scene && r.scenes.includes(page.scene))) &&
+        !(r.family.startsWith("hero") &&
+            page.purpose !== "cover" &&
+            page.purpose !== "conclude" &&
+            characters > 120) &&
+        (!r.id.startsWith("bookend-") ||
+            (page.purpose === "cover"
+                ? r.id.startsWith("bookend-cover-")
+                : page.purpose === "conclude" &&
+                    r.id.startsWith("bookend-closing-"))) &&
+        (r.id !== "brand-collection-grid" || page.scene === "brand-collection") &&
+        !exclude.has(r.id) &&
+        count >= r.minEntries &&
+        count <= r.maxEntries &&
+        (!r.requiresImage || available) &&
+        kinds.every((k) => r.accepts.includes(k)) &&
+        !(r.renderer === "catalog" &&
+            (richComparison || primary.length > 1 || characters > 1000)));
     const score = (r) => {
-        const repeats = (context.previousFamilies || []).filter(f => f === r.family).length;
-        const intent = page.purpose === 'cover' || page.purpose === 'conclude' ? r.family.startsWith('hero') : page.purpose === 'instruct' ? r.family.startsWith('steps') || r.family.startsWith('code') : true;
-        return (r.id.startsWith('bookend-') ? 80 : 0) + (page.scene === 'brand-collection' && r.id === 'brand-collection-grid' ? 80 : 0) + sceneRecipePreference(page.scene, r.id) + (intent ? 30 : 0) + (r.renderer === 'catalog' ? 8 : 0) - (r.id.includes('mixed') ? 20 : 0) - repeats * 18 + (context.ratio < 1 && r.id.endsWith('stack') ? 6 : 0);
+        const repeats = (context.previousFamilies || []).filter((f) => f === r.family).length;
+        const intent = page.purpose === "cover" || page.purpose === "conclude"
+            ? r.family.startsWith("hero")
+            : page.purpose === "instruct"
+                ? r.family.startsWith("steps") || r.family.startsWith("code")
+                : true;
+        return ((r.id.startsWith("bookend-") ? 80 : 0) +
+            (page.scene === "brand-collection" && r.id === "brand-collection-grid"
+                ? 80
+                : 0) +
+            sceneRecipePreference(page.scene, r.id) +
+            (intent ? 30 : 0) +
+            (r.renderer === "catalog" ? 8 : 0) -
+            (r.id.includes("mixed") ? 20 : 0) -
+            repeats * 18 +
+            (context.ratio < 1 && r.id.endsWith("stack") ? 6 : 0));
     };
-    const ranked = candidates.map((r, index) => ({ r, index, score: score(r) })).sort((a, b) => b.score - a.score || a.index - b.index).map(e => e.r);
+    const ranked = candidates
+        .map((r, index) => ({ r, index, score: score(r) }))
+        .sort((a, b) => b.score - a.score || a.index - b.index)
+        .map((e) => e.r);
     const limit = Math.max(1, Math.min(32, context.limit ?? 12));
     // Catalog size must not prevent semantic renderers from reaching measurement.
-    const semantic = ranked.filter(r => r.renderer === 'semantic').slice(0, Math.min(8, Math.ceil(limit / 2)));
-    const reserved = new Set(semantic.map(r => r.id));
-    const selected = new Set([...semantic, ...ranked.filter(r => !reserved.has(r.id)).slice(0, limit - semantic.length)].map(r => r.id));
-    return ranked.filter(r => selected.has(r.id));
+    const semantic = ranked
+        .filter((r) => r.renderer === "semantic")
+        .slice(0, Math.min(8, Math.ceil(limit / 2)));
+    const reserved = new Set(semantic.map((r) => r.id));
+    const selected = new Set([
+        ...semantic,
+        ...ranked
+            .filter((r) => !reserved.has(r.id))
+            .slice(0, limit - semantic.length),
+    ].map((r) => r.id));
+    return ranked.filter((r) => selected.has(r.id));
 }
 /** Ignores color, copy and generated IDs; previews that only recolor are the same composition. */
 export function structureFingerprint(items, width, height) {
-    if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0)
-        throw new Error('INVALID_CANVAS');
-    return items.map(item => [item.role, ...[item.x / width, item.y / height, item.width / width, item.height / height].map(v => Math.round(v * 24))].join(':')).sort().join('|');
+    if (!Number.isFinite(width) ||
+        !Number.isFinite(height) ||
+        width <= 0 ||
+        height <= 0)
+        throw new Error("INVALID_CANVAS");
+    return items
+        .map((item) => [
+        item.role,
+        ...[
+            item.x / width,
+            item.y / height,
+            item.width / width,
+            item.height / height,
+        ].map((v) => Math.round(v * 24)),
+    ].join(":"))
+        .sort()
+        .join("|");
 }