wendkeep 0.2.3 → 0.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wendkeep",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "Automatically capture AI coding agent sessions (Claude Code, Codex) as local Markdown in your Obsidian vault — turn-by-turn history, cost/token tracking, auto-extracted decisions/bugs/learnings, rendered in the graph. Local-first.",
   "type": "module",
   "bin": {

package/src/vault-theme.mjs

@@ -1,44 +1,169 @@
-// Vault color system for `wendkeep init`. Two layers, both keyed to the note
-// taxonomy the hooks already emit:
-//   - a CSS snippet that accents an open note by its `cssclasses`
-//     (topic-session/decision/bug/learning), enabled via appearance.json
-//   - Obsidian graph color groups that tint nodes by their folder
-// Pure + side-effect free; init does the file I/O and non-destructive merges.
+// Vault color system for `wendkeep init`. Generated CSS snippet (ported from the
+// NutriGym-Vision design) plus Obsidian graph color groups. Two visual layers:
+//   - file explorer: each taxonomy folder gets an accent (border + dot + hover)
+//   - open note: colored by its `cssclasses` (topic-session/decision/bug/learning)
+//     via a --note-accent var driving headings, strong, tags, tables, blockquotes
+// Folder/topic lists are derived from maps that mirror the vault taxonomy, so the
+// snippet stays in sync. Pure + side-effect free; init does the file I/O.
 
 export const SNIPPET_NAME = 'wendkeep-colors';
 
-// Soft, semantic palette — readable in light and dark themes.
+// Base palette (hex + "r, g, b" for rgba()).
+const PALETTE = {
+  blue: { hex: '#2f80ed', rgb: '47, 128, 237' },
+  violet: { hex: '#8f5cf7', rgb: '143, 92, 247' },
+  red: { hex: '#e03131', rgb: '224, 49, 49' },
+  green: { hex: '#2f9e44', rgb: '47, 158, 68' },
+  amber: { hex: '#f59f00', rgb: '245, 159, 0' },
+  teal: { hex: '#0ca678', rgb: '12, 166, 120' },
+  indigo: { hex: '#4263eb', rgb: '66, 99, 235' },
+  slate: { hex: '#64748b', rgb: '100, 116, 139' },
+};
+
+// File-explorer folder -> palette key (mirrors VAULT_FOLDERS in taxonomy.mjs).
+const FOLDER_PALETTE = [
+  ['00-Inbox', 'amber'],
+  ['01-Projeto', 'indigo'],
+  ['02-Sessões', 'blue'],
+  ['03-Linear', 'teal'],
+  ['04-Decisões', 'violet'],
+  ['05-Bugs', 'red'],
+  ['06-Aprendizados', 'green'],
+  ['Templates', 'slate'],
+];
+
+// Note cssclass -> palette key; `folder` is reused for the graph color groups.
 export const NOTE_COLORS = {
-  session: { cssClass: 'topic-session', folder: '02-Sessões', hex: '#4f86c6' }, // blue
-  decision: { cssClass: 'topic-decision', folder: '04-Decisões', hex: '#9b72cf' }, // purple
-  bug: { cssClass: 'topic-bug', folder: '05-Bugs', hex: '#d9645c' }, // red
-  learning: { cssClass: 'topic-learning', folder: '06-Aprendizados', hex: '#5ca862' }, // green
+  session: { cssClass: 'topic-session', folder: '02-Sessões', palette: 'blue' },
+  decision: { cssClass: 'topic-decision', folder: '04-Decisões', palette: 'violet' },
+  bug: { cssClass: 'topic-bug', folder: '05-Bugs', palette: 'red' },
+  learning: { cssClass: 'topic-learning', folder: '06-Aprendizados', palette: 'green' },
 };
 
-const ENTRIES = Object.entries(NOTE_COLORS);
+// cssclasses that get the note-accent treatment (the four note types + a home note).
+const TOPIC_CLASSES = [...Object.values(NOTE_COLORS).map((n) => n.cssClass), 'vault-home'];
+const NOTE_ACCENTS = [
+  ...Object.values(NOTE_COLORS).map((n) => ({ cssClass: n.cssClass, palette: n.palette })),
+  { cssClass: 'vault-home', palette: 'indigo' },
+];
+
+const FX = '.workspace-leaf-content[data-type="file-explorer"] .nav-folder-title';
+const folderSel = FOLDER_PALETTE.map(([f]) => `[data-path^="${f}"]`).join(',\n  ');
+const topicReading = TOPIC_CLASSES.map((c) => `.${c}`).join(', ');
 
 export function renderColorSnippetCss() {
-  const vars = ENTRIES.map(([k, v]) => `  --wk-${k}: ${v.hex};`).join('\n');
-  const blocks = ENTRIES.map(([k, v]) => {
-    const c = `var(--wk-${k})`;
-    return [
-      `/* ${k} */`,
-      `.${v.cssClass} .inline-title {`,
-      `  color: ${c};`,
-      `  border-left: 4px solid ${c};`,
-      `  padding-left: 0.5em;`,
-      `}`,
-      `.${v.cssClass} .view-header-title { color: ${c}; }`,
-      `.${v.cssClass} .markdown-preview-view h1 { border-bottom: 2px solid ${c}; }`,
-    ].join('\n');
-  }).join('\n\n');
-
-  return `/* ${SNIPPET_NAME} — generated by wendkeep. Accents notes by type (cssclasses). */
+  const rootVars = Object.entries(PALETTE)
+    .map(([k, v]) => `  --us-${k}: ${v.hex};\n  --us-${k}-rgb: ${v.rgb};`)
+    .join('\n');
+
+  const folderAccentVars = FOLDER_PALETTE.map(([folder, key]) =>
+    `${FX}[data-path^="${folder}"] {\n  --folder-accent: var(--us-${key});\n  --folder-accent-rgb: var(--us-${key}-rgb);\n}`,
+  ).join('\n\n');
+
+  const noteAccentVars = NOTE_ACCENTS.map(({ cssClass, palette }) =>
+    `.markdown-preview-view.${cssClass},\n.markdown-source-view.${cssClass} {\n  --note-accent: var(--us-${palette});\n  --note-accent-rgb: var(--us-${palette}-rgb);\n}`,
+  ).join('\n\n');
+
+  return `/* ${SNIPPET_NAME} — generated by wendkeep. File-explorer + note-type colors. */
 :root {
-${vars}
+${rootVars}
+}
+
+.theme-dark { --us-line-tint: 44%; }
+.theme-light { --us-line-tint: 36%; }
+
+/* --- File explorer: accented folders ------------------------------------- */
+${FX} {
+  border-left: 3px solid transparent;
+  border-radius: 0 6px 6px 0;
+  margin: 1px 4px 1px 0;
+  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
 }
 
-${blocks}
+${folderAccentVars}
+
+${FX}:is(
+  ${folderSel}
+) {
+  border-left-color: var(--folder-accent);
+  color: color-mix(in srgb, var(--folder-accent) var(--us-line-tint), var(--text-normal));
+}
+
+${FX}:is(
+  ${folderSel}
+):hover {
+  background-color: rgba(var(--folder-accent-rgb), 0.13);
+}
+
+${FX}:is(
+  ${folderSel}
+) .nav-folder-title-content::before {
+  content: "";
+  display: inline-block;
+  width: 0.58em;
+  height: 0.58em;
+  margin-right: 0.48em;
+  border-radius: 999px;
+  background: var(--folder-accent);
+  box-shadow: 0 0 0 3px rgba(var(--folder-accent-rgb), 0.16);
+  vertical-align: 0.05em;
+}
+
+/* --- Note types: colors from frontmatter cssclasses ---------------------- */
+${noteAccentVars}
+
+.markdown-rendered:is(${topicReading}) h1,
+.markdown-source-view:is(${topicReading}) .cm-header-1 {
+  color: color-mix(in srgb, var(--note-accent) 62%, var(--text-normal));
+}
+.markdown-rendered:is(${topicReading}) h1 {
+  border-bottom: 2px solid rgba(var(--note-accent-rgb), 0.42);
+  padding-bottom: 0.35em;
+}
+
+.markdown-rendered:is(${topicReading}) h2 {
+  border-left: 4px solid var(--note-accent);
+  border-radius: 6px;
+  padding: 0.38em 0.62em;
+  background: rgba(var(--note-accent-rgb), 0.11);
+}
+.markdown-source-view:is(${topicReading}) .HyperMD-header-2 {
+  border-left: 4px solid var(--note-accent);
+  border-radius: 6px;
+  padding-left: 0.62em;
+  background: rgba(var(--note-accent-rgb), 0.1);
+}
+
+.markdown-rendered:is(${topicReading}) h3,
+.markdown-source-view:is(${topicReading}) .cm-header-3 {
+  color: color-mix(in srgb, var(--note-accent) 76%, var(--text-normal));
+}
+
+.markdown-rendered:is(${topicReading}) strong,
+.markdown-source-view:is(${topicReading}) .cm-strong {
+  color: color-mix(in srgb, var(--note-accent) 70%, var(--text-normal));
+}
+
+.markdown-rendered:is(${topicReading}) .tag {
+  border: 1px solid rgba(var(--note-accent-rgb), 0.42);
+  background: rgba(var(--note-accent-rgb), 0.1);
+  color: color-mix(in srgb, var(--note-accent) 72%, var(--text-normal));
+}
+
+.markdown-rendered:is(${topicReading}) th {
+  background: rgba(var(--note-accent-rgb), 0.12);
+  color: color-mix(in srgb, var(--note-accent) 68%, var(--text-normal));
+}
+
+.markdown-rendered:is(${topicReading}) blockquote {
+  border-left-color: var(--note-accent);
+  background: rgba(var(--note-accent-rgb), 0.08);
+  border-radius: 0 6px 6px 0;
+}
+
+.markdown-rendered:is(${topicReading}) code {
+  border-color: rgba(var(--note-accent-rgb), 0.28);
+}
 `;
 }
 
@@ -53,9 +178,9 @@ export function mergeAppearance(existing, snippetName = SNIPPET_NAME) {
 
 // Graph color groups: one per note folder, colored from the palette.
 export function graphColorGroups() {
-  return ENTRIES.map(([, v]) => ({
+  return Object.values(NOTE_COLORS).map((v) => ({
     query: `path:"${v.folder}"`,
-    color: { a: 1, rgb: parseInt(v.hex.slice(1), 16) },
+    color: { a: 1, rgb: parseInt(PALETTE[v.palette].hex.slice(1), 16) },
   }));
 }