kitfly 0.1.2 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kitfly",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "type": "module",
   "description": "Turn your writing into a website",
   "bin": {
@@ -10,6 +10,8 @@
     "src/",
     "scripts/",
     "schemas/",
+    "registry/",
+    "plugins-dist/",
     "dist/",
     "!dist/release/",
     "VERSION",
@@ -36,7 +38,7 @@
     "version:check": "bun run scripts/version-sync.ts --check"
   },
   "dependencies": {
-    "@3leaps/sysprims": "^0.1.12",
+    "@3leaps/sysprims": "^0.1.13",
     "@fulmenhq/tsfulmen": "^0.2.7",
     "marked": "^15.0.0"
   },

package/plugins-dist/callouts.css

@@ -0,0 +1,32 @@
+:root {
+  --kitfly-callout-border: var(--color-border);
+  --kitfly-callout-bg: var(--color-code-bg);
+  --kitfly-callout-title: var(--color-accent);
+}
+
+.kitfly-callout {
+  margin: 1rem 0;
+  padding: 0.9rem 1rem;
+  border: 1px solid var(--kitfly-callout-border);
+  border-left-width: 6px;
+  border-radius: 10px;
+  background: var(--kitfly-callout-bg);
+}
+
+.kitfly-callout > :first-child { margin-top: 0; }
+.kitfly-callout > :last-child { margin-bottom: 0; }
+
+.kitfly-callout-title {
+  font-weight: 700;
+  color: var(--kitfly-callout-title);
+  margin: 0 0 0.5rem 0;
+  font-size: 0.95em;
+  letter-spacing: 0.01em;
+  text-transform: uppercase;
+}
+
+.kitfly-callout--note { border-left-color: #2563eb; }
+.kitfly-callout--tip { border-left-color: #059669; }
+.kitfly-callout--info { border-left-color: #0ea5e9; }
+.kitfly-callout--warning { border-left-color: #d97706; }
+.kitfly-callout--danger { border-left-color: #dc2626; }

package/plugins-dist/callouts.js

@@ -0,0 +1,46 @@
+(() => {
+  const TYPES = {
+    NOTE: "note",
+    TIP: "tip",
+    INFO: "info",
+    WARNING: "warning",
+    DANGER: "danger",
+  };
+
+  function parseType(text) {
+    const m = text.match(/^\s*(NOTE|TIP|INFO|WARNING|DANGER)\s*:\s*/i);
+    if (!m) return null;
+    const key = m[1].toUpperCase();
+    const type = TYPES[key];
+    if (!type) return null;
+    return { type, rest: text.slice(m[0].length) };
+  }
+
+  function apply() {
+    const blocks = document.querySelectorAll("blockquote");
+    for (const bq of blocks) {
+      const firstP = bq.querySelector("p");
+      if (!firstP) continue;
+      const parsed = parseType(firstP.textContent || "");
+      if (!parsed) continue;
+
+      bq.classList.add("kitfly-callout", `kitfly-callout--${parsed.type}`);
+
+      const title = document.createElement("div");
+      title.className = "kitfly-callout-title";
+      title.textContent = parsed.type;
+
+      if (parsed.rest.trim()) {
+        firstP.textContent = parsed.rest;
+      }
+
+      bq.insertBefore(title, bq.firstChild);
+    }
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", apply);
+  } else {
+    apply();
+  }
+})();

package/plugins-dist/slides-visuals.css

@@ -0,0 +1,224 @@
+:root {
+  --kitfly-visual-border: var(--color-border);
+  --kitfly-visual-bg: color-mix(in srgb, var(--color-bg-sidebar) 88%, var(--color-bg));
+  --kitfly-visual-muted: var(--color-text-muted);
+  --kitfly-visual-accent: var(--color-link);
+}
+
+.kitfly-visual {
+  border: 1px solid var(--kitfly-visual-border);
+  background: var(--kitfly-visual-bg);
+  border-radius: 12px;
+  padding: 1rem;
+  margin: 0.75rem 0;
+}
+
+.kitfly-visual > :first-child { margin-top: 0; }
+.kitfly-visual > :last-child { margin-bottom: 0; }
+
+/* KPI */
+.kitfly-kpi {
+  display: grid;
+  gap: 0.4rem;
+  text-align: center;
+}
+.kitfly-kpi-label {
+  font-size: 0.85rem;
+  color: var(--kitfly-visual-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+.kitfly-kpi-value {
+  font-size: 2rem;
+  font-weight: 800;
+  line-height: 1.1;
+}
+.kitfly-kpi-trend {
+  font-size: 0.95rem;
+  font-weight: 700;
+  color: var(--kitfly-visual-muted);
+}
+.kitfly-kpi-trend.pos { color: #059669; }
+.kitfly-kpi-trend.neg { color: #dc2626; }
+
+/* Stat grid */
+.kitfly-stat-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.75rem;
+}
+@media (max-width: 900px) {
+  .kitfly-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+@media (max-width: 640px) {
+  .kitfly-stat-grid { grid-template-columns: 1fr; }
+}
+.kitfly-stat {
+  border: 1px solid var(--kitfly-visual-border);
+  border-radius: 10px;
+  padding: 0.75rem 0.85rem;
+  background: color-mix(in srgb, var(--kitfly-visual-bg) 75%, var(--color-bg));
+}
+.kitfly-stat-label {
+  font-size: 0.8rem;
+  color: var(--kitfly-visual-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+.kitfly-stat-value {
+  font-size: 1.35rem;
+  font-weight: 800;
+  margin-top: 0.25rem;
+}
+.kitfly-stat-trend {
+  font-size: 0.9rem;
+  font-weight: 700;
+  margin-top: 0.2rem;
+  color: var(--kitfly-visual-muted);
+}
+.kitfly-stat-trend.pos { color: #059669; }
+.kitfly-stat-trend.neg { color: #dc2626; }
+
+/* Compare */
+.kitfly-compare {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+}
+.kitfly-compare-col {
+  border: 1px solid var(--kitfly-visual-border);
+  border-radius: 10px;
+  padding: 0.75rem 0.85rem;
+  background: color-mix(in srgb, var(--kitfly-visual-bg) 75%, var(--color-bg));
+}
+.kitfly-compare-title {
+  font-weight: 800;
+  font-size: 0.95rem;
+  margin-bottom: 0.5rem;
+  color: color-mix(in srgb, var(--kitfly-visual-accent) 70%, var(--color-text));
+}
+.kitfly-compare-list {
+  margin: 0;
+  padding-left: 1.1rem;
+}
+
+/* Quadrant grid */
+.kitfly-quadrant { position: relative; }
+.kitfly-quadrant-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.75rem;
+}
+.kitfly-quadrant-cell.block {
+  background: color-mix(in srgb, var(--kitfly-visual-bg) 70%, var(--color-bg));
+}
+.kitfly-quadrant-axis {
+  position: absolute;
+  font-size: 0.8rem;
+  color: var(--kitfly-visual-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+.kitfly-quadrant-axis.axis-x { bottom: -0.1rem; right: 0; }
+.kitfly-quadrant-axis.axis-y {
+  top: 0;
+  left: -0.25rem;
+  transform: translateX(-100%) rotate(-90deg);
+  transform-origin: top left;
+}
+
+/* Scorecard */
+.kitfly-scorecard {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 0.75rem;
+}
+@media (max-width: 900px) {
+  .kitfly-scorecard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+.kitfly-scorecard-metric {
+  border: 1px solid var(--kitfly-visual-border);
+  border-radius: 10px;
+  padding: 0.75rem 0.85rem;
+  background: color-mix(in srgb, var(--kitfly-visual-bg) 75%, var(--color-bg));
+}
+.kitfly-scorecard-label {
+  font-size: 0.8rem;
+  color: var(--kitfly-visual-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+.kitfly-scorecard-value {
+  font-size: 1.4rem;
+  font-weight: 900;
+  margin-top: 0.25rem;
+}
+.kitfly-scorecard-trend {
+  font-size: 0.9rem;
+  font-weight: 700;
+  margin-top: 0.2rem;
+  color: var(--kitfly-visual-muted);
+}
+.kitfly-scorecard-trend.pos { color: #059669; }
+.kitfly-scorecard-trend.neg { color: #dc2626; }
+
+/* Comparison table */
+.kitfly-comparison-table { padding: 0.75rem; }
+.kitfly-table-row {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(0, 1fr);
+  gap: 0.5rem;
+  padding: 0.4rem 0.25rem;
+}
+.kitfly-table-head {
+  border-bottom: 1px solid var(--kitfly-visual-border);
+  margin-bottom: 0.25rem;
+}
+.kitfly-table-head .kitfly-table-cell {
+  font-weight: 900;
+  color: color-mix(in srgb, var(--kitfly-visual-accent) 70%, var(--color-text));
+}
+.kitfly-table-cell {
+  padding: 0.4rem 0.55rem;
+  border: 1px solid color-mix(in srgb, var(--kitfly-visual-border) 65%, transparent);
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--kitfly-visual-bg) 75%, var(--color-bg));
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+/* Layer cake */
+.kitfly-layer-cake { display: grid; gap: 0.5rem; }
+.kitfly-layer {
+  border: 1px solid var(--kitfly-visual-border);
+  border-radius: 10px;
+  padding: 0.75rem 0.85rem;
+  text-align: center;
+  font-weight: 800;
+  background: color-mix(in srgb, var(--kitfly-visual-accent) calc(6% + (var(--kitfly-layer-idx) * 4%)), var(--kitfly-visual-bg));
+}
+
+/* Pyramid */
+.kitfly-pyramid { display: grid; gap: 0.5rem; }
+.kitfly-pyramid-level {
+  border: 1px solid var(--kitfly-visual-border);
+  border-radius: 10px;
+  padding: 0.7rem 0.85rem;
+  text-align: center;
+  font-weight: 800;
+  margin-inline: auto;
+  background: color-mix(in srgb, var(--kitfly-visual-accent) 10%, var(--kitfly-visual-bg));
+}
+
+/* Funnel */
+.kitfly-funnel { display: grid; gap: 0.5rem; }
+.kitfly-funnel-stage {
+  border: 1px solid var(--kitfly-visual-border);
+  border-radius: 10px;
+  padding: 0.7rem 0.85rem;
+  text-align: center;
+  font-weight: 800;
+  margin-inline: auto;
+  background: color-mix(in srgb, var(--kitfly-visual-accent) 10%, var(--kitfly-visual-bg));
+}