@codename/deck 0.2.0 → 0.3.0

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.3.0";

package/docs/host.md

@@ -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; 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.
 
 ## 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 |
@@ -57,15 +57,24 @@ A logo shows in its corner, small, or big where a layout says (`logo`: a cover,
 | `logo` | `small`, `big`, `none`: how the kit's logo shows | `small`; `big` on `cover`, `intro`, `end`; `none` on `image`, `full`, `none` |
 | `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.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codename/deck",
-  "version": "0.2.0",
+  "version": "0.3.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/deck.css

@@ -58,6 +58,13 @@
 :is(.deck[data-scheme="light"] :is(.deck-slide[data-paper="ink"], .deck-class-invert), .deck[data-scheme="dark"] .deck-slide:is([data-paper="paper"], [data-paper="soft"]):not(.deck-class-invert), .deck[data-fill="dark"] .deck-slide[data-paper="fill"]) .deck-logo.is-dark { display: block; }
 :is(.deck[data-scheme="light"] :is(.deck-slide[data-paper="ink"], .deck-class-invert), .deck[data-scheme="dark"] .deck-slide:is([data-paper="paper"], [data-paper="soft"]):not(.deck-class-invert), .deck[data-fill="dark"] .deck-slide[data-paper="fill"]) .deck-logo:not(.has-dark, .is-dark) { background: #fff; padding: 0.5cqi; border-radius: 0.5cqi; }
 
+/* A layout's art (docs/kits.md), as its template draws it, behind words that sit where the template has them: its grid edge to edge, the slide laid out left to right, its number too. */
+.deck-art { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; pointer-events: none; }
+.deck-slide.has-art { direction: ltr; }
+.has-art .deck-canvas { padding: 0; gap: 0; }
+.has-art .deck-slot { padding: 0.5cqi 1cqi; }
+.deck[dir="rtl"] .has-art .deck-slot { direction: rtl; }
+
 /* Layouts from their kit's definition: the paper they are on, where their words sit, how big their heading is. */
 .deck-slide[data-paper="fill"] { background: var(--deck-fill); color: var(--deck-on-fill); }
 .deck-slide[data-paper="ink"] { background: var(--deck-ink); color: var(--deck-paper); }

package/src/deck.js

@@ -8,7 +8,7 @@
 // the deck changes or is saved.
 import { parseDeck } from './parse.js'
 import { renderSlide, h } from './render.js'
-import { tokensOf, schemeOf, VOICES, hex, contrast } from './look.js'
+import { tokensOf, schemeOf, VOICES, rgbOf, contrast } from './look.js'
 import { mergeKits } from './kit.js'
 import { stringsFor } from './strings.js'
 import { Lexer } from 'marked'
@@ -108,7 +108,7 @@ export function createDeck(root, options) {
     })) root.style.setProperty(`--deck-${name}`, value)
     root.dataset.scheme = scheme
     // Whether the primary as a fill is dark, for a logo's dark one there.
-    root.dataset.fill = ((fill) => (contrast(fill, [255, 255, 255]) > contrast(fill, [0, 0, 0]) ? 'dark' : 'light'))(hex(tokens.primary) ?? [247, 197, 49])
+    root.dataset.fill = ((fill) => (contrast(fill, [255, 255, 255]) > contrast(fill, [0, 0, 0]) ? 'dark' : 'light'))(rgbOf(tokens.primary) ?? [247, 197, 49])
     root.dispatchEvent(new CustomEvent('deck-scheme', { detail: { scheme, colours, tokens } }))
   }
   const chooseScheme = () => {

package/src/index.js

@@ -3,7 +3,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/src/kit.js

@@ -3,13 +3,14 @@
 // deck's own kit holds the usual layouts; a host's (an organisation's, a project's) and the deck
 // file's own `kit:` go over it, in that order. A layout is a grid: its slots by name, the areas
 // they take, its tracks, how its words sit, what paper it is on, how big its logo shows, and the
-// PowerPoint layout it is nearest to; a kit may turn one of the usual layouts off. Its tokens may
-// hold a logo, a picture inside the kit and never an address. Everything is checked against a small
-// grammar; what fails is dropped, with a reason. Pure.
+// PowerPoint layout it is nearest to, and the art a template draws behind it, layers among the kit's
+// pictures; a kit may turn one of the usual layouts off. Its tokens may hold a logo, a picture inside
+// the kit and never an address, as its pictures are. Everything is checked against a small grammar;
+// what fails is dropped, with a reason. Pure.
 
 /** @typedef {{ required?: boolean, max_words?: number, max_chars?: number, items?: [number, number], item_max_words?: number, heading_max_words?: number, kind?: string }} Budget */
-/** @typedef {{ label?: Record<string, string> | string, intent?: string, use_when?: string, avoid_when?: string, slots: string[], budgets: Record<string, Budget>, areas: string[][], columns: string[], rows: string[], align: 'start' | 'center' | 'end', justify: 'start' | 'center' | 'end', paper: 'paper' | 'fill' | 'ink' | 'soft', title: 'normal' | 'large' | 'huge', logo: 'big' | 'small' | 'none', pptx: string, numbered: boolean }} Layout */
-/** @typedef {{ name?: string, tokens: Record<string, any>, layouts: Record<string, Layout> }} Kit */
+/** @typedef {{ label?: Record<string, string> | string, intent?: string, use_when?: string, avoid_when?: string, slots: string[], budgets: Record<string, Budget>, areas: string[][], columns: string[], rows: string[], align: 'start' | 'center' | 'end', justify: 'start' | 'center' | 'end', paper: 'paper' | 'fill' | 'ink' | 'soft', title: 'normal' | 'large' | 'huge', logo: 'big' | 'small' | 'none', pptx: string, numbered: boolean, art?: string[] }} Layout */
+/** @typedef {{ name?: string, tokens: Record<string, any>, layouts: Record<string, Layout>, pictures: Record<string, string> }} Kit */
 
 const NAME = /^[a-z][a-z0-9-]{0,31}$/
 const TRACK = /^(auto|min-content|max-content|\d{1,2}(\.\d)?fr|\d{1,3}%)$/
@@ -24,6 +25,12 @@ export const CORNERS = ['top-end', 'top-start', 'bottom-end', 'bottom-start']
  */
 export const logoOf = (value) => (typeof value === 'string' && value.length <= 700_000 && /^data:image\/(png|jpeg|gif|webp|svg\+xml);base64,[a-z0-9+/]+=*$/i.test(value) ? value : 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 const artOf = (value) => (typeof value === 'string' && value.length <= 3_145_728 && /^data:image\/(?:(?:png|jpeg|gif|webp|svg\+xml);base64,[a-z0-9+/]+=*|svg\+xml,[\w.!~*'()%/+=-]*)$/i.test(value) ? value : null)
+
 /** The names brains give the usual layouts, for the ones deck has. */
 export const ALIASES = /** @type {Record<string, string>} */ ({
   title: 'cover', 'title-slide': 'cover', 'two-columns': 'two-cols', 'two-column': 'two-cols', columns: 'two-cols', comparison: 'two-cols-header',
@@ -34,6 +41,7 @@ export const ALIASES = /** @type {Record<string, string>} */ ({
 export const STANDARD = /** @type {Kit} */ ({
   name: 'standard',
   tokens: {},
+  pictures: {},
   layouts: Object.fromEntries(Object.entries(/** @type {Record<string, any>} */ ({
     default: { label: { en: 'Title and content', fr: 'Titre et contenu' }, pptx: 'Title and Content' },
     cover: { label: { en: 'Cover', fr: 'Couverture' }, justify: 'center', paper: 'fill', title: 'huge', logo: 'big', pptx: 'Title Slide', numbered: false },
@@ -98,12 +106,14 @@ export function layoutOf(given) {
     return value
   }
   const label = typeof given.label === 'string' || (given.label && typeof given.label === 'object') ? given.label : undefined
+  const art = Array.isArray(given.art) && given.art.length <= 8 && given.art.every((/** @type {unknown} */ one) => typeof one === 'string' && NAME.test(one)) ? given.art : undefined
+  if (given.art !== undefined && !art) problems.push('art is not 8 names at most')
   const words = (/** @type {any} */ v) => (typeof v === 'string' ? v.slice(0, 300) : undefined)
   return {
     layout: /** @type {Layout} */ ({
       label, intent: words(given.intent), use_when: words(given.use_when), avoid_when: words(given.avoid_when), slots, budgets, areas: rows, columns, rows: rowTracks,
       align: pick('align', 'start'), justify: pick('justify', 'start'), paper: pick('paper', 'paper'), title: pick('title', 'normal'), logo: pick('logo', 'small'),
-      pptx: PPTX.includes(given.pptx) ? given.pptx : slots.length > 1 ? 'Comparison' : 'Title and Content', numbered: given.numbered !== false,
+      pptx: PPTX.includes(given.pptx) ? given.pptx : slots.length > 1 ? 'Comparison' : 'Title and Content', numbered: given.numbered !== false, art,
     }),
     problems,
   }
@@ -123,14 +133,15 @@ function clean(given) {
 /**
  * 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 function tokensFrom(given) {
   if (!given || typeof given !== 'object') return {}
   if (!JSON.stringify(given).includes('"$value"')) return given
   const value = (/** @type {any} */ t) => (t && typeof t === 'object' && '$value' in t ? t.$value : t)
-  const colour = (/** @type {any} */ t) => { const v = value(t); return typeof v === 'string' ? v : typeof v?.hex === 'string' ? v.hex : undefined }
+  // A colour object's alpha kept, as #rrggbbaa.
+  const colour = (/** @type {any} */ t) => { const v = value(t); return typeof v === 'string' ? v : typeof v?.hex === 'string' ? `${v.hex}${typeof v.alpha === 'number' && v.alpha < 1 ? Math.round(Math.max(0, v.alpha) * 255).toString(16).padStart(2, '0') : ''}` : undefined }
   const face = (/** @type {any} */ t) => { const v = value(t); return Array.isArray(v) ? v.map(String) : typeof v === 'string' ? [v] : undefined }
   const NAMES = /** @type {const} */ ({ bg: 'paper', background: 'paper', paper: 'paper', fg: 'ink', text: 'ink', ink: 'ink', accent: 'primary', primary: 'primary', muted: 'muted', surface: 'soft', soft: 'soft' })
   const group = (/** @type {any} */ g) => Object.fromEntries(Object.entries(g ?? {}).filter(([k]) => k in NAMES).map(([k, t]) => [NAMES[/** @type {keyof typeof NAMES} */ (k)], colour(t)]).filter(([, v]) => v))
@@ -146,13 +157,13 @@ export function tokensFrom(given) {
 }
 
 /**
- * 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 function mergeKits(...kits) {
   /** @type {Kit} */
-  const kit = { name: 'standard', tokens: {}, layouts: { ...STANDARD.layouts } }
+  const kit = { name: 'standard', tokens: {}, layouts: { ...STANDARD.layouts }, pictures: {} }
   const problems = []
   for (const given of kits) {
     if (!given || typeof given !== 'object') continue
@@ -161,6 +172,10 @@ export function mergeKits(...kits) {
       const next = tokensFrom(given.tokens), dark = next.dark && typeof next.dark === 'object' ? { ...kit.tokens.dark, ...next.dark } : kit.tokens.dark
       kit.tokens = { ...kit.tokens, ...next, ...(dark && { dark }) }
     }
+    for (const [name, picture] of Object.entries(given.pictures ?? {})) {
+      if (NAME.test(name) && artOf(picture)) kit.pictures[name] = picture
+      else problems.push(`picture ${name}: not a picture inside the kit`)
+    }
     for (const [name, definition] of Object.entries(given.layouts ?? given.types ?? {})) {
       if (!NAME.test(name)) { problems.push(`layout ${name}: not a-z, 0-9 and -`); continue }
       if (definition === false) { if (name !== 'default') delete kit.layouts[name]; continue }

package/src/look.js

@@ -41,12 +41,12 @@ export function tokensOf(settings, project = {}) {
 function clean(given) {
   /** @type {Partial<Tokens>} */
   const kept = {}
-  for (const key of /** @type {const} */ (['paper', 'ink', 'primary', 'muted', 'soft'])) if (typeof given[key] === 'string' && hex(given[key])) kept[key] = given[key]
-  if (given.dark && typeof given.dark === 'object') kept.dark = Object.fromEntries(Object.entries(given.dark).filter(([, v]) => typeof v === 'string' && hex(v)))
+  for (const key of /** @type {const} */ (['paper', 'ink', 'primary', 'muted', 'soft'])) if (typeof given[key] === 'string' && rgbOf(given[key])) kept[key] = given[key]
+  if (given.dark && typeof given.dark === 'object') kept.dark = Object.fromEntries(Object.entries(given.dark).filter(([, v]) => typeof v === 'string' && rgbOf(v)))
   if (given.fonts && Array.isArray(given.fonts.heading) && Array.isArray(given.fonts.body)) kept.fonts = { heading: given.fonts.heading.map(String), body: given.fonts.body.map(String) }
   if (typeof given.voice === 'string') kept.voice = given.voice
   if (typeof given.radius === 'number') kept.radius = given.radius
-  if (Array.isArray(given.series) && given.series.length && given.series.every((/** @type {unknown} */ c) => typeof c === 'string' && hex(c))) kept.series = given.series.slice(0, 6)
+  if (Array.isArray(given.series) && given.series.length && given.series.every((/** @type {unknown} */ c) => typeof c === 'string' && rgbOf(c))) kept.series = given.series.slice(0, 6)
   return kept
 }
 
@@ -55,30 +55,36 @@ function clean(given) {
  * @param {Tokens} tokens @param {'light' | 'dark'} scheme @returns {Scheme}
  */
 export function schemeOf(tokens, scheme) {
-  const light = hex(tokens.paper) ?? [255, 253, 248], dark = hex(tokens.ink) ?? [29, 27, 22]
+  // A see-through colour is seen over the paper it is on.
+  const light = rgbOf(tokens.paper) ?? [255, 253, 248], dark = rgbOf(tokens.ink, light) ?? [29, 27, 22]
   // A kit's own dark colours where it gives them (a design system's dark mode), else worked out.
   const own = scheme === 'dark' ? tokens.dark ?? {} : {}
-  const paper = round(hex(own.paper ?? '') ?? (scheme === 'dark' ? mix(dark, [0, 0, 0], 0.35) : light))
-  const ink = round(hex(own.ink ?? '') ?? (scheme === 'dark' ? mix(light, [255, 255, 255], 0.2) : dark))
-  const primary = hex(own.primary ?? tokens.primary) ?? [247, 197, 49]
+  const paper = round(rgbOf(own.paper ?? '', scheme === 'dark' ? [0, 0, 0] : [255, 255, 255]) ?? (scheme === 'dark' ? mix(dark, [0, 0, 0], 0.35) : light))
+  const ink = round(rgbOf(own.ink ?? '', paper) ?? (scheme === 'dark' ? mix(light, [255, 255, 255], 0.2) : dark))
+  const primary = rgbOf(own.primary ?? tokens.primary, paper) ?? [247, 197, 49]
   // The primary as a fill keeps its own colour; as words or marks it is made to read on the paper.
   const text = readable(primary, paper, 4.5)
   const onPrimary = contrast(ink, primary) >= contrast(paper, primary) ? ink : paper
   // A chart's colours: the kit's own (a template's accents), else the primary turned round the wheel; each made to read at 3:1.
-  const given = (tokens.series ?? []).map(hex).filter((c) => c !== null)
+  const given = (tokens.series ?? []).map((c) => rgbOf(c, paper)).filter((c) => c !== null)
   const series = [0, 1, 2, 3, 4, 5].map((n) => readable(/** @type {number[]} */ (given[n % (given.length || 1)] ?? rotate(primary, n * 57)), paper, 3))
   return {
-    paper: css(paper), ink: css(ink), muted: css(readable(round(hex(own.muted ?? (scheme === 'light' ? tokens.muted ?? '' : '')) ?? mix(ink, paper, 0.38)), paper, 4.5)), line: css(mix(ink, paper, 0.82)),
-    primary: css(text), onPrimary: css(onPrimary), soft: css(hex(own.soft ?? (scheme === 'light' ? tokens.soft ?? '' : '')) ?? mix(primary, paper, 0.78)), series: series.map(css),
+    paper: css(paper), ink: css(ink), muted: css(readable(round(rgbOf(own.muted ?? (scheme === 'light' ? tokens.muted ?? '' : ''), paper) ?? mix(ink, paper, 0.38)), paper, 4.5)), line: css(mix(ink, paper, 0.82)),
+    primary: css(text), onPrimary: css(onPrimary), soft: css(rgbOf(own.soft ?? (scheme === 'light' ? tokens.soft ?? '' : ''), paper) ?? mix(primary, paper, 0.78)), series: series.map(css),
   }
 }
 
-/** @param {string} value @returns {[number, number, number] | null} */
-export function hex(value) {
-  const m = /^#?([\da-f]{3}|[\da-f]{6})$/i.exec(String(value).trim())
-  if (!m) return null
-  const h = m[1].length === 3 ? [...m[1]].map((c) => c + c).join('') : m[1]
-  return /** @type {[number, number, number]} */ ([0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16)))
+/**
+ * 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 function rgbOf(value, under = [255, 255, 255]) {
+  const text = String(value).trim(), digits = /^#?([\da-f]{3,4}|[\da-f]{6}|[\da-f]{8})$/i.exec(text)?.[1], css = /^rgba?\(([^)]*)\)$/i.exec(text)?.[1].split(/[\s,/]+/).filter(Boolean)
+  const share = (/** @type {string} */ part, /** @type {number} */ whole) => (part.endsWith('%') ? (parseFloat(part) / 100) * whole : Number(part))
+  const [r, g, b, a = 1] = digits ? (digits.length < 5 ? [...digits].map((c) => c + c) : /** @type {string[]} */ (digits.match(/../g))).map((h, i) => parseInt(h, 16) / (i > 2 ? 255 : 1))
+    : css?.length === 3 || css?.length === 4 ? css.map((part, i) => share(part, i > 2 ? 1 : 255)) : []
+  return r !== undefined && [r, g, b].every((c) => c >= 0 && c <= 255) && a >= 0 && a <= 1 ? round(mix(under, [r, g, b], a)) : null
 }
 
 /** @param {number[]} rgb */

package/src/pptx.js

@@ -3,7 +3,7 @@
 // each of its slots, so a slide added there looks like the deck's; words as PowerPoint's own text,
 // a list's levels as its levels; a table as a table; a chart of bars, lines, areas, pies, rings,
 // points or a radar as PowerPoint's own chart, its numbers in the file to change; anything else (a
-// diagram, another chart, a picture) as a picture; the speaker's notes as notes; each slide's
+// diagram, another chart, a picture) as a picture, a layout's art too, on its slide layout; the speaker's notes as notes; each slide's
 // transition as PowerPoint's (Morph where it has one, a fade where it hasn't); the look's colours
 // as the file's theme. Read from the deck as drawn, each box where the browser put it, so the file
 // looks like the slides, in the scheme shown. PptxGenJS (with its JSZip) is the host's to load.
@@ -72,6 +72,9 @@ export async function toPptx(view, { PptxGenJS, JSZip }) {
     const masterName = `${definition ? labelOf(definition, layout, view.lang) : layout}${element.classList.contains('deck-class-invert') ? ' (dark)' : ''}`
     if (!masters.has(masterName)) {
       const objects = []
+      // The layout's art, its layers as one picture on its paper behind the rest: a slide added in PowerPoint has it too.
+      const art = [...element.querySelectorAll('img.deck-art')].map((one) => /** @type {HTMLImageElement} */ (one).src), backdrop = art.length && await pictureOf(art, W * 150, H * 150, false, style.backgroundColor)
+      if (backdrop) { objects.push({ image: { data: backdrop, x: 0, y: 0, w: W, h: H } }); report.pictures++ }
       if (title) objects.push({ placeholder: { options: { name: 'title', type: 'title', ...across(title), valign: 'bottom', margin: 0, fontFace: pres.theme.headFontFace, color: hexOf(getComputedStyle(title).color), align: rtl ? 'right' : 'left' }, text: '' } })
       for (const slot of slots) {
         const r = place(slot)
@@ -296,21 +299,34 @@ function transitionXml(kind, rtl) {
   return '<p:transition spd="med"><p:fade/></p:transition>'
 }
 
-/** A picture's data as PNG, drawn at a size; null when it can't be read (another site's, unshared). @param {string} src @param {number} w @param {number} h @param {boolean} [cover] */
-async function pictureOf(src, w, h, cover = false) {
+/**
+ * A picture's data as PNG, drawn at a size, or a layout's art, its layers, as JPEG on its paper; null when it can't be read
+ * (another site's, unshared). @param {string | string[]} src @param {number} w @param {number} h @param {boolean} [cover] @param {string} [paper]
+ */
+async function pictureOf(src, w, h, cover = false, paper = '') {
   try {
-    const img = new Image()
-    img.crossOrigin = 'anonymous'
-    img.src = src
-    await img.decode()
+    const images = await Promise.all([src].flat().map(async (one) => {
+      const img = new Image()
+      img.crossOrigin = 'anonymous'
+      img.src = one
+      await img.decode()
+      return img
+    }))
+    const img = images[0]
     const canvas = document.createElement('canvas')
     canvas.width = Math.max(1, Math.round(w))
     canvas.height = Math.max(1, Math.round(h))
     const ctx = /** @type {CanvasRenderingContext2D} */ (canvas.getContext('2d'))
     const iw = img.naturalWidth || w, ih = img.naturalHeight || h
     const scale = cover ? Math.max(canvas.width / iw, canvas.height / ih) : Math.min(canvas.width / iw, canvas.height / ih)
-    ctx.drawImage(img, (canvas.width - iw * scale) / 2, (canvas.height - ih * scale) / 2, iw * scale, ih * scale)
-    return canvas.toDataURL('image/png')
+    if (!paper) ctx.drawImage(img, (canvas.width - iw * scale) / 2, (canvas.height - ih * scale) / 2, iw * scale, ih * scale)
+    else {
+      // Art, stretched over the slide as it is drawn there, on its paper, as a JPEG: photographs stay small.
+      ctx.fillStyle = paper
+      ctx.fillRect(0, 0, canvas.width, canvas.height)
+      for (const layer of images) ctx.drawImage(layer, 0, 0, canvas.width, canvas.height)
+    }
+    return canvas.toDataURL(paper ? 'image/jpeg' : 'image/png', 0.9)
   } catch {
     return null
   }

package/src/render.js

@@ -43,11 +43,14 @@ export function renderSlide(slide, context) {
   const counter = { step: 0 }
   const slots = new Map(slide.slots.map((slot) => [slot.name, slot]))
   const names = definition.slots
+  const art = (definition.art ?? []).map((name) => context.kit.pictures?.[name]).filter(Boolean)
   const section = h('section', {
-    class: ['deck-slide', `deck-layout-${layout}`, ...classes.map((name) => `deck-class-${name}`)].join(' '),
+    class: ['deck-slide', `deck-layout-${layout}`, ...classes.map((name) => `deck-class-${name}`), ...(art.length ? ['has-art'] : [])].join(' '),
     'data-index': slide.index, 'data-layout': layout, 'data-paper': definition.paper, 'data-align': definition.align, 'data-justify': definition.justify, 'data-title': definition.title,
     'aria-roledescription': context.slide, role: 'group',
   })
+  // Its art, as its template draws it, layer over layer behind the rest.
+  for (const src of art) section.append(h('img', { class: 'deck-art', src, alt: '', 'aria-hidden': 'true' }))
   // Its grid, from the layout's definition, through the CSSOM: areas named s-<slot>, as `default` is no name CSS allows.
   const canvas = h('div', { class: 'deck-canvas' })
   canvas.style.setProperty('grid-template-areas', definition.areas.map((row) => `"${row.map((cell) => (cell === '.' ? '.' : `s-${cell}`)).join(' ')}"`).join(' '))