kitfly 0.2.0 → 0.2.3

package/dist/content/reference/plugins.html

@@ -89,7 +89,7 @@
       </svg>
     </button>
     <a href="../../" class="mobile-logo" title="Home" data-initial="K">
-      <img src="../../assets/brand/kitfly-neon-256.png" alt="Kitfly" class="logo-img logo-icon" onerror="this.onerror=null;this.style.display='none';this.parentElement.classList.add('logo-fallback')"/>
+      <img src="../../assets/brand/kitfly-neon-256.png" alt="Kitfly" class="logo-img logo-icon"  onerror="this.onerror=null;this.style.display='none';this.parentElement.classList.add('logo-fallback')">
     </a>
     <button class="mobile-theme-toggle" onclick="toggleTheme()" title="Toggle theme" aria-label="Toggle theme">
       <svg class="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -106,7 +106,7 @@
       <div class="sidebar-header">
         <div class="logo logo-icon">
           <a href="/" class="logo-icon" data-initial="K">
-            <img src="../../assets/brand/kitfly-neon-256.png" alt="Kitfly" class="logo-img" onerror="this.onerror=null;this.style.display='none';this.parentElement.classList.add('logo-fallback')"/>
+            <img src="../../assets/brand/kitfly-neon-256.png" alt="Kitfly" class="logo-img"  onerror="this.onerror=null;this.style.display='none';this.parentElement.classList.add('logo-fallback')">
           </a>
           <span class="logo-text">
             <a href="/" class="brand">Kitfly</a>
@@ -124,13 +124,13 @@
             </svg>
           </button>
           <div class="sidebar-meta">
-            <span class="meta-version">v0.2.0</span>
+            <span class="meta-version">v0.2.3</span>
             <span class="meta-branch">HEAD</span>
           </div>
         </div>
       </div>
       <div class="sidebar-nav">
-        <ul><li><a href="../../index.html" class="nav-home">Home</a></li><li><span class="nav-section">Guide</span><ul><li><a href="../../content/guide/approaches.html">approaches</a></li><li><a href="../../content/guide/features.html">features</a></li><li><a href="../../content/guide/getting-started.html">getting-started</a></li><li><a href="../../content/guide/kitfly-overview.html">kitfly-overview</a></li></ul></li><li><span class="nav-section">Templates</span><ul><li><a href="../../content/templates/crucible.html">crucible</a></li><li><a href="../../content/templates/handbook.html">handbook</a></li><li><a href="../../content/templates/minimal.html">minimal</a></li><li><a href="../../content/templates/overview.html">overview</a></li><li><a href="../../content/templates/pipeline.html">pipeline</a></li><li><a href="../../content/templates/productbook.html">productbook</a></li><li><a href="../../content/templates/runbook.html">runbook</a></li><li><a href="../../content/templates/servicebook.html">servicebook</a></li></ul></li><li><a href="../../content/reference.html" class="nav-section">Reference</a><ul><li><a href="../../content/reference/configuration.html">configuration</a></li><li><a href="../../content/reference/design-catalog.html">design-catalog</a></li><li><a href="../../content/reference/environment-variables.html">environment-variables</a></li><li><a href="../../content/reference/glossary.html">glossary</a></li><li><a href="../../content/reference/key-concepts.html">key-concepts</a></li><li><a href="../../content/reference/plugins.html" class="active">plugins</a></li><li><a href="../../content/reference/structure.html">structure</a></li></ul></li><li><a href="../../content/deployment.html" class="nav-section">Deployment</a><ul><li><a href="../../content/deployment/preflight.html">preflight</a></li><li><details><summary class="nav-group">recipes</summary><ul><li><a href="../../content/deployment/recipes/aws-s3.html">aws-s3</a></li><li><a href="../../content/deployment/recipes/cloudflare-pages.html">cloudflare-pages</a></li><li><a href="../../content/deployment/recipes/cloudflare-r2.html">cloudflare-r2</a></li><li><a href="../../content/deployment/recipes/fly-io.html">fly-io</a></li><li><a href="../../content/deployment/recipes/github-pages.html">github-pages</a></li><li><a href="../../content/deployment/recipes/netlify.html">netlify</a></li><li><a href="../../content/deployment/recipes/vercel.html">vercel</a></li></ul></details></li><li><a href="../../content/deployment/secrets-and-env-vars.html">secrets-and-env-vars</a></li></ul></li><li><span class="nav-section">User Guide</span><ul><li><details><summary class="nav-group"><a href="../../docs/userguide/cli.html">cli</a></summary><ul><li><a href="../../docs/userguide/cli/build.html">build</a></li><li><a href="../../docs/userguide/cli/bundle.html">bundle</a></li><li><a href="../../docs/userguide/cli/dev.html">dev</a></li><li><a href="../../docs/userguide/cli/init.html">init</a></li><li><a href="../../docs/userguide/cli/servers.html">servers</a></li><li><a href="../../docs/userguide/cli/stop.html">stop</a></li><li><a href="../../docs/userguide/cli/update.html">update</a></li><li><a href="../../docs/userguide/cli/version.html">version</a></li></ul></details></li><li><a href="../../docs/userguide/sharing.html">sharing</a></li></ul></li><li><span class="nav-section">Decisions</span><ul><li><a href="../../docs/decisions/ADR-0001-minimalist-site-code.html">ADR-0001-minimalist-site-code</a></li><li><a href="../../docs/decisions/ADR-0002-ai-accessibility.html">ADR-0002-ai-accessibility</a></li><li><a href="../../docs/decisions/ADR-0003-single-file-bundle.html">ADR-0003-single-file-bundle</a></li><li><a href="../../docs/decisions/ADR-0004-bun-runtime.html">ADR-0004-bun-runtime</a></li><li><a href="../../docs/decisions/ADR-0005-plugin-contract-and-distribution.html">ADR-0005-plugin-contract-and-distribution</a></li><li><a href="../../docs/decisions/DDR-0001-viewport-locked-layout.html">DDR-0001-viewport-locked-layout</a></li><li><a href="../../docs/decisions/DDR-0002-theme-system.html">DDR-0002-theme-system</a></li><li><a href="../../docs/decisions/DDR-0003-bounded-logo-slot.html">DDR-0003-bounded-logo-slot</a></li><li><a href="../../docs/decisions/DDR-0004-slides-rendering-model.html">DDR-0004-slides-rendering-model</a></li><li><a href="../../docs/decisions/DDR-0005-deterministic-layout-boundary.html">DDR-0005-deterministic-layout-boundary</a></li></ul></li><li><a href="../../schemas.html" class="nav-section">Schemas</a><ul><li><a href="../../schemas/plugin-registry.schema.html">plugin-registry.schema</a></li><li><a href="../../schemas/plugin-schemas-notes.html">plugin-schemas-notes</a></li><li><a href="../../schemas/plugin.schema.html">plugin.schema</a></li><li><a href="../../schemas/plugins.schema.html">plugins.schema</a></li><li><details><summary class="nav-group">v0</summary><ul><li><a href="../../schemas/v0/common.schema.html">common.schema</a></li><li><a href="../../schemas/v0/plugin-registry.schema.html">plugin-registry.schema</a></li><li><a href="../../schemas/v0/plugin.schema.html">plugin.schema</a></li><li><a href="../../schemas/v0/plugins.schema.html">plugins.schema</a></li><li><a href="../../schemas/v0/site.schema.html">site.schema</a></li><li><a href="../../schemas/v0/theme.schema.html">theme.schema</a></li></ul></details></li></ul></li></ul>
+        <ul><li><a href="../../index.html" class="nav-home">Home</a></li><li><span class="nav-section">Guide</span><ul><li><a href="../../content/guide/approaches.html">approaches</a></li><li><a href="../../content/guide/branding.html">branding</a></li><li><a href="../../content/guide/data-driven-content.html">data-driven-content</a></li><li><a href="../../content/guide/features.html">features</a></li><li><a href="../../content/guide/getting-started.html">getting-started</a></li><li><a href="../../content/guide/kitfly-overview.html">kitfly-overview</a></li></ul></li><li><span class="nav-section">Templates</span><ul><li><a href="../../content/templates/crucible.html">crucible</a></li><li><a href="../../content/templates/handbook.html">handbook</a></li><li><a href="../../content/templates/minimal.html">minimal</a></li><li><a href="../../content/templates/overview.html">overview</a></li><li><a href="../../content/templates/pipeline.html">pipeline</a></li><li><a href="../../content/templates/productbook.html">productbook</a></li><li><a href="../../content/templates/runbook.html">runbook</a></li><li><a href="../../content/templates/servicebook.html">servicebook</a></li></ul></li><li><a href="../../content/reference.html" class="nav-section">Reference</a><ul><li><a href="../../content/reference/configuration.html">configuration</a></li><li><a href="../../content/reference/design-catalog.html">design-catalog</a></li><li><a href="../../content/reference/environment-variables.html">environment-variables</a></li><li><a href="../../content/reference/glossary.html">glossary</a></li><li><a href="../../content/reference/key-concepts.html">key-concepts</a></li><li><a href="../../content/reference/plugins.html" class="active">plugins</a></li><li><a href="../../content/reference/slides-authoring-guidelines.html">slides-authoring-guidelines</a></li><li><a href="../../content/reference/structure.html">structure</a></li></ul></li><li><a href="../../content/deployment.html" class="nav-section">Deployment</a><ul><li><a href="../../content/deployment/preflight.html">preflight</a></li><li><details><summary class="nav-group">recipes</summary><ul><li><a href="../../content/deployment/recipes/aws-s3.html">aws-s3</a></li><li><a href="../../content/deployment/recipes/cloudflare-pages.html">cloudflare-pages</a></li><li><a href="../../content/deployment/recipes/cloudflare-r2.html">cloudflare-r2</a></li><li><a href="../../content/deployment/recipes/fly-io.html">fly-io</a></li><li><a href="../../content/deployment/recipes/github-pages.html">github-pages</a></li><li><a href="../../content/deployment/recipes/netlify.html">netlify</a></li><li><a href="../../content/deployment/recipes/vercel.html">vercel</a></li></ul></details></li><li><a href="../../content/deployment/secrets-and-env-vars.html">secrets-and-env-vars</a></li></ul></li><li><span class="nav-section">User Guide</span><ul><li><details><summary class="nav-group"><a href="../../docs/userguide/cli.html">cli</a></summary><ul><li><a href="../../docs/userguide/cli/build.html">build</a></li><li><a href="../../docs/userguide/cli/bundle.html">bundle</a></li><li><a href="../../docs/userguide/cli/dev.html">dev</a></li><li><a href="../../docs/userguide/cli/init.html">init</a></li><li><a href="../../docs/userguide/cli/servers.html">servers</a></li><li><a href="../../docs/userguide/cli/stop.html">stop</a></li><li><a href="../../docs/userguide/cli/update.html">update</a></li><li><a href="../../docs/userguide/cli/version.html">version</a></li></ul></details></li><li><a href="../../docs/userguide/sharing.html">sharing</a></li></ul></li><li><span class="nav-section">Decisions</span><ul><li><a href="../../docs/decisions/ADR-0001-minimalist-site-code.html">ADR-0001-minimalist-site-code</a></li><li><a href="../../docs/decisions/ADR-0002-ai-accessibility.html">ADR-0002-ai-accessibility</a></li><li><a href="../../docs/decisions/ADR-0003-single-file-bundle.html">ADR-0003-single-file-bundle</a></li><li><a href="../../docs/decisions/ADR-0004-bun-runtime.html">ADR-0004-bun-runtime</a></li><li><a href="../../docs/decisions/ADR-0005-plugin-contract-and-distribution.html">ADR-0005-plugin-contract-and-distribution</a></li><li><a href="../../docs/decisions/ADR-0006-data-driven-content.html">ADR-0006-data-driven-content</a></li><li><a href="../../docs/decisions/DDR-0001-viewport-locked-layout.html">DDR-0001-viewport-locked-layout</a></li><li><a href="../../docs/decisions/DDR-0002-theme-system.html">DDR-0002-theme-system</a></li><li><a href="../../docs/decisions/DDR-0003-bounded-logo-slot.html">DDR-0003-bounded-logo-slot</a></li><li><a href="../../docs/decisions/DDR-0004-slides-rendering-model.html">DDR-0004-slides-rendering-model</a></li><li><a href="../../docs/decisions/DDR-0005-deterministic-layout-boundary.html">DDR-0005-deterministic-layout-boundary</a></li></ul></li><li><a href="../../schemas.html" class="nav-section">Schemas</a><ul><li><a href="../../schemas/plugin-registry.schema.html">plugin-registry.schema</a></li><li><a href="../../schemas/plugin-schemas-notes.html">plugin-schemas-notes</a></li><li><a href="../../schemas/plugin.schema.html">plugin.schema</a></li><li><a href="../../schemas/plugins.schema.html">plugins.schema</a></li><li><details><summary class="nav-group">v0</summary><ul><li><a href="../../schemas/v0/common.schema.html">common.schema</a></li><li><a href="../../schemas/v0/plugin-registry.schema.html">plugin-registry.schema</a></li><li><a href="../../schemas/v0/plugin.schema.html">plugin.schema</a></li><li><a href="../../schemas/v0/plugins.schema.html">plugins.schema</a></li><li><a href="../../schemas/v0/site.schema.html">site.schema</a></li><li><a href="../../schemas/v0/theme.schema.html">theme.schema</a></li></ul></details></li></ul></li></ul>
       </div>
     </nav>
     <main class="content">
@@ -152,6 +152,17 @@ plugins:
   - callouts@0.2.0
 </code></pre>
 <p>Canonical plugins are referenced as pinned strings: <code>name@x.y.z</code>.</p>
+<h3 id="canonical-plugins-v022">Canonical plugins (v0.2.2)</h3>
+<ul>
+<li><code>callouts@0.2.0</code> - styled NOTE/TIP/INFO/WARNING/DANGER blockquotes</li>
+<li><code>slides-visuals@0.2.1</code> - slide widgets + figures via <code>:::</code> blocks (<code>slides</code> mode only)</li>
+<li><code>latex@0.2.2</code> - KaTeX math rendering for <code>$...$</code>, <code>$$...$$</code>, and fenced <code>math</code> blocks</li>
+<li><code>slides-charts-lite@0.2.2</code> - bar/line/pie charts from fenced <code>chart</code> blocks (<code>slides</code> mode only)</li>
+</ul>
+<p>Example:</p>
+<pre><code class="language-yaml">plugins:
+  - latex@0.2.2
+</code></pre>
 <h2 id="registry-assets">Registry + assets</h2>
 <p>Canonical plugins come from a registry file:</p>
 <ul>
@@ -308,16 +319,17 @@ value: 1,234
 </code></pre>
 
       </article>
-      <aside class="toc"><span class="toc-title">On this page</span><ul><li><a href="#enable-a-plugin">Enable a plugin</a></li><li><a href="#registry-assets">Registry + assets</a></li><li><a href="#integrity-checks">Integrity checks</a></li><li class="toc-h3"><a href="#valid-block-shape">Valid block shape</a></li><li class="toc-h3"><a href="#supported-types">Supported types</a></li><li class="toc-h3"><a href="#example-valid">Example (valid)</a></li><li class="toc-h3"><a href="#how-to-know-its-correct">How to know it’s correct</a></li><li class="toc-h3"><a href="#common-mistakes-and-how-to-fix-them">Common mistakes (and how to fix them)</a></li><li class="toc-h3"><a href="#examples-invalid-fixed">Examples (invalid → fixed)</a></li></ul></aside>
+      <aside class="toc"><span class="toc-title">On this page</span><ul><li><a href="#enable-a-plugin">Enable a plugin</a></li><li class="toc-h3"><a href="#canonical-plugins-v022">Canonical plugins (v0.2.2)</a></li><li><a href="#registry-assets">Registry + assets</a></li><li><a href="#integrity-checks">Integrity checks</a></li><li class="toc-h3"><a href="#valid-block-shape">Valid block shape</a></li><li class="toc-h3"><a href="#supported-types">Supported types</a></li><li class="toc-h3"><a href="#example-valid">Example (valid)</a></li><li class="toc-h3"><a href="#how-to-know-its-correct">How to know it’s correct</a></li><li class="toc-h3"><a href="#common-mistakes-and-how-to-fix-them">Common mistakes (and how to fix them)</a></li><li class="toc-h3"><a href="#examples-invalid-fixed">Examples (invalid → fixed)</a></li></ul></aside>
     </main>
   </div>
   
     <footer class="site-footer">
       <div class="footer-content">
         <div class="footer-left">
-          <span class="footer-version">v0.2.0</span>
+          
+          <span class="footer-version">v0.2.3</span>
           <span class="footer-separator">·</span>
-          <span class="footer-commit" title="Commit: 33ccd68">Published 2026-02-15</span>
+          <span class="footer-commit" title="Commit: 664328f">Published 2026-02-18</span>
         </div>
         <div class="footer-center">
           <span class="footer-copyright"><a href="https://3leaps.net" class="footer-link">© 2026 3 Leaps, LLC</a></span>
@@ -396,6 +408,9 @@ value: 1,234
       if (window.reinitMermaid) {
         window.reinitMermaid();
       }
+      if (window.reinitCharts) {
+        window.reinitCharts();
+      }
     }
 
     // Slides mode hash routing

package/dist/content/reference/slides-authoring-guidelines.html

@@ -0,0 +1,422 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Slides Authoring Guidelines - Kitfly Docs</title>
+  <link rel="icon" type="image/png" sizes="32x32" href="../../assets/brand/kitfly-favicon-32.png">
+  <link rel="icon" type="image/png" sizes="64x64" href="../../assets/brand/kitfly-neon-256.png">
+  <link rel="stylesheet" href="../../styles.css">
+  <style id="kitfly-theme">
+  :root { --color-bg: #ffffff;
+    --color-bg-sidebar: #f5f7f8;
+    --color-text: #374151;
+    --color-text-muted: #6b7280;
+    --color-border: #e5e7eb;
+    --color-link: #007182;
+    --color-link-hover: #0a6172;
+    --color-accent: #152F46;
+    --color-code-bg: #f5f7f8;
+    --color-logo: #152F46;
+    --sidebar-width: 280px;
+    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    --font-headings: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; }
+  html { font-size: 16px; }
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) { --color-bg: #0d1117;
+    --color-bg-sidebar: #152F46;
+    --color-text: #e5e7eb;
+    --color-text-muted: #9ca3af;
+    --color-border: #374151;
+    --color-link: #709EA6;
+    --color-link-hover: #8fb5bc;
+    --color-accent: #f9fafb;
+    --color-code-bg: #152F46;
+    --color-logo: #f9fafb; }
+  }
+  [data-theme="dark"] { --color-bg: #0d1117;
+    --color-bg-sidebar: #152F46;
+    --color-text: #e5e7eb;
+    --color-text-muted: #9ca3af;
+    --color-border: #374151;
+    --color-link: #709EA6;
+    --color-link-hover: #8fb5bc;
+    --color-accent: #f9fafb;
+    --color-code-bg: #152F46;
+    --color-logo: #f9fafb; }
+  [data-theme="light"] { --color-bg: #ffffff;
+    --color-bg-sidebar: #f5f7f8;
+    --color-text: #374151;
+    --color-text-muted: #6b7280;
+    --color-border: #e5e7eb;
+    --color-link: #007182;
+    --color-link-hover: #0a6172;
+    --color-accent: #152F46;
+    --color-code-bg: #f5f7f8;
+    --color-logo: #152F46;
+    --sidebar-width: 280px;
+    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    --font-headings: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; }
+</style>
+  <!-- Syntax highlighting - Prism.js -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1/themes/prism.min.css" id="prism-light">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1/themes/prism-okaidia.min.css" id="prism-dark" disabled>
+  
+  <script>
+    // Apply saved theme immediately to prevent flash
+    (function() {
+      const saved = localStorage.getItem('theme');
+      if (saved) {
+        document.documentElement.setAttribute('data-theme', saved);
+      }
+      // Set Prism theme based on saved or system preference
+      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      const isDark = saved === 'dark' || (!saved && prefersDark);
+      if (isDark) {
+        document.getElementById('prism-light')?.setAttribute('disabled', '');
+        document.getElementById('prism-dark')?.removeAttribute('disabled');
+      }
+    })();
+  </script>
+</head>
+<body class="mode-docs">
+  <div class="mobile-header">
+    <button class="nav-toggle" onclick="toggleNav()" aria-label="Toggle navigation">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M3 12h18M3 6h18M3 18h18"/>
+      </svg>
+    </button>
+    <a href="../../" class="mobile-logo" title="Home" data-initial="K">
+      <img src="../../assets/brand/kitfly-neon-256.png" alt="Kitfly" class="logo-img logo-icon"  onerror="this.onerror=null;this.style.display='none';this.parentElement.classList.add('logo-fallback')">
+    </a>
+    <button class="mobile-theme-toggle" onclick="toggleTheme()" title="Toggle theme" aria-label="Toggle theme">
+      <svg class="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <circle cx="12" cy="12" r="5"/>
+        <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
+      </svg>
+      <svg class="icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
+      </svg>
+    </button>
+  </div>
+  <div class="layout">
+    <nav class="sidebar">
+      <div class="sidebar-header">
+        <div class="logo logo-icon">
+          <a href="/" class="logo-icon" data-initial="K">
+            <img src="../../assets/brand/kitfly-neon-256.png" alt="Kitfly" class="logo-img"  onerror="this.onerror=null;this.style.display='none';this.parentElement.classList.add('logo-fallback')">
+          </a>
+          <span class="logo-text">
+            <a href="/" class="brand">Kitfly</a>
+            <a href="../../" class="product">Kitfly Docs</a>
+          </span>
+        </div>
+        <div class="header-tools">
+          <button class="theme-toggle" onclick="toggleTheme()" title="Toggle theme" aria-label="Toggle theme">
+            <svg class="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <circle cx="12" cy="12" r="5"/>
+              <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
+            </svg>
+            <svg class="icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
+            </svg>
+          </button>
+          <div class="sidebar-meta">
+            <span class="meta-version">v0.2.3</span>
+            <span class="meta-branch">HEAD</span>
+          </div>
+        </div>
+      </div>
+      <div class="sidebar-nav">
+        <ul><li><a href="../../index.html" class="nav-home">Home</a></li><li><span class="nav-section">Guide</span><ul><li><a href="../../content/guide/approaches.html">approaches</a></li><li><a href="../../content/guide/branding.html">branding</a></li><li><a href="../../content/guide/data-driven-content.html">data-driven-content</a></li><li><a href="../../content/guide/features.html">features</a></li><li><a href="../../content/guide/getting-started.html">getting-started</a></li><li><a href="../../content/guide/kitfly-overview.html">kitfly-overview</a></li></ul></li><li><span class="nav-section">Templates</span><ul><li><a href="../../content/templates/crucible.html">crucible</a></li><li><a href="../../content/templates/handbook.html">handbook</a></li><li><a href="../../content/templates/minimal.html">minimal</a></li><li><a href="../../content/templates/overview.html">overview</a></li><li><a href="../../content/templates/pipeline.html">pipeline</a></li><li><a href="../../content/templates/productbook.html">productbook</a></li><li><a href="../../content/templates/runbook.html">runbook</a></li><li><a href="../../content/templates/servicebook.html">servicebook</a></li></ul></li><li><a href="../../content/reference.html" class="nav-section">Reference</a><ul><li><a href="../../content/reference/configuration.html">configuration</a></li><li><a href="../../content/reference/design-catalog.html">design-catalog</a></li><li><a href="../../content/reference/environment-variables.html">environment-variables</a></li><li><a href="../../content/reference/glossary.html">glossary</a></li><li><a href="../../content/reference/key-concepts.html">key-concepts</a></li><li><a href="../../content/reference/plugins.html">plugins</a></li><li><a href="../../content/reference/slides-authoring-guidelines.html" class="active">slides-authoring-guidelines</a></li><li><a href="../../content/reference/structure.html">structure</a></li></ul></li><li><a href="../../content/deployment.html" class="nav-section">Deployment</a><ul><li><a href="../../content/deployment/preflight.html">preflight</a></li><li><details><summary class="nav-group">recipes</summary><ul><li><a href="../../content/deployment/recipes/aws-s3.html">aws-s3</a></li><li><a href="../../content/deployment/recipes/cloudflare-pages.html">cloudflare-pages</a></li><li><a href="../../content/deployment/recipes/cloudflare-r2.html">cloudflare-r2</a></li><li><a href="../../content/deployment/recipes/fly-io.html">fly-io</a></li><li><a href="../../content/deployment/recipes/github-pages.html">github-pages</a></li><li><a href="../../content/deployment/recipes/netlify.html">netlify</a></li><li><a href="../../content/deployment/recipes/vercel.html">vercel</a></li></ul></details></li><li><a href="../../content/deployment/secrets-and-env-vars.html">secrets-and-env-vars</a></li></ul></li><li><span class="nav-section">User Guide</span><ul><li><details><summary class="nav-group"><a href="../../docs/userguide/cli.html">cli</a></summary><ul><li><a href="../../docs/userguide/cli/build.html">build</a></li><li><a href="../../docs/userguide/cli/bundle.html">bundle</a></li><li><a href="../../docs/userguide/cli/dev.html">dev</a></li><li><a href="../../docs/userguide/cli/init.html">init</a></li><li><a href="../../docs/userguide/cli/servers.html">servers</a></li><li><a href="../../docs/userguide/cli/stop.html">stop</a></li><li><a href="../../docs/userguide/cli/update.html">update</a></li><li><a href="../../docs/userguide/cli/version.html">version</a></li></ul></details></li><li><a href="../../docs/userguide/sharing.html">sharing</a></li></ul></li><li><span class="nav-section">Decisions</span><ul><li><a href="../../docs/decisions/ADR-0001-minimalist-site-code.html">ADR-0001-minimalist-site-code</a></li><li><a href="../../docs/decisions/ADR-0002-ai-accessibility.html">ADR-0002-ai-accessibility</a></li><li><a href="../../docs/decisions/ADR-0003-single-file-bundle.html">ADR-0003-single-file-bundle</a></li><li><a href="../../docs/decisions/ADR-0004-bun-runtime.html">ADR-0004-bun-runtime</a></li><li><a href="../../docs/decisions/ADR-0005-plugin-contract-and-distribution.html">ADR-0005-plugin-contract-and-distribution</a></li><li><a href="../../docs/decisions/ADR-0006-data-driven-content.html">ADR-0006-data-driven-content</a></li><li><a href="../../docs/decisions/DDR-0001-viewport-locked-layout.html">DDR-0001-viewport-locked-layout</a></li><li><a href="../../docs/decisions/DDR-0002-theme-system.html">DDR-0002-theme-system</a></li><li><a href="../../docs/decisions/DDR-0003-bounded-logo-slot.html">DDR-0003-bounded-logo-slot</a></li><li><a href="../../docs/decisions/DDR-0004-slides-rendering-model.html">DDR-0004-slides-rendering-model</a></li><li><a href="../../docs/decisions/DDR-0005-deterministic-layout-boundary.html">DDR-0005-deterministic-layout-boundary</a></li></ul></li><li><a href="../../schemas.html" class="nav-section">Schemas</a><ul><li><a href="../../schemas/plugin-registry.schema.html">plugin-registry.schema</a></li><li><a href="../../schemas/plugin-schemas-notes.html">plugin-schemas-notes</a></li><li><a href="../../schemas/plugin.schema.html">plugin.schema</a></li><li><a href="../../schemas/plugins.schema.html">plugins.schema</a></li><li><details><summary class="nav-group">v0</summary><ul><li><a href="../../schemas/v0/common.schema.html">common.schema</a></li><li><a href="../../schemas/v0/plugin-registry.schema.html">plugin-registry.schema</a></li><li><a href="../../schemas/v0/plugin.schema.html">plugin.schema</a></li><li><a href="../../schemas/v0/plugins.schema.html">plugins.schema</a></li><li><a href="../../schemas/v0/site.schema.html">site.schema</a></li><li><a href="../../schemas/v0/theme.schema.html">theme.schema</a></li></ul></details></li></ul></li></ul>
+      </div>
+    </nav>
+    <main class="content">
+      <article class="prose">
+        <nav class="breadcrumbs"><a href="../../content/guide/approaches.html">Content</a><span class="separator">›</span><a href="../../content/reference/configuration.html">Reference</a><span class="separator">›</span><span>slides-authoring-guidelines</span></nav>
+        <div class="page-meta">Last updated: 2026-02-15</div>
+        <h1 id="slides-authoring-guidelines">Slides Authoring Guidelines</h1>
+<p>This page is for slide authors and AI agents generating slide content.</p>
+<p>Goal: avoid common layouts that look broken but are actually content-density issues.</p>
+<h2 id="quick-rules">Quick rules</h2>
+<ul>
+<li>Keep vertical visuals short. If a slide is tall and busy, trim items before adding more styling.</li>
+<li>Treat highlighted (<code>.accent</code>) blocks as emphasis, not interaction.</li>
+<li>Scroll in slides mode is allowed for dense content. Prefer no scroll for presentation slides.</li>
+</ul>
+<h2 id="df-006-single-accent-in-block-grid-looks-like-a-tab">DF-006: Single <code>.accent</code> in <code>.block-grid</code> looks like a tab</h2>
+<h3 id="problem">Problem</h3>
+<p>When one block in a row is accented and others are not, users read it as a selected tab and expect click behavior.</p>
+<h3 id="do-this">Do this</h3>
+<ul>
+<li>In one grid row, accent all blocks or accent none.</li>
+<li>If you need real tabs, treat that as a future widget (<code>slides-widgets</code>), not static blocks.</li>
+</ul>
+<h3 id="avoid-this">Avoid this</h3>
+<pre><code class="language-html">&lt;div class=&quot;block-grid cols-3&quot;&gt;
+  &lt;div class=&quot;block&quot;&gt;Backend&lt;/div&gt;
+  &lt;div class=&quot;block accent&quot;&gt;Platform&lt;/div&gt;
+  &lt;div class=&quot;block&quot;&gt;SRE&lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+<h3 id="prefer-this">Prefer this</h3>
+<pre><code class="language-html">&lt;div class=&quot;block-grid cols-3&quot;&gt;
+  &lt;div class=&quot;block accent&quot;&gt;Backend&lt;/div&gt;
+  &lt;div class=&quot;block accent&quot;&gt;Platform&lt;/div&gt;
+  &lt;div class=&quot;block accent&quot;&gt;SRE&lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+<p>or</p>
+<pre><code class="language-html">&lt;div class=&quot;block-grid cols-3&quot;&gt;
+  &lt;div class=&quot;block&quot;&gt;Backend&lt;/div&gt;
+  &lt;div class=&quot;block&quot;&gt;Platform&lt;/div&gt;
+  &lt;div class=&quot;block&quot;&gt;SRE&lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+<h2 id="df-007-block-flowvertical-can-overflow-at-43">DF-007: <code>block-flow.vertical</code> can overflow at 4/3</h2>
+<h3 id="problem">Problem</h3>
+<p><code>.block-flow.vertical</code> (HTML: <code>class=&quot;block-flow vertical&quot;</code>) with 4 steps can exceed the visible frame at <code>4/3</code>.</p>
+<h3 id="do-this">Do this</h3>
+<ul>
+<li>At <code>4/3</code>: limit vertical flows to 3 blocks.</li>
+<li>At <code>16/9</code>: 4 blocks is usually fine.</li>
+<li>If the slide also has extra text/callouts, reduce steps further.</li>
+</ul>
+<h3 id="guidance">Guidance</h3>
+<ul>
+<li>If you must keep all steps, scroll is acceptable.</li>
+<li>For presentation-first slides, split into two slides instead.</li>
+</ul>
+<h3 id="example-target">Example target</h3>
+<pre><code class="language-html">&lt;div class=&quot;block-flow vertical&quot;&gt;
+  &lt;div class=&quot;block&quot;&gt;1. Intake&lt;/div&gt;
+  &lt;div class=&quot;block&quot;&gt;2. Validate&lt;/div&gt;
+  &lt;div class=&quot;block&quot;&gt;3. Ship&lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+<h2 id="df-014-timeline-vertical-callout-can-clip-at-169">DF-014: <code>timeline-vertical</code> + callout can clip at 16/9</h2>
+<h3 id="problem">Problem</h3>
+<p>A 5-event vertical timeline plus a callout often exceeds the frame at <code>16/9</code>.</p>
+<h3 id="do-this">Do this</h3>
+<ul>
+<li>At <code>16/9</code>: keep <code>timeline-vertical</code> to 4 events when the slide also has a callout.</li>
+<li>At <code>4/3</code>: keep to 3 events with a callout.</li>
+<li>If you need all events, remove the callout or move it to a follow-up slide.</li>
+</ul>
+<h3 id="example-safe-with-callout">Example (safe with callout)</h3>
+<pre><code class="language-text">:::timeline-vertical
+events:
+- label: &quot;Detect&quot;
+  date: &quot;09:15&quot;
+- label: &quot;Triage&quot;
+  date: &quot;09:24&quot;
+- label: &quot;Mitigate&quot;
+  date: &quot;09:42&quot;
+- label: &quot;Recover&quot;
+  date: &quot;10:08&quot;
+:::
+
+&gt; WARNING: External API fallback remained active for 12 minutes.
+</code></pre>
+<h2 id="aspect-ratio-checklist">Aspect ratio checklist</h2>
+<ul>
+<li><code>16/9</code>: medium density, but still cap long vertical stacks.</li>
+<li><code>4/3</code>: tighter vertical budget. Reduce stacked items first.</li>
+<li><code>16/10</code>: between <code>16/9</code> and <code>4/3</code>; apply the same conservative limits when callouts are present.</li>
+</ul>
+<h2 id="summary">Summary</h2>
+<p>These are authoring constraints, not renderer bugs. When a slide clips:</p>
+<ol>
+<li>Reduce vertical item count.</li>
+<li>Remove or move callouts.</li>
+<li>Split dense content across two slides.</li>
+</ol>
+
+      </article>
+      <aside class="toc"><span class="toc-title">On this page</span><ul><li><a href="#quick-rules">Quick rules</a></li><li class="toc-h3"><a href="#problem">Problem</a></li><li class="toc-h3"><a href="#do-this">Do this</a></li><li class="toc-h3"><a href="#avoid-this">Avoid this</a></li><li class="toc-h3"><a href="#prefer-this">Prefer this</a></li><li class="toc-h3"><a href="#problem">Problem</a></li><li class="toc-h3"><a href="#do-this">Do this</a></li><li class="toc-h3"><a href="#guidance">Guidance</a></li><li class="toc-h3"><a href="#example-target">Example target</a></li><li class="toc-h3"><a href="#problem">Problem</a></li><li class="toc-h3"><a href="#do-this">Do this</a></li><li class="toc-h3"><a href="#example-safe-with-callout">Example (safe with callout)</a></li><li><a href="#aspect-ratio-checklist">Aspect ratio checklist</a></li><li><a href="#summary">Summary</a></li></ul></aside>
+    </main>
+  </div>
+  
+    <footer class="site-footer">
+      <div class="footer-content">
+        <div class="footer-left">
+          
+          <span class="footer-version">v0.2.3</span>
+          <span class="footer-separator">·</span>
+          <span class="footer-commit" title="Commit: 664328f">Published 2026-02-18</span>
+        </div>
+        <div class="footer-center">
+          <span class="footer-copyright"><a href="https://3leaps.net" class="footer-link">© 2026 3 Leaps, LLC</a></span>
+          <span class="footer-separator">·</span><a href="/" class="footer-link">Kitfly</a>
+        </div>
+        <div class="footer-right">
+          <a href="https://kitfly.dev" class="footer-link">Built with Kitfly</a>
+        </div>
+      </div>
+    </footer>
+  <!-- Syntax highlighting - Prism.js -->
+  <script src="https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-core.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/prismjs@1/plugins/autoloader/prism-autoloader.min.js"></script>
+  <!-- Mermaid diagram support -->
+  <script type="module">
+    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
+
+    function getMermaidTheme() {
+      const theme = document.documentElement.getAttribute('data-theme');
+      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      const isDark = theme === 'dark' || (!theme && prefersDark);
+      return isDark ? 'dark' : 'neutral';
+    }
+
+    mermaid.initialize({
+      startOnLoad: true,
+      theme: getMermaidTheme()
+    });
+
+    // Re-render mermaid diagrams when theme changes
+    window.reinitMermaid = async function() {
+      mermaid.initialize({ startOnLoad: false, theme: getMermaidTheme() });
+      const diagrams = document.querySelectorAll('.mermaid');
+      for (const el of diagrams) {
+        const code = el.getAttribute('data-mermaid-source');
+        if (code) {
+          el.innerHTML = code;
+          el.removeAttribute('data-processed');
+        }
+      }
+      await mermaid.run({ nodes: diagrams });
+    };
+  </script>
+  
+  <script>
+    function toggleTheme() {
+      const html = document.documentElement;
+      const current = html.getAttribute('data-theme');
+      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+      let next;
+      if (current === 'dark') {
+        next = 'light';
+      } else if (current === 'light') {
+        next = 'dark';
+      } else {
+        // No explicit theme set, toggle from system preference
+        next = prefersDark ? 'light' : 'dark';
+      }
+
+      html.setAttribute('data-theme', next);
+      localStorage.setItem('theme', next);
+
+      // Switch Prism theme
+      const prismLight = document.getElementById('prism-light');
+      const prismDark = document.getElementById('prism-dark');
+      if (next === 'dark') {
+        prismLight?.setAttribute('disabled', '');
+        prismDark?.removeAttribute('disabled');
+      } else {
+        prismLight?.removeAttribute('disabled');
+        prismDark?.setAttribute('disabled', '');
+      }
+
+      // Re-render mermaid diagrams with new theme
+      if (window.reinitMermaid) {
+        window.reinitMermaid();
+      }
+      if (window.reinitCharts) {
+        window.reinitCharts();
+      }
+    }
+
+    // Slides mode hash routing
+    (function initSlidesMode() {
+      const shell = document.querySelector('.slides-shell');
+      if (!shell) return;
+
+      const slides = Array.from(document.querySelectorAll('.slide'));
+      if (!slides.length) return;
+
+      const prevBtn = document.querySelector('.slide-prev');
+      const nextBtn = document.querySelector('.slide-next');
+      const counter = document.querySelector('.slide-counter');
+      const progressBar = document.querySelector('.slide-progress-bar');
+      const navLinks = Array.from(document.querySelectorAll('.sidebar-nav a[href^="#slide-"]'));
+      let current = 0;
+
+      function setActive(n) {
+        current = Math.max(0, Math.min(n, slides.length - 1));
+        slides.forEach((slide, idx) => slide.classList.toggle('active', idx === current));
+        navLinks.forEach((link) => {
+          const active = link.getAttribute('href') === '#' + slides[current].id;
+          link.classList.toggle('active', active);
+        });
+        if (counter) counter.textContent = (current + 1) + ' / ' + slides.length;
+        if (progressBar) progressBar.style.width = (((current + 1) / slides.length) * 100) + '%';
+        if (prevBtn) prevBtn.disabled = current === 0;
+        if (nextBtn) nextBtn.disabled = current === slides.length - 1;
+        history.replaceState(null, '', '#' + slides[current].id);
+      }
+
+      function setFromHash() {
+        const hash = window.location.hash || '';
+        const idx = slides.findIndex((s) => '#' + s.id === hash);
+        if (idx >= 0) setActive(idx);
+        else setActive(0);
+      }
+
+      prevBtn?.addEventListener('click', () => setActive(current - 1));
+      nextBtn?.addEventListener('click', () => setActive(current + 1));
+
+      document.addEventListener('keydown', (e) => {
+        if (e.key === 'ArrowRight' || e.key === ' ') {
+          e.preventDefault();
+          setActive(current + 1);
+        } else if (e.key === 'ArrowLeft') {
+          e.preventDefault();
+          setActive(current - 1);
+        } else if (e.key === 'Home') {
+          e.preventDefault();
+          setActive(0);
+        } else if (e.key === 'End') {
+          e.preventDefault();
+          setActive(slides.length - 1);
+        }
+      });
+
+      window.addEventListener('hashchange', setFromHash);
+      setFromHash();
+    })();
+
+    // Copy code button
+    document.querySelectorAll('.prose pre code').forEach(block => {
+      const button = document.createElement('button');
+      button.className = 'copy-button';
+      button.textContent = 'Copy';
+      button.onclick = async () => {
+        await navigator.clipboard.writeText(block.textContent);
+        button.textContent = 'Copied!';
+        setTimeout(() => button.textContent = 'Copy', 2000);
+      };
+      block.parentElement.appendChild(button);
+    });
+
+    // Mobile nav toggle
+    function toggleNav() {
+      document.querySelector('.sidebar').classList.toggle('open');
+    }
+
+    // Close nav when clicking outside on mobile
+    document.addEventListener('click', (e) => {
+      const sidebar = document.querySelector('.sidebar');
+      const toggle = document.querySelector('.nav-toggle');
+      if (sidebar.classList.contains('open') &&
+          !sidebar.contains(e.target) &&
+          !toggle.contains(e.target)) {
+        sidebar.classList.remove('open');
+      }
+    });
+  </script>
+  
+</body>
+</html>