kitfly 0.2.1 → 0.2.4

package/dist/styles.css

@@ -161,14 +161,33 @@ body {
 }
 
 /* Logo dark mode - brighten for visibility */
-[data-theme="dark"] .logo-img,
-[data-theme="dark"] .logo-icon img {
+.logo-dark {
+  display: none;
+}
+
+[data-theme="dark"] .logo-light {
+  display: none;
+}
+
+[data-theme="dark"] .logo-dark {
+  display: block;
+}
+
+/* Logo dark mode - brighten for visibility (only when no dark variant provided) */
+[data-theme="dark"] .logo-img:not(.logo-light):not(.logo-dark),
+[data-theme="dark"] .logo-icon img:not(.logo-light):not(.logo-dark) {
   filter: brightness(1.3) saturate(1.2);
 }
 
 @media (prefers-color-scheme: dark) {
-  :root:not([data-theme="light"]) .logo-img,
-  :root:not([data-theme="light"]) .logo-icon img {
+  :root:not([data-theme="light"]) .logo-light {
+    display: none;
+  }
+  :root:not([data-theme="light"]) .logo-dark {
+    display: block;
+  }
+  :root:not([data-theme="light"]) .logo-img:not(.logo-light):not(.logo-dark),
+  :root:not([data-theme="light"]) .logo-icon img:not(.logo-light):not(.logo-dark) {
     filter: brightness(1.3) saturate(1.2);
   }
 }
@@ -945,6 +964,22 @@ body {
   color: var(--color-link);
 }
 
+.footer-logo-link {
+  display: inline-flex;
+  align-items: center;
+}
+
+.footer-logo-img {
+  height: auto;
+  width: auto;
+  vertical-align: middle;
+  opacity: 0.8;
+}
+
+.footer-logo-img:hover {
+  opacity: 1;
+}
+
 /* Mermaid diagrams */
 .mermaid {
   background: transparent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kitfly",
-  "version": "0.2.1",
+  "version": "0.2.4",
   "type": "module",
   "description": "Turn your writing into a website",
   "bin": {

package/plugins-dist/latex-runtime.js

@@ -0,0 +1,140 @@
+(() => {
+  function isCurrency(expr) {
+    return /^\d[\d,]*(?:\.\d+)?(?:\s*(?:to|-)\s*\d[\d,]*(?:\.\d+)?)?$/.test(expr.trim());
+  }
+
+  function shouldTreatAsLiteralInline(expr, text, closingIndex) {
+    if (/^\s|\s$/.test(expr) || /\n/.test(expr) || isCurrency(expr)) return true;
+    // Guard common currency range form "$5-$10" where expr becomes "5-".
+    if (/-\s*$/.test(expr)) {
+      const tail = text.slice(closingIndex + 1);
+      if (/^\d/.test(tail)) return true;
+    }
+    return false;
+  }
+
+  function findClosing(text, start, display) {
+    for (let i = start; i < text.length; i++) {
+      if (text[i] === "\\" && text[i + 1] === "$") {
+        i++;
+        continue;
+      }
+      if (display) {
+        if (text[i] === "$" && text[i + 1] === "$") return i;
+      } else if (text[i] === "$" && text[i - 1] !== "$" && text[i + 1] !== "$") {
+        return i;
+      }
+    }
+    return -1;
+  }
+
+  function splitMath(text) {
+    const out = [];
+    let buf = "";
+    let i = 0;
+
+    while (i < text.length) {
+      if (text[i] === "\\" && text[i + 1] === "$") {
+        buf += "$";
+        i += 2;
+        continue;
+      }
+      if (text[i] !== "$") {
+        buf += text[i++];
+        continue;
+      }
+
+      const display = text[i + 1] === "$";
+      const openLen = display ? 2 : 1;
+      const end = findClosing(text, i + openLen, display);
+      if (end < 0) {
+        buf += display ? "$$" : "$";
+        i += openLen;
+        continue;
+      }
+
+      const expr = text.slice(i + openLen, end);
+      if (!display && shouldTreatAsLiteralInline(expr, text, end)) {
+        buf += `$${expr}$`;
+        i = end + 1;
+        continue;
+      }
+
+      if (buf) out.push({ text: buf });
+      out.push({ math: expr, display });
+      buf = "";
+      i = end + openLen;
+    }
+
+    if (buf) out.push({ text: buf });
+    return out;
+  }
+
+  function renderFencedMath() {
+    document.querySelectorAll("pre > code.language-math").forEach((code) => {
+      const pre = code.parentElement;
+      if (!pre || pre.tagName !== "PRE") return;
+      const host = document.createElement("div");
+      host.className = "kitfly-katex-display";
+      window.katex.render(code.textContent || "", host, { displayMode: true, throwOnError: false });
+      pre.replaceWith(host);
+    });
+  }
+
+  function renderDelimitedMath() {
+    const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);
+    const nodes = [];
+    while (walker.nextNode()) {
+      const node = walker.currentNode;
+      const parent = node.parentElement;
+      if (!parent || parent.closest("pre, code, script, style, textarea, .katex")) continue;
+      if (!(node.textContent || "").includes("$")) continue;
+      nodes.push(node);
+    }
+
+    for (const node of nodes) {
+      const parts = splitMath(node.textContent || "");
+      if (!parts.some((p) => p.math)) continue;
+      const frag = document.createDocumentFragment();
+      for (const p of parts) {
+        if (p.text != null) {
+          frag.appendChild(document.createTextNode(p.text));
+        } else if (p.math != null) {
+          const host = document.createElement("span");
+          host.className = p.display ? "kitfly-katex-display" : "kitfly-katex-inline";
+          window.katex.render(p.math, host, { displayMode: Boolean(p.display), throwOnError: false });
+          frag.appendChild(host);
+        }
+      }
+      node.replaceWith(frag);
+    }
+  }
+
+  function apply() {
+    const styleId = "kitfly-latex-style";
+    if (!document.getElementById(styleId)) {
+      const style = document.createElement("style");
+      style.id = styleId;
+      style.textContent = ".kitfly-katex-display{display:block;text-align:center;margin:1em 0;overflow-x:auto}";
+      document.head.appendChild(style);
+    }
+
+    if (!window.katex?.render) {
+      console.warn("[kitfly:latex] KaTeX unavailable");
+      return;
+    }
+
+    renderFencedMath();
+    renderDelimitedMath();
+  }
+
+  if (typeof document === "undefined") {
+    globalThis.__kitflyLatexTest = { splitMath, isCurrency, shouldTreatAsLiteralInline };
+    return;
+  }
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", apply);
+  } else {
+    apply();
+  }
+})();

package/plugins-dist/latex.js

@@ -0,0 +1,178 @@
+(() => {
+  const KATEX_CSS_URL = "https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/katex.min.css";
+  const KATEX_CSS_SRI = "sha384-zh0CIslj+VczCZtlzBcjt5ppRcsAmDnRem7ESsYwWwg3m/OaJ2l4x7YBZl9Kxxib";
+  const KATEX_JS_URL = "https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/katex.min.js";
+  const KATEX_JS_SRI = "sha384-Rma6DA2IPUwhNxmrB/7S3Tno0YY7sFu9WSYMCuulLhIqYSGZ2gKCJWIqhBWqMQfh";
+
+  function isCurrency(expr) {
+    return /^\d[\d,]*(?:\.\d+)?(?:\s*(?:to|-)\s*\d[\d,]*(?:\.\d+)?)?$/.test(expr.trim());
+  }
+
+  function shouldTreatAsLiteralInline(expr, text, closingIndex) {
+    if (/^\s|\s$/.test(expr) || /\n/.test(expr) || isCurrency(expr)) return true;
+    // Guard common currency range form "$5-$10" where expr becomes "5-".
+    if (/-\s*$/.test(expr)) {
+      const tail = text.slice(closingIndex + 1);
+      if (/^\d/.test(tail)) return true;
+    }
+    return false;
+  }
+
+  function findClosing(text, start, display) {
+    for (let i = start; i < text.length; i++) {
+      if (text[i] === "\\" && text[i + 1] === "$") {
+        i++;
+        continue;
+      }
+      if (display) {
+        if (text[i] === "$" && text[i + 1] === "$") return i;
+      } else if (text[i] === "$" && text[i - 1] !== "$" && text[i + 1] !== "$") {
+        return i;
+      }
+    }
+    return -1;
+  }
+
+  function splitMath(text) {
+    const out = [];
+    let buf = "";
+    let i = 0;
+
+    while (i < text.length) {
+      if (text[i] === "\\" && text[i + 1] === "$") {
+        buf += "$";
+        i += 2;
+        continue;
+      }
+      if (text[i] !== "$") {
+        buf += text[i++];
+        continue;
+      }
+
+      const display = text[i + 1] === "$";
+      const openLen = display ? 2 : 1;
+      const end = findClosing(text, i + openLen, display);
+      if (end < 0) {
+        buf += display ? "$$" : "$";
+        i += openLen;
+        continue;
+      }
+
+      const expr = text.slice(i + openLen, end);
+      if (!display && shouldTreatAsLiteralInline(expr, text, end)) {
+        buf += `$${expr}$`;
+        i = end + 1;
+        continue;
+      }
+
+      if (buf) out.push({ text: buf });
+      out.push({ math: expr, display });
+      buf = "";
+      i = end + openLen;
+    }
+
+    if (buf) out.push({ text: buf });
+    return out;
+  }
+
+  function ensureTag(tag, attrs) {
+    const id = attrs["data-kitfly-latex"];
+    const existing = document.querySelector(`${tag}[data-kitfly-latex="${id}"]`);
+    if (existing) return Promise.resolve(existing);
+    return new Promise((resolve, reject) => {
+      const el = document.createElement(tag);
+      Object.entries(attrs).forEach(([k, v]) => el.setAttribute(k, v));
+      el.addEventListener("load", () => resolve(el), { once: true });
+      el.addEventListener("error", () => reject(new Error(`Failed to load ${attrs.href || attrs.src}`)), {
+        once: true,
+      });
+      document.head.appendChild(el);
+    });
+  }
+
+  function renderFencedMath() {
+    document.querySelectorAll("pre > code.language-math").forEach((code) => {
+      const pre = code.parentElement;
+      if (!pre || pre.tagName !== "PRE") return;
+      const host = document.createElement("div");
+      host.className = "kitfly-katex-display";
+      window.katex.render(code.textContent || "", host, { displayMode: true, throwOnError: false });
+      pre.replaceWith(host);
+    });
+  }
+
+  function renderDelimitedMath() {
+    const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);
+    const nodes = [];
+    while (walker.nextNode()) {
+      const node = walker.currentNode;
+      const parent = node.parentElement;
+      if (!parent || parent.closest("pre, code, script, style, textarea, .katex")) continue;
+      if (!(node.textContent || "").includes("$")) continue;
+      nodes.push(node);
+    }
+
+    for (const node of nodes) {
+      const parts = splitMath(node.textContent || "");
+      if (!parts.some((p) => p.math)) continue;
+      const frag = document.createDocumentFragment();
+      for (const p of parts) {
+        if (p.text != null) {
+          frag.appendChild(document.createTextNode(p.text));
+        } else if (p.math != null) {
+          const host = document.createElement("span");
+          host.className = p.display ? "kitfly-katex-display" : "kitfly-katex-inline";
+          window.katex.render(p.math, host, { displayMode: Boolean(p.display), throwOnError: false });
+          frag.appendChild(host);
+        }
+      }
+      node.replaceWith(frag);
+    }
+  }
+
+  function apply() {
+    const styleId = "kitfly-latex-style";
+    if (!document.getElementById(styleId)) {
+      const style = document.createElement("style");
+      style.id = styleId;
+      style.textContent = ".kitfly-katex-display{display:block;text-align:center;margin:1em 0;overflow-x:auto}";
+      document.head.appendChild(style);
+    }
+
+    Promise.all([
+      ensureTag("link", {
+        rel: "stylesheet",
+        href: KATEX_CSS_URL,
+        integrity: KATEX_CSS_SRI,
+        crossorigin: "anonymous",
+        "data-kitfly-latex": "css",
+      }),
+      ensureTag("script", {
+        src: KATEX_JS_URL,
+        integrity: KATEX_JS_SRI,
+        crossorigin: "anonymous",
+        defer: "",
+        "data-kitfly-latex": "js",
+      }),
+    ])
+      .then(() => {
+        if (!window.katex?.render) {
+          console.warn("[kitfly:latex] KaTeX unavailable");
+          return;
+        }
+        renderFencedMath();
+        renderDelimitedMath();
+      })
+      .catch((e) => console.warn("[kitfly:latex]", e instanceof Error ? e.message : String(e)));
+  }
+
+  if (typeof document === "undefined") {
+    globalThis.__kitflyLatexTest = { splitMath, isCurrency, shouldTreatAsLiteralInline };
+    return;
+  }
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", apply);
+  } else {
+    apply();
+  }
+})();

package/plugins-dist/planning-visuals.css

@@ -0,0 +1,261 @@
+: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-success: #16a34a;
+  --kitfly-visual-warning: #d97706;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --kitfly-visual-success: #4ade80;
+    --kitfly-visual-warning: #fbbf24;
+  }
+}
+
+.kitfly-visual {
+  border: 1px solid var(--kitfly-visual-border);
+  background: var(--kitfly-visual-bg);
+  border-radius: 12px;
+  padding: 0.85rem;
+  margin: 0.75rem 0;
+}
+
+.kitfly-planning-gantt {
+  display: grid;
+  gap: 0.45rem;
+  overflow-x: auto;
+}
+
+.kitfly-gantt-title {
+  font-weight: 800;
+  font-size: 0.95rem;
+}
+
+.kitfly-gantt-row {
+  display: grid;
+  grid-template-columns: minmax(10rem, 30%) 1fr;
+  gap: 0.65rem;
+  align-items: center;
+  min-width: 38rem;
+}
+
+.kitfly-gantt-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.92rem;
+  padding-left: calc((var(--kitfly-gantt-depth, 1) - 1) * 0.9rem);
+}
+
+.kitfly-gantt-label.depth-1 {
+  font-weight: 800;
+}
+
+.kitfly-gantt-axis {
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(var(--kitfly-gantt-units), minmax(0, 1fr));
+  border: 1px solid color-mix(in srgb, var(--kitfly-visual-border) 78%, transparent);
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--kitfly-visual-bg) 75%, var(--color-bg));
+  overflow: hidden;
+}
+
+.kitfly-gantt-axis-cell {
+  min-width: 0;
+  padding: 0.2rem 0.12rem;
+  font-size: 0.72rem;
+  color: var(--kitfly-visual-muted);
+  border-right: 1px solid color-mix(in srgb, var(--kitfly-visual-border) 45%, transparent);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: center;
+}
+
+.kitfly-gantt-axis-cell:last-child {
+  border-right: 0;
+}
+
+.kitfly-gantt-axis-context-row {
+  margin-bottom: -0.2rem;
+}
+
+.kitfly-gantt-axis-context {
+  font-size: 0.68rem;
+  letter-spacing: 0.01em;
+  color: var(--kitfly-visual-muted);
+  text-transform: uppercase;
+}
+
+.kitfly-planning-gantt.is-week-compact .kitfly-gantt-axis-cell {
+  font-size: 0.66rem;
+  padding-inline: 0.06rem;
+}
+
+.kitfly-planning-gantt.is-week-ultra-compact .kitfly-gantt-axis-cell {
+  font-size: 0.62rem;
+  padding-inline: 0.04rem;
+}
+
+.kitfly-planning-gantt.is-week .kitfly-gantt-axis-cell.is-labeled {
+  overflow: visible;
+  text-overflow: clip;
+  position: relative;
+  z-index: 1;
+}
+
+.kitfly-planning-gantt.is-week .kitfly-gantt-axis-cell.is-edge:first-child {
+  text-align: left;
+}
+
+.kitfly-planning-gantt.is-week .kitfly-gantt-axis-cell.is-edge:last-child {
+  text-align: right;
+}
+
+.kitfly-gantt-chart {
+  position: relative;
+  min-height: 1.6rem;
+  border: 1px solid color-mix(in srgb, var(--kitfly-visual-border) 70%, transparent);
+  border-radius: 8px;
+  background-color: color-mix(in srgb, var(--kitfly-visual-bg) 78%, var(--color-bg));
+  background-image: linear-gradient(
+    to right,
+    color-mix(in srgb, var(--kitfly-visual-border) 45%, transparent) 1px,
+    transparent 1px
+  );
+  background-size: calc(100% / var(--kitfly-gantt-units)) 100%;
+  overflow: hidden;
+}
+
+.kitfly-gantt-bar {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  border-radius: 999px;
+  min-width: 0.35rem;
+}
+
+.kitfly-gantt-bar.depth-1 {
+  height: 0.56rem;
+}
+
+.kitfly-gantt-bar.depth-2 {
+  height: 0.46rem;
+}
+
+.kitfly-gantt-bar.depth-3 {
+  height: 0.4rem;
+}
+
+.kitfly-gantt-bar.is-planned {
+  background: color-mix(in srgb, var(--kitfly-visual-muted) 50%, transparent);
+}
+
+.kitfly-gantt-bar.is-active {
+  background: color-mix(in srgb, var(--kitfly-visual-accent) 78%, var(--color-text));
+}
+
+.kitfly-gantt-bar.is-complete {
+  background: var(--kitfly-visual-success);
+}
+
+.kitfly-gantt-bar.is-blocked {
+  background: var(--kitfly-visual-warning);
+}
+
+.kitfly-gantt-milestone {
+  position: absolute;
+  top: 50%;
+  width: 0.62rem;
+  height: 0.62rem;
+  transform: translate(-50%, -50%) rotate(45deg);
+  background: color-mix(in srgb, var(--kitfly-visual-accent) 70%, var(--color-text));
+  border: 1px solid color-mix(in srgb, var(--kitfly-visual-border) 80%, transparent);
+}
+
+.kitfly-gantt-today {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 0;
+  border-left: 1px dashed color-mix(in srgb, var(--kitfly-visual-muted) 55%, transparent);
+  transform: translateX(-50%);
+  pointer-events: none;
+  z-index: 2;
+}
+
+.kitfly-gantt-marker-line {
+  --kitfly-marker-color: color-mix(in srgb, var(--kitfly-visual-accent) 95%, var(--color-text));
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 0;
+  border-left: 3px solid var(--kitfly-marker-color);
+  transform: translateX(-50%);
+  pointer-events: none;
+  z-index: 3;
+}
+
+.kitfly-gantt-marker-line::before {
+  content: "";
+  position: absolute;
+  top: 0.14rem;
+  left: -0.22rem;
+  width: 0.38rem;
+  height: 0.38rem;
+  transform: rotate(45deg);
+  background: var(--kitfly-marker-color);
+  border: 1px solid color-mix(in srgb, var(--kitfly-visual-border) 75%, transparent);
+  border-radius: 0.1rem;
+}
+
+.kitfly-gantt-marker-row {
+  margin-bottom: 0.08rem;
+}
+
+.kitfly-gantt-marker-area {
+  position: relative;
+  min-height: calc(1.38rem + (var(--kitfly-marker-lanes, 1) - 1) * 0.98rem);
+}
+
+.kitfly-gantt-marker-label {
+  --kitfly-marker-color: color-mix(in srgb, var(--kitfly-visual-accent) 95%, var(--color-text));
+  position: absolute;
+  top: calc(0.08rem + var(--kitfly-marker-lane, 0) * 0.96rem);
+  font-size: 0.72rem;
+  font-weight: 700;
+  line-height: 1.25;
+  color: color-mix(in srgb, var(--kitfly-marker-color) 88%, var(--color-text));
+  white-space: nowrap;
+  max-width: 10rem;
+  padding: 0.08rem 0.38rem;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--kitfly-marker-color) 45%, var(--kitfly-visual-border));
+  background: color-mix(in srgb, var(--kitfly-visual-bg) 72%, var(--color-bg));
+  box-shadow: 0 1px 0 color-mix(in srgb, var(--kitfly-visual-border) 55%, transparent);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transform: translateX(0.35rem);
+  pointer-events: none;
+  z-index: 4;
+}
+
+.kitfly-gantt-marker-label.is-flipped {
+  transform: translateX(calc(-100% - 0.3rem));
+}
+
+.kitfly-gantt-overflow-row .kitfly-gantt-label {
+  color: var(--kitfly-visual-muted);
+  font-style: italic;
+}
+
+@media (max-width: 700px) {
+  .kitfly-gantt-row {
+    min-width: 32rem;
+    grid-template-columns: minmax(8rem, 36%) 1fr;
+  }
+}