@publish.os/nextjs 0.0.1-alpha.90 → 0.0.1-alpha.92

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

@@ -1,8 +1,7 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ReactNode, ComponentPropsWithRef, ComponentPropsWithoutRef } from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import { B as ButtonProps } from '../../../button-c3WGnxIj.js';
+import { B as ButtonProps } from '../../../button-D6Xp2HBm.js';
 import { Dialog } from '@base-ui/react/dialog';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { Input } from '@base-ui/react/input';
@@ -18,17 +17,12 @@ type SearchResult = {
     excerpt: string;
     id: string;
     meta: {
-        author?: string;
         description?: string;
         group?: string;
-        image?: string;
         nodeId?: string;
         path?: string;
-        publishedAt?: string;
         section?: string;
-        tags?: string;
         title?: string;
-        updatedAt?: string;
     };
     plainExcerpt: string;
     score?: number;
@@ -45,7 +39,7 @@ type SearchProviderProps = {
     open?: boolean;
     shortcut?: string | false;
 };
-declare function SearchProvider({ children, defaultOpen, limit, onOpenChange, open: controlledOpen, shortcut, }: SearchProviderProps): react_jsx_runtime.JSX.Element;
+declare function SearchProvider({ children, defaultOpen, limit, onOpenChange, open: controlledOpen, shortcut, }: SearchProviderProps): react.JSX.Element;
 
 type DialogPortalProps = ComponentPropsWithRef<typeof Dialog.Portal>;
 
@@ -60,13 +54,13 @@ type SearchResultsProps = Omit<ComponentPropsWithRef<"div">, "children"> & {
     emptyText?: string;
     itemClassName?: string;
 };
-declare function SearchResults({ children, className, emptyText, itemClassName, ...props }: SearchResultsProps): react_jsx_runtime.JSX.Element | null;
+declare function SearchResults({ children, className, emptyText, itemClassName, ...props }: SearchResultsProps): react.JSX.Element | null;
 type SearchFooterProps = ComponentPropsWithRef<"div">;
-declare function SearchFooter({ children, className, ...props }: SearchFooterProps): react_jsx_runtime.JSX.Element | null;
+declare function SearchFooter({ children, className, ...props }: SearchFooterProps): react.JSX.Element | null;
 
 declare function SearchProgressBar({ className }: {
     className?: string;
-}): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
 
 type SearchTriggerProps = ButtonProps & {
     icon?: ReactNode;
@@ -85,7 +79,7 @@ type SearchDialogProps = {
     mobileQuery?: string;
     title?: string;
 };
-declare function DialogContent({ children, className, container, description, mobileQuery, title, }: SearchDialogProps): react_jsx_runtime.JSX.Element;
+declare function DialogContent({ children, className, container, description, mobileQuery, title, }: SearchDialogProps): react.JSX.Element;
 type SearchInputProps = Omit<InputProps, "value" | "defaultValue" | "onValueChange"> & {
     ref?: ComponentPropsWithRef<"input">["ref"];
     closeClassName?: string;
@@ -94,11 +88,11 @@ type SearchInputProps = Omit<InputProps, "value" | "defaultValue" | "onValueChan
     rootClassName?: string;
     showCloseShortcut?: boolean;
 };
-declare function SearchInputField({ className, closeClassName, closeLabel, icon, onChange, onKeyDown, placeholder, ref, rootClassName, showCloseShortcut, ...props }: SearchInputProps): react_jsx_runtime.JSX.Element;
+declare function SearchInputField({ className, closeClassName, closeLabel, icon, onChange, onKeyDown, placeholder, ref, rootClassName, showCloseShortcut, ...props }: SearchInputProps): react.JSX.Element;
 type SearchCommandProps = ComponentPropsWithRef<"div">;
-declare function Command({ children, className, ...props }?: SearchCommandProps): react_jsx_runtime.JSX.Element;
+declare function Command({ children, className, ...props }?: SearchCommandProps): react.JSX.Element;
 type SearchProps = Omit<SearchProviderProps, "children">;
-declare function Search(props: SearchProps): react_jsx_runtime.JSX.Element;
+declare function Search(props: SearchProps): react.JSX.Element;
 declare namespace Search {
     var Root: typeof SearchProvider;
     var Trigger: typeof Trigger;

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

@@ -2,7 +2,7 @@
 
 // src/modules/search/search-block.tsx
 import { useRender } from "@base-ui/react/use-render";
-import { Button } from "@publish.os/nextjs/kernel/components/ui/button";
+import { Button } from "@components/ui/button";
 import {
   Dialog,
   DialogBackdrop,
@@ -10,7 +10,7 @@ import {
   DialogPopup,
   DialogPortal,
   DialogTitle
-} from "@publish.os/nextjs/kernel/components/ui/dialog";
+} from "@components/ui/dialog";
 import {
   Drawer,
   DrawerBackdrop,
@@ -20,11 +20,11 @@ import {
   DrawerTitle,
   DrawerViewport,
   DrawerVirtualKeyboardProvider
-} from "@publish.os/nextjs/kernel/components/ui/drawer";
-import { Input } from "@publish.os/nextjs/kernel/components/ui/input";
-import { Kbd as Kbd2, kbdVariants } from "@publish.os/nextjs/kernel/components/ui/kbd";
-import { ModKey } from "@publish.os/nextjs/kernel/components/ui/mod-key";
-import { Separator as Separator2 } from "@publish.os/nextjs/kernel/components/ui/separator";
+} from "@components/ui/drawer";
+import { Input } from "@components/ui/input";
+import { Kbd as Kbd2 } from "@components/ui/kbd";
+import { ModKey } from "@components/ui/mod-key";
+import { Separator as Separator2 } from "@components/ui/separator";
 import { MagnifyingGlassIcon } from "@phosphor-icons/react/ssr";
 import { formatShortcut } from "@publish.os/nextjs/keyboard-shortcuts";
 import {
@@ -38,21 +38,21 @@ import {
 } from "react";
 
 // src/modules/search/results.tsx
-import { Kbd } from "@publish.os/nextjs/kernel/components/ui/kbd";
+import { Kbd } from "@components/ui/kbd";
 import {
   ScrollAreaContent,
   ScrollAreaRoot,
   ScrollAreaScrollbar,
   ScrollAreaThumb,
   ScrollAreaViewport
-} from "@publish.os/nextjs/kernel/components/ui/scroll-area";
-import { Separator } from "@publish.os/nextjs/kernel/components/ui/separator";
+} from "@components/ui/scroll-area";
+import { Separator } from "@components/ui/separator";
 import { ArrowElbowDownLeftIcon } from "@phosphor-icons/react/ssr";
 import { useSearchBlock } from "@publish.os/nextjs/search";
 import { cn } from "@publish.os/nextjs/utils/cn";
 import NextLink from "next/link";
 import { useEffect } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "@publish.os/nextjs/jsx-runtime";
 var SEARCH_RESULT_SNIPPET_LENGTH = 180;
 function getSearchPanel({
   displayResults,
@@ -323,11 +323,11 @@ import {
   Progress,
   ProgressIndicator,
   ProgressTrack
-} from "@publish.os/nextjs/kernel/components/ui/progress";
+} from "@components/ui/progress";
 import { useSearchBlock as useSearchBlock2 } from "@publish.os/nextjs/search";
 import { cn as cn2 } from "@publish.os/nextjs/utils/cn";
 import { useLayoutEffect, useRef, useState } from "react";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx2 } from "@publish.os/nextjs/jsx-runtime";
 var INITIAL_PROGRESS = 5, FAST_PHASE_END = 25, TARGET_PROGRESS = 95, FAST_DURATION = 50, MAX_DURATION = 5e3, COMPLETE_DURATION = 200, EXIT_DURATION = 150;
 function SearchProgressBar({ className }) {
   let {
@@ -393,7 +393,7 @@ function SearchProgressBar({ className }) {
 }
 
 // src/modules/search/search-block.tsx
-import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "@publish.os/nextjs/jsx-runtime";
 function Trigger({
   children,
   className,
@@ -625,13 +625,12 @@ function SearchInputField({
       {
         "aria-label": "Close search",
         className: cn3(
-          kbdVariants({ size: "xs" }),
-          "absolute right-4 top-1/2 hidden -translate-y-1/2 cursor-pointer text-foreground-2 before:absolute before:left-1/2 before:top-1/2 before:size-10 before:-translate-1/2 before:content-[''] active:translate-y-[calc(-50%_+_1px)] md:inline-flex",
+          "absolute right-4 top-1/2 hidden -translate-y-1/2 cursor-pointer before:absolute before:left-1/2 before:top-1/2 before:size-10 before:-translate-1/2 before:content-[''] active:translate-y-[calc(-50%_+_1px)] md:inline-flex",
           closeClassName
         ),
         onClick: () => setOpen(!1),
         type: "button",
-        children: closeLabel
+        children: /* @__PURE__ */ jsx3(Kbd2, { size: "xs", children: closeLabel })
       }
     ) : null,
     /* @__PURE__ */ jsx3(Separator2, { className: "absolute inset-x-0 bottom-0 z-content md:hidden group-data-[search-presentation=drawer]/search:block group-data-[search-presentation=dialog]/search:hidden" })

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

@@ -1,8 +1,6 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { S as SidebarNodePrimitiveProps } from '../../../sidebar-types-DKpR27II.js';
-import 'react';
-import '../../../types-CJWRG05y.js';
+import * as react from 'react';
+import { S as SidebarNodePrimitiveProps } from '../../../sidebar-types-CMrMM0Nj.js';
 
-declare function SidebarNode({ activeState, activeItemRef, children, contentId, depth, expanded, href, isExpandable, node, onLinkClick, onToggle, parentExpanded, title, }: SidebarNodePrimitiveProps): react_jsx_runtime.JSX.Element | null;
+declare function SidebarNode({ activeState, activeItemRef, children, contentId, depth, expanded, href, isExpandable, node, onLinkClick, onSwitchView, onToggle, parentExpanded, title, }: SidebarNodePrimitiveProps): react.JSX.Element | null;
 
 export { SidebarNode, SidebarNodePrimitiveProps };

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

@@ -3,7 +3,7 @@ import { CaretRightIcon } from "@phosphor-icons/react/ssr";
 import { cn } from "@publish.os/nextjs/utils/cn";
 import { cva } from "class-variance-authority";
 import NextLink from "next/link";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "@publish.os/nextjs/jsx-runtime";
 var SIDEBAR_NODE_VARIANT = "base", depthClassByDepth = {
   0: "pl-2",
   1: "pl-5",
@@ -157,6 +157,7 @@ function SidebarNode({
   isExpandable = !1,
   node,
   onLinkClick,
+  onSwitchView,
   onToggle,
   parentExpanded,
   title
@@ -174,7 +175,7 @@ function SidebarNode({
       }
     ),
     children
-  ] }) : node.type === "folder" ? /* @__PURE__ */ jsxs("li", { className: "select-none", children: [
+  ] }) : node.type === "folder" || node.type === "group" && node.presentation === "folder" ? /* @__PURE__ */ jsxs("li", { className: "select-none", children: [
     /* @__PURE__ */ jsx(
       "button",
       {
@@ -200,7 +201,16 @@ function SidebarNode({
       }
     ),
     children
-  ] }) : href ? /* @__PURE__ */ jsxs("li", { className: "select-none", children: [
+  ] }) : node.type === "switch-view" ? /* @__PURE__ */ jsx("li", { className: "select-none", children: /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: "block w-full rounded-button text-left focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-focus-stroke",
+      onClick: onSwitchView,
+      tabIndex: parentExpanded ? void 0 : -1,
+      type: "button",
+      children: /* @__PURE__ */ jsx(RowInner, { activeState, depth, interactive: !0, children: /* @__PURE__ */ jsx(RowText, { title }) })
+    }
+  ) }) : href ? /* @__PURE__ */ jsxs("li", { className: "select-none", children: [
     /* @__PURE__ */ jsx(
       SidebarLink,
       {

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

@@ -1,15 +1,14 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 import { ReactNode } from 'react';
-import { a as SidebarTreeNode } from '../../../sidebar-types-DKpR27II.js';
-export { b as SidebarActiveState, c as SidebarDepth, S as SidebarNodePrimitiveProps } from '../../../sidebar-types-DKpR27II.js';
-import '../../../types-CJWRG05y.js';
+import { R as ResolvedNavigation } from '../../../sidebar-types-CMrMM0Nj.js';
+export { a as SidebarActiveState, b as SidebarDepth, c as SidebarNavigationNode, S as SidebarNodePrimitiveProps } from '../../../sidebar-types-CMrMM0Nj.js';
 
 type SidebarProps = {
     className?: string;
     currentPath?: string;
     title?: ReactNode;
-    tree: SidebarTreeNode[];
+    navigation: ResolvedNavigation;
 };
-declare function Sidebar({ className, currentPath, title, tree }: SidebarProps): react_jsx_runtime.JSX.Element;
+declare function Sidebar({ className, currentPath, title, navigation, }: SidebarProps): react.JSX.Element;
 
-export { Sidebar, type SidebarProps, SidebarTreeNode };
+export { Sidebar, type SidebarProps };

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

@@ -1,8 +1,8 @@
 "use client";
 
 // src/components/block/sidebar/sidebar.tsx
-import { SidebarNode } from "@publish.os/nextjs/kernel/components/blocks/sidebar-node";
-import { ScrollArea } from "@publish.os/nextjs/kernel/components/ui/scroll-area";
+import { SidebarNode } from "@components/blocks/sidebar-node";
+import { ScrollArea } from "@components/ui/scroll-area";
 import { cn } from "@publish.os/nextjs/utils/cn";
 import { usePathname } from "next/navigation";
 import {
@@ -15,51 +15,112 @@ import {
   useRef,
   useState
 } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+
+// src/components/block/sidebar/sidebar-navigation-view.ts
 function normalizePath(path) {
   if (!path) return "";
   let [withoutQuery = ""] = path.split(/[?#]/);
   return withoutQuery === "/" ? "/" : withoutQuery.replace(/\/+$/g, "");
 }
+function nodePath(node) {
+  if (node.type === "page") return node.page.path;
+  if (node.type === "group") return node.route;
+}
+function pathSpecificity(nodes, path) {
+  let normalizedPath = normalizePath(path), specificity = -1;
+  for (let node of nodes) {
+    let candidate = normalizePath(nodePath(node));
+    candidate && (normalizedPath === candidate || normalizedPath.startsWith(`${candidate}/`)) && (specificity = Math.max(specificity, candidate.length)), node.type === "view" ? specificity = Math.max(specificity, pathSpecificity(node.items, path)) : "children" in node && (specificity = Math.max(
+      specificity,
+      pathSpecificity(node.children ?? [], path)
+    ));
+  }
+  return specificity;
+}
+function focusedViewForPath(nodes, path) {
+  let selected, selectedDepth = -1, selectedSpecificity = -1;
+  function visit(entries, depth) {
+    for (let node of entries)
+      if (node.type === "view") {
+        let specificity = pathSpecificity(node.items, path);
+        specificity >= 0 && (depth > selectedDepth || depth === selectedDepth && specificity > selectedSpecificity) && (selected = node, selectedDepth = depth, selectedSpecificity = specificity), visit(node.items, depth + 1);
+      } else "children" in node && visit(node.children ?? [], depth);
+  }
+  return visit(nodes, 0), selected;
+}
+function focusedViewForTarget(nodes, target) {
+  if (typeof target != "string")
+    return findNamedView(nodes, target.view);
+  let group = findGroup(nodes, target);
+  return group ? focusedViewForPath(nodes, group.route) : findNamedView(nodes, target);
+}
+function findNavigationView(nodes, viewId) {
+  if (viewId)
+    for (let node of nodes) {
+      if (node.type === "view" && (node.viewId === viewId || node.id === viewId))
+        return node;
+      let nested = node.type === "view" ? findNavigationView(node.items, viewId) : "children" in node ? findNavigationView(node.children ?? [], viewId) : void 0;
+      if (nested) return nested;
+    }
+}
+function findNamedView(nodes, viewId) {
+  return findNavigationView(nodes, viewId);
+}
+function findGroup(nodes, groupKey) {
+  for (let node of nodes) {
+    if (node.type === "group" && node.groupKey === groupKey) return node;
+    let nested = node.type === "view" ? findGroup(node.items, groupKey) : "children" in node ? findGroup(node.children ?? [], groupKey) : void 0;
+    if (nested) return nested;
+  }
+}
+
+// src/components/block/sidebar/sidebar.tsx
+import { jsx, jsxs } from "@publish.os/nextjs/jsx-runtime";
+function normalizePath2(path) {
+  if (!path) return "";
+  let [withoutQuery = ""] = path.split(/[?#]/);
+  return withoutQuery === "/" ? "/" : withoutQuery.replace(/\/+$/g, "");
+}
 function isExternalHref(href) {
   return /^[a-z][a-z0-9+.-]*:/i.test(href) || href.startsWith("//");
 }
 function nodeHref(node) {
-  if (node.type === "link" || "href" in node && typeof node.href == "string") return node.href;
-  if ("path" in node && typeof node.path == "string") return node.path;
+  if (node.type === "link" || node.type === "page" || node.type === "group" && node.presentation === "page") return node.href;
 }
-function nodePath(node) {
-  if (node.type !== "link" && "path" in node && typeof node.path == "string")
-    return node.path;
+function nodePath2(node) {
+  if (node.type === "page") return node.page.path;
+  if (node.type === "group" && node.presentation === "page") return node.route;
 }
 function nodeChildren(node) {
-  return Array.isArray(node.children) ? node.children : [];
+  return node.type === "view" ? node.items : "children" in node ? node.children ?? [] : [];
 }
 function nodeKey(node, parentKey) {
-  let prefix = parentKey ? `${parentKey}/` : "";
-  return node.type === "page" ? `${prefix}page:${node.fileID}` : node.type === "link" ? `${prefix}link:${node.id}` : `${prefix}${node.type}:${node.id}`;
+  return `${parentKey ? `${parentKey}/` : ""}${node.type}:${node.id}`;
 }
 function isActivePath(path, currentPath) {
   if (!path || isExternalHref(path)) return !1;
-  let normalizedPath = normalizePath(path), normalizedCurrentPath = normalizePath(currentPath);
+  let normalizedPath = normalizePath2(path), normalizedCurrentPath = normalizePath2(currentPath);
   return normalizedPath ? normalizedCurrentPath === normalizedPath || normalizedCurrentPath.startsWith(`${normalizedPath}/`) : !1;
 }
 function isExactActivePath(path, currentPath) {
-  return !path || isExternalHref(path) ? !1 : normalizePath(path) === normalizePath(currentPath);
+  return !path || isExternalHref(path) ? !1 : normalizePath2(path) === normalizePath2(currentPath);
 }
 function createActiveIndex({
   currentPath,
-  tree
+  nodes
 }) {
   let activeIndex = /* @__PURE__ */ new Map();
   function visit(node) {
-    let path = nodePath(node), exactActive = isExactActivePath(path, currentPath), pathActive = node.type === "page" && isActivePath(path, currentPath), childActive = nodeChildren(node).some(visit), activeState = exactActive ? "path-active" : childActive || pathActive ? "child-path-active" : void 0;
+    let path = nodePath2(node), exactActive = isExactActivePath(path, currentPath), pathActive = (node.type === "page" || node.type === "group") && isActivePath(path, currentPath), childActive = !1;
+    for (let child of nodeChildren(node))
+      childActive = visit(child) || childActive;
+    let activeState = exactActive ? "path-active" : childActive || pathActive ? "child-path-active" : void 0;
     return activeIndex.set(node, {
       activeState,
       initiallyExpanded: exactActive || pathActive || childActive
     }), exactActive || pathActive || childActive;
   }
-  for (let node of tree)
+  for (let node of nodes)
     visit(node);
   return activeIndex;
 }
@@ -70,7 +131,7 @@ function nodeContentId({
   instanceId,
   node
 }) {
-  let key = "path" in node && node.path ? node.path : node.type === "page" ? node.fileID : node.id;
+  let key = node.type === "page" ? node.page.path : node.type === "group" ? node.route : node.id;
   return `sidebar-${safeIdPart(instanceId)}-${safeIdPart(key)}`;
 }
 function clampDepth(depth) {
@@ -85,6 +146,7 @@ function ExpandableChildren({
   expanded,
   instanceId,
   nodes,
+  onSwitchView,
   parentExpanded,
   renderChildren
 }) {
@@ -109,6 +171,7 @@ function ExpandableChildren({
           instanceId,
           itemKey: nodeKey(child, contentId),
           node: child,
+          onSwitchView,
           parentExpanded: childFocusable
         },
         nodeKey(child, contentId)
@@ -124,18 +187,19 @@ var SidebarTreeItem = memo(function SidebarTreeItem2({
   instanceId,
   itemKey,
   node,
+  onSwitchView,
   parentExpanded
 }) {
-  let nodes = nodeChildren(node), href = nodeHref(node), activeInfo = activeIndex.get(node), activeState = activeInfo?.activeState, initiallyExpanded = !!activeInfo?.initiallyExpanded, isExpandable = nodes.length > 0 && (node.type === "folder" || node.type === "page"), [expanded, setExpanded] = useState(initiallyExpanded), [renderChildren, setRenderChildren] = useState(initiallyExpanded), interactedRef = useRef(!1), lastPathRef = useRef(normalizePath(currentPath)), contentId = nodeContentId({ instanceId, node });
+  let nodes = nodeChildren(node), href = nodeHref(node), activeInfo = activeIndex.get(node), activeState = activeInfo?.activeState, initiallyExpanded = !!activeInfo?.initiallyExpanded, hasChildren = nodes.length > 0, isExpandable = hasChildren && (node.type === "folder" || node.type === "page" || node.type === "group" && node.presentation === "folder"), [expanded, setExpanded] = useState(initiallyExpanded), [renderChildren, setRenderChildren] = useState(initiallyExpanded), interactedRef = useRef(!1), lastPathRef = useRef(normalizePath2(currentPath)), contentId = nodeContentId({ instanceId, node });
   useEffect(() => {
-    let normalizedCurrentPath = normalizePath(currentPath);
+    let normalizedCurrentPath = normalizePath2(currentPath);
     lastPathRef.current !== normalizedCurrentPath && (interactedRef.current = !1, lastPathRef.current = normalizedCurrentPath), initiallyExpanded && !expanded && !interactedRef.current && (setRenderChildren(!0), startTransition(() => setExpanded(!0)));
   }, [currentPath, expanded, initiallyExpanded]);
   let toggleExpanded = useCallback(() => {
     interactedRef.current = !0, setRenderChildren(!0), setExpanded((value) => !value);
   }, []), expandOnNavigate = useCallback(() => {
     interactedRef.current = !0, setRenderChildren(!0), setExpanded(!0);
-  }, []), pageWithChildrenLinkClick = node.type === "page" && nodes.length > 0 ? expandOnNavigate : void 0, children = isExpandable && nodes.length > 0 ? /* @__PURE__ */ jsx(
+  }, []), pageWithChildrenLinkClick = (node.type === "page" || node.type === "group" && node.presentation === "page") && hasChildren ? expandOnNavigate : void 0, children = isExpandable && hasChildren ? /* @__PURE__ */ jsx(
     ExpandableChildren,
     {
       activeIndex,
@@ -146,10 +210,11 @@ var SidebarTreeItem = memo(function SidebarTreeItem2({
       expanded,
       instanceId,
       nodes,
+      onSwitchView,
       parentExpanded,
       renderChildren
     }
-  ) : node.type === "section" && nodes.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-px", children: nodes.map((child) => /* @__PURE__ */ jsx(
+  ) : node.type === "section" && hasChildren ? /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-px", children: nodes.map((child) => /* @__PURE__ */ jsx(
     SidebarTreeItem2,
     {
       activeIndex,
@@ -159,11 +224,26 @@ var SidebarTreeItem = memo(function SidebarTreeItem2({
       instanceId,
       itemKey: nodeKey(child, itemKey),
       node: child,
+      onSwitchView,
+      parentExpanded
+    },
+    nodeKey(child, itemKey)
+  )) }) : node.type === "view" && hasChildren ? /* @__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,
+      onSwitchView,
       parentExpanded
     },
     nodeKey(child, itemKey)
   )) }) : null;
-  return /* @__PURE__ */ jsx(
+  return node.type === "view" ? children : /* @__PURE__ */ jsx(
     SidebarNode,
     {
       activeState,
@@ -175,17 +255,45 @@ var SidebarTreeItem = memo(function SidebarTreeItem2({
       isExpandable,
       node,
       onLinkClick: pageWithChildrenLinkClick,
+      onSwitchView: node.type === "switch-view" ? () => onSwitchView(node.target) : void 0,
       onToggle: isExpandable ? toggleExpanded : void 0,
       parentExpanded,
-      title: node.title,
+      title: node.label ?? "",
       children
     }
   );
 });
-function Sidebar({ className, currentPath, title, tree }) {
-  let resolvedCurrentPath = usePathname() ?? currentPath ?? "", instanceId = useId(), activeItemRef = useRef(null), viewportRef = useRef(null), activeIndex = useMemo(
-    () => createActiveIndex({ currentPath: resolvedCurrentPath, tree }),
-    [resolvedCurrentPath, tree]
+function Sidebar({
+  className,
+  currentPath,
+  title,
+  navigation
+}) {
+  let resolvedCurrentPath = usePathname() ?? currentPath ?? "", normalizedCurrentPath = normalizePath2(resolvedCurrentPath), [selection, setSelection] = useState(() => ({
+    path: normalizedCurrentPath,
+    viewId: focusedViewForPath(navigation.items, resolvedCurrentPath)?.id
+  })), defaultViewId = focusedViewForPath(
+    navigation.items,
+    resolvedCurrentPath
+  )?.id, viewId = selection.path === normalizedCurrentPath ? selection.viewId : defaultViewId, selectedView = findNavigationView(navigation.items, viewId), visibleNodes = selectedView?.type === "view" ? selectedView.items : navigation.items, switchView = useCallback(
+    (target) => {
+      let targetView = focusedViewForTarget(navigation.items, target);
+      setSelection({ path: normalizedCurrentPath, viewId: targetView?.id });
+    },
+    [navigation.items, normalizedCurrentPath]
+  );
+  useEffect(() => {
+    setSelection({
+      path: normalizedCurrentPath,
+      viewId: defaultViewId
+    });
+  }, [defaultViewId, normalizedCurrentPath]);
+  let instanceId = useId(), activeItemRef = useRef(null), viewportRef = useRef(null), activeIndex = useMemo(
+    () => createActiveIndex({
+      currentPath: resolvedCurrentPath,
+      nodes: visibleNodes
+    }),
+    [resolvedCurrentPath, visibleNodes]
   );
   return useEffect(() => {
     let viewport = viewportRef.current, win = viewport?.ownerDocument.defaultView;
@@ -216,7 +324,7 @@ function Sidebar({ className, currentPath, title, tree }) {
             scrollbarClassName: "opacity-0 transition-opacity data-[hovering]:opacity-100 data-[scrolling]:opacity-100",
             variant: "gradient",
             viewportRef,
-            children: /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-px px-2 py-3", children: tree.map((node) => /* @__PURE__ */ jsx(
+            children: /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-px px-2 py-3", children: visibleNodes.map((node) => /* @__PURE__ */ jsx(
               SidebarTreeItem,
               {
                 activeIndex,
@@ -226,6 +334,7 @@ function Sidebar({ className, currentPath, title, tree }) {
                 instanceId,
                 itemKey: nodeKey(node, ""),
                 node,
+                onSwitchView: switchView,
                 parentExpanded: !0
               },
               nodeKey(node, "")

package/dist/kernel/components/blocks/theme-toggle.d.ts

@@ -1,10 +1,9 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { B as ButtonProps } from '../../../button-c3WGnxIj.js';
+import * as react from 'react';
+import { B as ButtonProps } from '../../../button-D6Xp2HBm.js';
 import 'class-variance-authority/types';
 import 'class-variance-authority';
-import 'react';
 
 type ThemeToggleProps = Omit<ButtonProps, "children" | "iconOnly" | "leftIcon" | "loading" | "rightIcon">;
-declare function ThemeToggle({ className, onClick, size, title, type, variant, ...props }: ThemeToggleProps): react_jsx_runtime.JSX.Element;
+declare function ThemeToggle({ className, onClick, size, title, type, variant, ...props }: ThemeToggleProps): react.JSX.Element;
 
 export { ThemeToggle, type ThemeToggleProps };

package/dist/kernel/components/blocks/theme-toggle.js

@@ -1,14 +1,14 @@
 "use client";
 
-// src/components/ui/theme-toggle.tsx
-import { Button } from "@publish.os/nextjs/kernel/components/ui/button";
-import { MonitorIcon, MoonIcon, SunIcon } from "@phosphor-icons/react/ssr";
+// src/components/block/theme-toggle.tsx
+import { Button } from "@components/ui/button";
+import { CircleHalfIcon, MoonIcon, SunIcon } from "@phosphor-icons/react/ssr";
 import { useTheme } from "next-themes";
 import { useEffect, useMemo, useState } from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx } from "@publish.os/nextjs/jsx-runtime";
 var themeOrder = ["system", "light", "dark"];
 function ThemeIcon({ theme }) {
-  return theme === "light" ? /* @__PURE__ */ jsx(SunIcon, { "aria-hidden": "true", size: 16 }) : theme === "dark" ? /* @__PURE__ */ jsx(MoonIcon, { "aria-hidden": "true", size: 16 }) : /* @__PURE__ */ jsx(MonitorIcon, { "aria-hidden": "true", size: 16 });
+  return theme === "light" ? /* @__PURE__ */ jsx(SunIcon, { "aria-hidden": "true", size: 16, weight: "fill" }) : theme === "dark" ? /* @__PURE__ */ jsx(MoonIcon, { "aria-hidden": "true", size: 16, weight: "fill" }) : /* @__PURE__ */ jsx(CircleHalfIcon, { "aria-hidden": "true", size: 16, weight: "fill" });
 }
 function normalizeTheme(theme) {
   return theme === "light" || theme === "dark" ? theme : "system";

package/dist/kernel/components/blocks/toc-client.d.ts

@@ -0,0 +1,40 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+type TocHeading = {
+    id: string;
+    level: number;
+    text: string;
+};
+
+type TocClientProps = {
+    className: string;
+    desktopClassName: string;
+    desktopListClassName?: string;
+    headings: TocHeading[];
+    levels: [number, number];
+    listClassName?: string;
+    mobileClassName: string;
+    mobileQuery: string;
+    readingOffset?: number;
+    title: string;
+    children: ReactNode;
+};
+declare function TocClientProvider({ className, desktopClassName, desktopListClassName, headings, levels, listClassName, mobileClassName, mobileQuery, readingOffset, title, children, }: TocClientProps): react.JSX.Element;
+declare function TocDesktop({ children }: {
+    children?: ReactNode;
+}): react.JSX.Element;
+declare function TocMobile({ children }: {
+    children?: ReactNode;
+}): react.JSX.Element;
+declare function TocMobileHeader({ children }: {
+    children?: ReactNode;
+}): react.JSX.Element;
+declare function TocLinksSlot({ className, listClassName, viewport, }: {
+    className?: string;
+    listClassName?: string;
+    viewport?: "desktop" | "mobile";
+}): react.JSX.Element;
+declare function TocTitle({ children, className, ...props }: React.ComponentPropsWithoutRef<"span">): react.JSX.Element;
+
+export { TocClientProvider, TocDesktop, TocLinksSlot, TocMobile, TocMobileHeader, TocTitle };