@codename/deck 0.3.0 → 0.4.0

package/dist/types/blocks.d.ts

@@ -14,12 +14,14 @@ export type Where = {
 export declare const libraryAt: (base: string, name: string, version: string, file: string) => string;
 /** @param {Where} where */
 export declare function defaultBlocks({ base, root, versions }: Where): {
-    /** @param {HTMLElement} box @param {string} source */
+    /** @param {HTMLElement} box @param {string} source the chart's option, as JSON */
     echarts(box: HTMLElement, source: string): Promise<void>;
     /**
      * A diagram written in Mermaid's language, drawn by Pele (Obsidian's, MIT): every kind Mermaid
-     * 12.1 has, no DOM needed, an SVG with no script or HTML in it. Shown as a picture, its colours
-     * the deck's, set as Pele's variables inside it. @param {HTMLElement} box @param {string} source
+     * 12.1 has, no DOM needed, an SVG with no script or HTML in it; its own settings (a `---` config
+     * block, `%%{init: …}%%`) read by Pele, the fence's options too, `scale` the share of its box it
+     * takes. Shown as a picture, its colours the deck's. @param {HTMLElement} box @param {string} source
+     * @param {Record<string, any>} [options]
      */
-    mermaid(box: HTMLElement, source: string): Promise<void>;
+    mermaid(box: HTMLElement, source: string, options?: Record<string, any>): Promise<void>;
 };

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/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,6 +23,9 @@ 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[];
@@ -74,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/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/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "0.3.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
 
@@ -42,7 +42,7 @@ 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, 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; 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 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

@@ -55,6 +55,9 @@ 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 |
@@ -84,13 +87,18 @@ Each layout's art is what a slide on it shows besides its placeholders, as SVG l
 |---|---|---|
 | `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.3.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",

package/src/blocks.js

@@ -2,8 +2,10 @@
 // from `base` (a CDN by default) the first time a slide needs it, never before. A chart is data,
 // read with JSON.parse; it takes the deck's colours and type, light or dark, and is drawn as SVG.
 // A diagram is drawn by Pele from Mermaid's language as SVG, then shown as a picture, so nothing it
-// makes runs or joins the page; its words are its picture's text for whoever can't see it. A host gives
-// its own drawers instead.
+// makes runs or joins the page; its words are its picture's text for whoever can't see it; its colours
+// (a pie's, a chart's too) are the deck's, again when the scheme changes. Options after a fence's
+// language, as Slidev writes them (```mermaid {scale: 0.8}), reach the drawer. A host gives its own
+// drawers instead.
 
 /** @typedef {{ base: string, root: HTMLElement, versions?: { echarts?: string, pele?: string } }} Where */
 
@@ -34,12 +36,22 @@ export function defaultBlocks({ base, root, versions = {} }) {
   const { echarts: chartsAt = '6.1.0', pele: diagramsAt = '1.10.0' } = versions
   /** @type {Set<{ chart: any, option: any, box: HTMLElement }>} */
   const charts = new Set()
+  /** @type {Set<{ picture: HTMLImageElement, svg: string }>} */
+  const diagrams = new Set()
   /** @type {any} */
   let colours = null
   root.addEventListener('deck-scheme', (event) => {
     colours = /** @type {CustomEvent} */ (event).detail.colours
     for (const one of charts) one.chart.setOption(themed(one.option, one.box), true)
+    for (const one of diagrams) one.picture.src = pictured(one.svg)
   })
+  // A diagram's SVG as a picture in the deck's colours, set as Pele's variables inside it.
+  const pictured = (/** @type {string} */ svg) => {
+    const font = getComputedStyle(root).getPropertyValue('--deck-body') || 'system-ui, sans-serif'
+    const series = Array.from({ length: 8 }, (_, n) => `--pele-series-${n + 1}:${colours?.series?.[n % (colours?.series?.length || 1)]}`).join(';')
+    const look = `--pele-bg:transparent;--pele-fg:${colours?.ink};--pele-muted:${colours?.muted};--pele-line:${colours?.muted};--pele-surface:${colours?.soft};--pele-surface-alt:${colours?.line};--pele-border:${colours?.primary};--pele-accent:${colours?.primary};${series};--pele-font:${font.replace(/[<>"]/g, '')}`
+    return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg.replace(/^(<svg\b[^>]*>)/, `$1<style>svg{${look}}</style>`))}`
+  }
   // Its type sized with the slide's, its category axis read from the right in a language written so.
   const themed = (/** @type {any} */ option, /** @type {HTMLElement} */ box) => {
     const size = parseFloat(getComputedStyle(box).fontSize) || 16
@@ -61,7 +73,7 @@ export function defaultBlocks({ base, root, versions = {} }) {
     }
   }
   return {
-    /** @param {HTMLElement} box @param {string} source */
+    /** @param {HTMLElement} box @param {string} source the chart's option, as JSON */
     async echarts(box, source) {
       const option = JSON.parse(source)
       const echarts = await script(libraryAt(base, 'echarts', chartsAt, 'dist/echarts.min.js'), 'echarts')
@@ -79,17 +91,22 @@ export function defaultBlocks({ base, root, versions = {} }) {
     },
     /**
      * A diagram written in Mermaid's language, drawn by Pele (Obsidian's, MIT): every kind Mermaid
-     * 12.1 has, no DOM needed, an SVG with no script or HTML in it. Shown as a picture, its colours
-     * the deck's, set as Pele's variables inside it. @param {HTMLElement} box @param {string} source
+     * 12.1 has, no DOM needed, an SVG with no script or HTML in it; its own settings (a `---` config
+     * block, `%%{init: …}%%`) read by Pele, the fence's options too, `scale` the share of its box it
+     * takes. Shown as a picture, its colours the deck's. @param {HTMLElement} box @param {string} source
+     * @param {Record<string, any>} [options]
      */
-    async mermaid(box, source) {
+    async mermaid(box, source, options = {}) {
       const pele = await script(libraryAt(base, 'pele', diagramsAt, 'dist/pele.global.js'), 'pele')
       const font = getComputedStyle(root).getPropertyValue('--deck-body') || 'system-ui, sans-serif'
-      const { svg } = pele.render(source, { fontFamily: font, links: false, images: false, autoDirection: true, maxWidth: Math.max(320, box.clientWidth * 1.4) })
-      const look = `--pele-bg:transparent;--pele-fg:${colours?.ink};--pele-muted:${colours?.muted};--pele-line:${colours?.muted};--pele-surface:${colours?.soft};--pele-surface-alt:${colours?.line};--pele-border:${colours?.primary};--pele-accent:${colours?.primary};--pele-font:${font.replace(/[<>"]/g, '')}`
+      const { scale, theme, ...config } = options
+      const { svg } = pele.render(source, { fontFamily: font, links: false, images: false, autoDirection: true, maxWidth: Math.max(320, box.clientWidth * 1.4), ...(Object.keys(config).length && { config }) })
       const picture = document.createElement('img')
       picture.alt = source
-      picture.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg.replace(/^(<svg\b[^>]*>)/, `$1<style>svg{${look}}</style>`))}`
+      picture.src = pictured(svg)
+      const share = Number(scale)
+      if (share > 0 && share < 1) for (const side of ['max-inline-size', 'max-block-size']) picture.style.setProperty(side, `${share * 100}%`)
+      diagrams.add({ picture, svg })
       const place = document.createElement('div')
       place.className = 'deck-diagram'
       place.append(picture)