kitfly 0.1.2 → 0.2.1

package/src/site/styles.css

@@ -173,6 +173,26 @@ body {
   }
 }
 
+.logo-icon.logo-fallback,
+.mobile-logo.logo-fallback {
+  width: 2rem;
+  height: 2rem;
+  max-width: none;
+  border-radius: 999px;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-accent);
+}
+
+.logo-icon.logo-fallback::before,
+.mobile-logo.logo-fallback::before {
+  content: attr(data-initial);
+  color: var(--color-bg);
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1;
+}
+
 .logo-text {
   display: flex;
   flex-direction: column;
@@ -412,6 +432,287 @@ body {
   max-width: 1100px;
 }
 
+/* Slides mode */
+.mode-slides .content {
+  max-width: none;
+  padding: 1.5rem 2rem;
+  padding-right: 2rem;
+  padding-bottom: calc(var(--footer-height) + 1rem);
+}
+
+.mode-slides .toc,
+.mode-slides .breadcrumbs,
+.mode-slides .page-meta {
+  display: none !important;
+}
+
+.slides-shell {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.slide-viewport {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: calc(100vh - var(--footer-height) - 11rem);
+}
+
+.slide-frame {
+  aspect-ratio: var(--slide-aspect, 16/9);
+  width: min(100%, 1100px);
+  max-height: calc(100vh - var(--footer-height) - 12rem);
+  overflow: auto;
+  border: 1px solid var(--color-border);
+  border-radius: 0.5rem;
+  background: var(--color-bg);
+  padding: 2rem 2.5rem;
+}
+
+.slide {
+  display: none;
+}
+
+.slide.active {
+  display: block;
+}
+
+.slide-nav {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  color: var(--color-text-muted);
+  font-size: 0.8125rem;
+}
+
+.slide-prev,
+.slide-next {
+  border: 1px solid var(--color-border);
+  background: var(--color-bg);
+  color: var(--color-text);
+  border-radius: 0.375rem;
+  padding: 0.25rem 0.625rem;
+  cursor: pointer;
+}
+
+.slide-prev:disabled,
+.slide-next:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.slide-progress {
+  width: 10rem;
+  height: 0.35rem;
+  border-radius: 999px;
+  background: var(--color-code-bg);
+  overflow: hidden;
+}
+
+.slide-progress-bar {
+  display: block;
+  height: 100%;
+  background: var(--color-link);
+  transition: width 150ms ease;
+}
+
+.slide.centered {
+  min-height: 100%;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.slide.two-column {
+  column-count: 2;
+  column-gap: 1.5rem;
+}
+
+.slide.active.centered {
+  display: flex;
+}
+
+.slide.active.two-column {
+  display: block;
+}
+
+.slide.active.two-column > h1,
+.slide.active.two-column > h2,
+.slide.active.two-column > h3 {
+  column-span: all;
+}
+
+.slide.active.two-column > * {
+  break-inside: avoid;
+}
+
+.slide.active.title-slide {
+  display: flex;
+  min-height: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  background: color-mix(in srgb, var(--color-link) 12%, var(--color-bg));
+  border: 1px solid color-mix(in srgb, var(--color-link) 40%, var(--color-border));
+  border-radius: 0.5rem;
+  padding: 2rem;
+}
+
+.slide.active.section-header {
+  display: flex;
+  min-height: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  background: color-mix(in srgb, var(--color-link) 6%, var(--color-bg));
+  border: 1px solid var(--color-border);
+  border-radius: 0.5rem;
+  padding: 2rem;
+}
+
+.slide.title-slide h1,
+.slide.section-header h1 {
+  font-size: 2.25rem;
+}
+
+.slide.diagram .mermaid {
+  margin: 0.75rem 0;
+}
+
+/* Slide layout primitives (core structural patterns) */
+.block {
+  border: 1px solid var(--color-border);
+  background: var(--color-bg-sidebar);
+  color: var(--color-text);
+  border-radius: 0.5rem;
+  padding: 0.75rem 1rem;
+  text-align: center;
+  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .block {
+    transition: none;
+  }
+}
+
+.block.accent {
+  background: color-mix(in srgb, var(--color-link) 12%, var(--color-bg));
+  border-color: color-mix(in srgb, var(--color-link) 50%, var(--color-border));
+}
+
+.block.muted {
+  opacity: 0.8;
+}
+
+.block.outline {
+  background: transparent;
+}
+
+.block.circle {
+  border-radius: 50%;
+  aspect-ratio: 1 / 1;
+  inline-size: min(7rem, 100%);
+  margin-inline: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.75rem;
+}
+
+.block.pill {
+  border-radius: 9999px;
+}
+
+.block.diamond {
+  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
+}
+
+.block.chevron {
+  clip-path: polygon(0 0, 75% 0, 100% 50%, 75% 100%, 0 100%, 25% 50%);
+}
+
+.block.hexagon {
+  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
+}
+
+.block.triangle {
+  clip-path: polygon(50% 0, 100% 100%, 0 100%);
+}
+
+.block.block-arrow {
+  clip-path: polygon(0 25%, 65% 25%, 65% 0, 100% 50%, 65% 100%, 65% 75%, 0 75%);
+}
+
+.block-label {
+  display: block;
+  font-size: 0.6875rem;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  color: var(--color-text-muted);
+  margin-bottom: 0.25rem;
+}
+
+.block-flow {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.75rem 1.5rem;
+  align-items: stretch;
+}
+
+.block-flow .block {
+  position: relative;
+  min-width: 8rem;
+}
+
+.block-flow:not(.vertical) .block:not(:last-child)::after {
+  content: "→";
+  position: absolute;
+  right: -1.05rem;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--color-text-muted);
+}
+
+.block-flow.vertical {
+  flex-direction: column;
+  align-items: stretch;
+  max-width: 30rem;
+  margin-inline: auto;
+}
+
+.block-flow.vertical .block:not(:last-child)::after {
+  content: "↓";
+  position: static;
+  display: block;
+  margin-top: 0.5rem;
+  color: var(--color-text-muted);
+}
+
+.block-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.75rem;
+}
+
+.block-grid.cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.block-grid.cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.block-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
 /* Breadcrumbs */
 .breadcrumbs {
   font-size: 0.875rem;
@@ -816,6 +1117,11 @@ body {
     padding-right: 4rem;
     max-width: 900px;
   }
+
+  .mode-slides .content {
+    max-width: none;
+    padding-right: 2rem;
+  }
 }
 
 @media (max-width: 1024px) {
@@ -838,6 +1144,11 @@ body {
     margin-left: 240px;
     padding: 2rem;
   }
+
+  .mode-slides .content {
+    margin-left: 240px;
+    padding: 1.25rem;
+  }
 }
 
 @media (max-width: 768px) {
@@ -877,6 +1188,26 @@ body {
     padding-top: 4rem;
     padding-bottom: calc(var(--footer-height) + 1rem);
   }
+
+  .mode-slides .content {
+    margin-left: 0;
+    padding: 1rem;
+    padding-top: 4rem;
+  }
+
+  .slide-frame {
+    width: 100%;
+    padding: 1.25rem;
+    max-height: calc(100vh - var(--footer-height) - 9rem);
+  }
+
+  .slide.two-column {
+    column-count: 1;
+  }
+
+  .slide-progress {
+    width: 7rem;
+  }
 }
 
 /* Print styles */

package/src/site/template.html

@@ -11,6 +11,7 @@
   <!-- Syntax highlighting - Prism.js -->
   <link rel="stylesheet" href="{{PRISM_LIGHT_URL}}" id="prism-light">
   <link rel="stylesheet" href="{{PRISM_DARK_URL}}" id="prism-dark" disabled>
+  {{PLUGIN_HEAD}}
   <script>
     // Apply saved theme immediately to prevent flash
     (function() {
@@ -28,15 +29,15 @@
     })();
   </script>
 </head>
-<body>
+<body class="{{BODY_CLASS}}">
   <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="{{PATH_PREFIX}}" class="mobile-logo" title="Home">
-      <img src="{{PATH_PREFIX}}{{BRAND_LOGO}}" alt="{{BRAND_NAME}}" class="logo-img {{BRAND_LOGO_CLASS}}"/>
+    <a href="{{PATH_PREFIX}}" class="mobile-logo" title="Home" data-initial="{{BRAND_INITIAL}}">
+      <img src="{{PATH_PREFIX}}{{BRAND_LOGO}}" alt="{{BRAND_NAME}}" class="logo-img {{BRAND_LOGO_CLASS}}" 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">
@@ -52,8 +53,8 @@
     <nav class="sidebar">
       <div class="sidebar-header">
         <div class="logo {{BRAND_LOGO_CLASS}}">
-          <a href="{{BRAND_URL}}" class="logo-icon"{{BRAND_TARGET}}>
-            <img src="{{PATH_PREFIX}}{{BRAND_LOGO}}" alt="{{BRAND_NAME}}" class="logo-img"/>
+          <a href="{{BRAND_URL}}" class="logo-icon" data-initial="{{BRAND_INITIAL}}"{{BRAND_TARGET}}>
+            <img src="{{PATH_PREFIX}}{{BRAND_LOGO}}" alt="{{BRAND_NAME}}" class="logo-img" onerror="this.onerror=null;this.style.display='none';this.parentElement.classList.add('logo-fallback')"/>
           </a>
           <span class="logo-text">
             <a href="{{BRAND_URL}}" class="brand"{{BRAND_TARGET}}>{{BRAND_NAME}}</a>
@@ -123,6 +124,7 @@
       await mermaid.run({ nodes: diagrams });
     };
   </script>
+  {{PLUGIN_BODY_END}}
   <script>
     function toggleTheme() {
       const html = document.documentElement;
@@ -159,6 +161,65 @@
       }
     }
 
+    // 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');

package/src/templates/deck.ts

@@ -0,0 +1,186 @@
+/**
+ * Deck Template
+ *
+ * Slides-first template for briefings and presentations.
+ * Uses mode: slides with a starter multi-slide markdown file.
+ */
+
+import type { TemplateContext, TemplateDef } from "./schema.ts";
+
+export const deck: TemplateDef = {
+	id: "deck",
+	name: "Presentation Deck",
+	description: "Fixed-aspect slides for briefings and presentations",
+	version: 1,
+	extends: "minimal",
+	sections: [
+		{
+			name: "Slides",
+			path: "content/slides",
+			description: "Slide content (one file per slide or --- slide --- delimiters)",
+		},
+	],
+	files: [
+		{
+			path: "site.yaml",
+			content: (ctx: TemplateContext) => `# ${ctx.branding.siteName} - Slides Configuration
+# Documentation: https://github.com/3leaps/kitfly
+
+title: "${ctx.branding.siteName}"
+mode: slides
+aspect: "16/9"
+# Sections are resolved from repo root by default (docroot: ".")
+
+brand:
+  name: "${ctx.branding.brandName}"
+  url: "${ctx.branding.brandUrl}"
+  # external: false  # Set true if brand URL is external
+
+sections:
+  - name: "Slides"
+    path: "content/slides"
+`,
+		},
+		{
+			path: "index.md",
+			content: (ctx: TemplateContext) => `---
+title: ${ctx.branding.siteName}
+description: ${ctx.branding.siteName} slide deck
+---
+
+# ${ctx.branding.siteName}
+
+This site is configured for slides mode.
+
+Run \`kitfly dev\` and use the slide controls to navigate.
+`,
+		},
+		{
+			path: "content/slides/briefing.md",
+			content: (ctx: TemplateContext) => `---
+title: Title
+class: title-slide
+---
+
+# ${ctx.branding.siteName}
+
+**${ctx.branding.brandName}**
+
+${new Date().toISOString().split("T")[0]}
+
+--- slide ---
+---
+title: Agenda
+---
+
+## Agenda
+
+1. Context
+2. Current State
+3. Options
+4. Recommendation
+
+--- slide ---
+---
+title: Options
+class: two-column
+---
+
+## Build vs Buy
+
+**Build In-House**
+
+- Full control
+- More setup effort
+- Longer implementation timeline
+
+**Buy SaaS**
+
+- Faster launch
+- Ongoing subscription cost
+- Vendor dependency
+
+--- slide ---
+---
+title: Architecture
+class: diagram
+---
+
+## Architecture Snapshot
+
+\`\`\`mermaid
+flowchart LR
+  A["Users"] --> B["Web App"]
+  B --> C["API"]
+  C --> D["Data Store"]
+\`\`\`
+
+--- slide ---
+---
+title: Section Break
+class: section-header
+---
+
+# Recommendation
+
+Preferred path and next actions
+
+--- slide ---
+---
+title: Summary
+---
+
+## Summary
+
+- Current state and trade-offs reviewed
+- Recommended path identified
+- Next milestone scheduled this quarter
+`,
+		},
+		{
+			path: "CUSTOMIZING.md",
+			content: (ctx: TemplateContext) => `---
+template: deck
+template_version: 1
+created: ${new Date().toISOString().split("T")[0]}
+---
+
+# Customizing ${ctx.branding.siteName}
+
+This template is optimized for \`mode: slides\`.
+
+## Slide Authoring Patterns
+
+You can author slides in either style:
+
+1. One file per slide in \`content/slides/\`
+2. One file with explicit delimiters:
+
+\`\`\`markdown
+--- slide ---
+\`\`\`
+
+## Slide Frontmatter
+
+\`\`\`yaml
+---
+title: My Slide
+class: title-slide
+---
+\`\`\`
+
+Built-in classes:
+- \`title-slide\`
+- \`section-header\`
+- \`centered\`
+- \`two-column\`
+- \`diagram\`
+
+## Two-Column Notes
+
+For markdown-only content, \`two-column\` will flow content into columns.
+For strict side-by-side control, use explicit HTML wrappers inside the slide body.
+`,
+		},
+	],
+};

package/src/templates/driver.ts

@@ -12,6 +12,7 @@ import { mkdir, readFile, writeFile } from "node:fs/promises";
 import { dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
 import { crucible } from "./crucible.ts";
+import { deck } from "./deck.ts";
 import { handbook } from "./handbook.ts";
 import { minimal } from "./minimal.ts";
 import { pipeline } from "./pipeline.ts";
@@ -53,6 +54,7 @@ export function listTemplates(): TemplateDef[] {
 
 // Register built-in templates
 registerTemplate(minimal);
+registerTemplate(deck);
 registerTemplate(handbook);
 registerTemplate(pipeline);
 registerTemplate(productbook);
@@ -148,19 +150,27 @@ const STANDALONE_FILES = [
 	"src/shared.ts",
 	"src/engine.ts",
 	"src/theme.ts",
+	"src/plugin-loader.ts",
 	// Schemas (editor validation + migrations)
 	"schemas/README.md",
 	"schemas/site.schema.json",
 	"schemas/theme.schema.json",
+	"schemas/plugin.schema.json",
+	"schemas/plugin-registry.schema.json",
+	"schemas/plugins.schema.json",
 	"schemas/v0/site.schema.json",
 	"schemas/v0/theme.schema.json",
+	"schemas/v0/common.schema.json",
+	"schemas/v0/plugin.schema.json",
+	"schemas/v0/plugin-registry.schema.json",
+	"schemas/v0/plugins.schema.json",
 	// Site templates and assets
 	"src/site/template.html",
 	"src/site/styles.css",
 ];
 
 // Directories to copy entirely
-const STANDALONE_DIRS = ["assets"];
+const STANDALONE_DIRS = ["assets", "registry", "plugins-dist"];
 
 function toArrayBuffer(data: Uint8Array): ArrayBuffer {
 	// Normalize to a standalone ArrayBuffer to satisfy SubtleCrypto typing.

package/src/templates/minimal.ts

@@ -70,6 +70,7 @@ This is your documentation site, powered by [Kitfly](https://github.com/3leaps/k
 			path: ".gitignore",
 			content: () => `# Build output
 dist/
+bundles/
 
 # Dependencies (if using kitfly as dependency)
 node_modules/