seemore 1.12.0 → 1.12.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "seemore",
-  "version": "1.12.0",
+  "version": "1.12.2",
   "description": "Let AI write the Markdown. Let seemore show it better — zero config documentation framework.",
   "license": "MIT",
   "type": "module",

package/src/app/layout/Sidebar.tsx

@@ -7,9 +7,13 @@ import {
   SidebarItem as BaseItem,
   SidebarSeparator as BaseSeparator,
   SidebarViewport,
+  useFolderDepth,
   useSidebar,
 } from 'fumadocs-ui/components/sidebar/base';
 import { createPageTreeRenderer } from 'fumadocs-ui/components/sidebar/page-tree';
+import { useTreePath } from 'fumadocs-ui/contexts/tree';
+import { usePathname } from 'fumadocs-core/framework';
+import type { Folder as FolderNode } from 'fumadocs-core/page-tree';
 import { feature } from '../lib/features.js';
 import { useRouteUrl } from '../router.js';
 
@@ -43,6 +47,55 @@ const styled = {
 
 const renderPageTree = createPageTreeRenderer(styled);
 
+/** fumadocs' own active check, which it does not export: trailing slashes don't count. */
+function isActive(href: string, pathname: string): boolean {
+  const normalise = (url: string) => (url.length > 1 && url.endsWith('/') ? url.slice(0, -1) : url);
+  return normalise(href) === normalise(pathname);
+}
+
+/**
+ * `navigation.sections`: top-level folders read as headed groups rather than collapsible
+ * folders. A custom `Folder` replaces fumadocs' rendering at every depth, so anything deeper
+ * is rebuilt here the way fumadocs renders it — otherwise every nested folder would become an
+ * uncollapsible heading too, and a large one would push the rest of the sidebar away.
+ */
+function SectionFolder({ item, children }: { item: FolderNode; children: ReactNode }) {
+  // Depth of the folder this one sits in; 0 means it is at the top of the tree.
+  const depth = useFolderDepth();
+  const path = useTreePath();
+  const pathname = usePathname();
+
+  if (depth === 0) {
+    return (
+      <BaseFolder collapsible={false} defaultOpen className="seemore-sidebar-folder">
+        <BaseSeparator className="seemore-sidebar-separator">{item.name}</BaseSeparator>
+        <BaseFolderContent className="seemore-sidebar-folder-content">{children}</BaseFolderContent>
+      </BaseFolder>
+    );
+  }
+
+  return (
+    <styled.SidebarFolder collapsible={item.collapsible} active={path.includes(item)} defaultOpen={item.defaultOpen}>
+      {item.index ? (
+        <styled.SidebarFolderLink
+          href={item.index.url}
+          active={isActive(item.index.url, pathname)}
+          external={item.index.external}
+        >
+          {item.icon}
+          {item.name}
+        </styled.SidebarFolderLink>
+      ) : (
+        <styled.SidebarFolderTrigger>
+          {item.icon}
+          {item.name}
+        </styled.SidebarFolderTrigger>
+      )}
+      <styled.SidebarFolderContent>{children}</styled.SidebarFolderContent>
+    </styled.SidebarFolder>
+  );
+}
+
 const COLLAPSE_KEY = 'seemore:sidebar-collapsed';
 const COLLAPSE_ATTR = 'sidebarCollapsed';
 
@@ -118,15 +171,7 @@ export function Sidebar({ children }: { children?: ReactNode }) {
   // Called during render, never inside `useMemo`: the renderer reads the tree context and
   // calls hooks of its own.
   const rendered = renderPageTree({
-    Folder: feature('navigation.sections')
-      ? ({ item, children }) => (
-          // Top-level entries read as headed groups rather than collapsible folders.
-          <BaseFolder collapsible={false} defaultOpen className="seemore-sidebar-folder">
-            <BaseSeparator className="seemore-sidebar-separator">{item.name}</BaseSeparator>
-            <BaseFolderContent className="seemore-sidebar-folder-content">{children}</BaseFolderContent>
-          </BaseFolder>
-        )
-      : undefined,
+    Folder: feature('navigation.sections') ? SectionFolder : undefined,
   });
 
   return (

package/src/app/lib/tree.ts

@@ -1,5 +1,5 @@
 import { useSyncExternalStore } from 'react';
-import { deserializePageTree } from 'fumadocs-core/source/client';
+import { deserializePageTree, type SerializedPageTree } from 'fumadocs-core/source/client';
 import type * as PageTree from 'fumadocs-core/page-tree';
 import { getTree, subscribeTree } from 'virtual:seemore/tree';
 
@@ -12,7 +12,37 @@ import { getTree, subscribeTree } from 'virtual:seemore/tree';
  */
 export function usePageTree(): PageTree.Root {
   const serialized = useSyncExternalStore(subscribeTree, getTree, getTree);
-  return deserializePageTree(serialized);
+  return resolveTree(serialized);
+}
+
+let current: { serialized: SerializedPageTree; content: string; tree: PageTree.Root } | undefined;
+let revision = 0;
+
+/**
+ * The deserialized tree for a payload, with a root `$id` that moves whenever the tree does.
+ *
+ * fumadocs' `TreeContextProvider` memoises its tree on `root.$id`, and the loader always calls
+ * the root "root" — so without a fresh id a created, renamed or retitled page reaches the
+ * store and never the sidebar. The id only moves when the content differs: the store is
+ * replaced on body edits too, and the sidebar list is keyed on that id, so bumping it for
+ * nothing would remount the list and close every folder the reader opened, on every save.
+ * The first tree keeps its id, so prerendered HTML and hydration agree. Exported for the
+ * tree store test.
+ */
+export function resolveTree(serialized: SerializedPageTree): PageTree.Root {
+  if (current?.serialized === serialized) return current.tree;
+
+  // Measured before deserialising: fumadocs rewrites names and icons into elements in place.
+  const content = JSON.stringify(serialized);
+  if (current?.content === content) {
+    current = { ...current, serialized };
+    return current.tree;
+  }
+
+  const tree = deserializePageTree(serialized);
+  if (current !== undefined) tree.$id = `${tree.$id ?? 'root'}:${++revision}`;
+  current = { serialized, content, tree };
+  return tree;
 }
 
 /**