@publish.os/nextjs 0.0.1-alpha.2 → 0.0.1-alpha.4

package/dist/kernel/components/blocks/sidebar.cjs

@@ -0,0 +1,317 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/kernel/components/blocks/sidebar.tsx
+var sidebar_exports = {};
+__export(sidebar_exports, {
+  Sidebar: () => Sidebar
+});
+module.exports = __toCommonJS(sidebar_exports);
+var import_sidebar_node = require("./sidebar-node.js");
+var import_scroll_area = require("../ui/scroll-area.js");
+
+// src/utils/cn.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+var twMerge = (0, import_tailwind_merge.extendTailwindMerge)({
+  extend: {
+    classGroups: {
+      z: [
+        "z-content",
+        "z-nav",
+        "z-overlay",
+        "z-modal",
+        "z-search",
+        "z-toast",
+        "z-progress"
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge((0, import_clsx.clsx)(inputs));
+}
+
+// src/kernel/components/blocks/sidebar.tsx
+var import_navigation = require("next/navigation");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function normalizePath(path) {
+  if (!path) return "";
+  const [withoutQuery = ""] = path.split(/[?#]/);
+  if (withoutQuery === "/") return "/";
+  return withoutQuery.replace(/\/+$/g, "");
+}
+function isExternalHref(href) {
+  return /^[a-z][a-z0-9+.-]*:/i.test(href) || href.startsWith("//");
+}
+function nodeHref(node) {
+  if (node.type === "link") return node.href;
+  if ("path" in node && typeof node.path === "string") return node.path;
+  return void 0;
+}
+function nodeChildren(node) {
+  return Array.isArray(node.children) ? node.children : [];
+}
+function nodeKey(node, parentKey) {
+  const prefix = parentKey ? `${parentKey}/` : "";
+  if (node.type === "page") return `${prefix}page:${node.fileID}`;
+  if (node.type === "link") return `${prefix}link:${node.id}`;
+  return `${prefix}${node.type}:${node.id}`;
+}
+function isActivePath(path, currentPath) {
+  if (!path || isExternalHref(path)) return false;
+  const normalizedPath = normalizePath(path);
+  const normalizedCurrentPath = normalizePath(currentPath);
+  if (!normalizedPath) return false;
+  return normalizedCurrentPath === normalizedPath || normalizedCurrentPath.startsWith(`${normalizedPath}/`);
+}
+function isExactActivePath(path, currentPath) {
+  if (!path || isExternalHref(path)) return false;
+  return normalizePath(path) === normalizePath(currentPath);
+}
+function createActiveIndex({
+  currentPath,
+  tree
+}) {
+  const activeIndex = /* @__PURE__ */ new Map();
+  function visit(node) {
+    const href = nodeHref(node);
+    const exactActive = isExactActivePath(href, currentPath);
+    const pathActive = node.type === "page" && isActivePath(href, currentPath);
+    const childActive = nodeChildren(node).some(visit);
+    const activeState = exactActive ? "path-active" : childActive || pathActive ? "child-path-active" : void 0;
+    activeIndex.set(node, {
+      activeState,
+      initiallyExpanded: exactActive || pathActive || childActive
+    });
+    return exactActive || pathActive || childActive;
+  }
+  for (const node of tree) {
+    visit(node);
+  }
+  return activeIndex;
+}
+function safeIdPart(value) {
+  return value.replace(/[^a-zA-Z0-9-]/g, "-");
+}
+function nodeContentId({
+  instanceId,
+  node
+}) {
+  const key = "path" in node && node.path ? node.path : node.type === "page" ? node.fileID : node.id;
+  return `sidebar-${safeIdPart(instanceId)}-${safeIdPart(key)}`;
+}
+function clampDepth(depth) {
+  return Math.min(depth, 12);
+}
+function ExpandableChildren({
+  activeIndex,
+  activeItemRef,
+  contentId,
+  currentPath,
+  depth,
+  expanded,
+  instanceId,
+  nodes,
+  parentExpanded,
+  renderChildren
+}) {
+  const childFocusable = parentExpanded && expanded;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      "aria-hidden": !expanded,
+      className: cn(
+        "grid overflow-hidden transition-[grid-template-rows] duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]",
+        expanded ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+      ),
+      "data-state": expanded ? "open" : "closed",
+      id: contentId,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "min-h-0 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "flex flex-col gap-px py-0.5", children: renderChildren ? nodes.map((child) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        SidebarTreeItem,
+        {
+          activeIndex,
+          activeItemRef,
+          currentPath,
+          depth: clampDepth(depth + 1),
+          instanceId,
+          itemKey: nodeKey(child, contentId),
+          node: child,
+          parentExpanded: childFocusable
+        },
+        nodeKey(child, contentId)
+      )) : null }) })
+    }
+  );
+}
+var SidebarTreeItem = (0, import_react.memo)(function SidebarTreeItem2({
+  activeIndex,
+  activeItemRef,
+  currentPath,
+  depth,
+  instanceId,
+  itemKey,
+  node,
+  parentExpanded
+}) {
+  const nodes = nodeChildren(node);
+  const href = nodeHref(node);
+  const activeInfo = activeIndex.get(node);
+  const activeState = activeInfo?.activeState;
+  const initiallyExpanded = Boolean(activeInfo?.initiallyExpanded);
+  const isExpandable = nodes.length > 0 && (node.type === "folder" || node.type === "page");
+  const [expanded, setExpanded] = (0, import_react.useState)(initiallyExpanded);
+  const [renderChildren, setRenderChildren] = (0, import_react.useState)(initiallyExpanded);
+  const interactedRef = (0, import_react.useRef)(false);
+  const lastPathRef = (0, import_react.useRef)(normalizePath(currentPath));
+  const contentId = nodeContentId({ instanceId, node });
+  (0, import_react.useEffect)(() => {
+    const normalizedCurrentPath = normalizePath(currentPath);
+    const pathChanged = lastPathRef.current !== normalizedCurrentPath;
+    if (pathChanged) {
+      interactedRef.current = false;
+      lastPathRef.current = normalizedCurrentPath;
+    }
+    if (initiallyExpanded && !expanded && !interactedRef.current) {
+      setRenderChildren(true);
+      (0, import_react.startTransition)(() => setExpanded(true));
+    }
+  }, [currentPath, expanded, initiallyExpanded]);
+  const toggleExpanded = (0, import_react.useCallback)(() => {
+    interactedRef.current = true;
+    setRenderChildren(true);
+    setExpanded((value) => !value);
+  }, []);
+  const expandOnNavigate = (0, import_react.useCallback)(() => {
+    interactedRef.current = true;
+    setRenderChildren(true);
+    setExpanded(true);
+  }, []);
+  const pageWithChildrenLinkClick = node.type === "page" && nodes.length > 0 ? expandOnNavigate : void 0;
+  const children = isExpandable && nodes.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    ExpandableChildren,
+    {
+      activeIndex,
+      activeItemRef,
+      contentId,
+      currentPath,
+      depth,
+      expanded,
+      instanceId,
+      nodes,
+      parentExpanded,
+      renderChildren
+    }
+  ) : node.type === "section" && nodes.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "flex flex-col gap-px", children: nodes.map((child) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    SidebarTreeItem2,
+    {
+      activeIndex,
+      activeItemRef,
+      currentPath,
+      depth,
+      instanceId,
+      itemKey: nodeKey(child, itemKey),
+      node: child,
+      parentExpanded
+    },
+    nodeKey(child, itemKey)
+  )) }) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_sidebar_node.SidebarNode,
+    {
+      activeState,
+      activeItemRef: activeState === "path-active" ? activeItemRef : void 0,
+      contentId: isExpandable ? contentId : void 0,
+      depth,
+      expanded: isExpandable ? expanded : void 0,
+      href,
+      isExpandable,
+      node,
+      onLinkClick: pageWithChildrenLinkClick,
+      onToggle: isExpandable ? toggleExpanded : void 0,
+      parentExpanded,
+      title: node.title,
+      children
+    }
+  );
+});
+function Sidebar({ className, currentPath, title, tree }) {
+  const pathname = (0, import_navigation.usePathname)();
+  const resolvedCurrentPath = pathname ?? currentPath ?? "";
+  const instanceId = (0, import_react.useId)();
+  const activeItemRef = (0, import_react.useRef)(null);
+  const activeIndex = (0, import_react.useMemo)(
+    () => createActiveIndex({ currentPath: resolvedCurrentPath, tree }),
+    [resolvedCurrentPath, tree]
+  );
+  (0, import_react.useEffect)(() => {
+    const scrollPath = resolvedCurrentPath;
+    const frame = window.requestAnimationFrame(() => {
+      if (!scrollPath) return;
+      activeItemRef.current?.scrollIntoView({
+        block: "nearest",
+        inline: "nearest"
+      });
+    });
+    return () => window.cancelAnimationFrame(frame);
+  }, [resolvedCurrentPath]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "nav",
+    {
+      "aria-label": "Documentation navigation",
+      className: cn(
+        "flex h-full min-h-0 w-(--layout-sidebar-width) min-w-(--layout-sidebar-width) max-w-(--layout-sidebar-width) flex-col overflow-hidden pb-4",
+        className
+      ),
+      children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "shrink-0 px-5 pb-2 pt-5 text-xs font-semibold uppercase tracking-wide text-foreground-3", children: title }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_scroll_area.ScrollArea,
+          {
+            className: "min-h-0 flex-1",
+            corner: true,
+            mask: { height: 24 },
+            scrollbarClassName: "opacity-0 transition-opacity data-[hovering]:opacity-100 data-[scrolling]:opacity-100",
+            variant: "gradient",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "flex flex-col gap-px px-2 py-3", children: tree.map((node) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              SidebarTreeItem,
+              {
+                activeIndex,
+                activeItemRef,
+                currentPath: resolvedCurrentPath,
+                depth: 0,
+                instanceId,
+                itemKey: nodeKey(node, ""),
+                node,
+                parentExpanded: true
+              },
+              nodeKey(node, "")
+            )) })
+          }
+        )
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Sidebar
+});

package/dist/kernel/components/blocks/sidebar.d.cts

@@ -0,0 +1,33 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { TreeNode } from '@publish.os/nextjs/types';
+import { Ref, ReactNode, MouseEvent } from 'react';
+
+type SidebarTreeNode = TreeNode & {
+    children?: SidebarTreeNode[];
+};
+type SidebarActiveState = "path-active" | "child-path-active";
+type SidebarDepth = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+type SidebarNodePrimitiveProps = {
+    activeState?: SidebarActiveState;
+    activeItemRef?: Ref<HTMLDivElement>;
+    children?: ReactNode;
+    contentId?: string;
+    depth: SidebarDepth;
+    expanded?: boolean;
+    href?: string;
+    isExpandable?: boolean;
+    node: SidebarTreeNode;
+    onLinkClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+    onToggle?: () => void;
+    parentExpanded: boolean;
+    title: string;
+};
+type SidebarProps = {
+    className?: string;
+    currentPath?: string;
+    title?: ReactNode;
+    tree: SidebarTreeNode[];
+};
+declare function Sidebar({ className, currentPath, title, tree }: SidebarProps): react_jsx_runtime.JSX.Element;
+
+export { Sidebar, type SidebarActiveState, type SidebarDepth, type SidebarNodePrimitiveProps, type SidebarProps, type SidebarTreeNode };

package/dist/kernel/components/blocks/sidebar.d.ts

@@ -0,0 +1,33 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { TreeNode } from '@publish.os/nextjs/types';
+import { Ref, ReactNode, MouseEvent } from 'react';
+
+type SidebarTreeNode = TreeNode & {
+    children?: SidebarTreeNode[];
+};
+type SidebarActiveState = "path-active" | "child-path-active";
+type SidebarDepth = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+type SidebarNodePrimitiveProps = {
+    activeState?: SidebarActiveState;
+    activeItemRef?: Ref<HTMLDivElement>;
+    children?: ReactNode;
+    contentId?: string;
+    depth: SidebarDepth;
+    expanded?: boolean;
+    href?: string;
+    isExpandable?: boolean;
+    node: SidebarTreeNode;
+    onLinkClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+    onToggle?: () => void;
+    parentExpanded: boolean;
+    title: string;
+};
+type SidebarProps = {
+    className?: string;
+    currentPath?: string;
+    title?: ReactNode;
+    tree: SidebarTreeNode[];
+};
+declare function Sidebar({ className, currentPath, title, tree }: SidebarProps): react_jsx_runtime.JSX.Element;
+
+export { Sidebar, type SidebarActiveState, type SidebarDepth, type SidebarNodePrimitiveProps, type SidebarProps, type SidebarTreeNode };

package/dist/kernel/components/blocks/sidebar.js

@@ -0,0 +1,302 @@
+"use client";
+
+// src/kernel/components/blocks/sidebar.tsx
+import { SidebarNode } from "./sidebar-node.js";
+import { ScrollArea } from "../ui/scroll-area.js";
+
+// src/utils/cn.ts
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+var twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      z: [
+        "z-content",
+        "z-nav",
+        "z-overlay",
+        "z-modal",
+        "z-search",
+        "z-toast",
+        "z-progress"
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/kernel/components/blocks/sidebar.tsx
+import { usePathname } from "next/navigation";
+import {
+  memo,
+  startTransition,
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function normalizePath(path) {
+  if (!path) return "";
+  const [withoutQuery = ""] = path.split(/[?#]/);
+  if (withoutQuery === "/") return "/";
+  return withoutQuery.replace(/\/+$/g, "");
+}
+function isExternalHref(href) {
+  return /^[a-z][a-z0-9+.-]*:/i.test(href) || href.startsWith("//");
+}
+function nodeHref(node) {
+  if (node.type === "link") return node.href;
+  if ("path" in node && typeof node.path === "string") return node.path;
+  return void 0;
+}
+function nodeChildren(node) {
+  return Array.isArray(node.children) ? node.children : [];
+}
+function nodeKey(node, parentKey) {
+  const prefix = parentKey ? `${parentKey}/` : "";
+  if (node.type === "page") return `${prefix}page:${node.fileID}`;
+  if (node.type === "link") return `${prefix}link:${node.id}`;
+  return `${prefix}${node.type}:${node.id}`;
+}
+function isActivePath(path, currentPath) {
+  if (!path || isExternalHref(path)) return false;
+  const normalizedPath = normalizePath(path);
+  const normalizedCurrentPath = normalizePath(currentPath);
+  if (!normalizedPath) return false;
+  return normalizedCurrentPath === normalizedPath || normalizedCurrentPath.startsWith(`${normalizedPath}/`);
+}
+function isExactActivePath(path, currentPath) {
+  if (!path || isExternalHref(path)) return false;
+  return normalizePath(path) === normalizePath(currentPath);
+}
+function createActiveIndex({
+  currentPath,
+  tree
+}) {
+  const activeIndex = /* @__PURE__ */ new Map();
+  function visit(node) {
+    const href = nodeHref(node);
+    const exactActive = isExactActivePath(href, currentPath);
+    const pathActive = node.type === "page" && isActivePath(href, currentPath);
+    const childActive = nodeChildren(node).some(visit);
+    const activeState = exactActive ? "path-active" : childActive || pathActive ? "child-path-active" : void 0;
+    activeIndex.set(node, {
+      activeState,
+      initiallyExpanded: exactActive || pathActive || childActive
+    });
+    return exactActive || pathActive || childActive;
+  }
+  for (const node of tree) {
+    visit(node);
+  }
+  return activeIndex;
+}
+function safeIdPart(value) {
+  return value.replace(/[^a-zA-Z0-9-]/g, "-");
+}
+function nodeContentId({
+  instanceId,
+  node
+}) {
+  const key = "path" in node && node.path ? node.path : node.type === "page" ? node.fileID : node.id;
+  return `sidebar-${safeIdPart(instanceId)}-${safeIdPart(key)}`;
+}
+function clampDepth(depth) {
+  return Math.min(depth, 12);
+}
+function ExpandableChildren({
+  activeIndex,
+  activeItemRef,
+  contentId,
+  currentPath,
+  depth,
+  expanded,
+  instanceId,
+  nodes,
+  parentExpanded,
+  renderChildren
+}) {
+  const childFocusable = parentExpanded && expanded;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": !expanded,
+      className: cn(
+        "grid overflow-hidden transition-[grid-template-rows] duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]",
+        expanded ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+      ),
+      "data-state": expanded ? "open" : "closed",
+      id: contentId,
+      children: /* @__PURE__ */ jsx("div", { className: "min-h-0 overflow-hidden", children: /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-px py-0.5", children: renderChildren ? nodes.map((child) => /* @__PURE__ */ jsx(
+        SidebarTreeItem,
+        {
+          activeIndex,
+          activeItemRef,
+          currentPath,
+          depth: clampDepth(depth + 1),
+          instanceId,
+          itemKey: nodeKey(child, contentId),
+          node: child,
+          parentExpanded: childFocusable
+        },
+        nodeKey(child, contentId)
+      )) : null }) })
+    }
+  );
+}
+var SidebarTreeItem = memo(function SidebarTreeItem2({
+  activeIndex,
+  activeItemRef,
+  currentPath,
+  depth,
+  instanceId,
+  itemKey,
+  node,
+  parentExpanded
+}) {
+  const nodes = nodeChildren(node);
+  const href = nodeHref(node);
+  const activeInfo = activeIndex.get(node);
+  const activeState = activeInfo?.activeState;
+  const initiallyExpanded = Boolean(activeInfo?.initiallyExpanded);
+  const isExpandable = nodes.length > 0 && (node.type === "folder" || node.type === "page");
+  const [expanded, setExpanded] = useState(initiallyExpanded);
+  const [renderChildren, setRenderChildren] = useState(initiallyExpanded);
+  const interactedRef = useRef(false);
+  const lastPathRef = useRef(normalizePath(currentPath));
+  const contentId = nodeContentId({ instanceId, node });
+  useEffect(() => {
+    const normalizedCurrentPath = normalizePath(currentPath);
+    const pathChanged = lastPathRef.current !== normalizedCurrentPath;
+    if (pathChanged) {
+      interactedRef.current = false;
+      lastPathRef.current = normalizedCurrentPath;
+    }
+    if (initiallyExpanded && !expanded && !interactedRef.current) {
+      setRenderChildren(true);
+      startTransition(() => setExpanded(true));
+    }
+  }, [currentPath, expanded, initiallyExpanded]);
+  const toggleExpanded = useCallback(() => {
+    interactedRef.current = true;
+    setRenderChildren(true);
+    setExpanded((value) => !value);
+  }, []);
+  const expandOnNavigate = useCallback(() => {
+    interactedRef.current = true;
+    setRenderChildren(true);
+    setExpanded(true);
+  }, []);
+  const pageWithChildrenLinkClick = node.type === "page" && nodes.length > 0 ? expandOnNavigate : void 0;
+  const children = isExpandable && nodes.length > 0 ? /* @__PURE__ */ jsx(
+    ExpandableChildren,
+    {
+      activeIndex,
+      activeItemRef,
+      contentId,
+      currentPath,
+      depth,
+      expanded,
+      instanceId,
+      nodes,
+      parentExpanded,
+      renderChildren
+    }
+  ) : node.type === "section" && nodes.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-px", children: nodes.map((child) => /* @__PURE__ */ jsx(
+    SidebarTreeItem2,
+    {
+      activeIndex,
+      activeItemRef,
+      currentPath,
+      depth,
+      instanceId,
+      itemKey: nodeKey(child, itemKey),
+      node: child,
+      parentExpanded
+    },
+    nodeKey(child, itemKey)
+  )) }) : null;
+  return /* @__PURE__ */ jsx(
+    SidebarNode,
+    {
+      activeState,
+      activeItemRef: activeState === "path-active" ? activeItemRef : void 0,
+      contentId: isExpandable ? contentId : void 0,
+      depth,
+      expanded: isExpandable ? expanded : void 0,
+      href,
+      isExpandable,
+      node,
+      onLinkClick: pageWithChildrenLinkClick,
+      onToggle: isExpandable ? toggleExpanded : void 0,
+      parentExpanded,
+      title: node.title,
+      children
+    }
+  );
+});
+function Sidebar({ className, currentPath, title, tree }) {
+  const pathname = usePathname();
+  const resolvedCurrentPath = pathname ?? currentPath ?? "";
+  const instanceId = useId();
+  const activeItemRef = useRef(null);
+  const activeIndex = useMemo(
+    () => createActiveIndex({ currentPath: resolvedCurrentPath, tree }),
+    [resolvedCurrentPath, tree]
+  );
+  useEffect(() => {
+    const scrollPath = resolvedCurrentPath;
+    const frame = window.requestAnimationFrame(() => {
+      if (!scrollPath) return;
+      activeItemRef.current?.scrollIntoView({
+        block: "nearest",
+        inline: "nearest"
+      });
+    });
+    return () => window.cancelAnimationFrame(frame);
+  }, [resolvedCurrentPath]);
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      "aria-label": "Documentation navigation",
+      className: cn(
+        "flex h-full min-h-0 w-(--layout-sidebar-width) min-w-(--layout-sidebar-width) max-w-(--layout-sidebar-width) flex-col overflow-hidden pb-4",
+        className
+      ),
+      children: [
+        title ? /* @__PURE__ */ jsx("div", { className: "shrink-0 px-5 pb-2 pt-5 text-xs font-semibold uppercase tracking-wide text-foreground-3", children: title }) : null,
+        /* @__PURE__ */ jsx(
+          ScrollArea,
+          {
+            className: "min-h-0 flex-1",
+            corner: true,
+            mask: { height: 24 },
+            scrollbarClassName: "opacity-0 transition-opacity data-[hovering]:opacity-100 data-[scrolling]:opacity-100",
+            variant: "gradient",
+            children: /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-px px-2 py-3", children: tree.map((node) => /* @__PURE__ */ jsx(
+              SidebarTreeItem,
+              {
+                activeIndex,
+                activeItemRef,
+                currentPath: resolvedCurrentPath,
+                depth: 0,
+                instanceId,
+                itemKey: nodeKey(node, ""),
+                node,
+                parentExpanded: true
+              },
+              nodeKey(node, "")
+            )) })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  Sidebar
+};