thanh-kit 2.5.0 → 2.5.2

package/templates/skills/markdown-novel-viewer/assets/styles/novel-theme-sidebar.css

@@ -0,0 +1,359 @@
+/**
+ * Novel Theme - Sidebar Styles
+ * Layout, sidebar, plan navigation, TOC
+ */
+
+/* Layout */
+.layout {
+  display: flex;
+  margin-top: var(--header-height);
+  min-height: calc(100vh - var(--header-height));
+}
+
+/* Sidebar */
+.sidebar {
+  width: var(--sidebar-width);
+  min-width: 200px;
+  max-width: 480px;
+  background: var(--bg-secondary);
+  border-right: 1px solid var(--border);
+  padding: 1.5rem;
+  overflow-y: auto;
+  position: fixed;
+  top: var(--header-height);
+  bottom: 0;
+  left: 0;
+  transform: translateX(0);
+  transition: transform 0.3s ease;
+}
+
+/* Custom scrollbar */
+.sidebar::-webkit-scrollbar {
+  width: 6px;
+}
+
+.sidebar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.sidebar::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 3px;
+}
+
+.sidebar::-webkit-scrollbar-thumb:hover {
+  background: var(--text-muted);
+}
+
+/* Resize handle */
+.sidebar-resize-handle {
+  position: absolute;
+  top: 0;
+  right: -3px;
+  bottom: 0;
+  width: 6px;
+  cursor: col-resize;
+  background: transparent;
+  z-index: 10;
+  transition: background 0.2s;
+}
+
+.sidebar-resize-handle:hover,
+.sidebar-resize-handle.dragging {
+  background: var(--accent);
+}
+
+.sidebar.hidden {
+  transform: translateX(-100%);
+}
+
+/* Plan Navigation */
+.plan-nav {
+  margin-bottom: 1.5rem;
+  padding-bottom: 1.5rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.plan-title {
+  font-family: var(--font-heading);
+  font-size: 0.875rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.plan-icon {
+  font-size: 1rem;
+}
+
+.phase-list {
+  list-style: none;
+}
+
+.phase-item {
+  margin-bottom: 0.25rem;
+}
+
+/* Inline section items (anchors within same doc) - indented with visual distinction */
+.phase-item.inline-section {
+  margin-left: 0.75rem;
+  position: relative;
+}
+
+.phase-item.inline-section::before {
+  content: '';
+  position: absolute;
+  left: -0.5rem;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background: var(--border);
+  border-radius: 1px;
+}
+
+.phase-item a {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  color: var(--text-secondary);
+  text-decoration: none;
+  font-size: 0.875rem;
+  border-radius: 6px;
+  transition: all 0.2s;
+}
+
+/* Inline sections have subtler styling */
+.phase-item.inline-section a {
+  font-size: 0.8125rem;
+  padding: 0.375rem 0.625rem;
+  background: var(--bg-secondary);
+  border: 1px solid transparent;
+}
+
+.phase-item.inline-section a:hover {
+  background: var(--bg-tertiary);
+  border-color: var(--border);
+}
+
+.phase-item a:hover {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+}
+
+.phase-item.active a {
+  background: var(--accent);
+  color: white;
+}
+
+.phase-item.inline-section.active a {
+  background: var(--accent);
+  color: white;
+  border-color: var(--accent);
+}
+
+/* Type indicator icon */
+.phase-type-icon {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+  opacity: 0.6;
+}
+
+.phase-item.active .phase-type-icon {
+  opacity: 1;
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.status-dot.pending { background: #d4a574; }
+.status-dot.in-progress { background: #4a90d9; }
+.status-dot.completed, .status-dot.done { background: #5cb85c; }
+.status-dot.overview { background: #8b4513; }
+
+/* Unavailable/Planned phases */
+.phase-item.unavailable {
+  opacity: 0.6;
+}
+
+.phase-item.unavailable .phase-link-disabled {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  color: var(--text-muted);
+  font-size: 0.875rem;
+  border-radius: 6px;
+  cursor: not-allowed;
+  background: var(--bg-tertiary);
+  border: 1px dashed var(--border);
+}
+
+.phase-item.unavailable .status-dot {
+  background: var(--text-muted);
+  opacity: 0.5;
+}
+
+.unavailable-badge,
+.nav-badge {
+  font-size: 0.65rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  padding: 0.15rem 0.4rem;
+  border-radius: 3px;
+  background: var(--text-muted);
+  color: var(--bg-primary);
+  margin-left: auto;
+}
+
+/* Nav footer unavailable state */
+.nav-unavailable {
+  opacity: 0.5;
+  cursor: not-allowed;
+  border-style: dashed !important;
+}
+
+.nav-unavailable .nav-badge {
+  font-size: 0.6rem;
+  margin: 0 0.25rem;
+}
+
+/* Phase accordion */
+.phase-group {
+  margin-bottom: 0.5rem;
+}
+
+.phase-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.625rem 0.75rem;
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  text-align: left;
+  transition: background 0.2s;
+}
+
+.phase-header:hover {
+  background: var(--bg-tertiary);
+}
+
+.phase-chevron {
+  font-size: 0.625rem;
+  color: var(--text-muted);
+  transition: transform 0.2s ease;
+  flex-shrink: 0;
+}
+
+.phase-group.collapsed .phase-chevron {
+  transform: rotate(-90deg);
+}
+
+.phase-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Progress badges */
+.phase-badge {
+  font-size: 0.75rem;
+  padding: 0.125rem 0.375rem;
+  border-radius: 4px;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.badge-done {
+  background: #d4edda;
+  color: #155724;
+}
+
+[data-theme="dark"] .badge-done {
+  background: #1e3a2f;
+  color: #75d49b;
+}
+
+.badge-progress {
+  background: #cce5ff;
+  color: #004085;
+}
+
+[data-theme="dark"] .badge-progress {
+  background: #1a3a5c;
+  color: #6db3f2;
+}
+
+.badge-pending {
+  background: var(--bg-tertiary);
+  color: var(--text-muted);
+}
+
+/* Phase items container */
+.phase-items {
+  list-style: none;
+  padding-left: 1.25rem;
+  margin-top: 0.25rem;
+  overflow: hidden;
+  max-height: 500px;
+  transition: max-height 0.3s ease, opacity 0.2s ease;
+}
+
+.phase-group.collapsed .phase-items {
+  max-height: 0;
+  opacity: 0;
+  margin-top: 0;
+}
+
+/* TOC */
+.toc-section {
+  margin-top: 1rem;
+}
+
+.toc-title {
+  font-family: var(--font-heading);
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 0.75rem;
+}
+
+.toc-list {
+  list-style: none;
+}
+
+.toc-list li {
+  margin-bottom: 0.25rem;
+}
+
+.toc-list a {
+  display: block;
+  padding: 0.25rem 0;
+  color: var(--text-secondary);
+  text-decoration: none;
+  font-size: 0.875rem;
+  transition: color 0.2s;
+}
+
+.toc-list a:hover {
+  color: var(--accent);
+}

package/templates/skills/markdown-novel-viewer/assets/styles/novel-theme-variables.css

@@ -0,0 +1,56 @@
+/**
+ * Novel Theme - CSS Custom Properties
+ * Light and dark theme variables
+ */
+
+:root {
+  /* Light Theme (Default) */
+  --bg-primary: #faf8f3;
+  --bg-secondary: #f5f2eb;
+  --bg-tertiary: #ebe7de;
+  --text-heading: #3a3a3a;
+  --text-primary: #5a5a5a;
+  --text-secondary: #6a6a6a;
+  --text-muted: #8c8c8c;
+  --accent: #8b4513;
+  --accent-hover: #6d360f;
+  --border: #e8e4db;
+  --border-light: #f0ece3;
+  --shadow: rgba(0, 0, 0, 0.08);
+  --code-bg: #f8f5ef;
+  --link: #5c4033;
+  --link-hover: #8b4513;
+
+  /* Fonts */
+  --font-heading: 'Libre Baskerville', Georgia, serif;
+  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+
+  /* Spacing */
+  --content-width: 720px;
+  --sidebar-width: 280px;
+  --header-height: 56px;
+}
+
+/* Content width responsive to font size */
+html[data-font-size="S"] { --content-width: 640px; }
+html[data-font-size="M"] { --content-width: 720px; }
+html[data-font-size="L"] { --content-width: 800px; }
+
+[data-theme="dark"] {
+  --bg-primary: #1a1a1a;
+  --bg-secondary: #252525;
+  --bg-tertiary: #303030;
+  --text-heading: #e0dcd3;
+  --text-primary: #b0aca3;
+  --text-secondary: #9a9a9a;
+  --text-muted: #707070;
+  --accent: #d4a574;
+  --accent-hover: #e0b98a;
+  --border: #3a3a3a;
+  --border-light: #2a2a2a;
+  --shadow: rgba(0, 0, 0, 0.3);
+  --code-bg: #2a2a2a;
+  --link: #d4a574;
+  --link-hover: #e8c9a0;
+}

package/templates/skills/markdown-novel-viewer/assets/template.html

@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{{title}} - Novel Viewer</title>
+  <link rel="icon" type="image/png" href="/assets/favicon.png">
+  <!-- Apply stored preferences BEFORE CSS loads to prevent FOUC -->
+  <script>
+    (function(){
+      var h=document.documentElement;
+      var t=localStorage.getItem('theme');
+      var f=localStorage.getItem('novel-viewer-font');
+      if(t)h.dataset.theme=t;
+      else if(window.matchMedia('(prefers-color-scheme:dark)').matches)h.dataset.theme='dark';
+      if(f)h.dataset.fontSize=f;
+    })();
+  </script>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="/assets/novel-theme.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css" id="hljs-light">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css" id="hljs-dark" disabled>
+  <!-- Mermaid.js for diagram rendering -->
+  <script type="module">
+    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
+    window.mermaidModule = mermaid;
+  </script>
+</head>
+<body class="{{has-plan}}">
+  <header class="reader-header">
+    <div class="header-left">
+      {{back-button}}
+      <button id="sidebar-toggle" class="icon-btn" aria-label="Toggle sidebar" title="Toggle sidebar">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M3 12h18M3 6h18M3 18h18"/>
+        </svg>
+      </button>
+      {{header-nav}}
+    </div>
+    <div class="header-center">
+      <span class="doc-title">{{title}}</span>
+    </div>
+    <div class="header-right">
+      <div class="font-controls">
+        <button class="font-btn" data-size="S" title="Small font">S</button>
+        <button class="font-btn" data-size="M" title="Medium font">M</button>
+        <button class="font-btn" data-size="L" title="Large font">L</button>
+      </div>
+      <button id="theme-toggle" class="icon-btn" aria-label="Toggle theme" title="Toggle theme">
+        <svg class="sun-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <circle cx="12" cy="12" r="5"/>
+          <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
+        </svg>
+        <svg class="moon-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
+        </svg>
+      </button>
+    </div>
+  </header>
+
+  <div class="progress-bar-container" id="progress-bar">
+    <div class="progress-bar-fill"></div>
+  </div>
+
+  <div class="layout">
+    <aside class="sidebar" id="sidebar">
+      <div class="sidebar-resize-handle" id="sidebar-resize"></div>
+      {{nav-sidebar}}
+      <div class="toc-section">
+        <div class="toc-title">Contents</div>
+        {{toc}}
+      </div>
+    </aside>
+
+    <main class="main-content">
+      <article class="content">
+        {{content}}
+      </article>
+      {{nav-footer}}
+    </main>
+  </div>
+
+  <!-- Keyboard shortcuts toast -->
+  <div class="shortcuts-toast" id="shortcuts-toast" role="status" aria-live="polite">
+    <span>Press <kbd>?</kbd> for keyboard shortcuts</span>
+    <button class="toast-dismiss" aria-label="Dismiss">&times;</button>
+  </div>
+
+  <!-- Keyboard shortcuts cheatsheet -->
+  <div class="shortcuts-overlay" id="shortcuts-overlay" role="dialog" aria-modal="true" aria-labelledby="shortcuts-title" hidden>
+    <div class="shortcuts-backdrop"></div>
+    <div class="shortcuts-modal">
+      <header>
+        <h2 id="shortcuts-title">Keyboard Shortcuts</h2>
+        <button class="modal-close" aria-label="Close">&times;</button>
+      </header>
+      <table class="shortcuts-table">
+        <tbody>
+          <tr><td><kbd>T</kbd></td><td>Toggle theme (light/dark)</td></tr>
+          <tr><td><kbd>S</kbd></td><td>Toggle sidebar</td></tr>
+          <tr><td><kbd>←</kbd></td><td>Previous page</td></tr>
+          <tr><td><kbd>→</kbd></td><td>Next page</td></tr>
+          <tr><td><kbd>Esc</kbd></td><td>Close sidebar / modal</td></tr>
+          <tr><td><kbd>?</kbd></td><td>Show this help</td></tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+
+  <!-- Mobile FAB group -->
+  <div class="fab-group" id="fab-group" aria-label="Quick navigation">
+    <button class="fab fab-menu" id="fab-menu" aria-label="Open navigation menu">
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M3 12h18M3 6h18M3 18h18"/>
+      </svg>
+    </button>
+    <a class="fab fab-next nav-next-mobile" aria-label="Next page">
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M9 18l6-6-6-6"/>
+      </svg>
+    </a>
+    <a class="fab fab-prev nav-prev-mobile" aria-label="Previous page">
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M15 18l-6-6 6-6"/>
+      </svg>
+    </a>
+  </div>
+
+  <!-- Mobile bottom sheet -->
+  <div class="bottom-sheet" id="bottom-sheet" aria-hidden="true">
+    <div class="bottom-sheet-backdrop"></div>
+    <div class="bottom-sheet-container">
+      <div class="bottom-sheet-handle" aria-label="Drag to close">
+        <span class="handle-bar"></span>
+      </div>
+      <div class="bottom-sheet-content" id="bottom-sheet-content">
+        <!-- Sidebar content cloned here via JS -->
+      </div>
+    </div>
+  </div>
+
+  <script>
+    window.__frontmatter = {{frontmatter}};
+  </script>
+  <script src="/assets/reader.js"></script>
+</body>
+</html>

package/templates/skills/markdown-novel-viewer/bun.lock

@@ -0,0 +1,38 @@
+{
+  "lockfileVersion": 1,
+  "workspaces": {
+    "": {
+      "name": "markdown-novel-viewer",
+      "dependencies": {
+        "gray-matter": "^4.0.3",
+        "highlight.js": "^11.11.1",
+        "marked": "^17.0.0",
+      },
+    },
+  },
+  "packages": {
+    "argparse": ["argparse@1.0.10", "", { "dependencies": { "sprintf-js": "~1.0.2" } }, "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg=="],
+
+    "esprima": ["esprima@4.0.1", "", { "bin": { "esparse": "./bin/esparse.js", "esvalidate": "./bin/esvalidate.js" } }, "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A=="],
+
+    "extend-shallow": ["extend-shallow@2.0.1", "", { "dependencies": { "is-extendable": "^0.1.0" } }, "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug=="],
+
+    "gray-matter": ["gray-matter@4.0.3", "", { "dependencies": { "js-yaml": "^3.13.1", "kind-of": "^6.0.2", "section-matter": "^1.0.0", "strip-bom-string": "^1.0.0" } }, "sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q=="],
+
+    "highlight.js": ["highlight.js@11.11.1", "", {}, "sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w=="],
+
+    "is-extendable": ["is-extendable@0.1.1", "", {}, "sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw=="],
+
+    "js-yaml": ["js-yaml@3.14.2", "", { "dependencies": { "argparse": "^1.0.7", "esprima": "^4.0.0" }, "bin": { "js-yaml": "bin/js-yaml.js" } }, "sha512-PMSmkqxr106Xa156c2M265Z+FTrPl+oxd/rgOQy2tijQeK5TxQ43psO1ZCwhVOSdnn+RzkzlRz/eY4BgJBYVpg=="],
+
+    "kind-of": ["kind-of@6.0.3", "", {}, "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw=="],
+
+    "marked": ["marked@17.0.1", "", { "bin": { "marked": "bin/marked.js" } }, "sha512-boeBdiS0ghpWcSwoNm/jJBwdpFaMnZWRzjA6SkUMYb40SVaN1x7mmfGKp0jvexGcx+7y2La5zRZsYFZI6Qpypg=="],
+
+    "section-matter": ["section-matter@1.0.0", "", { "dependencies": { "extend-shallow": "^2.0.1", "kind-of": "^6.0.0" } }, "sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA=="],
+
+    "sprintf-js": ["sprintf-js@1.0.3", "", {}, "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g=="],
+
+    "strip-bom-string": ["strip-bom-string@1.0.0", "", {}, "sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g=="],
+  }
+}

package/templates/skills/markdown-novel-viewer/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "markdown-novel-viewer",
+  "version": "1.0.0",
+  "description": "Background HTTP server rendering markdown files with calm, book-like reading experience",
+  "main": "scripts/server.cjs",
+  "scripts": {
+    "start": "node scripts/server.cjs",
+    "test": "node scripts/tests/server.test.cjs"
+  },
+  "dependencies": {
+    "gray-matter": "^4.0.3",
+    "highlight.js": "^11.11.1",
+    "marked": "^17.0.0"
+  }
+}