camelmind 0.2.4 → 0.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "camelmind",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "description": "Create and manage CamelMind documentation sites",
   "license": "MIT",
   "type": "module",

package/template/app/globals.css

@@ -36,14 +36,24 @@
   --cm-btn-primary-bg: var(--cm-oasis-teal);
   --cm-btn-primary-text: #FFFFFF;
 
-  --cm-note-bg: #EAF7FA;
+  --cm-note-bg: #EDF8FA;
   --cm-note-border: #4BA8B7;
-  --cm-tip-bg: #EEF7EC;
-  --cm-tip-border: #5B9B62;
-  --cm-warning-bg: #FFF6E2;
-  --cm-warning-border: #D9A441;
-  --cm-danger-bg: #FFF0EC;
-  --cm-danger-border: #C76B56;
+  --cm-note-icon: #2E8391;
+  --cm-tip-bg: #F1F6EC;
+  --cm-tip-border: #7D9850;
+  --cm-tip-icon: #6A8741;
+  --cm-warning-bg: #FFF7E6;
+  --cm-warning-border: #D8A15B;
+  --cm-warning-icon: #B67D32;
+  --cm-important-bg: #F1EEF8;
+  --cm-important-border: #6B5B95;
+  --cm-important-icon: #56467C;
+  --cm-danger-bg: #FFF1ED;
+  --cm-danger-border: #BF6651;
+  --cm-danger-icon: #A54D39;
+  --cm-success-bg: #ECF7EF;
+  --cm-success-border: #5B9B62;
+  --cm-success-icon: #4D8453;
 
   --cm-radius-md: 10px;
   --cm-font-heading: var(--font-alegreya), Georgia, serif;
@@ -66,6 +76,25 @@
   --cm-link-hover: #7AD2DE;
   --cm-active: #63C1CF;
   --cm-active-border: #63C1CF;
+
+  --cm-note-bg: #1F3E49;
+  --cm-note-border: #63C1CF;
+  --cm-note-icon: #8BDDE8;
+  --cm-tip-bg: #344329;
+  --cm-tip-border: #A7BC72;
+  --cm-tip-icon: #B8CC84;
+  --cm-warning-bg: #4A3518;
+  --cm-warning-border: #E8B34E;
+  --cm-warning-icon: #F0C46F;
+  --cm-important-bg: #48351F;
+  --cm-important-border: #D8A15B;
+  --cm-important-icon: #E3BA7A;
+  --cm-danger-bg: #4A241F;
+  --cm-danger-border: #D9826C;
+  --cm-danger-icon: #E99B87;
+  --cm-success-bg: #24402C;
+  --cm-success-border: #73B97B;
+  --cm-success-icon: #8ACD91;
 }
 
 .cm-primary-button {
@@ -80,8 +109,8 @@
   margin-bottom: 1.25rem;
   border-radius: 8px;
   font-size: 1rem;
-  background-color: #fdfdfd;
-  border: 1.5px solid #bbbbbb;
+  background-color: var(--cm-bg-secondary);
+  border: 1.5px solid var(--cm-border);
   overflow: hidden;
 }
 
@@ -91,32 +120,38 @@
   font-size: 0.85rem;
   padding: 0.4rem 0.75rem;
   letter-spacing: 0.04em;
-  color: #1f1f1f;
+  color: var(--cm-text-primary);
 }
 
 .callout-body {
   padding: 0.5rem 0.75rem 0.75rem;
   font-size: 0.95rem;
-  color: #333;
+  color: var(--cm-text-primary);
 }
 
 .callout.note  { border-color: var(--cm-note-border); }
 .callout.note  .callout-header { background-color: var(--cm-note-bg); color: var(--cm-text-primary); }
+.callout.note  .callout-header svg { color: var(--cm-note-icon); }
 
 .callout.tip   { border-color: var(--cm-tip-border); }
 .callout.tip   .callout-header { background-color: var(--cm-tip-bg); color: var(--cm-text-primary); }
+.callout.tip   .callout-header svg { color: var(--cm-tip-icon); }
 
 .callout.warning { border-color: var(--cm-warning-border); }
 .callout.warning .callout-header { background-color: var(--cm-warning-bg); color: var(--cm-text-primary); }
+.callout.warning .callout-header svg { color: var(--cm-warning-icon); }
 
-.callout.important { border-color: var(--cm-oasis-teal); }
-.callout.important .callout-header { background-color: var(--cm-note-bg); color: var(--cm-text-primary); }
+.callout.important { border-color: var(--cm-important-border); }
+.callout.important .callout-header { background-color: var(--cm-important-bg); color: var(--cm-text-primary); }
+.callout.important .callout-header svg { color: var(--cm-important-icon); }
 
 .callout.danger  { border-color: var(--cm-danger-border); }
 .callout.danger  .callout-header { background-color: var(--cm-danger-bg); color: var(--cm-text-primary); }
+.callout.danger  .callout-header svg { color: var(--cm-danger-icon); }
 
-.callout.success { border-color: var(--cm-tip-border); }
-.callout.success .callout-header { background-color: var(--cm-tip-bg); color: var(--cm-text-primary); }
+.callout.success { border-color: var(--cm-success-border); }
+.callout.success .callout-header { background-color: var(--cm-success-bg); color: var(--cm-text-primary); }
+.callout.success .callout-header svg { color: var(--cm-success-icon); }
 
 body {
   font-family: var(--cm-font-body);
@@ -318,35 +353,35 @@ body {
 /* ── Dark mode overrides ── */
 
 .dark .callout {
-  background-color: #1e2027;
-  border-color: #374151;
+  background-color: var(--cm-bg-secondary);
+  border-color: var(--cm-border);
 }
 
 .dark .callout-header {
-  color: #f3f4f6;
+  color: var(--cm-text-primary);
 }
 
 .dark .callout-body {
-  color: #d1d5db;
+  color: var(--cm-text-secondary);
 }
 
-.dark .callout.note  { border-color: #3b5ea6; }
-.dark .callout.note  .callout-header { background-color: #1e3a5f; }
+.dark .callout.note  { border-color: var(--cm-note-border); }
+.dark .callout.note  .callout-header { background-color: var(--cm-note-bg); }
 
-.dark .callout.tip   { border-color: #3b4ea6; }
-.dark .callout.tip   .callout-header { background-color: #1e2f6b; }
+.dark .callout.tip   { border-color: var(--cm-tip-border); }
+.dark .callout.tip   .callout-header { background-color: var(--cm-tip-bg); }
 
-.dark .callout.warning { border-color: #7c5a2a; }
-.dark .callout.warning .callout-header { background-color: #4a3010; }
+.dark .callout.warning { border-color: var(--cm-warning-border); }
+.dark .callout.warning .callout-header { background-color: var(--cm-warning-bg); }
 
-.dark .callout.important { border-color: #1a7a70; }
-.dark .callout.important .callout-header { background-color: #0d3d39; }
+.dark .callout.important { border-color: var(--cm-important-border); }
+.dark .callout.important .callout-header { background-color: var(--cm-important-bg); }
 
-.dark .callout.danger  { border-color: #7c2a2a; }
-.dark .callout.danger  .callout-header { background-color: #4a1010; }
+.dark .callout.danger  { border-color: var(--cm-danger-border); }
+.dark .callout.danger  .callout-header { background-color: var(--cm-danger-bg); }
 
-.dark .callout.success { border-color: #2a6b2a; }
-.dark .callout.success .callout-header { background-color: #103a10; }
+.dark .callout.success { border-color: var(--cm-success-border); }
+.dark .callout.success .callout-header { background-color: var(--cm-success-bg); }
 
 /* Dark prose — tables, code, headings */
 .dark .prose {

package/template/components/Sidebar/Sidebar.tsx

@@ -164,15 +164,25 @@ function GroupSidebar({
   return (
     <aside className="hidden md:block w-72 shrink-0 border-r border-gray-200 dark:border-gray-800 overflow-y-auto bg-white dark:bg-gray-950">
       <div className="px-4 py-4">
-        {visibleItems.map((entry) => (
-          <CategoryBlock
-            key={entry.slug}
-            entry={entry}
-            currentSlug={currentSlug}
-            userRoles={userRoles}
-            authEnabled={authEnabled}
-          />
-        ))}
+        {visibleItems.map((entry) =>
+          entry.section ? (
+            <CategoryBlock
+              key={entry.slug}
+              entry={entry}
+              currentSlug={currentSlug}
+              userRoles={userRoles}
+              authEnabled={authEnabled}
+            />
+          ) : (
+            <SectionRow
+              key={entry.slug}
+              section={entry as NavChild}
+              currentSlug={currentSlug}
+              userRoles={userRoles}
+              authEnabled={authEnabled}
+            />
+          )
+        )}
       </div>
     </aside>
   )

package/template/lib/mdx.ts

@@ -2,6 +2,18 @@ import fs from "fs"
 import path from "path"
 import { execSync } from "child_process"
 import matter from "gray-matter"
+import yaml from "js-yaml"
+
+// gray-matter's bundled YAML engine calls the js-yaml v3 API (safeLoad/safeDump),
+// which js-yaml v4 removed — pass the current API explicitly.
+const matterOptions = {
+  engines: {
+    yaml: {
+      parse: (s: string) => yaml.load(s) as object,
+      stringify: (o: object) => yaml.dump(o),
+    },
+  },
+}
 
 export type FrontMatter = {
   title: string
@@ -53,14 +65,14 @@ export function processForLLM(source: string): string {
 export function loadFrontmatterOnly(filePath: string): FrontMatter {
   const fullPath = path.join(process.cwd(), filePath)
   const raw = fs.readFileSync(fullPath, "utf-8")
-  const { data } = matter(raw)
+  const { data } = matter(raw, matterOptions)
   return data as FrontMatter
 }
 
 export function loadMdxFile(filePath: string): DocContent {
   const fullPath = path.join(process.cwd(), filePath)
   const raw = fs.readFileSync(fullPath, "utf-8")
-  const { data, content } = matter(raw)
+  const { data, content } = matter(raw, matterOptions)
   const frontmatter = data as FrontMatter
 
   let lastUpdated: Date | null = null

package/template/lib/nav-types.ts

@@ -11,7 +11,8 @@ export type NavEntry = {
   slug: string
   file: string
   roles: string[]
-  section?: NavChild[]
+  section?: NavChild[]   // renders as ALL CAPS category block with children below
+  children?: NavChild[]  // renders as a plain collapsible row (no category label)
 }
 
 export type NavGroup = {

package/template/lib/nav.ts

@@ -29,6 +29,7 @@ function stripNavPrefix(nav: NavConfig, prefix: string): NavConfig {
       ...e,
       slug: s(e.slug),
       section: e.section ? walkChildren(e.section) : undefined,
+      children: e.children ? walkChildren(e.children) : undefined,
     }))
 
   return {
@@ -83,6 +84,11 @@ export function getSlugsFromConfig(nav: NavConfig): string[] {
             slugs.push(child.slug)
           }
         }
+        if (entry.children) {
+          for (const child of flattenChildren(entry.children)) {
+            slugs.push(child.slug)
+          }
+        }
       }
     } else if ("slug" in item) {
       slugs.push((item as NavEntry).slug)
@@ -112,6 +118,10 @@ export function getEntryBySlugFromConfig(nav: NavConfig, slug: string): (NavEntr
           const match = flattenChildren(entry.section).find((c) => c.slug === normalized)
           if (match) return match
         }
+        if (entry.children) {
+          const match = flattenChildren(entry.children).find((c) => c.slug === normalized)
+          if (match) return match
+        }
       }
     } else if ("slug" in item) {
       const entry = item as NavEntry
@@ -140,6 +150,10 @@ export function getGroupForSlugFromConfig(nav: NavConfig, slug: string): NavGrou
         const match = flattenChildren(entry.section).find((c) => c.slug === normalized)
         if (match) return group
       }
+      if (entry.children) {
+        const match = flattenChildren(entry.children).find((c) => c.slug === normalized)
+        if (match) return group
+      }
     }
   }
 
@@ -162,6 +176,10 @@ export function getSectionForSlugFromConfig(nav: NavConfig, slug: string): NavEn
         const match = flattenChildren(entry.section).find((c) => c.slug === normalized)
         if (match) return entry
       }
+      if (entry.children) {
+        const match = flattenChildren(entry.children).find((c) => c.slug === normalized)
+        if (match) return entry
+      }
     }
   }
 
@@ -184,6 +202,11 @@ export function getAllPublicEntries(nav: NavConfig): (NavEntry | NavChild)[] {
             if (child.roles.length === 0) entries.push(child)
           }
         }
+        if (entry.children) {
+          for (const child of flattenChildren(entry.children)) {
+            if (child.roles.length === 0) entries.push(child)
+          }
+        }
       }
     } else if ("slug" in item) {
       const entry = item as NavEntry

package/template/next.config.ts

@@ -1,6 +1,7 @@
 import type { NextConfig } from "next";
 
 const isOffline = process.env.OFFLINE_MODE === "true"
+const isDev = process.env.NODE_ENV === "development"
 
 const securityHeaders = [
   { key: "X-Frame-Options", value: "DENY" },
@@ -11,7 +12,8 @@ const securityHeaders = [
     key: "Content-Security-Policy",
     value: [
       "default-src 'self'",
-      "script-src 'self' 'unsafe-inline'",
+      // React dev mode (Fast Refresh, component stacks) needs eval()
+      `script-src 'self' 'unsafe-inline'${isDev ? " 'unsafe-eval'" : ""}`,
       "style-src 'self' 'unsafe-inline'",
       "img-src 'self' data:",
       "font-src 'self'",

package/template/scripts/build-search-index.ts

@@ -76,7 +76,9 @@ async function main() {
   for (const entry of entries) {
     const filePath = path.join(ROOT, entry.file)
     if (!fs.existsSync(filePath)) continue
-    const { data: frontmatter, content } = matter(fs.readFileSync(filePath, "utf-8"))
+    const { data: frontmatter, content } = matter(fs.readFileSync(filePath, "utf-8"), {
+      engines: { yaml: { parse: (s: string) => yaml.load(s) as object, stringify: (o: object) => yaml.dump(o) } },
+    })
 
     index.push({
       slug: entry.slug,