kitfly 0.1.2 → 0.2.0

package/plugins-dist/slides-visuals.js

@@ -0,0 +1,598 @@
+(() => {
+  const BLOCK_RE = /^:::\s*([a-z0-9-]+)\s*$/i;
+  const CLOSE_RE = /^:::\s*$/;
+
+  function parseScalar(raw) {
+    let v = String(raw ?? "").trim();
+    v = v.replace(/\s*:::\s*$/, "").trim();
+    if (!v) return "";
+    const m = v.match(/^"(.*)"$/) || v.match(/^'(.*)'$/);
+    if (m) return m[1];
+    return v;
+  }
+
+  function parseFence(text) {
+    const raw = String(text ?? "");
+    const trimmed = raw.trim();
+    if (!trimmed.startsWith(":::")) return null;
+    const lines = trimmed.split(/\r?\n/);
+    if (lines.length < 2) return null;
+    const head = lines[0].trim();
+    const tail = lines[lines.length - 1].trim();
+    const m = head.match(BLOCK_RE);
+    if (!m) return null;
+    if (!CLOSE_RE.test(tail)) return null;
+    const type = m[1].toLowerCase();
+    const body = lines.slice(1, -1);
+    return { type, data: parseLinesToObject(body) };
+  }
+
+  function parseLinesToObject(lines) {
+    const out = {};
+    let pendingKey = null;
+    for (const raw of lines) {
+      const line = String(raw ?? "");
+      const trimmed = line.trim();
+      if (!trimmed || trimmed.startsWith("#")) continue;
+      const kv = trimmed.match(/^([a-z0-9_-]+)\s*:\s*(.*)$/i);
+      if (!kv) continue;
+      const key = kv[1];
+      const value = kv[2];
+      if (value) {
+        out[key] = parseScalar(value);
+        pendingKey = null;
+      } else {
+        pendingKey = key;
+        out[key] = out[key] ?? [];
+      }
+    }
+    return out;
+  }
+
+  function parseListItemToValue(li) {
+    const parts = [];
+    for (const child of li.querySelectorAll(":scope > p")) {
+      const t = (child.textContent || "").trim();
+      if (t) parts.push(t);
+    }
+    const raw = parts.length ? parts.join("\n") : (li.textContent || "").trim();
+    const lines = raw
+      .split(/\r?\n/)
+      .map((l) => l.trim())
+      .filter((l) => l && l !== ":::");
+    const obj = {};
+    let any = false;
+    for (const line of lines) {
+      const kv = line.match(/^([a-z0-9_-]+)\s*:\s*(.*)$/i);
+      if (!kv) continue;
+      any = true;
+      obj[kv[1]] = parseScalar(kv[2]);
+    }
+    return any ? obj : parseScalar(raw);
+  }
+
+  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 scalarKeysForType(type) {
+    switch (type) {
+      case "compare":
+        return ["left-title", "right-title"];
+      default:
+        return [];
+    }
+  }
+
+  function isListKeyMarkerText(text, allowedKeys) {
+    if (!allowedKeys || allowedKeys.length === 0) return null;
+    const m = text.match(/^([a-z0-9_-]+)\s*:\s*$/i);
+    if (!m) return null;
+    const key = m[1].toLowerCase();
+    return allowedKeys.includes(key) ? key : null;
+  }
+
+  function parseScalarMarkerText(text, allowedScalarKeys) {
+    if (!allowedScalarKeys || allowedScalarKeys.length === 0) return null;
+    const m = text.match(/^([a-z0-9_-]+)\s*:\s*(.+)$/i);
+    if (!m) return null;
+    const key = m[1].toLowerCase();
+    if (!allowedScalarKeys.includes(key)) return null;
+    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;
+
+    for (const node of nodes) {
+      const tag = String(node.tagName || "").toUpperCase();
+      if (tag === "P") {
+        const lines = (node.textContent || "").split(/\r?\n/);
+        for (const rawLine of lines) {
+          const trimmed = rawLine.trim();
+          if (!trimmed || trimmed.startsWith("#")) continue;
+          const kv = trimmed.match(/^([a-z0-9_-]+)\s*:\s*(.*)$/i);
+          if (!kv) continue;
+          const key = kv[1];
+          const value = kv[2];
+          if (value) {
+            out[key] = parseScalar(value);
+            pendingKey = null;
+          } else {
+            pendingKey = key;
+            out[key] = [];
+          }
+        }
+        continue;
+      }
+
+      if ((tag === "UL" || tag === "OL") && pendingKey) {
+        const items = [];
+        for (const li of node.querySelectorAll(":scope > li")) {
+          items.push(parseListItemToValue(li));
+        }
+        out[pendingKey] = items;
+        pendingKey = null;
+        continue;
+      }
+    }
+
+    return out;
+  }
+
+  function el(tag, className, text) {
+    const node = document.createElement(tag);
+    if (className) node.className = className;
+    if (text != null && text !== "") node.textContent = String(text);
+    return node;
+  }
+
+  function renderKpi(data) {
+    const root = el("div", "kitfly-visual kitfly-kpi");
+    root.appendChild(el("div", "kitfly-kpi-label", data.label || ""));
+    root.appendChild(el("div", "kitfly-kpi-value", data.value || ""));
+    const trend = String(data.trend || "").trim();
+    const trendEl = el("div", "kitfly-kpi-trend", trend);
+    if (/^\+/.test(trend)) trendEl.classList.add("pos");
+    if (/^-/.test(trend)) trendEl.classList.add("neg");
+    root.appendChild(trendEl);
+    return root;
+  }
+
+  function renderStatGrid(data) {
+    const items = Array.isArray(data.metrics) ? data.metrics : Array.isArray(data.items) ? data.items : [];
+    const root = el("div", "kitfly-visual kitfly-stat-grid");
+    for (const it of items) {
+      const item = typeof it === "object" && it ? it : { label: String(it ?? "") };
+      const card = el("div", "kitfly-stat");
+      card.appendChild(el("div", "kitfly-stat-label", item.label || ""));
+      card.appendChild(el("div", "kitfly-stat-value", item.value || ""));
+      const trend = String(item.trend || "").trim();
+      if (trend) {
+        const t = el("div", "kitfly-stat-trend", trend);
+        if (/^\+/.test(trend)) t.classList.add("pos");
+        if (/^-/.test(trend)) t.classList.add("neg");
+        card.appendChild(t);
+      }
+      root.appendChild(card);
+    }
+    return root;
+  }
+
+  function renderCompare(data) {
+    const root = el("div", "kitfly-visual kitfly-compare");
+    const left = el("div", "kitfly-compare-col");
+    const right = el("div", "kitfly-compare-col");
+    left.appendChild(el("div", "kitfly-compare-title", data["left-title"] || data.leftTitle || "Left"));
+    right.appendChild(el("div", "kitfly-compare-title", data["right-title"] || data.rightTitle || "Right"));
+
+    const leftItems = Array.isArray(data.left) ? data.left : [];
+    const rightItems = Array.isArray(data.right) ? data.right : [];
+
+    const ulL = el("ul", "kitfly-compare-list");
+    const ulR = el("ul", "kitfly-compare-list");
+    for (const item of leftItems) ulL.appendChild(el("li", "", asTextItem(item)));
+    for (const item of rightItems) ulR.appendChild(el("li", "", asTextItem(item)));
+    left.appendChild(ulL);
+    right.appendChild(ulR);
+    root.appendChild(left);
+    root.appendChild(right);
+    return root;
+  }
+
+  function renderQuadrantGrid(data) {
+    const root = el("div", "kitfly-visual kitfly-quadrant");
+    const grid = el("div", "kitfly-quadrant-grid");
+    grid.appendChild(el("div", "kitfly-quadrant-cell tl block", data.tl || ""));
+    grid.appendChild(el("div", "kitfly-quadrant-cell tr block", data.tr || ""));
+    grid.appendChild(el("div", "kitfly-quadrant-cell bl block", data.bl || ""));
+    grid.appendChild(el("div", "kitfly-quadrant-cell br block", data.br || ""));
+    root.appendChild(grid);
+
+    const axisX = el("div", "kitfly-quadrant-axis axis-x", data["axis-x"] || data.axisX || "");
+    const axisY = el("div", "kitfly-quadrant-axis axis-y", data["axis-y"] || data.axisY || "");
+    if (axisX.textContent) root.appendChild(axisX);
+    if (axisY.textContent) root.appendChild(axisY);
+    return root;
+  }
+
+  function renderScorecard(data) {
+    const metrics = Array.isArray(data.metrics) ? data.metrics : [];
+    const root = el("div", "kitfly-visual kitfly-scorecard");
+    for (const m of metrics) {
+      const item = typeof m === "object" && m ? m : { label: String(m ?? "") };
+      const card = el("div", "kitfly-scorecard-metric");
+      card.appendChild(el("div", "kitfly-scorecard-label", item.label || ""));
+      card.appendChild(el("div", "kitfly-scorecard-value", item.value || ""));
+      const trend = String(item.trend || "").trim();
+      if (trend) {
+        const t = el("div", "kitfly-scorecard-trend", trend);
+        if (/^\+/.test(trend)) t.classList.add("pos");
+        if (/^-/.test(trend)) t.classList.add("neg");
+        card.appendChild(t);
+      }
+      root.appendChild(card);
+    }
+    return root;
+  }
+
+  function rowCells(row) {
+    if (typeof row === "string") {
+      const t = row.trim();
+      if (t.startsWith("[") && t.endsWith("]")) {
+        try {
+          const parsed = JSON.parse(t);
+          if (Array.isArray(parsed)) return parsed.map((v) => String(v ?? ""));
+        } catch {
+          // fall through
+        }
+      }
+      return row.split("|").map((s) => s.trim()).filter(Boolean);
+    }
+    if (typeof row === "object" && row && Array.isArray(row.cells)) return row.cells.map((s) => String(s ?? ""));
+    return [String(row ?? "")];
+  }
+
+  function renderComparisonTable(data) {
+    const headers = Array.isArray(data.headers) ? data.headers : [];
+    const rows = Array.isArray(data.rows) ? data.rows : [];
+    const root = el("div", "kitfly-visual kitfly-comparison-table");
+
+    const headRow = el("div", "kitfly-table-row kitfly-table-head");
+    for (const h of headers) headRow.appendChild(el("div", "kitfly-table-cell", asTextItem(h)));
+    root.appendChild(headRow);
+
+    for (const r of rows) {
+      const row = el("div", "kitfly-table-row");
+      for (const c of rowCells(r)) row.appendChild(el("div", "kitfly-table-cell", asTextItem(c)));
+      root.appendChild(row);
+    }
+
+    return root;
+  }
+
+  function renderLayerCake(data) {
+    const layers = Array.isArray(data.layers) ? data.layers : [];
+    const root = el("div", "kitfly-visual kitfly-layer-cake");
+    layers.forEach((layer, idx) => {
+      const band = el("div", "kitfly-layer", layer);
+      band.style.setProperty("--kitfly-layer-idx", String(idx));
+      root.appendChild(band);
+    });
+    return root;
+  }
+
+  function renderPyramid(data) {
+    const levels = Array.isArray(data.levels) ? data.levels : [];
+    const root = el("div", "kitfly-visual kitfly-pyramid");
+    const total = Math.max(levels.length, 1);
+    const min = 55;
+    const max = 100;
+    levels.forEach((lvl, idx) => {
+      const row = el("div", "kitfly-pyramid-level", lvl);
+      const t = Math.max(total - 1, 1);
+      const width = min + (idx / t) * (max - min);
+      row.style.width = `${width.toFixed(2)}%`;
+      root.appendChild(row);
+    });
+    return root;
+  }
+
+  function renderFunnel(data) {
+    const stages = Array.isArray(data.stages) ? data.stages : [];
+    const root = el("div", "kitfly-visual kitfly-funnel");
+    const total = Math.max(stages.length, 1);
+    const min = 55;
+    const max = 100;
+    stages.forEach((stage, idx) => {
+      const row = el("div", "kitfly-funnel-stage", stage);
+      const t = Math.max(total - 1, 1);
+      const width = max - (idx / t) * (max - min);
+      row.style.width = `${width.toFixed(2)}%`;
+      root.appendChild(row);
+    });
+    return root;
+  }
+
+  function renderBlock(type, data) {
+    switch (type) {
+      case "kpi":
+        return renderKpi(data);
+      case "stat-grid":
+        return renderStatGrid(data);
+      case "compare":
+        return renderCompare(data);
+      case "quadrant-grid":
+        return renderQuadrantGrid(data);
+      case "scorecard":
+        return renderScorecard(data);
+      case "comparison-table":
+        return renderComparisonTable(data);
+      case "layer-cake":
+        return renderLayerCake(data);
+      case "pyramid":
+        return renderPyramid(data);
+      case "funnel":
+        return renderFunnel(data);
+      default:
+        return null;
+    }
+  }
+
+  function tryReplaceSingleNode(node) {
+    const txt = node.textContent || "";
+    if (!txt.trimStart().startsWith(":::")) return false;
+    const parsed = parseFence(txt);
+    if (!parsed) return false;
+    const rendered = renderBlock(parsed.type, parsed.data);
+    if (!rendered) return false;
+    rendered.setAttribute("data-kitfly-visual", parsed.type);
+    node.replaceWith(rendered);
+    return true;
+  }
+
+  function tryReplaceFragmentedFence(start) {
+    const startTxt = String(start.textContent || "");
+    const lines = startTxt.split(/\r?\n/);
+    const first = (lines[0] || "").trim();
+    const m = first.match(BLOCK_RE);
+    if (!m) return false;
+    const type = m[1].toLowerCase();
+
+    const between = [];
+    let end = null;
+    let cur = start.nextElementSibling;
+    while (cur) {
+      const allLines = String(cur.textContent || "")
+        .split(/\r?\n/)
+        .map((l) => l.trim())
+        .filter(Boolean);
+      if (allLines.some((l) => l === ":::")) {
+        end = cur;
+        break;
+      }
+      between.push(cur);
+      cur = cur.nextElementSibling;
+    }
+    if (!end) return false;
+
+    const data = parseBodyNodesWithFirstLines(lines.slice(1), between, end, type);
+    const rendered = renderBlock(type, data);
+    if (!rendered) return false;
+    rendered.setAttribute("data-kitfly-visual", type);
+
+    start.parentNode.insertBefore(rendered, start);
+    const toRemove = [start, ...between, end];
+    for (const n of toRemove) n.remove();
+    return true;
+  }
+
+  function parseBodyNodesWithFirstLines(firstLines, between, end, type) {
+    const out = {};
+    let pendingKey = null;
+
+    const seed = parseLinesToObject(firstLines);
+    for (const k of Object.keys(seed)) {
+      out[k] = seed[k];
+      if (Array.isArray(out[k])) pendingKey = k;
+    }
+
+    const allowedKeys = listKeysForType(type);
+    const allowedScalarKeys = scalarKeysForType(type);
+
+    const nodes = [...between, end];
+    for (const node of nodes) {
+      const tag = String(node.tagName || "").toUpperCase();
+      if (tag === "P") {
+        const lines = (node.textContent || "").split(/\r?\n/);
+        for (const rawLine of lines) {
+          const trimmed = rawLine.trim();
+          if (!trimmed || trimmed === ":::" || trimmed.startsWith("#")) continue;
+          const kv = trimmed.match(/^([a-z0-9_-]+)\s*:\s*(.*)$/i);
+          if (!kv) continue;
+          const key = kv[1];
+          const value = kv[2];
+          if (value) {
+            out[key] = parseScalar(value);
+            pendingKey = null;
+          } else {
+            pendingKey = key;
+            out[key] = [];
+          }
+        }
+        continue;
+      }
+
+      if ((tag === "UL" || tag === "OL") && pendingKey) {
+        let currentKey = pendingKey;
+        const buckets = {};
+        buckets[currentKey] = [];
+
+        for (const li of node.querySelectorAll(":scope > li")) {
+          if ((type === "stat-grid" || type === "scorecard") && currentKey === "metrics") {
+            buckets[currentKey].push(parseListItemToValue(li));
+            continue;
+          }
+
+          const textLines = String(li.textContent || "")
+            .split(/\r?\n/)
+            .map((l) => l.trim())
+            .filter((l) => l && l !== ":::");
+
+          let anyContent = false;
+          let itemBucketKey = currentKey;
+          const itemLines = [];
+
+          function flushItemLines() {
+            if (!itemLines.length) return;
+            buckets[itemBucketKey] = buckets[itemBucketKey] || [];
+            buckets[itemBucketKey].push(parseScalar(itemLines.join(" ")));
+            itemLines.length = 0;
+            anyContent = true;
+          }
+
+          for (const line of textLines) {
+            const listMarker = isListKeyMarkerText(line, allowedKeys);
+            if (listMarker) {
+              flushItemLines();
+              currentKey = listMarker;
+              itemBucketKey = currentKey;
+              buckets[currentKey] = buckets[currentKey] || [];
+              anyContent = true;
+              continue;
+            }
+            const scalarMarker = parseScalarMarkerText(line, allowedScalarKeys);
+            if (scalarMarker) {
+              flushItemLines();
+              out[scalarMarker.key] = scalarMarker.value;
+              if (type === "compare" && scalarMarker.key === "right-title") {
+                currentKey = "right";
+                itemBucketKey = currentKey;
+                buckets[currentKey] = buckets[currentKey] || [];
+              }
+              if (type === "compare" && scalarMarker.key === "left-title") {
+                currentKey = "left";
+                itemBucketKey = currentKey;
+                buckets[currentKey] = buckets[currentKey] || [];
+              }
+              anyContent = true;
+              continue;
+            }
+            itemLines.push(line);
+          }
+
+          flushItemLines();
+          if (anyContent) continue;
+
+          // Fallback: absorbed key/value object in a <li>
+          if (!anyContent) {
+            const v = parseListItemToValue(li);
+            if (typeof v === "string") buckets[currentKey].push(v);
+          }
+        }
+
+        for (const [k, items] of Object.entries(buckets)) out[k] = items;
+        pendingKey = null;
+        continue;
+      }
+    }
+
+    return out;
+  }
+
+  function apply(root) {
+    const containers = root.querySelectorAll(".slide");
+    for (const container of containers) {
+      // First pass: handle single-node fences (flat key-values)
+      for (const node of container.querySelectorAll("p, pre, code")) {
+        if (node.closest(".kitfly-visual")) continue;
+        tryReplaceSingleNode(node);
+      }
+
+      // Second pass: handle fences split across siblings (lists turn into <ul><li>...)
+      let changed = true;
+      while (changed) {
+        changed = false;
+        const elems = container.querySelectorAll("p");
+        for (const p of elems) {
+          if (p.closest(".kitfly-visual")) continue;
+          const t = (p.textContent || "").trim();
+          if (!t.startsWith(":::")) continue;
+          if (tryReplaceFragmentedFence(p)) {
+            changed = true;
+            break;
+          }
+        }
+      }
+    }
+  }
+
+  if (typeof document === "undefined") {
+    globalThis.__kitflySlidesVisualsTest = {
+      parseBodyNodesWithFirstLines,
+      rowCells,
+    };
+  } else {
+    function start() {
+      apply(document);
+    }
+
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", start);
+    } else {
+      start();
+    }
+  }
+})();

package/registry/plugins.yaml

@@ -0,0 +1,35 @@
+# yaml-language-server: $schema=../schemas/v0/plugin-registry.schema.json
+version: 1
+updated: "2026-02-13"
+baseUrl: "https://github.com/3leaps/kitfly/releases/download"
+# Canonical plugin registry (v0.2.0-alpha)
+plugins:
+  callouts:
+    name: "Callout Boxes"
+    description: "Turns blockquotes starting with NOTE:/TIP:/WARNING: into styled callouts"
+    version: "0.2.0"
+    contract: "1"
+    kitfly: ">=0.2.0 <1.0.0"
+    license: MIT
+    verified: true
+    assets:
+      js: "plugins-dist/callouts.js"
+      css: "plugins-dist/callouts.css"
+      assetSha256:
+        js: "sha256:94cc1a1a0ef4107b531defe915c6fbcc848e2b60c13c8cce7c5bbe6ae9130148"
+        css: "sha256:7f8eb0c7f0aa75c9ce74b1f242e548e2fefcd4109c4ae93c93d479cbc08c1849"
+  slides-visuals:
+    name: "Slides Visuals"
+    description: "Widgets and composed figures for Kitfly slides (::: blocks)"
+    version: "0.2.0"
+    contract: "1"
+    kitfly: ">=0.2.0 <1.0.0"
+    license: MIT
+    verified: true
+    modes: ["slides"]
+    assets:
+      js: "plugins-dist/slides-visuals.js"
+      css: "plugins-dist/slides-visuals.css"
+      assetSha256:
+        js: "sha256:d122e0a23d0a5edda4521e210b9d7ff98021c9690b9545635b1167f8a3db2f6a"
+        css: "sha256:99f020d59c0c006c4941566d351067189eb69c53fe4ffa422fe7d62fc30d62d2"

package/schemas/README.md

@@ -30,3 +30,13 @@ Standalone sites are detached copies, so schemas must be self-describing.
 
 For convenience, `schemas/site.schema.json` and `schemas/theme.schema.json` remain as thin wrappers
 that `$ref` the latest `schemas/v0/*` schemas.
+
+Plugin-related schemas follow the same pattern:
+
+- `schemas/plugin.schema.json` → `schemas/v0/plugin.schema.json`
+- `schemas/plugin-registry.schema.json` → `schemas/v0/plugin-registry.schema.json`
+- `schemas/plugins.schema.json` → `schemas/v0/plugins.schema.json`
+
+Shared definitions live in:
+
+- `schemas/v0/common.schema.json` (shared `$defs` referenced by multiple schemas)

package/schemas/plugin-registry.schema.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://kitfly.app/schemas/plugin-registry.schema.json",
+  "$ref": "./v0/plugin-registry.schema.json"
+}