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 "score these with a weighted average", 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).
• Kanban: a board that sorts tasks into columns by status (e.g. To do / In progress / Done). Ask "put these tasks on a kanban board" or "make a To do / Doing / Done board". Drag cards between columns or within a column. In edit mode you can edit column titles and card text, add cards and columns with "+", and delete cards with "✕" (a column can be deleted only when it has no cards). Exported .html shows the board as is.
• Merged table cells: cells in a table can be merged into one (ask in the chat, for example "merge the month heading across two columns" or "merge the rows with the same item"). Exported .html shows them as is. Markdown tables cannot express merges, so in Markdown editing mode a table with merged cells is kept as one block. A table with merged cells does not become an editable grid.
• Kanban linked to a sheet: ask something like "turn the table in Tasks.html into a kanban board, grouped by the Status column" to get a board whose cards are the spreadsheet rows and whose columns are the status values. Saving the sheet updates the board. The other way works too: dragging a card to another column writes its status cell in the sheet, and editing a card's text in edit mode writes its text cell (the order within a column follows the sheet's row order, and adding or deleting cards and columns is done in the sheet; formula cells, values the validation rule rejects, and text that is the key column are not written, and you're told why). Rows with an empty or duplicate key (such as ID) do not become cards. Above the board you see the linked sheet and its status column (for example 🔗 Tasks › Status), and the columns get colors automatically in their order. If the sheet headers change so the board can no longer follow, it shows ⚠ and keeps the last content.
• 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. It is not linked to sliders: moving a slider does not change the result.

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.