Note components (layouts the AI can build)

When you ask the chat to "summarize this clearly", "show progress bars", "make it a how-to", "chart the sales", "make a flowchart", "write it as an equation", "add an importance slider", "give it a Todo/Doing/Done status", or "total these as a weighted score", the AI picks from the available component (block) types to build the note for you — you do not choose layouts yourself. The main components:

• Basics: heading / paragraph / bullet list / numbered list / checkbox / checklist / table / divider / callout / image / video / audio / embed / quote / code. The title is the leading heading; the theme styles it as a band or large heading.
• Layout: two-column / columns / card / toggle (collapsible) / tab / timeline (dated, chronological) / table of contents / steps.
• Structure (nesting): the AI groups related content (a subheading, body text, and bullets) into a card, and places parallel items side by side as one card per column in a two-column or columns block. Comparisons go into cards on the left and right, supplementary details and FAQs into a toggle (collapsible), and switchable views such as per-period figures into tabs, at most two levels deep (cards inside columns). Ask "organize this with cards", "arrange in 3 columns", or "collapse the extra details".
• Appearance hints: you can ask for a tinted band on a block you want to stand out, tighter or looser spacing below a block, a filled or tinted card background, tighter or looser column gaps, a larger (lead) or smaller (note) or centered paragraph, and a small label above a heading (for example "STEP 1"). Ask "make the intro sentence larger", "give this card a tinted background", or "put STEP 1 above the heading". Nothing changes unless you ask, and existing notes keep their look. The card style in the appearance theme (such as "Filled") applies to every card at once; these hints apply to one block.
• Table of contents (toc): An auto-generated outline built from the note's headings. Place it near the top of a long note to get a clickable list of links to each heading, jumping straight to that spot. Ask "Add a table of contents" or "put a TOC at the top". The TOC follows along automatically as you add or rename headings, and the links also work in exported .html. By default the note title (the leading top-level heading) is left out of the TOC; ask "include the title in the table of contents too" if you want it listed.
• Columns: a 2-4 column grid. Ask e.g. "lay these out in 3 columns".
• Steps: a numbered procedure. Ask "make it a step-by-step guide".
• Stat: KPIs/metrics highlighted as large number cards. Ask "show the key metrics like a dashboard".
• Progress: completion/progress shown as 0-100% bars. Ask "show each task as a progress bar".
• Feature cards: features, benefits, or options laid out as cards with an icon, a title, and a short description. Ask "lay out the features as cards" or "show the three benefits as cards".
• Badges: short labels such as tags, states, or categories shown as colored pills. Ask "show the supported OSes as badges".
• Key-value list: pairs of a label and a value (overview, specs, owner and due date) in two columns. Ask "put the basic info as a key-value list".
• Chart: numeric data visualized as bar / horizontal-bar / line / area / stacked-bar / 100% stacked bar (stacked-bar-100) / stacked area (stacked-area) / lollipop / pie / donut / radar charts. Ask "chart the sales as a bar chart", "show the ranking as a horizontal bar chart", "show the trend as a line (or area)", "show the breakdown as a stacked bar (or pie / donut)", "show how the mix changes as a 100% stacked bar", "show the cumulative trend as a stacked area", "show the KPIs as a lollipop chart", or "compare the scores as a radar chart". Rendered as static SVG, so it shows in exported .html and thumbnails too, and series colors use a dedicated palette chosen for distinguishability (a separate set for light and dark screens). If a theme defines its own chart palette, that one is used instead.
• Diagram: processes or structures drawn as a diagram — flowcharts (steps/branches), org charts (hierarchy), and mind maps (a tree branching out from one central idea). Ask "make the release steps a flowchart", "draw the org chart", or "turn this plan into a mind map". Mind maps are split left and right of the centre automatically, with a colour per branch. The AI outputs nodes and arrows (edges) and they are auto-laid-out into a static SVG (colors follow the theme).
• Math: LaTeX equations shown as a block (large, centered). Ask "write the quadratic formula as an equation" or "show the Gaussian integral". For short formulas inside text, use inline math wrapped in $ (e.g. $E=mc^2$). Rendered as MathML via KaTeX, so it shows in exported .html too.
• Slider: enter a score (importance / priority / satisfaction) on a 0-N slider. Ask "add an importance slider" or "make a 1-5 rating slider". In the app you drag the track to change the value and the change is saved to the note (exported .html shows a read-only filled bar). Colors follow the theme (chart series colors are the exception noted above).
• Status: a colored status badge like Todo / Doing / Done. Ask "add a status to this task" or "use a Draft/Review/Published status". In the app, clicking the badge cycles to the next option and the change is saved (exported .html is read-only).
• Calc field: auto-computes sum / average / weighted-average from named numeric inputs (scoring, grading, expense totals). Ask "average these test scores" or "score the candidate with a weighted average". In edit mode, editing an input recomputes the result live and saves it. Pairs well with sliders for an evaluation sheet.

These are usually built by talking to the AI, but you can also insert any of them by hand from the "+" (block type picker) in edit mode (and you can still select a block and edit just that part via chat). Colors follow the current theme.