camelmind 0.2.6 → 0.2.8

package/package.json

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

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

@@ -97,7 +97,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 = rawSource.replace(/\n+([ \t]*<\/Tab>)/g, "\n\n{' '}\n\n$1")
   const isSectionRoot = sectionEntry?.slug === fullSlug
 
   return (

package/template/components/Nav/MobileDrawer.tsx

@@ -102,11 +102,14 @@ export function MobileDrawer({
         <nav className="flex-1 px-3 py-4 space-y-1">
           {nav.map((item) => {
             if (isNavGroup(item)) {
-              if ((item.noDropdown || !item.items) && item.slug) {
+              const visibleItems = (item.items ?? []).filter((i) => canSee(i.roles))
+              const directHref = item.slug ?? visibleItems[0]?.slug
+
+              if ((item.noDropdown || !item.items) && directHref) {
                 return (
                   <Link
                     key={item.label}
-                    href={item.slug}
+                    href={directHref}
                     className="block px-3 py-2.5 text-sm font-medium text-gray-200 hover:text-white hover:bg-gray-800 rounded-lg"
                   >
                     {item.label}
@@ -114,7 +117,6 @@ export function MobileDrawer({
                 )
               }
 
-              const visibleItems = (item.items ?? []).filter((i) => canSee(i.roles))
               if (visibleItems.length === 0) return null
               const isExpanded = expandedGroup === item.label
 

package/template/components/Nav/TopNav.tsx

@@ -60,15 +60,17 @@ 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)) {
-              if ((item.noDropdown || !item.items) && item.slug) {
+              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) {
                 return (
-                  <Link key={item.label} href={item.slug} className="text-sm font-medium hover:text-gray-300">
+                  <Link key={item.label} href={directHref} className="text-sm font-medium hover:text-gray-300">
                     {item.label}
                   </Link>
                 )
               }
 
-              const visibleItems = (item.items ?? []).filter((i) => canSee(i.roles))
               if (visibleItems.length === 0) return null
 
               return (

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/Tabs.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useState, Children, isValidElement } from "react"
+import { useState, useEffect, useId, Children, isValidElement } from "react"
 
 type TabProps = {
   label: string
@@ -19,20 +19,43 @@ export function Tabs({ children }: { children: React.ReactNode }) {
     )
   ) as React.ReactElement<TabProps>[]
 
+  // 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 = () => {
+    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
+  }
+
   const [active, setActive] = useState(0)
 
+  useEffect(() => {
+    setActive(getIndexFromHash())
+    const onHashChange = () => setActive(getIndexFromHash())
+    window.addEventListener("hashchange", onHashChange)
+    return () => window.removeEventListener("hashchange", onHashChange)
+  }, [])
+
+  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">
+    <div className="my-4">
       {/* 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">
+        {/* Tab bar — not-prose scoped here so prose styles don't bleed into buttons */}
+        <div className="not-prose flex border-b border-gray-200 bg-gray-50">
           {tabs.map((tab, i) => (
             <button
               key={i}
-              onClick={() => setActive(i)}
+              onClick={() => handleClick(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"

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)
 }
@@ -19,7 +20,7 @@ export type NavGroup = {
   label: string
   dropdown: boolean
   noDropdown?: boolean  // show as direct link in top nav, not a dropdown button
-  slug?: string         // href for the direct link when noDropdown is true
+  slug?: string         // optional direct-link href; falls back to the first visible item
   items: NavEntry[]
 }