feat(docs): doc-sections system, crdt package, MCP server, and responsive fixes

Adds a hand-authored .vue doc-sections system (intro + guide pages per package, #docs/sections map, sidebar Guide group, client-side TOC), registers @robonen/crdt, renders demos client-only, base64-encodes the server-metadata virtual, plus the MCP docs endpoint and responsive/overflow fixes across pages and tables.

docs/app/pages/[package]/[utility].vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">import { demos } from '#docs/demos';
+import { sections } from '#docs/sections';
 
 const route = useRoute();
 const { resolveEntry } = useDocs();
@@ -18,6 +19,35 @@ if (!entry.value) {
 const pkg = computed(() => entry.value!.pkg);
 
 const demoComponent = computed(() => demos[`${packageSlug.value}/${utilitySlug.value}`] ?? null);
+const sectionComponent = computed(() => sections[`${packageSlug.value}/${utilitySlug.value}`] ?? null);
+
+// ── Doc sections: client-side TOC built from the rendered headings ───────────
+const docRoot = ref<HTMLElement | null>(null);
+const docToc = ref<Array<{ id: string; text: string; depth: number }>>([]);
+
+function buildDocToc() {
+  const el = docRoot.value;
+  if (!el) return;
+  docToc.value = Array.from(el.querySelectorAll('h2, h3')).map((h) => {
+    if (!h.id) {
+      h.id = (h.textContent ?? '')
+        .toLowerCase().trim()
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/(^-|-$)/g, '');
+    }
+    return { id: h.id, text: h.textContent ?? '', depth: h.tagName === 'H2' ? 2 : 3 };
+  });
+}
+
+onMounted(() => {
+  const el = docRoot.value;
+  if (!el) return;
+  buildDocToc();
+  // The section is an async component — rebuild once its content mounts.
+  const observer = new MutationObserver(() => buildDocToc());
+  observer.observe(el, { childList: true, subtree: true });
+  onScopeDispose(() => observer.disconnect());
+});
 
 function ghUrl(path: string) {
   return `https://github.com/robonen/tools/blob/master/${path}`;
@@ -28,6 +58,7 @@ const title = computed(() => {
   const e = entry.value!;
   if (e.kind === 'api') return e.item.name;
   if (e.kind === 'components') return e.component.name;
+  if (e.kind === 'doc') return e.section.title;
   return e.section.title;
 });
 
@@ -46,6 +77,9 @@ const toc = computed(() => {
   if (e.kind === 'guide') {
     return extractHeadings(e.section.markdown).map(h => ({ id: h.id, text: h.text, depth: h.depth }));
   }
+  if (e.kind === 'doc') {
+    return docToc.value;
+  }
   if (e.kind === 'components') {
     return e.component.parts.map(p => ({ id: p.name.toLowerCase(), text: p.name, depth: 2 }));
   }
@@ -82,7 +116,7 @@ const sectionTitle = 'text-xs font-semibold uppercase tracking-wider text-(--fg-
         <header class="mb-8">
           <div class="flex items-center gap-2.5 mb-2 flex-wrap">
             <DocsBadge :kind="entry.item.kind" size="md" />
-            <h1 class="text-2xl font-bold font-mono tracking-tight text-(--fg)">{{ entry.item.name }}</h1>
+            <h1 class="min-w-0 break-words text-2xl font-bold font-mono tracking-tight text-(--fg)">{{ entry.item.name }}</h1>
             <DocsTag v-if="entry.item.since" :label="`v${entry.item.since}`" variant="neutral" />
             <DocsTag v-if="entry.item.hasTests" label="tested" variant="test" />
             <DocsTag v-if="entry.item.hasDemo" label="demo" variant="demo" />
@@ -194,10 +228,17 @@ const sectionTitle = 'text-xs font-semibold uppercase tracking-wider text-(--fg-
         <DocsComponentAnatomy :component="entry.component" :package-name="pkg.name" />
       </template>
 
-      <!-- ── GUIDE ──────────────────────────────────────────────────────── -->
-      <template v-else>
+      <!-- ── GUIDE (Markdown) ───────────────────────────────────────────── -->
+      <template v-else-if="entry.kind === 'guide'">
         <DocsMarkdown :source="entry.section.markdown" />
       </template>
+
+      <!-- ── DOC SECTION (hand-authored .vue) ───────────────────────────── -->
+      <template v-else-if="entry.kind === 'doc'">
+        <div ref="docRoot" class="docs-section">
+          <component :is="sectionComponent" />
+        </div>
+      </template>
     </article>
 
     <!-- Right rail TOC -->

docs/app/pages/[package]/index.vue

@@ -1,5 +1,7 @@
-<script setup lang="ts">const route = useRoute();
-const { getPackage, countEntries } = useDocs();
+<script setup lang="ts">import { sections } from '#docs/sections';
+
+const route = useRoute();
+const { getPackage, countEntries, getIntro } = useDocs();
 
 const slug = computed(() => route.params.package as string);
 const pkg = computed(() => getPackage(slug.value));
@@ -8,6 +10,10 @@ if (!pkg.value) {
   throw createError({ statusCode: 404, message: `Package "${slug.value}" not found` });
 }
 
+// Hand-authored intro (docs/intro.vue) renders as the package hero when present.
+const intro = computed(() => getIntro(pkg.value!));
+const introComponent = computed(() => intro.value ? sections[`${slug.value}/introduction`] ?? null : null);
+
 useHead({ title: `${pkg.value.name} — @robonen/tools` });
 
 const kindLabel = computed(() => ({
@@ -27,9 +33,14 @@ const otherSections = computed(() =>
 
 <template>
   <div v-if="pkg" class="max-w-3xl">
-    <!-- Header -->
-    <header class="mb-8 pb-8 border-b border-(--border)">
-      <div class="flex items-center gap-2.5 mb-2">
+    <!-- Hand-authored intro hero (docs/intro.vue) -->
+    <section v-if="introComponent" class="docs-section mb-12">
+      <component :is="introComponent" />
+    </section>
+
+    <!-- Auto header (shown only when there's no hand-authored intro) -->
+    <header v-else class="mb-8 pb-8 border-b border-(--border)">
+      <div class="flex items-center gap-2.5 mb-2 flex-wrap">
         <h1 class="font-mono text-2xl font-bold tracking-tight text-(--fg)">{{ pkg.name }}</h1>
         <DocsTag :label="`v${pkg.version}`" variant="neutral" />
       </div>
@@ -44,6 +55,11 @@ const otherSections = computed(() =>
       </div>
     </header>
 
+    <!-- When an intro replaces the header, label the auto-generated reference -->
+    <h2 v-if="introComponent && pkg.kind === 'api'" class="text-xs font-semibold uppercase tracking-wider text-(--fg-subtle) mb-4 pt-2">
+      API Reference
+    </h2>
+
     <!-- API: categories of items -->
     <template v-if="pkg.kind === 'api'">
       <section v-for="category in pkg.categories" :key="category.slug" class="mb-10">
@@ -51,7 +67,7 @@ const otherSections = computed(() =>
           {{ category.name }}
           <span class="ml-1 text-(--fg-subtle) normal-case font-normal">· {{ category.items.length }}</span>
         </h2>
-        <div class="grid gap-2">
+        <div class="grid grid-cols-1 gap-2">
           <NuxtLink
             v-for="item in category.items"
             :key="item.slug"
@@ -81,7 +97,7 @@ const otherSections = computed(() =>
         <h2 class="text-xs font-semibold uppercase tracking-wider text-(--fg-subtle) mb-4">
           All components <span class="normal-case font-normal">· {{ pkg.components.length }}</span>
         </h2>
-        <div class="grid gap-3 sm:grid-cols-2">
+        <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
           <NuxtLink
             v-for="c in pkg.components"
             :key="c.slug"
@@ -113,7 +129,7 @@ const otherSections = computed(() =>
       <DocsMarkdown v-if="overview" :source="overview.markdown" />
       <section v-if="otherSections.length > 0" class="mt-10 pt-8 border-t border-(--border)">
         <h2 class="text-xs font-semibold uppercase tracking-wider text-(--fg-subtle) mb-4">Sections</h2>
-        <div class="grid gap-2 sm:grid-cols-2">
+        <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
           <NuxtLink
             v-for="s in otherSections"
             :key="s.slug"