@publish.os/nextjs 0.0.1-alpha.81 → 0.0.1-alpha.91

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

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

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

@@ -1,9 +1,9 @@
-// src/components/block/navigation/sidebar-node.tsx
-import { FrameworkChevronRightIcon as ChevronRight } from "@publish.os/nextjs/kernel/framework-icons";
+// src/components/block/sidebar/sidebar-node.tsx
+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",
@@ -42,12 +42,12 @@ var SIDEBAR_NODE_VARIANT = "base", depthClassByDepth = {
       variant: {
         base: [
           "font-normal text-foreground-2 hover:bg-surface-hover hover:text-foreground-1",
-          "data-[state=child-path-active]:bg-surface-2 data-[state=child-path-active]:font-medium data-[state=child-path-active]:text-foreground-1",
-          "data-[state=path-active]:bg-surface-active data-[state=path-active]:font-medium data-[state=path-active]:text-foreground-1 data-[state=path-active]:shadow-xs"
+          "data-[state=child-path-active]:bg-surface-active data-[state=child-path-active]:text-foreground-1",
+          "data-[state=path-active]:bg-surface-active data-[state=path-active]:font-medium data-[state=path-active]:text-foreground-1"
         ].join(" "),
         minimal: [
           "font-normal text-foreground-2 hover:text-foreground-1 hover:opacity-90",
-          "data-[state=child-path-active]:font-medium data-[state=child-path-active]:text-foreground-1",
+          "data-[state=child-path-active]:text-foreground-1",
           "data-[state=path-active]:font-semibold data-[state=path-active]:text-foreground-1 data-[state=path-active]:[text-shadow:0_0_0_currentColor]"
         ].join(" ")
       }
@@ -78,10 +78,10 @@ function Caret({ active, expanded }) {
         "span",
         {
           className: cn(
-            "block transition-transform duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]",
+            "block transition-transform duration-300 ease-in-out",
             expanded ? "rotate-90" : "rotate-0"
           ),
-          children: /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true", size: 13 })
+          children: /* @__PURE__ */ jsx(CaretRightIcon, { "aria-hidden": "true", size: 13 })
         }
       )
     }
@@ -112,7 +112,7 @@ function RowInner({
   );
 }
 function RowText({ title }) {
-  return /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 whitespace-normal break-words text-pretty", children: title });
+  return /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 whitespace-normal wrap-break-word text-pretty", children: title });
 }
 function ExternalLinkIndicator() {
   return /* @__PURE__ */ jsx(
@@ -128,6 +128,7 @@ function SidebarLink({
   active,
   children,
   className,
+  external = !1,
   href,
   onClick,
   parentExpanded,
@@ -143,7 +144,7 @@ function SidebarLink({
     tabIndex: parentExpanded ? void 0 : -1,
     ...props
   };
-  return isExternalHref(href) ? /* @__PURE__ */ jsx("a", { href, rel: mergeRel(void 0), target: "_blank", ...commonProps, children }) : /* @__PURE__ */ jsx(NextLink, { href, ...commonProps, children });
+  return external && isExternalHref(href) ? /* @__PURE__ */ jsx("a", { href, rel: mergeRel(void 0), target: "_blank", ...commonProps, children }) : /* @__PURE__ */ jsx(NextLink, { href, ...commonProps, children });
 }
 function SidebarNode({
   activeState,
@@ -206,6 +207,7 @@ function SidebarNode({
         active: isActive,
         "aria-controls": isExpandable ? contentId : void 0,
         "aria-expanded": isExpandable ? expanded : void 0,
+        external: isExternalLinkNode,
         href,
         onClick: onLinkClick,
         parentExpanded,

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

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
-import { a as SidebarTreeNode } from '../../../sidebar-types-Bgchdfd6.js';
-export { b as SidebarActiveState, c as SidebarDepth, S as SidebarNodePrimitiveProps } from '../../../sidebar-types-Bgchdfd6.js';
-import '../../../types-DHBm7-j6.js';
+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';
 
 type SidebarProps = {
     className?: string;

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

@@ -1,8 +1,8 @@
 "use client";
 
-// src/components/block/navigation/sidebar.tsx
-import { SidebarNode } from "@publish.os/nextjs/kernel/components/blocks/sidebar-node";
-import { ScrollArea } from "@publish.os/nextjs/kernel/components/ui/scroll-area";
+// src/components/block/sidebar/sidebar.tsx
+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,7 +15,7 @@ import {
   useRef,
   useState
 } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "@publish.os/nextjs/jsx-runtime";
 function normalizePath(path) {
   if (!path) return "";
   let [withoutQuery = ""] = path.split(/[?#]/);
@@ -25,9 +25,13 @@ 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 (node.type === "link" || "href" in node && typeof node.href == "string") return node.href;
   if ("path" in node && typeof node.path == "string") return node.path;
 }
+function nodePath(node) {
+  if (node.type !== "link" && "path" in node && typeof node.path == "string")
+    return node.path;
+}
 function nodeChildren(node) {
   return Array.isArray(node.children) ? node.children : [];
 }
@@ -49,7 +53,10 @@ function createActiveIndex({
 }) {
   let activeIndex = /* @__PURE__ */ new Map();
   function visit(node) {
-    let href = nodeHref(node), exactActive = isExactActivePath(href, currentPath), pathActive = node.type === "page" && isActivePath(href, currentPath), childActive = nodeChildren(node).some(visit), activeState = exactActive ? "path-active" : childActive || pathActive ? "child-path-active" : void 0;
+    let path = nodePath(node), exactActive = isExactActivePath(path, currentPath), pathActive = node.type === "page" && 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
@@ -90,7 +97,7 @@ function ExpandableChildren({
     {
       "aria-hidden": !expanded,
       className: cn(
-        "grid overflow-hidden transition-[grid-template-rows] duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]",
+        "grid overflow-hidden transition-[grid-template-rows] duration-300 ease-in-out",
         expanded ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
       ),
       "data-state": expanded ? "open" : "closed",
@@ -179,18 +186,20 @@ var SidebarTreeItem = memo(function SidebarTreeItem2({
   );
 });
 function Sidebar({ className, currentPath, title, tree }) {
-  let resolvedCurrentPath = usePathname() ?? currentPath ?? "", instanceId = useId(), activeItemRef = useRef(null), activeIndex = useMemo(
+  let resolvedCurrentPath = usePathname() ?? currentPath ?? "", instanceId = useId(), activeItemRef = useRef(null), viewportRef = useRef(null), activeIndex = useMemo(
     () => createActiveIndex({ currentPath: resolvedCurrentPath, tree }),
     [resolvedCurrentPath, tree]
   );
   return useEffect(() => {
-    let scrollPath = resolvedCurrentPath, frame = window.requestAnimationFrame(() => {
-      scrollPath && activeItemRef.current?.scrollIntoView({
-        block: "nearest",
-        inline: "nearest"
-      });
+    let viewport = viewportRef.current, win = viewport?.ownerDocument.defaultView;
+    if (!resolvedCurrentPath || !viewport || !win) return;
+    let frame = win.requestAnimationFrame(() => {
+      let item = activeItemRef.current;
+      if (!item) return;
+      let itemBounds = item.getBoundingClientRect(), viewportBounds = viewport.getBoundingClientRect();
+      itemBounds.top < viewportBounds.top ? viewport.scrollTop += itemBounds.top - viewportBounds.top : itemBounds.bottom > viewportBounds.bottom && (viewport.scrollTop += itemBounds.bottom - viewportBounds.bottom);
     });
-    return () => window.cancelAnimationFrame(frame);
+    return () => win.cancelAnimationFrame(frame);
   }, [resolvedCurrentPath]), /* @__PURE__ */ jsxs(
     "nav",
     {
@@ -209,6 +218,7 @@ function Sidebar({ className, currentPath, title, tree }) {
             mask: { height: 24 },
             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(
               SidebarTreeItem,
               {

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

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as ButtonProps } from '../../../button-CFdx-ohV.js';
+import { B as ButtonProps } from '../../../button-BdCScEKi.js';
 import 'class-variance-authority/types';
 import 'class-variance-authority';
 import 'react';
@@ -7,4 +7,4 @@ 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;
 
-export { ThemeToggle };
+export { ThemeToggle, type ThemeToggleProps };

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

@@ -1,7 +1,53 @@
 "use client";
 
 // src/components/block/theme-toggle.tsx
-import { ThemeToggle } from "@publish.os/nextjs/kernel/components/ui/theme-toggle";
+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 "@publish.os/nextjs/jsx-runtime";
+var themeOrder = ["system", "light", "dark"];
+function ThemeIcon({ theme }) {
+  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";
+}
+function ThemeToggle({
+  className,
+  onClick,
+  size = "sm",
+  title,
+  type = "button",
+  variant = "ghost",
+  ...props
+}) {
+  let { theme, setTheme } = useTheme(), [mounted, setMounted] = useState(!1), activeTheme = normalizeTheme(theme), nextTheme = useMemo(() => {
+    let index = themeOrder.indexOf(activeTheme);
+    return themeOrder[(index + 1) % themeOrder.length] ?? "system";
+  }, [activeTheme]);
+  useEffect(() => {
+    setMounted(!0);
+  }, []);
+  let label = mounted ? `Switch to ${nextTheme} theme` : "Theme preference";
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      "aria-label": props["aria-label"] ?? label,
+      className,
+      iconOnly: !0,
+      onClick: (event) => {
+        onClick?.(event), event.defaultPrevented || setTheme(nextTheme);
+      },
+      size,
+      title: title ?? label,
+      type,
+      variant,
+      ...props,
+      children: /* @__PURE__ */ jsx(ThemeIcon, { theme: mounted ? activeTheme : "system" })
+    }
+  );
+}
 export {
   ThemeToggle
 };

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

@@ -0,0 +1,40 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+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_runtime.JSX.Element;
+declare function TocDesktop({ children }: {
+    children?: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function TocMobile({ children }: {
+    children?: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function TocMobileHeader({ children }: {
+    children?: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function TocLinksSlot({ className, listClassName, viewport, }: {
+    className?: string;
+    listClassName?: string;
+    viewport?: "desktop" | "mobile";
+}): react_jsx_runtime.JSX.Element;
+declare function TocTitle({ children, className, ...props }: React.ComponentPropsWithoutRef<"span">): react_jsx_runtime.JSX.Element;
+
+export { TocClientProvider, TocDesktop, TocLinksSlot, TocMobile, TocMobileHeader, TocTitle };