kitfly 0.1.2 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kitfly",
-  "version": "0.1.2",
+  "version": "0.2.1",
   "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,390 @@
+: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));
+}
+
+.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;
+  }
+}