kitfly 0.2.0 → 0.2.3

package/plugins-dist/slides-visuals.css

@@ -222,3 +222,169 @@
   margin-inline: auto;
   background: color-mix(in srgb, var(--kitfly-visual-accent) 10%, var(--kitfly-visual-bg));
 }
+
+.kitfly-visual .block {
+  border: 1px solid var(--kitfly-visual-border);
+  border-radius: 10px;
+  padding: 0.6rem 0.75rem;
+  background: color-mix(in srgb, var(--kitfly-visual-bg) 75%, var(--color-bg));
+}
+.kitfly-visual .accent {
+  background: color-mix(in srgb, var(--kitfly-visual-accent) 12%, var(--kitfly-visual-bg));
+  color: color-mix(in srgb, var(--kitfly-visual-accent) 70%, var(--color-text));
+  font-weight: 800;
+}
+
+/* Timeline horizontal */
+.kitfly-timeline-h { overflow-x: auto; }
+.kitfly-timeline-h-track {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.2rem 0;
+}
+.kitfly-timeline-h-track::before {
+  content: "";
+  position: absolute;
+  left: 0.5rem;
+  right: 0.5rem;
+  top: 50%;
+  border-top: 2px solid var(--kitfly-visual-border);
+}
+.kitfly-timeline-h-event {
+  position: relative;
+  display: grid;
+  justify-items: center;
+  gap: 0.3rem;
+  min-width: 7rem;
+}
+.kitfly-timeline-h-marker {
+  width: 0.7rem;
+  height: 0.7rem;
+  border-radius: 999px;
+  border: 2px solid color-mix(in srgb, var(--kitfly-visual-accent) 60%, var(--kitfly-visual-border));
+  background: var(--color-bg);
+  z-index: 1;
+}
+.kitfly-timeline-h-label { font-weight: 700; text-align: center; }
+.kitfly-timeline-h-date { color: var(--kitfly-visual-muted); font-size: 0.88rem; text-align: center; }
+
+/* Timeline vertical */
+.kitfly-timeline-v-track {
+  position: relative;
+  display: grid;
+  gap: 0.75rem;
+}
+.kitfly-timeline-v-track::before {
+  content: "";
+  position: absolute;
+  left: 0.35rem;
+  top: 0.2rem;
+  bottom: 0.2rem;
+  border-left: 2px solid var(--kitfly-visual-border);
+}
+.kitfly-timeline-v-event {
+  position: relative;
+  display: grid;
+  grid-template-columns: 1rem 1fr;
+  gap: 0.65rem;
+  align-items: start;
+}
+.kitfly-timeline-v-marker {
+  width: 0.7rem;
+  height: 0.7rem;
+  margin-top: 0.28rem;
+  border-radius: 999px;
+  border: 2px solid color-mix(in srgb, var(--kitfly-visual-accent) 60%, var(--kitfly-visual-border));
+  background: var(--color-bg);
+  z-index: 1;
+}
+.kitfly-timeline-v-label { font-weight: 700; }
+.kitfly-timeline-v-date { color: var(--kitfly-visual-muted); font-size: 0.88rem; margin-top: 0.2rem; }
+
+/* Flow branching */
+.kitfly-flow-branch { display: grid; gap: 0.5rem; justify-items: center; }
+.kitfly-flow-branch-source,
+.kitfly-flow-branch-split { width: min(28rem, 100%); text-align: center; }
+.kitfly-flow-branch-arrow { color: var(--kitfly-visual-muted); line-height: 1; }
+.kitfly-flow-branch-arms,
+.kitfly-flow-branch-targets {
+  width: 100%;
+  display: grid;
+  gap: 0.55rem;
+  grid-template-columns: repeat(var(--kitfly-branch-count, 1), minmax(0, 1fr));
+}
+.kitfly-flow-branch-arm { text-align: center; color: var(--kitfly-visual-muted); }
+.kitfly-flow-branch-target { text-align: center; min-width: 0; overflow-wrap: anywhere; }
+
+/* Flow converging */
+.kitfly-flow-converge { display: grid; gap: 0.5rem; justify-items: center; }
+.kitfly-flow-converge-sources,
+.kitfly-flow-converge-arms {
+  width: 100%;
+  display: grid;
+  gap: 0.55rem;
+  grid-template-columns: repeat(var(--kitfly-source-count, 1), minmax(0, 1fr));
+}
+.kitfly-flow-converge-source,
+.kitfly-flow-converge-target,
+.kitfly-flow-converge-merge { text-align: center; min-width: 0; overflow-wrap: anywhere; }
+.kitfly-flow-converge-arm,
+.kitfly-flow-converge-arrow { text-align: center; color: var(--kitfly-visual-muted); }
+.kitfly-flow-converge-target,
+.kitfly-flow-converge-merge { width: min(28rem, 100%); }
+
+/* Staircase */
+.kitfly-staircase { display: grid; gap: 0.45rem; }
+.kitfly-staircase-step {
+  border: 1px solid var(--kitfly-visual-border);
+  border-radius: 10px;
+  padding: 0.6rem 0.75rem;
+  width: calc(100% - (var(--kitfly-step-level, 0) * 28%));
+  margin-left: calc(var(--kitfly-step-level, 0) * 28%);
+  font-weight: 700;
+  background: color-mix(in srgb, var(--kitfly-visual-accent) calc(6% + (var(--kitfly-step-level, 0) * 12%)), var(--kitfly-visual-bg));
+}
+.kitfly-staircase.is-down .kitfly-staircase-step {
+  width: calc(100% - ((1 - var(--kitfly-step-level, 0)) * 28%));
+  margin-left: calc((1 - var(--kitfly-step-level, 0)) * 28%);
+}
+
+@media (max-width: 640px) {
+  .kitfly-timeline-h-track {
+    display: grid;
+    justify-content: stretch;
+    gap: 0.75rem;
+    padding-left: 1rem;
+  }
+  .kitfly-timeline-h-track::before {
+    left: 0.35rem;
+    right: auto;
+    top: 0.2rem;
+    bottom: 0.2rem;
+    border-top: 0;
+    border-left: 2px solid var(--kitfly-visual-border);
+  }
+  .kitfly-timeline-h-event {
+    grid-template-columns: 1rem 1fr;
+    grid-template-rows: auto auto;
+    align-items: start;
+    min-width: 0;
+  }
+  .kitfly-timeline-h-marker {
+    grid-column: 1;
+    grid-row: 1 / span 2;
+    margin-top: 0.25rem;
+  }
+  .kitfly-timeline-h-label { grid-column: 2; grid-row: 1; }
+  .kitfly-timeline-h-date { grid-column: 2; grid-row: 2; }
+  .kitfly-timeline-h-label,
+  .kitfly-timeline-h-date { text-align: left; }
+  .kitfly-flow-branch-arms,
+  .kitfly-flow-branch-targets,
+  .kitfly-flow-converge-sources,
+  .kitfly-flow-converge-arms {
+    grid-template-columns: 1fr;
+  }
+}

package/plugins-dist/slides-visuals.js

@@ -89,6 +89,12 @@
         return ["left", "right"];
       case "comparison-table":
         return ["headers", "rows"];
+      case "flow-branching":
+        return ["branches"];
+      case "flow-converging":
+        return ["sources"];
+      case "staircase":
+        return ["steps"];
       default:
         return [];
     }
@@ -98,6 +104,12 @@
     switch (type) {
       case "compare":
         return ["left-title", "right-title"];
+      case "flow-branching":
+        return ["source", "split"];
+      case "flow-converging":
+        return ["target", "merge"];
+      case "staircase":
+        return ["direction"];
       default:
         return [];
     }
@@ -120,38 +132,6 @@
     return { key, value: parseScalar(m[2]) };
   }
 
-  function asTextItem(value) {
-    if (typeof value === "string") return value;
-    if (!value || typeof value !== "object") return String(value ?? "");
-    if (typeof value.text === "string") return value.text;
-    if (typeof value.label === "string" && typeof value.value === "string") return `${value.label}: ${value.value}`;
-    const parts = [];
-    for (const [k, v] of Object.entries(value)) {
-      if (typeof v === "string" && v.trim()) parts.push(`${k}: ${v}`);
-    }
-    return parts.length ? parts.join(" · ") : "";
-  }
-
-  function listKeysForType(type) {
-    switch (type) {
-      case "compare":
-        return ["left", "right"];
-      case "comparison-table":
-        return ["headers", "rows"];
-      default:
-        return [];
-    }
-  }
-
-  function isListKeyMarker(li, allowedKeys) {
-    if (!allowedKeys || allowedKeys.length === 0) return null;
-    const raw = (li.textContent || "").trim();
-    const m = raw.match(/^([a-z0-9_-]+)\s*:\s*$/i);
-    if (!m) return null;
-    const key = m[1].toLowerCase();
-    return allowedKeys.includes(key) ? key : null;
-  }
-
   function parseBodyNodes(nodes) {
     const out = {};
     let pendingKey = null;
@@ -366,6 +346,104 @@
     return root;
   }
 
+  function renderTimelineHorizontal(data) {
+    const events = Array.isArray(data.events) ? data.events : [];
+    const root = el("div", "kitfly-visual kitfly-timeline-h");
+    const track = el("div", "kitfly-timeline-h-track");
+    for (const event of events) {
+      const item = typeof event === "object" && event ? event : { label: String(event ?? "") };
+      const node = el("div", "kitfly-timeline-h-event");
+      node.appendChild(el("div", "kitfly-timeline-h-label", item.label || ""));
+      node.appendChild(el("div", "kitfly-timeline-h-marker"));
+      if (item.date) node.appendChild(el("div", "kitfly-timeline-h-date", item.date));
+      track.appendChild(node);
+    }
+    root.appendChild(track);
+    return root;
+  }
+
+  function renderTimelineVertical(data) {
+    const events = Array.isArray(data.events) ? data.events : [];
+    const root = el("div", "kitfly-visual kitfly-timeline-v");
+    const track = el("div", "kitfly-timeline-v-track");
+    for (const event of events) {
+      const item = typeof event === "object" && event ? event : { label: String(event ?? "") };
+      const row = el("div", "kitfly-timeline-v-event");
+      row.appendChild(el("div", "kitfly-timeline-v-marker"));
+      const content = el("div", "kitfly-timeline-v-content");
+      content.appendChild(el("div", "kitfly-timeline-v-label", item.label || ""));
+      if (item.date) content.appendChild(el("div", "kitfly-timeline-v-date", item.date));
+      row.appendChild(content);
+      track.appendChild(row);
+    }
+    root.appendChild(track);
+    return root;
+  }
+
+  function renderFlowBranching(data) {
+    const source = String(data.source || "").trim();
+    const split = String(data.split || "").trim();
+    const branches = Array.isArray(data.branches) ? data.branches : [];
+    const branchCount = Math.max(branches.length, 1);
+    const root = el("div", "kitfly-visual kitfly-flow-branch");
+    root.style.setProperty("--kitfly-branch-count", String(branchCount));
+    root.appendChild(el("div", "kitfly-flow-branch-source block", source));
+    root.appendChild(el("div", "kitfly-flow-branch-arrow", "↓"));
+    if (split) {
+      root.appendChild(el("div", "kitfly-flow-branch-split block accent", split));
+      root.appendChild(el("div", "kitfly-flow-branch-arrow", "↓"));
+    }
+    const arms = el("div", "kitfly-flow-branch-arms");
+    const targets = el("div", "kitfly-flow-branch-targets");
+    for (const branch of branches) {
+      arms.appendChild(el("div", "kitfly-flow-branch-arm", "↓"));
+      targets.appendChild(el("div", "kitfly-flow-branch-target block", asTextItem(branch)));
+    }
+    root.appendChild(arms);
+    root.appendChild(targets);
+    return root;
+  }
+
+  function renderFlowConverging(data) {
+    const sources = Array.isArray(data.sources) ? data.sources : [];
+    const merge = String(data.merge || "").trim();
+    const target = String(data.target || "").trim();
+    const sourceCount = Math.max(sources.length, 1);
+    const root = el("div", "kitfly-visual kitfly-flow-converge");
+    root.style.setProperty("--kitfly-source-count", String(sourceCount));
+    const sourceRow = el("div", "kitfly-flow-converge-sources");
+    const armRow = el("div", "kitfly-flow-converge-arms");
+    for (const source of sources) {
+      sourceRow.appendChild(el("div", "kitfly-flow-converge-source block", asTextItem(source)));
+      armRow.appendChild(el("div", "kitfly-flow-converge-arm", "↓"));
+    }
+    root.appendChild(sourceRow);
+    root.appendChild(armRow);
+    if (merge) {
+      root.appendChild(el("div", "kitfly-flow-converge-merge block accent", merge));
+      root.appendChild(el("div", "kitfly-flow-converge-arrow", "↓"));
+    }
+    root.appendChild(el("div", "kitfly-flow-converge-target block", target));
+    return root;
+  }
+
+  function renderStaircase(data) {
+    const steps = Array.isArray(data.steps) ? data.steps : [];
+    const direction = String(data.direction || "up").trim().toLowerCase();
+    const reverse = direction === "down";
+    const total = Math.max(steps.length - 1, 1);
+    const root = el("div", "kitfly-visual kitfly-staircase");
+    if (reverse) root.classList.add("is-down");
+    steps.forEach((step, idx) => {
+      const row = el("div", "kitfly-staircase-step", asTextItem(step));
+      const normalized = reverse ? (steps.length - 1 - idx) / total : idx / total;
+      row.style.setProperty("--kitfly-step-idx", String(idx));
+      row.style.setProperty("--kitfly-step-level", String(normalized));
+      root.appendChild(row);
+    });
+    return root;
+  }
+
   function renderBlock(type, data) {
     switch (type) {
       case "kpi":
@@ -386,6 +464,16 @@
         return renderPyramid(data);
       case "funnel":
         return renderFunnel(data);
+      case "timeline-horizontal":
+        return renderTimelineHorizontal(data);
+      case "timeline-vertical":
+        return renderTimelineVertical(data);
+      case "flow-branching":
+        return renderFlowBranching(data);
+      case "flow-converging":
+        return renderFlowConverging(data);
+      case "staircase":
+        return renderStaircase(data);
       default:
         return null;
     }
@@ -481,7 +569,10 @@
         buckets[currentKey] = [];
 
         for (const li of node.querySelectorAll(":scope > li")) {
-          if ((type === "stat-grid" || type === "scorecard") && currentKey === "metrics") {
+          if (
+            ((type === "stat-grid" || type === "scorecard") && currentKey === "metrics") ||
+            ((type === "timeline-horizontal" || type === "timeline-vertical") && currentKey === "events")
+          ) {
             buckets[currentKey].push(parseListItemToValue(li));
             continue;
           }

package/registry/plugins.yaml

@@ -1,8 +1,8 @@
 # yaml-language-server: $schema=../schemas/v0/plugin-registry.schema.json
 version: 1
-updated: "2026-02-13"
+updated: "2026-02-15"
 baseUrl: "https://github.com/3leaps/kitfly/releases/download"
-# Canonical plugin registry (v0.2.0-alpha)
+# Canonical plugin registry (v0.2.1)
 plugins:
   callouts:
     name: "Callout Boxes"
@@ -21,7 +21,7 @@ plugins:
   slides-visuals:
     name: "Slides Visuals"
     description: "Widgets and composed figures for Kitfly slides (::: blocks)"
-    version: "0.2.0"
+    version: "0.2.1"
     contract: "1"
     kitfly: ">=0.2.0 <1.0.0"
     license: MIT
@@ -31,5 +31,30 @@ plugins:
       js: "plugins-dist/slides-visuals.js"
       css: "plugins-dist/slides-visuals.css"
       assetSha256:
-        js: "sha256:d122e0a23d0a5edda4521e210b9d7ff98021c9690b9545635b1167f8a3db2f6a"
-        css: "sha256:99f020d59c0c006c4941566d351067189eb69c53fe4ffa422fe7d62fc30d62d2"
+        js: "sha256:716059fbb0045af5305e552557368fe812569121986e0ce533f96753197c6ee1"
+        css: "sha256:dae86214e5f3f628deb6fec3f7bd871fa419f0310993cde9e845392ac16d9ec1"
+  latex:
+    name: "LaTeX/KaTeX Math Rendering"
+    description: "LaTeX math rendering via KaTeX ($...$ inline, $$...$$ display, fenced math)"
+    version: "0.2.2"
+    contract: "1"
+    kitfly: ">=0.2.0 <1.0.0"
+    license: MIT
+    verified: true
+    assets:
+      js: "plugins-dist/latex.js"
+      assetSha256:
+        js: "sha256:5475e344dc424e3015c3a8b2fd8152101354fe2622d322a0fa4f73d1335b4232"
+  slides-charts-lite:
+    name: "Slides Charts Lite"
+    description: "Simple charts for Kitfly slides (bar, line, pie)"
+    version: "0.2.2"
+    contract: "1"
+    kitfly: ">=0.2.0 <1.0.0"
+    license: MIT
+    verified: true
+    modes: ["slides"]
+    assets:
+      js: "plugins-dist/slides-charts-lite.js"
+      assetSha256:
+        js: "sha256:ea1afbe48bc94c617af1ee2d53febcaa8d48e83253094a1cbef598f77ec15013"

package/schemas/v0/site.schema.json

@@ -22,6 +22,11 @@
       "description": "Root directory for content (relative to repo root)",
       "default": "."
     },
+    "dataroot": {
+      "type": "string",
+      "description": "Root directory for data binding files (relative to repo root)",
+      "default": "data"
+    },
     "title": {
       "type": "string",
       "description": "Site title shown in browser tab and header",
@@ -90,6 +95,10 @@
           "description": "Path to logo image (relative to site root)",
           "default": "assets/brand/logo.png"
         },
+        "logoDark": {
+          "type": "string",
+          "description": "Path to dark mode logo image (relative to site root). Shown when dark theme is active."
+        },
         "favicon": {
           "type": "string",
           "description": "Path to favicon image (relative to site root)",
@@ -191,6 +200,29 @@
           "type": "boolean",
           "description": "Show Built with Kitfly attribution",
           "default": true
+        },
+        "logo": {
+          "type": "string",
+          "description": "Path to footer logo image (relative to site root)"
+        },
+        "logoDark": {
+          "type": "string",
+          "description": "Path to dark mode footer logo image (relative to site root)"
+        },
+        "logoUrl": {
+          "type": "string",
+          "description": "Make footer logo a clickable link to this URL"
+        },
+        "logoAlt": {
+          "type": "string",
+          "description": "Alt text for footer logo (defaults to copyright text if set, brand name otherwise)"
+        },
+        "logoHeight": {
+          "type": "integer",
+          "description": "Max height of footer logo in pixels",
+          "minimum": 10,
+          "maximum": 40,
+          "default": 20
         }
       },
       "additionalProperties": false
@@ -213,6 +245,30 @@
         }
       },
       "additionalProperties": false
+    },
+    "prebuild": {
+      "type": "array",
+      "description": "Commands to run before dev/build/bundle",
+      "items": {
+        "type": "object",
+        "required": [
+          "command"
+        ],
+        "properties": {
+          "command": {
+            "type": "string",
+            "description": "Shell command to execute"
+          },
+          "watch": {
+            "type": "array",
+            "description": "File patterns that re-run this hook in dev mode",
+            "items": {
+              "type": "string"
+            }
+          }
+        },
+        "additionalProperties": false
+      }
     }
   },
   "additionalProperties": false