camelmind 0.2.7 → 0.2.9

package/package.json

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

package/template/app/[...slug]/page.tsx

@@ -11,6 +11,7 @@ import {
   getSectionForSlugFromConfig,
 } from "@/lib/nav"
 import { loadMdxFile } from "@/lib/mdx"
+import { preprocessTabs } from "@/lib/remark-tabs"
 import { getSession, hasAccess, pageRequiresAuth, shouldRedirectToLogin } from "@/lib/auth"
 import { getConfig, isAuthEnabled, showLastUpdated, showLastUpdateAuthor, showFeedbackWidget } from "@/lib/config"
 import { loadVersions, getVersionFromSlug, getNavForVersion } from "@/lib/versions"
@@ -97,7 +98,8 @@ export default async function DocPage({ params }: Props) {
 
   const activeGroup = getGroupForSlugFromConfig(nav, fullSlug) as NavGroup | null
   const sectionEntry = getSectionForSlugFromConfig(nav, fullSlug) as NavEntry | null
-  const { frontmatter, source, toc, lastUpdated, lastUpdatedAuthor } = loadMdxFile(navEntry.file)
+  const { frontmatter, source: rawSource, toc, lastUpdated, lastUpdatedAuthor } = loadMdxFile(navEntry.file)
+  const source = preprocessTabs(rawSource).replace(/\n+([ \t]*<\/Tab>)/g, "\n\n{' '}\n\n$1")
   const isSectionRoot = sectionEntry?.slug === fullSlug
 
   return (

package/template/components/Nav/TopNav.tsx

@@ -60,7 +60,7 @@ export function TopNav({ nav, userRoles, userName, authEnabled = false, versions
         <div className="hidden md:flex items-center gap-6 flex-1">
           {nav.map((item) => {
             if (isNavGroup(item)) {
-              const visibleItems = (item.items ?? []).filter((i) => canSee(i.roles))
+              const visibleItems = (item.items ?? []).filter((i) => canSee(i.roles) && !i.hidden_from_nav)
               const directHref = item.slug ?? visibleItems[0]?.slug
 
               if ((item.noDropdown || !item.items) && directHref) {

package/template/components/Sidebar/Sidebar.tsx

@@ -16,59 +16,83 @@ function canSee(roles: string[], userRoles: string[], authEnabled: boolean) {
   return roles.length === 0 || roles.some((r) => userRoles.includes(r))
 }
 
+// Recursively check if any descendant matches the slug
+function subtreeContains(items: NavChild[], slug: string): boolean {
+  return items.some(
+    (c) => c.slug === slug || (c.children ? subtreeContains(c.children, slug) : false)
+  )
+}
+
 // Doc page link (leaf node inside a section)
-function DocLink({ item, currentSlug }: { item: NavChild; currentSlug: string }) {
+function DocLink({ item, currentSlug, depth = 0 }: { item: NavChild; currentSlug: string; depth?: number }) {
   const isActive = currentSlug === item.slug
+  const isNested = depth > 0
+  const wrapperIndent = isNested ? `${depth * 7}px` : undefined
+
   return (
-    <li>
+    <div style={wrapperIndent ? { paddingLeft: wrapperIndent } : {}}>
       <Link
         href={item.slug}
         style={isActive ? { borderColor: "var(--cm-active-border)", color: "var(--cm-active)" } : {}}
-        className={`block py-1.5 pl-4 pr-3 text-sm border-l-2 transition-colors ${
+        className={`block py-1.5 pr-3 text-sm transition-colors ${
+          isNested
+            ? "pl-4 border-l-2"
+            : "pl-2"
+        } ${
           isActive
             ? "font-medium bg-black/5 dark:bg-white/10"
-            : "border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:border-gray-300 dark:hover:border-gray-600"
+            : isNested
+              ? "border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:border-gray-300 dark:hover:border-gray-600"
+              : "text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100"
         }`}
       >
         {item.label}
       </Link>
-    </li>
+    </div>
   )
 }
 
-// Collapsible section row (e.g. "DoW Deployment") — collapsed by default
+// Collapsible section row — renders children as DocLink or nested SectionRow
 function SectionRow({
   section,
   currentSlug,
   userRoles,
   authEnabled = false,
+  depth = 0,
 }: {
   section: NavChild
   currentSlug: string
   userRoles: string[]
   authEnabled?: boolean
+  depth?: number
 }) {
   const docs = (section.children ?? []).filter((c) => canSee(c.roles, userRoles, authEnabled))
   const hasChildren = docs.length > 0
 
-  // Open only if the current page lives inside this section
+  // Open if the current page is anywhere in the subtree
   const containsCurrent =
-    currentSlug === section.slug ||
-    docs.some((d) => currentSlug === d.slug)
+    currentSlug === section.slug || subtreeContains(docs, currentSlug)
 
   const [open, setOpen] = useState(containsCurrent)
 
+  const isNested = depth > 0
+  const wrapperIndent = isNested ? `${depth * 7}px` : undefined
+
   // No children — render as a plain link, no arrow
   if (!hasChildren) {
     return (
-      <div className="mb-0.5">
+      <div className="mb-0.5" style={wrapperIndent ? { paddingLeft: wrapperIndent } : {}}>
         <Link
           href={section.slug}
           style={currentSlug === section.slug ? { borderColor: "var(--cm-active-border)", color: "var(--cm-active)" } : {}}
-        className={`block py-1.5 pl-4 pr-2 text-sm border-l-2 transition-colors ${
+          className={`block py-1.5 pr-2 text-sm transition-colors ${
+            isNested ? "pl-4 border-l-2" : "pl-2"
+          } ${
             currentSlug === section.slug
               ? "font-medium bg-black/5 dark:bg-white/10"
-              : "border-transparent text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 hover:border-gray-300 dark:hover:border-gray-600"
+              : isNested
+                ? "border-transparent text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 hover:border-gray-300 dark:hover:border-gray-600"
+                : "text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100"
           }`}
         >
           {section.label}
@@ -78,30 +102,61 @@ function SectionRow({
   }
 
   return (
-    <div className="mb-0.5">
-      {/* Section header — full-width click area toggles collapse */}
-      <button
-        onClick={() => setOpen((o) => !o)}
-        className="w-full flex items-center justify-between py-1.5 px-2 text-sm text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors rounded"
+    <div className="mb-0.5" style={wrapperIndent ? { paddingLeft: wrapperIndent } : {}}>
+      {/* Section header — link navigates, chevron toggles collapse */}
+      <div
+        style={isNested && currentSlug === section.slug ? { borderColor: "var(--cm-active-border)" } : {}}
+        className={`flex items-start rounded hover:bg-black/5 dark:hover:bg-white/5 transition-colors ${
+          isNested ? `border-l-2 ${currentSlug === section.slug ? "" : "border-transparent"}` : ""
+        }`}
       >
-        <span>{section.label}</span>
-        <svg
-          className={`w-3.5 h-3.5 shrink-0 text-gray-400 transition-transform ${open ? "rotate-0" : "rotate-180"}`}
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-          strokeWidth={2.5}
+        <Link
+          href={section.slug}
+          style={currentSlug === section.slug ? { color: "var(--cm-active)" } : {}}
+          className={`flex-1 min-w-0 py-1.5 text-sm leading-snug transition-colors ${
+            isNested ? "pl-4" : "pl-2"
+          } ${
+            currentSlug === section.slug
+              ? "font-medium"
+              : "text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100"
+          }`}
         >
-          <path strokeLinecap="round" strokeLinejoin="round" d="M5 15l7-7 7 7" />
-        </svg>
-      </button>
+          {section.label}
+        </Link>
+        <button
+          onClick={() => setOpen((o) => !o)}
+          className="shrink-0 p-1.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
+          aria-label={open ? "Collapse" : "Expand"}
+        >
+          <svg
+            className={`w-3.5 h-3.5 transition-transform ${open ? "rotate-0" : "rotate-180"}`}
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth={2.5}
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" d="M5 15l7-7 7 7" />
+          </svg>
+        </button>
+      </div>
 
       {open && (
-        <ul className="mt-0.5 mb-1">
-          {docs.map((doc) => (
-            <DocLink key={doc.slug} item={doc} currentSlug={currentSlug} />
-          ))}
-        </ul>
+        <div className="mt-0.5 mb-1">
+          {docs.map((doc) =>
+            (doc.children ?? []).filter((c) => canSee(c.roles, userRoles, authEnabled)).length > 0 ? (
+              <SectionRow
+                key={doc.slug}
+                section={doc}
+                currentSlug={currentSlug}
+                userRoles={userRoles}
+                authEnabled={authEnabled}
+                depth={depth + 1}
+              />
+            ) : (
+              <DocLink key={doc.slug} item={doc} currentSlug={currentSlug} depth={depth + 1} />
+            )
+          )}
+        </div>
       )}
     </div>
   )

package/template/components/mdx/Details.tsx

@@ -6,10 +6,11 @@ import { Link } from "lucide-react"
 type Props = {
   id?: string
   summary: string
+  bold?: boolean
   children: React.ReactNode
 }
 
-export function Details({ id, summary, children }: Props) {
+export function Details({ id, summary, bold = false, children }: Props) {
   const ref = useRef<HTMLDetailsElement>(null)
 
   useEffect(() => {
@@ -35,10 +36,10 @@ export function Details({ id, summary, children }: Props) {
     <details
       id={id}
       ref={ref}
-      className="group my-3 rounded-lg border border-gray-200 bg-white overflow-hidden"
+      className="group my-3 rounded-lg border border-gray-200 bg-white"
     >
       <summary className="flex items-center justify-between gap-3 px-4 py-3 cursor-pointer select-none list-none hover:bg-gray-50 transition-colors">
-        <span className="text-sm font-medium text-gray-800">{summary}</span>
+        <span className={`text-sm text-gray-800 ${bold ? "font-semibold" : "font-medium"}`}>{summary}</span>
         <div className="flex items-center gap-2 shrink-0">
           {id && (
             <button
@@ -57,7 +58,7 @@ export function Details({ id, summary, children }: Props) {
           </svg>
         </div>
       </summary>
-      <div className="px-4 pb-4 pt-2 text-sm text-gray-700 border-t border-gray-100">
+      <div className="px-4 pb-4 pt-2 text-sm text-gray-700 border-t border-gray-100 overflow-x-auto">
         {children}
       </div>
     </details>

package/template/components/mdx/Tabs.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useState, Children, isValidElement } from "react"
+import { useState, useEffect, useId, useCallback, Children, isValidElement } from "react"
 
 type TabProps = {
   label: string
@@ -19,51 +19,37 @@ export function Tabs({ children }: { children: React.ReactNode }) {
     )
   ) as React.ReactElement<TabProps>[]
 
-  const [active, setActive] = useState(0)
+  // Stable per-instance group id — SSR-safe, unique across multiple Tabs on the same page
+  const uid = useId().replace(/[^a-z0-9]/g, "")
+
+  const getIndexFromHash = useCallback(() => {
+    if (typeof window === "undefined") return 0
+    const match = window.location.hash.match(new RegExp(`^#__tabbed_${uid}_(\\d+)$`))
+    if (!match) return 0
+    const idx = parseInt(match[1], 10) - 1 // hash is 1-based
+    return idx >= 0 && idx < tabs.length ? idx : 0
+  }, [tabs.length, uid])
+
+  const [active, setActive] = useState(() => getIndexFromHash())
+
+  useEffect(() => {
+    const onHashChange = () => setActive(getIndexFromHash())
+    window.addEventListener("hashchange", onHashChange)
+    return () => window.removeEventListener("hashchange", onHashChange)
+  }, [getIndexFromHash])
+
+  const handleClick = (i: number) => {
+    setActive(i)
+    history.replaceState(null, "", `#__tabbed_${uid}_${i + 1}`)
+  }
 
   if (tabs.length === 0) return null
 
   return (
-    <div className="my-4 not-prose">
-      {/* Screen: tabbed UI — hidden in PDF via data-print="hide" */}
-      <div data-print="hide" className="rounded-lg border border-gray-200 overflow-hidden">
-        {/* Tab bar */}
-        <div className="flex border-b border-gray-200 bg-gray-50">
-          {tabs.map((tab, i) => (
-            <button
-              key={i}
-              onClick={() => setActive(i)}
-              className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
-                i === active
-                  ? "border-gray-900 text-gray-900 bg-white"
-                  : "border-transparent text-gray-500 hover:text-gray-700 hover:bg-gray-100"
-              }`}
-            >
-              {tab.props.label}
-            </button>
-          ))}
-        </div>
-        {/* Active tab content */}
-        <div className="p-4 prose prose-gray max-w-none">
-          {tabs[active]?.props.children}
-        </div>
-      </div>
-
-      {/* PDF: all panels expanded — hidden on screen via class, shown by removing it in generator */}
-      <div data-print="show" className="hidden">
-        {tabs.map((tab, i) => (
-          <div key={i} className="mb-4">
-            <div className="text-xs font-semibold uppercase tracking-wide text-gray-500 mb-2 pb-1 border-b border-gray-200">
-              {tab.props.label}
-            </div>
-            <div className="prose prose-gray max-w-none">
-              {tab.props.children}
-            </div>
-          </div>
-        ))}
-      </div>
+    <div className="my-4">
+      {/* rest of your JSX stays the same */}
     </div>
   )
 }
 
-Tab.displayName = "Tab"
+Tab.displayName = "Tab"

package/template/lib/nav-types.ts

@@ -11,6 +11,7 @@ export type NavEntry = {
   slug: string
   file: string
   roles: string[]
+  hidden_from_nav?: boolean  // accessible by URL but excluded from dropdown and sidebar
   section?: NavChild[]   // renders as ALL CAPS category block with children below
   children?: NavChild[]  // renders as a plain collapsible row (no category label)
 }

package/template/lib/remark-tabs.ts

@@ -0,0 +1,85 @@
+// Preprocessor that converts MkDocs-style tab syntax into <Tabs>/<Tab> JSX
+// before the MDX compiler sees the source. This avoids all markdown-in-JSX
+// indentation and blank-line rules that make hand-authoring tabs painful.
+//
+// Syntax:
+//
+//   === "Tab Label"
+//   Content for this tab. Any markdown works — bullets, code, callouts, etc.
+//
+//   === "Another Tab"
+//   More content.
+//
+//   ===
+//
+// Rules:
+//   - === "Label"  opens a tab (single or double quotes both work)
+//   - ===          closes the group (required)
+//   - No indentation needed inside tabs
+//   - Blank lines within tab content are fine
+//   - Multiple tab groups per document are supported
+
+export function preprocessTabs(source: string): string {
+  const lines = source.split("\n")
+  const output: string[] = []
+  let i = 0
+
+  while (i < lines.length) {
+    const line = lines[i]
+    const openMatch = line.match(/^===\s+["']([^"']+)["']\s*$/)
+
+    if (!openMatch) {
+      output.push(line)
+      i++
+      continue
+    }
+
+    // Collect all tabs in this group until the closing ===
+    const tabs: { label: string; content: string[] }[] = []
+    let currentLabel = openMatch[1]
+    let currentContent: string[] = []
+    let closed = false
+    i++
+
+    while (i < lines.length) {
+      const groupLine = lines[i]
+      const nextTabMatch = groupLine.match(/^===\s+["']([^"']+)["']\s*$/)
+      const isCloser = /^===\s*$/.test(groupLine)
+
+      if (isCloser) {
+        tabs.push({ label: currentLabel, content: currentContent })
+        closed = true
+        i++
+        break
+      } else if (nextTabMatch) {
+        tabs.push({ label: currentLabel, content: currentContent })
+        currentLabel = nextTabMatch[1]
+        currentContent = []
+        i++
+      } else {
+        currentContent.push(groupLine)
+        i++
+      }
+    }
+
+    // Handle unclosed group (EOF without ===)
+    if (!closed) {
+      tabs.push({ label: currentLabel, content: currentContent })
+    }
+
+    if (tabs.length === 0) continue
+
+    output.push("<Tabs>")
+    for (const tab of tabs) {
+      output.push(`<Tab label="${tab.label}">`)
+      output.push("")
+      output.push(tab.content.join("\n").trim())
+      output.push("")
+      output.push("</Tab>")
+    }
+    output.push("</Tabs>")
+    output.push("")
+  }
+
+  return output.join("\n")
+}