rikiki-deck 0.3.1 → 0.4.0

package/llms.txt

@@ -0,0 +1,50 @@
+# Rikiki
+
+> Rikiki is a tiny (~12 KB gzip) Lit Web Components framework for technical
+> presentations and product carousels. A deck is plain HTML: load a theme
+> stylesheet, then the component bundle, then write a `<deck-root>` wrapping
+> `deck-*` slide elements. No build step to author or run a deck.
+
+This reference documents rikiki v0.4.0.
+
+The framework is opinionated:
+
+- Web standards only (Custom Elements, Shadow DOM, ES Modules, CSS Custom Properties).
+- Zero-build for deck authors. Consumers never touch a bundler.
+- Three-layer design tokens (`--rik-palette-*` private, `--rik-*` semantic, `--deck-<tag>-*` per-component).
+- Plugins are opt-in and lazy-loaded (transitions, presenter window, Shiki, click-stages).
+- The same `<deck-root>` engine drives slides AND swipe-able carousels via `autoplay` / `loop` / `swipe`.
+
+## Reference
+
+- [Full LLM reference](docs/llms/rikiki-reference.md): the single source of truth · every tag, attribute, slot, design token, plugin, and recipe in one file. Read this first.
+- [README](README.md): human overview, common patterns, build/theming notes.
+- [starter.html](starter.html): the minimal copy-paste deck skeleton.
+
+## Components
+
+Authoring tags fall into four buckets (see the reference for the exhaustive attribute/slot tables):
+
+- **Layouts (slide-level, direct children of `<deck-root>`)**: `<deck-cover>` · `<deck-section>` · `<deck-feature>` · `<deck-split>` · `<deck-feature-cards>` · `<deck-photo>` · `<deck-takeaway>`
+- **Molecules (composed containers)**: `<deck-callout>` · `<deck-card>` · `<deck-md>` · `<deck-mermaid>` · `<deck-stat>` · `<deck-metric-list>` / `<deck-metric>` · `<deck-tier-list>` / `<deck-tier>` / `<deck-tier-arrow>` · `<deck-step-list>` / `<deck-step>` · `<deck-shortcut-list>` / `<deck-shortcut>` / `<deck-kbd>` · `<deck-stack>` · `<deck-grid>`
+- **Atoms (primitives)**: `<deck-badge>` · `<deck-kicker>` · `<deck-punch>` · `<deck-code>`
+- **Runtime (authoring touchpoints)**: `<deck-root>` (navigation host) · `<deck-notes>` (speaker notes, read by the presenter window)
+
+## Plugins (opt-in, lazy)
+
+- **Transitions**: `transition="slide|slide-up|slide-down|slide-right|fade|zoom|flip"` on `<deck-root>` (per-slide `data-transition`).
+- **Presenter window**: press `P` · mirrors current + next slide, timer, and `<deck-notes>`.
+- **Shiki highlighting**: `import { installShiki } from './dist/shiki.js'` then `await installShiki({ theme, langs })`.
+- **Click-stages**: `import { installClickStages } from './dist/click-stages.js'` then `installClickStages()` · per-element `data-click` / `data-anim` / `data-morph` reveals.
+- **Livereload (authoring only)**: append `?live` to the deck URL.
+
+## Build & assembly
+
+- [Multi-deck assembler](docs/llms/rikiki-reference.md): split a talk into `parts/*.html` / `*.md`, list them in `deck.config.js`, run `npm run deck <config>`.
+- [Example multi-file deck](decks/example/deck.config.js): a runnable assembly config.
+- [Single-file bundler](bundle.mjs): `node bundle.mjs <deck>.html` inlines theme + bundle + Lit into one self-contained HTML file.
+
+## Optional
+
+- [Themes](themes/rikiki.css): the default theme and its token layers (`themes/siliceum.css` is an alternative).
+- [Project homepage](https://rikiki.tordu-jardin.fr): rendered docs site (also serves `/llms.txt`).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rikiki-deck",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "A tiny Lit Web Components framework for technical presentations · zero-build for consumers, TypeScript for contributors.",
   "homepage": "https://rikiki.tordu-jardin.fr",
   "repository": {
@@ -11,6 +11,9 @@
     "url": "https://gitlab.com/tordu-jardin/rikiki/-/issues"
   },
   "type": "module",
+  "bin": {
+    "rikiki": "./bin/rikiki.mjs"
+  },
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -27,26 +30,34 @@
   },
   "files": [
     "dist",
+    "bin",
     "tokens.css",
     "themes",
     "fonts",
-    "README.md"
+    "README.md",
+    "llms.txt",
+    "docs/llms"
   ],
   "scripts": {
-    "build": "node build.mjs && node build-standalone.mjs && tsc --emitDeclarationOnly",
+    "build": "node build-vendor.mjs && node build.mjs && node build-standalone.mjs && tsc --emitDeclarationOnly",
+    "vendor": "node build-vendor.mjs",
     "watch": "node build.mjs --watch",
     "typecheck": "tsc --noEmit",
     "clean": "rm -rf dist",
     "bundle": "node bundle.mjs",
     "deck": "node build/vite-deck.mjs",
-    "deck:example": "node build/vite-deck.mjs decks/example/deck.config.js"
+    "deck:example": "node build/vite-deck.mjs decks/example/deck.config.js",
+    "test": "vitest run",
+    "bump": "node scripts/bump-version.mjs"
   },
   "devDependencies": {
     "esbuild": "^0.24.0",
     "lit": "^3.3.3",
+    "marked": "^12.0.2",
+    "mermaid": "^10.9.6",
+    "shiki": "^1.24.0",
     "typescript": "^5.6.0",
-    "vite": "^6.4.2",
-    "vite-plugin-singlefile": "^2.3.3"
+    "vitest": "^2.1.0"
   },
   "peerDependencies": {
     "lit": "^3.3.3"
@@ -59,5 +70,8 @@
     "deck",
     "rikiki"
   ],
-  "license": "MIT"
+  "license": "MIT",
+  "dependencies": {
+    "rolldown": "^1.1.1"
+  }
 }

package/themes/rikiki.css

@@ -209,8 +209,8 @@
   --rik-font-size-strong:             var(--rik-text-base);   /* 1.25rem */
   --rik-font-size-big:                var(--rik-text-lg);     /* 1.953rem */
   --rik-font-size-mega:               var(--rik-text-2xl);    /* 3.052rem · now > big */
-  --rik-font-size-hook:               clamp(2.2rem, 4.5vw, 3.8rem);
-  --rik-font-size-stat:               clamp(3.5rem, 7vw, 5.5rem);
+  --rik-font-size-hook:               clamp(2.2rem, 4.5cqw, 3.8rem);
+  --rik-font-size-stat:               clamp(3.5rem, 7cqw, 5.5rem);
 
   /* Spacing */
   --rik-space-hair:                   4px;
@@ -278,6 +278,12 @@
 body, h1, h2, h3, h4, p, ul, ol, li, blockquote, pre, table, td, th,
 figure, dl, dd { margin: 0; padding: 0; }
 html { font-size: clamp(14px, 2.35vh, 42px); }
+/* Fixed-viewport decks (<deck-root fixed>) anchor the root font-size to the
+   logical canvas height instead of the window, so every rem-based size scales
+   with the letterboxed stage rather than the screen · no reflow off-ratio. */
+html:has(deck-root[fixed]) {
+  font-size: calc(min(100vh, 100vw * var(--deck-canvas-h, 1080) / var(--deck-canvas-w, 1920)) * 0.0235);
+}
 html, body { width: 100%; height: 100%; overflow: hidden; background: var(--rik-surface-page); }
 body { font-family: var(--rik-font-sans); color: var(--rik-text-default); }
 
@@ -301,7 +307,7 @@ body { font-family: var(--rik-font-sans); color: var(--rik-text-default); }
 }
 .display {
   font-family: var(--rik-font-display);
-  font-size: clamp(3rem, 7vw, 5.5rem);
+  font-size: clamp(3rem, 7cqw, 5.5rem);
   font-weight: 900;
   line-height: 1.05;
   letter-spacing: -0.03em;
@@ -333,7 +339,7 @@ deck-feature-cards > h1 {
 }
 deck-cover > h1 {
   font-family: var(--rik-font-display);
-  font-size: clamp(3.6rem, 9vw, 8.5rem);
+  font-size: clamp(3.6rem, 9cqw, 8.5rem);
   font-weight: 900;
   color: var(--rik-text-inverse);
   line-height: 1.02;

package/themes/siliceum.css

@@ -176,8 +176,8 @@
   --rik-font-size-strong:             var(--rik-text-base);
   --rik-font-size-big:                var(--rik-text-lg);
   --rik-font-size-mega:               var(--rik-text-2xl);  /* fixed: now > big */
-  --rik-font-size-hook:               clamp(2.2rem, 4.5vw, 3.8rem);
-  --rik-font-size-stat:               clamp(3.5rem, 7vw, 5.5rem);
+  --rik-font-size-hook:               clamp(2.2rem, 4.5cqw, 3.8rem);
+  --rik-font-size-stat:               clamp(3.5rem, 7cqw, 5.5rem);
 
   --rik-space-hair:                   4px;
   --rik-space-2xs:                    6px;
@@ -237,6 +237,12 @@
 body, h1, h2, h3, h4, p, ul, ol, li, blockquote, pre, table, td, th,
 figure, dl, dd { margin: 0; padding: 0; }
 html { font-size: clamp(14px, 2.35vh, 42px); }
+/* Fixed-viewport decks (<deck-root fixed>) anchor the root font-size to the
+   logical canvas height instead of the window, so every rem-based size scales
+   with the letterboxed stage rather than the screen · no reflow off-ratio. */
+html:has(deck-root[fixed]) {
+  font-size: calc(min(100vh, 100vw * var(--deck-canvas-h, 1080) / var(--deck-canvas-w, 1920)) * 0.0235);
+}
 html, body { width: 100%; height: 100%; overflow: hidden; background: var(--rik-surface-page); }
 body { font-family: var(--rik-font-sans); color: var(--rik-text-default); }
 
@@ -257,7 +263,7 @@ body { font-family: var(--rik-font-sans); color: var(--rik-text-default); }
   max-width: 60ch;
 }
 .display {
-  font-size: clamp(3rem, 7vw, 5.5rem);
+  font-size: clamp(3rem, 7cqw, 5.5rem);
   font-weight: 900;
   line-height: 1.05;
   letter-spacing: -0.03em;
@@ -287,7 +293,7 @@ deck-feature-cards > h1 {
   align-self: flex-start;
 }
 deck-cover > h1 {
-  font-size: clamp(3.6rem, 9vw, 8.5rem);
+  font-size: clamp(3.6rem, 9cqw, 8.5rem);
   font-weight: 900;
   color: var(--rik-text-inverse);
   line-height: 1.02;