camelmind 0.2.8 → 0.2.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "camelmind",
-  "version": "0.2.8",
+  "version": "0.2.10",
   "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"
@@ -98,7 +99,7 @@ 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: rawSource, toc, lastUpdated, lastUpdatedAuthor } = loadMdxFile(navEntry.file)
-  const source = rawSource.replace(/\n+([ \t]*<\/Tab>)/g, "\n\n{' '}\n\n$1")
+  const source = preprocessTabs(rawSource).replace(/\n+([ \t]*<\/Tab>)/g, "\n\n{' '}\n\n$1")
   const isSectionRoot = sectionEntry?.slug === fullSlug
 
   return (

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, useEffect, useId, Children, isValidElement } from "react"
+import { useState, useEffect, useId, useCallback, Children, isValidElement } from "react"
 
 type TabProps = {
   label: string
@@ -22,22 +22,21 @@ export function Tabs({ children }: { children: React.ReactNode }) {
   // 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 = () => {
+  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(0)
+  const [active, setActive] = useState(() => getIndexFromHash())
 
   useEffect(() => {
-    setActive(getIndexFromHash())
     const onHashChange = () => setActive(getIndexFromHash())
     window.addEventListener("hashchange", onHashChange)
     return () => window.removeEventListener("hashchange", onHashChange)
-  }, [])
+  }, [getIndexFromHash])
 
   const handleClick = (i: number) => {
     setActive(i)
@@ -47,46 +46,41 @@ export function Tabs({ children }: { children: React.ReactNode }) {
   if (tabs.length === 0) return null
 
   return (
-    <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 — 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={() => 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"
-                  : "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">
+    <div className="my-4 border border-[var(--cm-border)] rounded-[var(--cm-radius-md)] overflow-hidden">
+      <div className="flex border-b border-[var(--cm-border)] px-2 pt-1" role="tablist">
         {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>
+          <button
+            key={i}
+            role="tab"
+            aria-selected={active === i}
+            aria-controls={`tab-panel-${uid}-${i}`}
+            id={`tab-${uid}-${i}`}
+            onClick={() => handleClick(i)}
+            style={active === i ? { borderColor: "var(--cm-active-border)", color: "var(--cm-active)" } : {}}
+            className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors ${
+              active === i
+                ? "font-semibold"
+                : "border-transparent text-[var(--cm-text-muted)] hover:text-[var(--cm-text-secondary)] hover:border-[var(--cm-border)]"
+            }`}
+          >
+            {tab.props.label}
+          </button>
         ))}
       </div>
+      {tabs.map((tab, i) => (
+        <div
+          key={i}
+          role="tabpanel"
+          id={`tab-panel-${uid}-${i}`}
+          aria-labelledby={`tab-${uid}-${i}`}
+          hidden={active !== i}
+          className="px-4 pt-4 pb-2"
+        >
+          {tab.props.children}
+        </div>
+      ))}
     </div>
   )
 }
 
-Tab.displayName = "Tab"
+Tab.displayName = "Tab"

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")
+}