@codename/deck 0.2.0 → 0.4.0

package/dist/types/figures.d.ts

@@ -0,0 +1,68 @@
+export type Context = import('./render.js').Context;
+export type Entry = {
+    tokens: any[];
+    start: number;
+    end: number;
+    blocks: {
+        token: any;
+        start: number;
+    }[];
+    step: number;
+};
+export type Split = {
+    lead: any[] | null;
+    leadAt: [number, number] | null;
+    rest: any[];
+    restAt: [number, number] | null;
+};
+/** A paragraph whose every line starts in bold, as key figures are written without a list. @param {any} token */
+export declare const boldLines: (token: any) => any;
+/**
+ * A list's items, or a paragraph's lines that start in bold, as a figure's entries: each one's words (its first line's
+ * inline tokens) and where they are in the source, `end` -1 when they run over lines; what is under an item (a list, a
+ * chart) its blocks. @param {any} token @param {number} start where its raw starts @param {(markdown: string) => any[]} lex
+ * @returns {Entry[]}
+ */
+export declare function entriesOf(token: any, start: number, lex: (markdown: string) => any[]): Entry[];
+/**
+ * An entry's lead and the rest of its words, each with where it is in the source: the bold it starts with, else for a
+ * programme a time and for key figures a number; what comes between them (a colon, a dash) left out.
+ * @param {Entry} entry @param {string} kind @returns {Split}
+ */
+export declare function leadOf(entry: Entry, kind: string): Split;
+/**
+ * Where a slot's parts start: at each heading of the level its last heading has, but the heading the slot opens with when
+ * there are more of them than the parts asked for (the slide's title, written at their level).
+ * @param {any[]} tokens @param {number} count how many parts the layout has @returns {Set<number>}
+ */
+export declare function partHeads(tokens: any[], count: number): Set<number>;
+/**
+ * The deck's contents, as Slidev's <Toc> reads them: each slide's title and level, but a slide with `hideInToc: true`,
+ * the contents themselves, a cover, an introduction, the end and slides with no title. Where the deck has parts (slides
+ * on `section` or `subsection`, or with a `level`), the parts alone, a section at level 1 and a subsection at 2; else
+ * every slide, at its heading's level. `hideInToc: false` brings a slide back. Levels start at 1, `maxDepth` at most.
+ * @param {import('./parse.js').Slide[]} slides @param {import('./kit.js').Kit} kit @param {number} at the contents' own slide
+ * @param {number} [maxDepth] @returns {{ index: number, title: string, level: number }[]}
+ */
+export declare function contentsOf(slides: import('./parse.js').Slide[], kit: import('./kit.js').Kit, at: number, maxDepth?: number): {
+    index: number;
+    title: string;
+    level: number;
+}[];
+/**
+ * A slot's lists as the figure its layout draws. Entries a click each (<v-clicks>) show their card, milestone, chevron,
+ * row, level or tile at their step. @param {string} kind @param {Entry[]} entries @param {Context} context @returns {HTMLElement}
+ */
+export declare function listFigure(kind: string, entries: Entry[], context: Context): HTMLElement;
+/**
+ * A slot's parts as its layout sets them: face to face, the last on the fill, a medallion between each two (versus), or
+ * in a grid of two columns, the second, top at the end, on the fill (matrix). Their words stay as they were drawn.
+ * @param {string} kind @param {Node[][]} parts @returns {HTMLElement}
+ */
+export declare function partsFigure(kind: string, parts: Node[][]): HTMLElement;
+/**
+ * The deck's contents as rows, a part's number and its title, each going to its slide when chosen; a subsection under
+ * its section, without a number; in two columns from seven rows. @param {Context} context @param {number} at its own slide
+ * @param {number} [maxDepth] @returns {HTMLElement | null}
+ */
+export declare function contentsFigure(context: Context, at: number, maxDepth?: number): HTMLElement | null;

package/dist/types/index.d.ts

@@ -2,7 +2,7 @@ export { createDeck, markdownOf } from './deck.js';
 export { parseDeck } from './parse.js';
 export { renderSlide } from './render.js';
 export { STANDARD, CORNERS, mergeKits, layoutOf, logoOf, inferLayout, labelOf, tokensFrom } from './kit.js';
-export { tokensOf, schemeOf, LOOKS, readable, contrast } from './look.js';
+export { tokensOf, schemeOf, LOOKS, readable, contrast, rgbOf } from './look.js';
 export { readDeckFile, writeDeckFile, rendererUrl, escape, unescape } from './file.js';
 export { toPptx } from './pptx.js';
 export { defaultBlocks, libraryAt } from './blocks.js';

package/dist/types/kit.d.ts

@@ -7,6 +7,7 @@ export type Budget = {
     heading_max_words?: number;
     kind?: string;
 };
+export type List = 'bullets' | 'mindmap' | 'steps' | 'metrics' | 'timeline' | 'process' | 'agenda' | 'pyramid' | 'bento';
 export type Layout = {
     label?: Record<string, string> | string;
     intent?: string;
@@ -22,13 +23,18 @@ export type Layout = {
     paper: 'paper' | 'fill' | 'ink' | 'soft';
     title: 'normal' | 'large' | 'huge';
     logo: 'big' | 'small' | 'none';
+    lists: List;
+    parts: 'none' | 'versus' | 'matrix';
+    contents: boolean;
     pptx: string;
     numbered: boolean;
+    art?: string[];
 };
 export type Kit = {
     name?: string;
     tokens: Record<string, any>;
     layouts: Record<string, Layout>;
+    pictures: Record<string, string>;
 };
 /** The corners a logo sits in, as `logoAt` names them, the first by default. */
 export declare const CORNERS: string[];
@@ -37,6 +43,11 @@ export declare const CORNERS: string[];
  * never an address to fetch; else null. @param {unknown} value
  */
 export declare const logoOf: (value: unknown) => string | null;
+/**
+ * A picture of a kit's, a layer of a layout's art drawn behind its words over the whole slide: a picture inside the kit as a
+ * logo is, or an SVG written out (`data:image/svg+xml,…`), of 3 MB at most, never an address to fetch; else null. @param {unknown} value
+ */
+export declare const artOf: (value: unknown) => string | null;
 /** The names brains give the usual layouts, for the ones deck has. */
 export declare const ALIASES: Record<string, string>;
 /** deck's own kit: the usual layouts, the ones Slidev names and the ones PowerPoint has, as data. */
@@ -52,14 +63,14 @@ export declare function layoutOf(given: any): {
 /**
  * Design tokens as the W3C's Design Tokens format (DTCG 2025.10) writes them, read into a kit's:
  * `color.light` and `color.dark` groups (bg, surface, fg, muted, accent) or flat colours, `font.sans`
- * and the like; each `$value` a hex string or a colour object with its `hex`. Tokens already flat
+ * and the like; each `$value` a colour string or a colour object with its `hex` and `alpha`. Tokens already flat
  * pass through. @param {any} given @returns {Record<string, any>}
  */
 export declare function tokensFrom(given: any): Record<string, any>;
 /**
- * Kits merged, the later over the earlier: their tokens, their dark ones within theirs, and their layouts by name, each
- * checked; a layout given as false is taken away, but the default. A logo that isn't a picture inside the kit is dropped.
- * @param {...any} kits @returns {{ kit: Kit, problems: string[] }}
+ * Kits merged, the later over the earlier: their tokens, their dark ones within theirs, their layouts by name and their
+ * pictures, each checked; a layout given as false is taken away, but the default. A logo that isn't a picture inside the
+ * kit is dropped. @param {...any} kits @returns {{ kit: Kit, problems: string[] }}
  */
 export declare function mergeKits(...kits: any[]): {
     kit: Kit;
@@ -67,6 +78,18 @@ export declare function mergeKits(...kits: any[]): {
 };
 /** A layout's name in a language, else its own name. @param {Layout} layout @param {string} name @param {string} lang */
 export declare function labelOf(layout: Layout, name: string, lang: string): string;
+/**
+ * The layout a slide is drawn with: the one it names, by its name or a name brains give it, else the one its content
+ * suits. @param {{ index: number, settings: Record<string, any>, slots: { name: string, text: string }[] }} slide @param {Kit} kit
+ */
+export declare function layoutNameOf(slide: {
+    index: number;
+    settings: Record<string, any>;
+    slots: {
+        name: string;
+        text: string;
+    }[];
+}, kit: Kit): string;
 /**
  * The layout a slide that names none is given, from what it holds, as Pandoc's PowerPoint writer
  * chooses: the first slide is the cover; a heading alone, a section; slots beyond the first, the

package/dist/types/look.d.ts

@@ -43,8 +43,12 @@ export declare function tokensOf(settings: Record<string, any>, project?: Partia
  * @param {Tokens} tokens @param {'light' | 'dark'} scheme @returns {Scheme}
  */
 export declare function schemeOf(tokens: Tokens, scheme: 'light' | 'dark'): Scheme;
-/** @param {string} value @returns {[number, number, number] | null} */
-export declare function hex(value: string): [number, number, number] | null;
+/**
+ * A colour as deck reads one, as red, green and blue: `#rgb` or `#rrggbb` (`#rgba`, `#rrggbbaa` with an alpha), `rgb()` or
+ * `rgba()` as CSS writes them, by commas or spaces, the alpha after a comma or a slash; one see-through is seen over `under`,
+ * white unless said. @param {string} value @param {number[]} [under] @returns {[number, number, number] | null}
+ */
+export declare function rgbOf(value: string, under?: number[]): [number, number, number] | null;
 /** @param {number[]} rgb */
 export declare const css: (rgb: number[]) => string;
 /** WCAG's contrast ratio. @param {number[]} a @param {number[]} b */

package/dist/types/mindmap.d.ts

@@ -0,0 +1,69 @@
+export type Item = {
+    text: string;
+    start: number;
+    end: number;
+    children: Item[];
+    blocks?: {
+        lang: string;
+        text: string;
+    }[];
+    step?: boolean;
+    element?: HTMLElement;
+};
+export type Box = {
+    w: number;
+    h: number;
+    children: Box[];
+    x?: number;
+    y?: number;
+    side?: number;
+    span?: number;
+    inner?: number;
+};
+export type Line = {
+    branch: number;
+    depth: number;
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+};
+/**
+ * A list's items as a tree, by their indentation, as written: each item's words where they are in the source, from
+ * `start` (where the list's own text starts), a line that is no item going on with the item above it, a fenced block
+ * under an item (a chart, a diagram) that item's to draw.
+ * @param {string} raw @param {number} start @returns {Item[]}
+ */
+export declare function itemsOf(raw: string, start: number): Item[];
+/** An item's words as they are compared: no emphasis, no case, one space. @param {string} text */
+export declare const keyOf: (text: string) => string;
+/**
+ * Items merged: of siblings with the same words, the first keeps the others' children, at every level; a step if any
+ * was one. Items without words stay apart. @param {Item[]} items @returns {Item[]}
+ */
+export declare function mergeItems(items: Item[]): Item[];
+/**
+ * A map laid out, its boxes' sizes given (in em): the root's centre at the middle, its branches shared out to the end
+ * side (top to bottom) and the start side (bottom to top) so the two are as tall as they can be alike, each child a gap
+ * beyond its parent, siblings stacked and centred on it, spaced out further (up to four times) where the map would be
+ * flatter than its box (`aspect`, its width over its height). Each box gets its `x` and `y` (its top start corner, from the
+ * map's top start corner, mirrored if `rtl`) and its `side` (1 right of the root, -1 left); gives the map's size and its
+ * lines, each from a parent's side to its child's.
+ * @param {Box} root @param {{ rtl?: boolean, aspect?: number }} [how] @returns {{ width: number, height: number, lines: Line[] }}
+ */
+export declare function layoutMap(root: Box, { rtl, aspect }?: {
+    rtl?: boolean;
+    aspect?: number;
+}): {
+    width: number;
+    height: number;
+    lines: Line[];
+};
+/** A line as a curve leaving its parent and reaching its child level. @param {Line} line */
+export declare const curveOf: ({ x1, y1, x2, y2 }: Line) => string;
+/**
+ * A map drawn by render.js (`.deck-mindmap`, its plane, its lines' SVG with a group a branch, its tree as lists, each
+ * item's words a `.deck-map-node`) placed once it is on a page, and again as its words or its box change size: its
+ * words where the layout puts them, its lines, the whole shrunk to its box. @param {HTMLElement} map
+ */
+export declare function watchMap(map: HTMLElement): void;

package/dist/types/pptx.d.ts

@@ -1,7 +1,7 @@
 /**
  * @param {import('./deck.js').DeckView} view
  * @param {{ PptxGenJS: any, JSZip: any }} libraries
- * @returns {Promise<{ blob: Blob, report: { slides: number, charts: number, pictures: number, tables: number, placeholders: number } }>}
+ * @returns {Promise<{ blob: Blob, report: { slides: number, charts: number, pictures: number, tables: number, placeholders: number, maps: number, figures: number } }>}
  */
 export declare function toPptx(view: import('./deck.js').DeckView, { PptxGenJS, JSZip }: {
     PptxGenJS: any;
@@ -14,5 +14,7 @@ export declare function toPptx(view: import('./deck.js').DeckView, { PptxGenJS,
         pictures: number;
         tables: number;
         placeholders: number;
+        maps: number;
+        figures: number;
     };
 }>;

package/dist/types/render.d.ts

@@ -1,6 +1,6 @@
 export type Slide = import('./parse.js').Slide;
 export type Slot = import('./parse.js').Slot;
-export type Drawer = (element: HTMLElement, source: string) => void | Promise<void>;
+export type Drawer = (element: HTMLElement, source: string, options?: Record<string, any>) => void | Promise<void>;
 export type Context = {
     blocks: Record<string, Drawer>;
     resolve: (src: string) => string | null;
@@ -10,11 +10,12 @@ export type Context = {
     kit: import('./kit.js').Kit;
     lex: (markdown: string) => any[];
     slide: string;
+    deck?: import('./parse.js').Deck;
 };
 /** @typedef {import('./parse.js').Slide} Slide */
 /** @typedef {import('./parse.js').Slot} Slot */
-/** @typedef {(element: HTMLElement, source: string) => void | Promise<void>} Drawer */
-/** @typedef {{ blocks: Record<string, Drawer>, resolve: (src: string) => string | null, headings: 'real' | 'aria', number: (n: number) => string, total: number, kit: import('./kit.js').Kit, lex: (markdown: string) => any[], slide: string }} Context */
+/** @typedef {(element: HTMLElement, source: string, options?: Record<string, any>) => void | Promise<void>} Drawer */
+/** @typedef {{ blocks: Record<string, Drawer>, resolve: (src: string) => string | null, headings: 'real' | 'aria', number: (n: number) => string, total: number, kit: import('./kit.js').Kit, lex: (markdown: string) => any[], slide: string, deck?: import('./parse.js').Deck }} Context */
 /**
  * @param {string} tag @param {Record<string, string | number | boolean | undefined>} [attributes]
  * @param {(Node | string | null | undefined | false)[]} [children]
@@ -30,5 +31,22 @@ export declare function renderSlide(slide: Slide, context: Context): {
     element: HTMLElement;
     steps: number;
 };
+/** @param {Element} element @param {number} n */
+export declare const step: (element: Element, n: number) => void;
+/**
+ * @param {any} token @param {number} start where its raw starts in the source
+ * @param {Context} context @param {{ step: number } | null} stepped list items each a step
+ * @returns {HTMLElement | null}
+ */
+export declare function block(token: any, start: number, context: Context, stepped: {
+    step: number;
+} | null): HTMLElement | null;
+/**
+ * The options after a fence's language, as Slidev writes them (`mermaid {theme: 'neutral', scale: 0.8}`), read as YAML's
+ * flow, which JSON is too; none if they don't read. @param {string} info @returns {Record<string, any>}
+ */
+export declare function optionsOf(info: string): Record<string, any>;
+/** @param {number} from @param {number} to */
+export declare const range: (from: number, to: number) => string | undefined;
 /** @param {any[]} tokens @param {Context} context @returns {Node[]} */
 export declare function inline(tokens: any[] | undefined, context: Context): Node[];

package/dist/types/template.d.ts

@@ -9,6 +9,41 @@ export declare function kitFromTemplate(bytes: Uint8Array, { name }?: {
     kit: import('./kit.js').Kit;
     problems: string[];
 }>;
+export type Art = {
+    scheme: Record<string, number[] | null>;
+    map: Record<string, string>;
+    rels: Map<string, string>;
+    themeRels: Map<string, string>;
+    files: Map<string, () => Promise<Uint8Array>>;
+    size: number[];
+    styles: {
+        fill: string[];
+        line: string[];
+        bg: string[];
+    };
+    faces: {
+        major: string;
+        minor: string;
+    };
+    pictures: Map<string, Promise<string | null>>;
+    used: Set<string>;
+    noted: Set<string>;
+    ids: {
+        n: number;
+    };
+    defs: string[];
+    group?: string;
+};
+export type Part = {
+    name: string;
+    tag: string;
+    inner: string;
+    xml: string;
+};
+export type Colour = {
+    rgb: number[];
+    alpha: number;
+};
 /**
  * A kit's tokens in the W3C's Design Tokens format (DTCG 2025.10), as design tools read them: its colours light and
  * dark, its chart colours and its faces; `tokensFrom()` reads them back. @param {Record<string, any>} tokens

package/dist/types/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "0.2.0";
+export declare const VERSION = "0.4.0";

package/docs/format.md

@@ -36,13 +36,16 @@ Slidev's form, as `@slidev/parser` splits it, and the parts a deck for knowledge
 
 - **Slides** between lines holding only `---`. A `---` followed by a `key:` line opens that slide's settings, YAML up to the next `---` line; a ` ```yaml ` block at a slide's top does the same.
 - **The first slide's settings** are the deck's too (its headmatter): `title`, `lang`, `dir`, `colorSchema` (`auto`, `light`, `dark`), `transition`, `theme`, `themeConfig`, `kit`.
-- **A slide's settings:** `layout`, `transition` (`slide-left`, `slide-right`, `slide-up`, `fade`, `view-transition`; `a | b` for forward and back), `class` (`invert`, `text-center`), `image`, `background`, `alt`, `title`, `paginate`.
+- **A slide's settings:** `layout`, `transition` (`slide-left`, `slide-right`, `slide-up`, `fade`, `view-transition`; `a | b` for forward and back), `class` (`invert`, `text-center`), `image`, `background`, `alt`, `title`, `paginate`, and for the deck's contents `hideInToc`, `level` and, on the contents' own slide, `maxDepth`, as Slidev names them.
 - **Slots:** `::name::` alone on a line starts the slot of that name; what comes before is `default`.
 - **Notes:** the last HTML comment at a slide's end.
 - **Steps:** `<v-clicks>` and `</v-clicks>` around a list, each on its own line with empty lines around; `<v-click>` around a block.
 - **Code** in fences, with lines marked as Slidev marks them: ` ```ts {2,4-5} `.
-- **Charts:** ` ```echarts ` holding an ECharts option as JSON, data only.
-- **Diagrams:** ` ```mermaid ` holding Mermaid's language.
+- **Charts:** ` ```echarts ` holding an ECharts option as JSON, data only, drawn by ECharts in the deck's colours and type.
+- **Diagrams:** ` ```mermaid ` holding Mermaid's language, drawn by Pele, with its own settings (a `---` block with `config:`, `%%{init: {…}}%%`); its colours, a pie's and a chart's too, are the deck's, light or dark.
+- **A fence's options,** after its language as Slidev writes them, YAML's flow or JSON: ` ```mermaid {scale: 0.8} ` takes at most that share of its box; the others go to Pele as its settings (`theme` aside: the colours are the deck's). They reach a host's drawer as its third argument.
+- **Mind maps:** `layout: mindmap`, its lists drawn as one map (below).
+- **Figures:** a layout that draws a slide's lists as cards, key figures, a timeline, chevrons, a programme, a pyramid or a bento, sets its `##` parts face to face or in a matrix, or shows the deck's contents (below).
 - **Markdown** as CommonMark and GFM have it: headings, lists, task lists, tables, quotes, emphasis, links, pictures. A picture alone on its line fills what its slot leaves, whole, whatever its own size.
 
 ### Added by deck
@@ -51,6 +54,84 @@ Slidev's form, as `@slidev/parser` splits it, and the parts a deck for knowledge
 - `kit`: tokens and layouts as data ([kits.md](kits.md)).
 - A layout chosen from what a slide holds when it names none.
 - A Morph between two slides that share a heading, a picture or a list item, with `transition: view-transition`.
+- A mind map: a slide on `layout: mindmap` (or a kit's layout with `lists: mindmap`) draws its lists as one map.
+- Figures drawn from a slide's lists or parts, and the deck's contents, by the layouts below.
+
+### A mind map
+
+````md
+---
+layout: mindmap
+---
+
+## What a second oven changes
+
+### Mornings
+
+- Croissants until noon
+- No queue at 7
+
+### Bread
+
+- A batch at noon
+  - For the lunch crowd
+- Rye on Fridays
+
+### Mornings
+
+- Coffee with the first batch
+````
+
+- **Each item a node,** its indentation its branching, at any depth, with any marker; a line that is no item goes on with the item above it.
+- **Every list on the slide is merged into one map.** A heading just before a list, other than the one the slide opens with, is that list's node. Items with the same words at the same place (emphasis and case aside) are one node, their children together: the slide above has one `Mornings`, with three children.
+- **One root.** When the lists come down to one item, it is the root, and the heading the slide opens with stays its title, unless it says the same. Else the heading the slide opens with is the root, drawn in the middle of the map and not above it; with none, a dot.
+- **Laid out** as maps are drawn by hand: the root in the middle, its branches shared out to either side, clockwise from the side a line ends (the right, the left right to left), each branch in a colour of the charts', the whole shrunk to what the slide leaves it and spread out to its height. Paragraphs before or after the lists stay above or under the map.
+- **Steps:** lists inside `<v-clicks>` show one branch a click.
+- **A chart or a diagram in a node:** a ` ```echarts ` or ` ```mermaid ` block fenced under an item, indented with it, is drawn in that item's node, under its words, at a size of its own.
+- **Changed in place,** each node's words as a list item's are, and in PowerPoint as its own shapes: a box with words for each node, a curve for each line.
+
+### Figures
+
+A slide on one of these layouts says what it shows in plain Markdown; the layout draws it. An item's **lead** is the bold it starts with, its label; the rest of its line is its words; a colon or a dash between them is left out. Everything else on the slide (its heading, a line above or under) stays where it is.
+
+| Layout | Written as | Drawn as |
+|---|---|---|
+| `summary` | a heading | the deck's contents under it (below) |
+| `section`, `subsection` | a heading alone | a part's title, on ink; a subsection's, smaller, on the soft fill |
+| `statement` | one sentence | the sentence, large, in the middle |
+| `quote` | `> words`, who said them under it; `image:` | the quote, over the picture filling the slide behind a veil when it has one |
+| `steps` | `- **Find** bakers through the school` | a row of cards, one an item, each numbered |
+| `metrics` | `- **56%** of people`, or lines `**56%** of people` | a row of 2 to 4 key figures, big, each over what it counts; a number starting a line is its lead too |
+| `timeline` | `- **Q1** The shop fitted` | milestones along a line, each lead over its dot, its words under it |
+| `process` | `1. **Sign** the lease` | chevrons, each holding a step's lead, its words under it, pointing the way the language reads |
+| `agenda` | `- **6:00 PM** Doors open` | a programme, a time and its words a row, in two columns from seven rows; a time starting a line is its lead too |
+| `pyramid` | `- **Love** They tell their friends` | levels stacked, the first the narrowest, on top, the last the widest; each level's words beside it |
+| `bento` | `- **A terrace** for forty` | a mosaic: the first item a big tile on the fill, the next 2 to 4 tiles around it |
+| `versus` | two `##` parts, each with its words | face to face, a "VS" medallion between them, the second on the fill |
+| `matrix` | four `##` parts | a grid of two by two, the top one at the end (the second) on the fill |
+
+- **Items** are every list's on the slide, in order, at their first list's place; an item's own list, chart or diagram, indented under it, is drawn in its card, tile or row. Lines that all start in bold are items too, as key figures are often written without a list.
+- **Parts** start at each heading of the level the slide's last heading has. The heading the slide opens with is its title when it is of a higher level (`#` over `##` parts), or when there is one more heading of their level than the parts (`## Where to open`, then two `##`). Parts take everything under their heading: paragraphs, lists, a chart.
+- **Steps:** items in `<v-clicks>` show one a click; a `<v-click>` around a list shows the whole figure at once; a `<v-click>` in a part, that block.
+- **Right to left,** the figures are mirrored: chevrons point left, the timeline and cards run from the right, the second part sits on the left.
+- **Changed in place,** a lead and its words each, as a list item's words are, when the item is one line.
+- **In PowerPoint,** each figure is PowerPoint's own shapes (cards, chevrons and levels as their outlines, dots, rules) and boxes of words, where the slide has them.
+
+### The deck's contents
+
+````md
+---
+layout: summary
+---
+
+## What we will cover
+````
+
+`summary` lists the deck's parts under the slide's own words, as Slidev's `<Toc>` reads them: each slide's `title`, else its first heading. A slide with `hideInToc: true` is left out, as are the contents' own slide, a cover, an introduction, the end and slides with no title; `hideInToc: false` brings one back.
+
+- **Where the deck has parts** (slides on `section` or `subsection`, or with a `level`), the contents are the parts: a section at level 1, numbered, its subsections under it. Else they are every slide with a title, at its heading's level.
+- **`maxDepth`** on the contents' slide keeps the levels above it (2 by default, 1 for sections alone).
+- **In two columns** from seven rows. Each row goes to its slide when chosen (a click, or Enter).
 
 ### Also read, as brains write it
 
@@ -61,7 +142,7 @@ Brains blend dialects. These are read, never rewritten:
 - Slides at headings of the first two levels when a deck has no `---` at all, as Pandoc splits a document.
 - Steps written as `<li v-click>`.
 - A `---` followed by words, which Slidev would take for settings, as a new slide.
-- Names brains give layouts: `title`, `two-columns`, `comparison`, `divider`, `thanks`…
+- Names brains give layouts: `title`, `two-columns`, `comparison`, `divider`, `thanks`, `toc`, `kpis`, `roadmap`, `schedule`, `vs`, `quadrant`…
 
 `deckIn(answer)` finds a deck in a brain's answer and mends what brains get wrong most: a deck fenced as ` ```markdown ` or with nothing, a chart's fence inside three backticks, settings after an empty line, steps without their empty lines, a chart fenced as ` ```json `, words after a slot's marker.
 

package/docs/host.md

@@ -12,7 +12,7 @@ const view = createDeck(document.querySelector('#deck'), {
   lang: 'fr', dir: 'ltr',       // else the deck's own, else the page's
   kit,                          // the host's kit: an organisation's, a person's, a project's, merged
   scheme: 'auto',               // 'light', 'dark' or 'auto', over the deck's colorSchema
-  blocks: { echarts, mermaid }, // drawers for fenced blocks: (box, source) => void | Promise<void>
+  blocks: { echarts, mermaid }, // drawers for fenced blocks: (box, source, options) => void | Promise<void>, options those after the fence's language
   resolve: (src) => url,        // a picture's address as the page can load it, or null
   strings,                      // the bar's words, and `slide` and `carousel` for screen readers, else deck's own (en, fr, ar, ja)
   lex: (markdown) => tokens,    // how a slide's Markdown is read: the host's own marked, its extensions too; else marked's GFM
@@ -32,7 +32,7 @@ Every block that can be changed by hand carries `data-edit="from-to"`, the offse
 
 ## Drawers
 
-`defaultBlocks({ base, root, versions })` gives the drawers a file uses alone: ECharts as SVG in the deck's colours and type, its category axis mirrored right to left; Pele for Mermaid's language, its SVG shown as a picture coloured by Pele's variables, its words the picture's text. Each library loads the first time a slide needs it, from `base` (jsDelivr's npm mirror, or a `node_modules/` folder, `libraryAt()`). A host with a strict policy gives its own: Pele's SVG holds style attributes, so it belongs in an image or a worker's output, not in the page's DOM.
+`defaultBlocks({ base, root, versions })` gives the drawers a file uses alone: ECharts as SVG in the deck's colours and type, its category axis mirrored right to left; Pele for Mermaid's language, its SVG shown as a picture coloured by Pele's variables (its charts' series too), again when the scheme changes, its words the picture's text, the fence's options its settings and `scale`. Each library loads the first time a slide needs it, from `base` (jsDelivr's npm mirror, or a `node_modules/` folder, `libraryAt()`). A host with a strict policy gives its own: Pele's SVG holds style attributes, so it belongs in an image or a worker's output, not in the page's DOM.
 
 ## PowerPoint
 
@@ -40,9 +40,9 @@ Every block that can be changed by hand carries `data-edit="from-to"`, the offse
 const { blob, report } = await toPptx(view, { PptxGenJS, JSZip })
 ```
 
-A kit from a PowerPoint template, and a kit's tokens out, are `@codename/deck/template`'s (`kitFromTemplate`, `tokensToDtcg`, [kits.md](kits.md)), which a host imports only when it reads or writes one; `logoOf` and `CORNERS` check a kit's logo and its corner before it is kept.
+A kit from a PowerPoint template, and a kit's tokens out, are `@codename/deck/template`'s (`kitFromTemplate`, `tokensToDtcg`, [kits.md](kits.md)), which a host imports only when it reads or writes one; `logoOf` and `CORNERS` check a kit's logo and its corner before it is kept, and `rgbOf` a colour as deck reads it.
 
-PptxGenJS 4 (its bundle carries JSZip) is the host's to load, on demand. The file is made from the deck as drawn: a slide layout per deck layout, named by its label in the deck's language, with a placeholder for its title and each slot; lists as lists with their levels; tables; bars, lines, areas, pies, rings, points and radars as native charts with their numbers, other charts and diagrams as pictures, and pictures, alone on their line or beside the words, as pictures; notes; transitions; the kit's colours as the theme. `report` counts slides, charts, tables, pictures and placeholders.
+PptxGenJS 4 (its bundle carries JSZip) is the host's to load, on demand. The file is made from the deck as drawn: a slide layout per deck layout, named by its label in the deck's language, with a placeholder for its title and each slot; lists as lists with their levels; tables; mind maps as PowerPoint's own shapes, a box with words for each node and a curve for each line; figures (cards, key figures, timelines, chevrons, programmes, pyramids, bentos, parts face to face or in a matrix, the deck's contents) as PowerPoint's own shapes and boxes of words, a quote's veil over its picture as a see-through rectangle; bars, lines, areas, pies, rings, points and radars as native charts with their numbers, other charts and diagrams as pictures, and pictures, alone on their line or beside the words, as pictures; a layout's art as one picture on its slide layout; notes; transitions; the kit's colours as the theme. `report` counts slides, charts, tables, pictures, placeholders, mind maps and figures.
 
 ## Files
 

package/docs/kits.md

@@ -27,7 +27,7 @@ Flat:
 
 | Token | What it is |
 |---|---|
-| `paper`, `ink`, `primary` | Colours, as `#rgb` or `#rrggbb` |
+| `paper`, `ink`, `primary` | Colours, as `#rgb`, `#rrggbb`, `rgb()` or `rgba()` (`rgb(0 85 164 / 50%)` too, or `#rrggbbaa`); one see-through is seen over the paper it is on |
 | `muted`, `soft` | Optional: secondary words, a pale fill |
 | `voice` | `calm`, `elegant`, `bold`, `friendly`: the device's own faces for headings and text |
 | `fonts` | Optional: `{ heading: [...], body: [...] }`, face stacks, over the voice |
@@ -55,17 +55,29 @@ A logo shows in its corner, small, or big where a layout says (`logo`: a cover,
 | `paper` | `paper`, `fill` (the primary), `ink`, `soft` | `paper` |
 | `title` | `normal`, `large`, `huge` | `normal` |
 | `logo` | `small`, `big`, `none`: how the kit's logo shows | `small`; `big` on `cover`, `intro`, `end`; `none` on `image`, `full`, `none` |
+| `lists` | `bullets`, `mindmap`, `steps`, `metrics`, `timeline`, `process`, `agenda`, `pyramid`, `bento`: each slot's lists as lists, merged into one mind map ([format.md](format.md#a-mind-map)), or drawn as that figure ([format.md](format.md#figures)) | `bullets`; the layout's name on deck's own |
+| `parts` | `none`, `versus`, `matrix`: each slot's `##` parts as they come, face to face, or in a grid of two by two; over `lists` | `none`; `versus` and `matrix` on deck's own |
+| `contents` | `true` for the deck's contents under the slot's words ([format.md](format.md#the-decks-contents)) | `false`; `true` on `summary` |
 | `pptx` | Title Slide, Title and Content, Section Header, Two Content, Comparison, Title Only, Blank, Content with Caption, Picture with Caption | by its slots |
 | `numbered` | `false` for no slide number | `true` |
+| `art` | Up to 8 names of the kit's `pictures`, drawn over the whole slide, layer over layer, behind the words, as a template draws them | none |
 | `label` | Words, or words by language: `{ en: …, fr: … }`; PowerPoint's layout is named so | the name |
 | `intent`, `use_when`, `avoid_when` | Words for the brain choosing a layout | none |
 | budgets | `required`, `max_words`, `max_chars`, `items: [min, max]`, `item_max_words`, `heading_max_words`, `kind` | none |
 
+A layout with art is laid out as its template is: its grid edge to edge (its margins are `.` tracks), left to right whatever the language, its number too, the words keeping theirs. In PowerPoint, its art is one picture on its slide layout.
+
 A catalog's `types` are read as `layouts`. A layout given as `false` turns one of deck's own off (`image: false`), but `default`. Budgets are kept with each layout for a linter and for the brain; deck does not check them yet.
 
+## Pictures
+
+A kit's `pictures` are names (`a-z`, `0-9`, `-`) of pictures inside the kit: PNG, JPEG, GIF, WebP or SVG as a `data:` address, base64, or an SVG written out (`data:image/svg+xml,…`), 3 MB each at most, never an address to fetch. A layout's `art` names them, so a layer many layouts draw (a template's master) is kept once.
+
 ## From a PowerPoint template, and out
 
-`@codename/deck/template`, a module of its own that a host loads only when it needs it, reads a company's template (`.potx`, `.pptx`, or an Office theme, `.thmx`) into a kit: `kitFromTemplate(bytes, { name })` gives `{ kit, problems }`. Its theme's first light is `paper`, its first dark `ink`, its first accent `primary`, its second dark and light `muted` and `soft`, its six accents `series`, its heading and body faces `fonts`; the first picture on its slide master a browser draws is its `logo`, in the corner it sits in. Each slide layout is a layout of the kit by its name: PowerPoint's Title Slide, Title and Content, Section Header, Two Content, Title Only and Blank take the place of `cover`, `default`, `section`, `two-cols-header`, `center` and `none`; the others are added, slugged (`content-with-caption`). Its placeholders become a grid: the title, with the box under it across its columns, the `default` slot; the other boxes `left`, `middle` and `right` side by side, else `s1`, `s2`…, or the names deck gave them when deck wrote the file (`body-right`); the margins are deck's. Its paper is its background's colour by its role, its title `huge` for a title slide's; a layout whose placeholders make no grid is left out, with a reason.
+`@codename/deck/template`, a module of its own that a host loads only when it needs it, reads a company's template (`.potx`, `.pptx`, or an Office theme, `.thmx`) into a kit: `kitFromTemplate(bytes, { name })` gives `{ kit, problems }`. Its theme's first light is `paper`, its first dark `ink`, its first accent `primary`, its second dark and light `muted` and `soft`, its six accents `series`, its heading and body faces `fonts`; the first picture on its slide master a browser draws is its `logo`, in the corner it sits in. Each slide layout is a layout of the kit by its name: PowerPoint's Title Slide, Title and Content, Section Header, Two Content, Title Only and Blank take the place of `cover`, `default`, `section`, `two-cols-header`, `center` and `none`; the others are added, slugged (`content-with-caption`). Its placeholders become a grid: the title, with the box under it across its columns, the `default` slot; the other boxes `left`, `middle` and `right` side by side, else `s1`, `s2`…, or the names deck gave them when deck wrote the file (`body-right`); the margins are deck's. Its paper is its background's colour by its role, its title `huge` for a title slide's, its words aligned as its title's; a layout whose placeholders make no grid is left out, with a reason.
+
+Each layout's art is what a slide on it shows besides its placeholders, as SVG layers among the kit's `pictures`: its background where it isn't a colour of the theme (another colour, a gradient, a picture), the master's shapes unless the layout hides them, then its own, in their order. Shapes are PowerPoint's usual ones and any of its own geometry, filled with a colour, a gradient or a picture and outlined as the template says (their style's fill and line where they give none); pictures cropped, see-through and recoloured (duotone, brightness, contrast) as PowerPoint draws them, an SVG beside a picture in its stead; groups scaled into place; a shape's words in its own size, weight, colour and face, in capitals where it says, aligned and wrapped in its box; fields (a slide's number, its date) are deck's. A layout with art keeps its words where the template has them; light words over it are on `ink`; where the master's logo is in its art, deck draws none of its own; and the kit's paper and words by night are its own by day, as the template has one look. Pictures browsers don't draw (EMF, WMF, TIFF) and shapes deck doesn't know are left out, with a reason; so is a picture over 2 MB.
 
 `tokensToDtcg(tokens)` writes a kit's tokens in the W3C's Design Tokens format, which `tokensFrom()` reads back.
 
@@ -75,13 +87,18 @@ A catalog's `types` are read as `layouts`. A layout given as `false` turns one o
 |---|---|---|
 | `cover`, `intro`, `end` | one | Title Slide |
 | `default` | one | Title and Content |
-| `section` | one | Section Header |
+| `section`, `subsection` | one | Section Header |
+| `summary` | one, the deck's contents under it | Title and Content |
 | `two-cols` | `default`, `right` | Two Content |
 | `two-cols-header` | `default` across, `left`, `right`, `bottom` | Comparison |
 | `three-cols` | `default` across, `left`, `middle`, `right` | Comparison |
-| `center`, `statement`, `fact`, `quote` | one | Title Only |
+| `center`, `statement`, `fact` | one | Title Only |
+| `quote` | one, over the slide's `image` when it has one | Title Only |
 | `image-left`, `image-right` | one, beside the slide's `image` | Picture with Caption |
 | `image`, `full`, `none` | one | Blank |
+| `mindmap` | one, its lists as one mind map | Title Only |
+| `steps`, `metrics`, `timeline`, `process`, `agenda`, `pyramid`, `bento` | one, its lists as that figure | Title Only |
+| `versus`, `matrix` | one, its parts face to face or in a matrix | Title Only |
 
 ## A slide that names none
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codename/deck",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Slide decks as one web page: Markdown in Slidev's form inside a .deck.html file any browser presents, a renderer that runs anywhere, kits of layouts and looks, and an editable PowerPoint out",
   "license": "MIT",
   "type": "module",