| 1 | /** |
| 2 | * Shared layout catalog for presentation XML generation. |
| 3 | * |
| 4 | * Single source of truth for all layout definitions used by both |
| 5 | * full-presentation generation (generate/route.ts) and |
| 6 | * single-slide generation (generate-slide/route.ts). |
| 7 | */ |
| 8 | |
| 9 | /** |
| 10 | * Compact, categorized layout reference used in generation and editing prompts. |
| 11 | * Most layout components share the same child structure: |
| 12 | * <DIV icon="optional"><H3>Label</H3><P>Short supporting text</P></DIV>. |
| 13 | * Icon lists can switch to generated item images with prompt attributes. |
| 14 | */ |
| 15 | export const LAYOUT_REFERENCE = `Available XML syntax and layout families: |
| 16 | |
| 17 | Base slide shell: |
| 18 | <PRESENTATION><SECTION layout="left|right|vertical">...</SECTION></PRESENTATION> |
| 19 | Use one main component inside each SECTION. Add a direct child <IMG query="..." /> or <IMG url="..." /> only when a root slide image helps; place it last. Simple slides may use only <TITLE>, <LABEL>, <H1>, <H2>, <H3>, <H4>, <P>, <QUOTE>, <CALLOUT>, <CODE>, or <CONTRIBUTOR />. |
| 20 | |
| 21 | Shared item pattern: |
| 22 | Most visual components contain repeated items shaped as <DIV icon="optional"><H3>Label</H3><P>Short supporting text</P></DIV>. The wrapper tag changes the visual treatment. Only add icon="..." when the wrapper supports icons. |
| 23 | |
| 24 | Columns: |
| 25 | Use <COLUMNS> when the slide needs balanced lanes or a container that can hold mixed nested content. Columns may contain headings, paragraphs, quotes, callouts, code blocks, item-level <IMG query="..." />, charts, infographics, or other supported elements when that improves clarity. |
| 26 | <COLUMNS><DIV><H3>Market</H3><P>Demand is rising.</P></DIV><DIV><IMG query="team planning" /><H3>Execution</H3><P>Delivery capacity is ready.</P></DIV></COLUMNS> |
| 27 | |
| 28 | Text and content blocks: |
| 29 | Use these like normal content components anywhere plain text, headings, or paragraphs would fit, including inside COLUMNS. Use <TITLE> only for the first slide, a newly created title slide, or an introduction slide. |
| 30 | - <TITLE alignment="left|center|right">Main message</TITLE> |
| 31 | - <LABEL alignment="left|center|right">Category</LABEL> |
| 32 | - Quote family: <QUOTE variant="sidequote|large|sidequote-icon" author="Name">Memorable sentence.</QUOTE>. Use sidequote for the simple block quote treatment. |
| 33 | - <CALLOUT variant="note|info|warning|caution|success|question">Short contextual note.</CALLOUT> |
| 34 | - <CODE language="typescript">const example = true;</CODE> |
| 35 | - <CONTRIBUTOR /> is standalone and self-populates from frontend presentation metadata, you can chose the alignment attribute here if needed. |
| 36 | |
| 37 | First slide title pattern: |
| 38 | For most generated first slides, use a compact title-slide pattern with <TITLE>, <CONTRIBUTOR />, and a supporting visual image. Place any direct child root <IMG query="..." /> last. You can omit <CONTRIBUTOR /> when the first slide needs a stronger creative concept. |
| 39 | |
| 40 | List family: |
| 41 | Use these for grouped points, feature sets, benefits, requirements, or short takeaways. Choose the wrapper that best matches the visual emphasis. |
| 42 | - <BULLETS bulletType="basic|numbered|arrow">...</BULLETS> |
| 43 | - <ICONS variant="icon|image" orientation="side|top">...</ICONS> |
| 44 | For <ICONS variant="image">, use <DIV prompt="detailed image prompt"> instead of icon. For <ICONS variant="icon">, use <DIV icon="keyword">. |
| 45 | - <BOXES boxType="outline|icon|solid|sideline|side-label|top-label|top-circle|joined|joined-icon|leaf|labeled|alternating|quote-box|speech-bubble" orientation="horizontal|vertical" numbered="true">...</BOXES> |
| 46 | - <ARROWS orientation="horizontal|vertical" svgType="arrow|pill|parallelogram" showIcon="true|false">...</ARROWS> |
| 47 | |
| 48 | Example: <BULLETS bulletType="arrow"><DIV><H3>Faster review</H3><P>Decisions move in hours.</P></DIV><DIV><H3>Cleaner handoff</H3><P>Teams share one source.</P></DIV></BULLETS> |
| 49 | |
| 50 | Sequence family: |
| 51 | Use these for steps, roadmaps, process flow, maturity, progression, hierarchy, funnels, and growth paths. |
| 52 | - <STEPS variant="arrow|box">...</STEPS> |
| 53 | - <ARROW-SEQUENCE orientation="vertical|horizontal">...</ARROW-SEQUENCE> |
| 54 | - <TIMELINE orientation="vertical|horizontal" sidedness="single|double" numbered="true" showLine="true">...</TIMELINE> |
| 55 | - <CYCLE variant="flower|ring|circle">...</CYCLE> |
| 56 | - <PYRAMID isFunnel="true" variant="inside">...</PYRAMID> |
| 57 | - <STAIRCASE variant="inside">...</STAIRCASE> |
| 58 | - <SNAKE>...</SNAKE> |
| 59 | - <SLOPE><DIV icon="idea"><H4>Start</H4></DIV><DIV icon="growth"><H4>Scale</H4></DIV></SLOPE> |
| 60 | Example: <STEPS variant="arrow"><DIV icon="search"><H3>Discover</H3><P>Find the real constraint.</P></DIV><DIV icon="settings"><H3>Build</H3><P>Ship the smallest useful system.</P></DIV><DIV icon="analytics"><H3>Improve</H3><P>Measure and refine.</P></DIV></STEPS> |
| 61 | |
| 62 | Comparison family: |
| 63 | Use these when the audience must compare choices, trade-offs, states, or opposing positions. |
| 64 | - <COMPARE><DIV><H3>Option A</H3><LI>Strength</LI><LI>Risk</LI></DIV><DIV><H3>Option B</H3><LI>Strength</LI><LI>Risk</LI></DIV></COMPARE> |
| 65 | - <BEFORE-AFTER><DIV><H3>Before</H3><P>Manual and fragmented.</P></DIV><DIV><H3>After</H3><P>Automated and visible.</P></DIV></BEFORE-AFTER> |
| 66 | - <PROS-CONS><PROS><H3>Pros</H3><LI>Fast rollout</LI></PROS><CONS><H3>Cons</H3><LI>Training needed</LI></CONS></PROS-CONS> |
| 67 | |
| 68 | Relationship family: |
| 69 | Use these for ecosystems, dependencies, loops, connected concepts, and a core idea surrounded by factors. |
| 70 | - <CIRCULAR-GRID centerText="Core idea">...</CIRCULAR-GRID> |
| 71 | - <CONNECTED-CIRCLES>...</CONNECTED-CIRCLES> |
| 72 | - <CYCLE variant="flower|ring|circle">...</CYCLE> |
| 73 | |
| 74 | Data family: |
| 75 | Use data components when numbers or structured evidence carry the message. |
| 76 | - <STATS statstype="plain|circle|circle-bold|star|bar|dot-grid|dot-line"><DIV stat="85%"><H3>Retention</H3><P>After onboarding.</P></DIV></STATS> |
| 77 | Here the stat attribute is just for numeric values, percentages, or other quantitative metrics. NOT WORDS. |
| 78 | - <TABLE><TR><TH>Segment</TH><TH>Value</TH></TR><TR><TD>SMB</TD><TD>42%</TD></TR></TABLE> |
| 79 | - <CHART charttype="bar|pie|line|area|radar|scatter|radial-bar|composed|treemap|bubble|donut|histogram|heatmap|range-bar|range-area|waterfall|box-plot|candlestick|ohlc|nightingale|radial-column|sunburst|sankey|chord|funnel|cone-funnel|pyramid|radial-gauge|linear-gauge"> |
| 80 | | label | value | |
| 81 | | --- | --- | |
| 82 | | Q1 | 24 | |
| 83 | | Q2 | 31 | |
| 84 | </CHART> |
| 85 | For charts, put a markdown table directly inside <CHART>. Headers define field names once. For multi-series charts, add columns such as revenue and profit. For scatter/bubble charts, use x, y, and optional z headers. For specialized charts, use the renderer field names: category/low/high, category/amount, date/open/high/low/close, category/min/q1/median/q3/max, x/y/value, or from/to/size. |
| 86 | |
| 87 | Infographic family: |
| 88 | Use <INFOGRAPHIC>self-contained visual prompt</INFOGRAPHIC> for custom diagrams, process maps, lifecycle visuals, hierarchies, funnels, matrices, frameworks, or cause-and-effect flows. Include exact labels, values, entities, sequence, relationships, orientation, and takeaway in the element text. |
| 89 | |
| 90 | Supporting tags: |
| 91 | Use <DIV>, <TITLE>, <LABEL>, <CONTRIBUTOR />, <QUOTE>, <CALLOUT>, <CODE>, <H1>, <H2>, <H3>, <H4>, <P>, <LI>, <IMG />, <OPTIONS>, <TR>, <TH>, <TD>, <PROS>, and <CONS> exactly as shown. Do not invent tags or attributes.`; |
| 92 |