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

package/dist/kernel/components/blocks/toc-client.js

@@ -0,0 +1,495 @@
+"use client";
+
+// src/components/block/toc/toc-client.tsx
+import {
+  Popover,
+  PopoverClose,
+  PopoverPopup,
+  PopoverPortal,
+  PopoverPositioner,
+  PopoverTrigger
+} from "@components/ui/popover";
+import { cn } from "@publish.os/nextjs/utils/cn";
+import {
+  createContext,
+  startTransition as startTransition2,
+  use,
+  useCallback as useCallback2,
+  useEffect as useEffect2,
+  useMemo,
+  useRef as useRef2,
+  useState as useState2
+} from "react";
+
+// src/components/block/toc/use-active-heading.ts
+import {
+  startTransition,
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+
+// src/components/block/toc/selection.ts
+function findActiveHeadingIndex(headings, readingLine, isAtBottom = !1) {
+  if (headings.length === 0) return -1;
+  if (isAtBottom) return headings.length - 1;
+  let low = 0, high = headings.length;
+  for (; low < high; ) {
+    let middle = low + Math.floor((high - low) / 2), heading = headings[middle];
+    heading && heading.top <= readingLine ? low = middle + 1 : high = middle;
+  }
+  return Math.max(0, low - 1);
+}
+
+// src/components/block/toc/use-active-heading.ts
+var HEADING_SELECTOR = "h1,h2,h3,h4,h5,h6";
+function containsHeading(node) {
+  if (node.nodeType !== 1) return !1;
+  let element = node;
+  return element.matches(HEADING_SELECTOR) || !!element.querySelector(HEADING_SELECTOR);
+}
+function isHeadingIdMutation(record) {
+  return record.type === "attributes" && record.attributeName === "id" && record.target.matches(HEADING_SELECTOR);
+}
+function useActiveHeading({
+  enabled,
+  headingIds,
+  readingOffset,
+  offsetElement,
+  viewport
+}) {
+  let [activeId, setActiveId] = useState(""), activeIdRef = useRef(""), pendingIdRef = useRef(null), select = useCallback((id) => {
+    activeIdRef.current !== id && (activeIdRef.current = id, startTransition(() => setActiveId(id)));
+  }, []), activate = useCallback(
+    (id) => {
+      pendingIdRef.current = id, select(id);
+    },
+    [select]
+  );
+  return useEffect(() => {
+    if (pendingIdRef.current = null, !enabled || !viewport || headingIds.length === 0) {
+      select("");
+      return;
+    }
+    let ownerDocument = viewport.ownerDocument, view = ownerDocument.defaultView, body = ownerDocument.body;
+    if (!view || !body) return;
+    let ancestors = [];
+    for (let element = viewport; element; element = element.parentElement)
+      ancestors.push(element);
+    let stopTracking, geometryChanged = () => {
+    }, startTracking = () => {
+      let positions = [], positionById = /* @__PURE__ */ new Map(), frame = null, disposed = !1, geometryDirty = !0, ids = new Set(headingIds), observedElements = /* @__PURE__ */ new Set(), handleHashChange = () => {
+        let id = view.location.hash.slice(1);
+        try {
+          id = decodeURIComponent(id);
+        } catch {
+        }
+        ids.has(id) && (pendingIdRef.current = id, select(id)), scheduleUpdate();
+      }, refreshPositions = () => {
+        let elements = new Set(ancestors);
+        positions = headingIds.flatMap((id) => {
+          let element = ownerDocument.getElementById(id);
+          return element ? (elements.add(element), element.getClientRects().length === 0 ? [] : [
+            { id, top: element.getBoundingClientRect().top + view.scrollY }
+          ]) : [];
+        }).sort((a, b) => a.top - b.top), positionById = new Map(positions.map(({ id, top }) => [id, top]));
+        for (let element of observedElements)
+          elements.has(element) || (resizeObserver.unobserve(element), observedElements.delete(element));
+        for (let element of elements)
+          observedElements.has(element) || (resizeObserver.observe(element), observedElements.add(element));
+      }, update = () => {
+        if (frame = null, disposed) return;
+        if (geometryDirty && (geometryDirty = !1, refreshPositions()), positions.length === 0) {
+          select("");
+          return;
+        }
+        let readingLineOffset = resolveReadingOffset(), root = ownerDocument.documentElement, atBottom = Math.ceil(view.scrollY + view.innerHeight) >= root.scrollHeight - 2;
+        if (atBottom && (pendingIdRef.current = null), pendingIdRef.current) {
+          let targetPosition = positionById.get(pendingIdRef.current);
+          if (targetPosition !== void 0 && Math.abs(targetPosition - view.scrollY - readingLineOffset) > 2) {
+            select(pendingIdRef.current);
+            return;
+          }
+          pendingIdRef.current = null;
+        }
+        let index = findActiveHeadingIndex(
+          positions,
+          view.scrollY + readingLineOffset,
+          atBottom
+        ), id = positions[index]?.id ?? "";
+        select(id);
+      }, scheduleUpdate = () => {
+        frame === null && (frame = view.requestAnimationFrame(update));
+      }, resolveReadingOffset = () => {
+        if (readingOffset !== void 0) return readingOffset;
+        let stickyTop = Number.parseFloat(
+          view.getComputedStyle(offsetElement ?? ownerDocument.documentElement).top
+        );
+        if (Number.isFinite(stickyTop)) return stickyTop;
+        let firstHeading = positions[0]?.id ? ownerDocument.getElementById(positions[0].id) : null, scrollMargin = Number.parseFloat(
+          firstHeading ? view.getComputedStyle(firstHeading).scrollMarginTop : "0"
+        );
+        return Number.isFinite(scrollMargin) ? scrollMargin : 0;
+      }, refreshAndUpdate = () => {
+        geometryDirty = !0, scheduleUpdate();
+      };
+      geometryChanged = refreshAndUpdate;
+      let handleScrollEnd = () => {
+        pendingIdRef.current = null, scheduleUpdate();
+      }, clearPendingOnIntent = (event) => {
+        if (event.type === "keydown") {
+          let keyEvent = event;
+          if (![
+            " ",
+            "ArrowDown",
+            "ArrowUp",
+            "End",
+            "Home",
+            "PageDown",
+            "PageUp"
+          ].includes(keyEvent.key))
+            return;
+          let target = keyEvent.target;
+          if (target?.isContentEditable || target?.matches("input, textarea, select"))
+            return;
+        }
+        (event.type === "wheel" || event.type === "touchstart" || event.type === "keydown") && (pendingIdRef.current = null, scheduleUpdate());
+      }, resizeObserver = new view.ResizeObserver(refreshAndUpdate);
+      scheduleUpdate(), view.addEventListener("scroll", scheduleUpdate, { passive: !0 }), view.addEventListener("scrollend", handleScrollEnd), view.addEventListener("resize", refreshAndUpdate, { passive: !0 }), view.addEventListener("hashchange", handleHashChange), view.addEventListener("popstate", handleHashChange), view.addEventListener("wheel", clearPendingOnIntent, { passive: !0 }), view.addEventListener("touchstart", clearPendingOnIntent, {
+        passive: !0
+      }), ownerDocument.addEventListener("keydown", clearPendingOnIntent), ownerDocument.addEventListener("load", refreshAndUpdate, !0);
+      let mutationObserver = new view.MutationObserver((records) => {
+        records.some((record) => isHeadingIdMutation(record) ? !0 : record.type !== "childList" ? !1 : [...record.addedNodes, ...record.removedNodes].some(
+          containsHeading
+        )) && refreshAndUpdate();
+      });
+      mutationObserver.observe(body, {
+        attributes: !0,
+        attributeFilter: ["id"],
+        childList: !0,
+        subtree: !0
+      });
+      let removeFontsListener = () => {
+      };
+      if (ownerDocument.fonts) {
+        let current = !0;
+        ownerDocument.fonts.ready.then(() => {
+          current && refreshAndUpdate();
+        }), ownerDocument.fonts.addEventListener("loadingdone", refreshAndUpdate), removeFontsListener = () => {
+          current = !1, ownerDocument.fonts.removeEventListener(
+            "loadingdone",
+            refreshAndUpdate
+          );
+        };
+      }
+      return () => {
+        disposed = !0, view.removeEventListener("scroll", scheduleUpdate), view.removeEventListener("scrollend", handleScrollEnd), view.removeEventListener("resize", refreshAndUpdate), view.removeEventListener("hashchange", handleHashChange), view.removeEventListener("popstate", handleHashChange), view.removeEventListener("wheel", clearPendingOnIntent), view.removeEventListener("touchstart", clearPendingOnIntent), ownerDocument.removeEventListener("keydown", clearPendingOnIntent), ownerDocument.removeEventListener("load", refreshAndUpdate, !0), mutationObserver.disconnect(), resizeObserver.disconnect(), removeFontsListener(), frame !== null && view.cancelAnimationFrame(frame);
+      };
+    }, updateVisibility = () => {
+      viewport.getClientRects().length > 0 && view.getComputedStyle(viewport).visibility !== "hidden" ? stopTracking ? geometryChanged() : stopTracking = startTracking() : (stopTracking?.(), stopTracking = void 0, pendingIdRef.current = null);
+    }, visibilityObserver = new view.ResizeObserver(updateVisibility);
+    visibilityObserver.observe(viewport);
+    let layoutObserver = new view.MutationObserver(updateVisibility);
+    for (let element of ancestors)
+      layoutObserver.observe(element, {
+        attributes: !0,
+        attributeFilter: ["class", "style"]
+      });
+    return updateVisibility(), () => {
+      visibilityObserver.disconnect(), layoutObserver.disconnect(), stopTracking?.(), pendingIdRef.current = null;
+    };
+  }, [enabled, headingIds, offsetElement, readingOffset, select, viewport]), { activeId, activate };
+}
+
+// src/components/block/toc/toc-client.tsx
+import { Fragment, jsx, jsxs } from "@publish.os/nextjs/jsx-runtime";
+var TocContext = createContext(null);
+function useTocContext() {
+  let context = use(TocContext);
+  if (!context) throw new Error("TOC parts must be inside Toc.Root.");
+  return context;
+}
+function isModifiedClick(event) {
+  return event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
+}
+function TocLinks({
+  activeId,
+  className,
+  headings,
+  title,
+  listClassName,
+  onActivate,
+  onLinkClick,
+  levels,
+  navRef
+}) {
+  let listRef = useRef2(null), attach = useCallback2(
+    (node) => {
+      listRef.current = node, navRef?.(node);
+    },
+    [navRef]
+  );
+  return useEffect2(() => {
+    if (!activeId) return;
+    let list = listRef.current, activeLink = list?.querySelector(
+      'a[aria-current="location"]'
+    );
+    if (!list || !activeLink || activeLink.getClientRects().length === 0)
+      return;
+    let listRect = list.getBoundingClientRect(), linkRect = activeLink.getBoundingClientRect();
+    linkRect.top < listRect.top ? list.scrollTop -= listRect.top - linkRect.top : linkRect.bottom > listRect.bottom && (list.scrollTop += linkRect.bottom - listRect.bottom);
+  }, [activeId]), /* @__PURE__ */ jsx("nav", { ref: attach, "aria-label": title, className, children: /* @__PURE__ */ jsx("ol", { className: cn("space-y-1", listClassName), children: headings.map((heading) => {
+    let active = activeId === heading.id;
+    return /* @__PURE__ */ jsx(
+      "li",
+      {
+        className: heading.level === levels[0] + 1 ? "ps-3" : void 0,
+        children: /* @__PURE__ */ jsx(
+          "a",
+          {
+            "aria-current": active ? "location" : void 0,
+            className: cn(
+              "block min-h-6 whitespace-normal break-words text-foreground-3 no-underline hover:text-foreground-1 hover:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-stroke motion-safe:transition-colors motion-safe:duration-150",
+              active && "font-medium text-foreground-1"
+            ),
+            "data-heading-id": heading.id,
+            "data-state": active ? "heading-active" : void 0,
+            href: `#${heading.id}`,
+            onClick: (event) => {
+              isModifiedClick(event) || event.defaultPrevented || (onActivate?.(heading.id), onLinkClick?.(heading.id, event));
+            },
+            children: heading.text
+          }
+        )
+      },
+      heading.id
+    );
+  }) }) });
+}
+function TocClientProvider({
+  className,
+  desktopClassName,
+  desktopListClassName,
+  headings,
+  levels,
+  listClassName,
+  mobileClassName,
+  mobileQuery,
+  readingOffset,
+  title,
+  children
+}) {
+  let rootRef = useRef2(null), triggerRef = useRef2(null), [desktopNav, setDesktopNav] = useState2(null), [mobileNav, setMobileNav] = useState2(null), [mobile, setMobile] = useState2(null), [open, setOpen] = useState2(!1), activationRef = useRef2("other"), destinationRef = useRef2(null), releaseFocusRef = useRef2(null), headingIds = useMemo(
+    () => headings.map((heading) => heading.id),
+    [headings]
+  ), { activeId, activate } = useActiveHeading({
+    enabled: mobile !== null && (!mobile || open),
+    headingIds,
+    readingOffset,
+    offsetElement: desktopNav,
+    viewport: mobile ? mobileNav : desktopNav
+  });
+  useEffect2(() => {
+    let view = rootRef.current?.ownerDocument.defaultView;
+    if (!view) return;
+    let query = view.matchMedia(mobileQuery), update = () => {
+      setMobile(query.matches), activationRef.current = "breakpoint", setOpen(!1);
+    };
+    return update(), query.addEventListener("change", update), () => query.removeEventListener("change", update);
+  }, [mobileQuery]);
+  let handleOpenChange = useCallback2((nextOpen) => {
+    nextOpen && (activationRef.current = "other"), startTransition2(() => setOpen(nextOpen));
+  }, []);
+  useEffect2(() => () => releaseFocusRef.current?.(), []);
+  let handleFinalFocus = useCallback2(() => {
+    let trigger = triggerRef.current;
+    if (activationRef.current === "breakpoint" || !trigger || trigger.getClientRects().length === 0)
+      return !1;
+    if (activationRef.current !== "heading") return trigger;
+    let id = destinationRef.current;
+    destinationRef.current = null, activationRef.current = "other";
+    let target = id ? trigger.ownerDocument.getElementById(id) : null;
+    if (!target) return trigger;
+    releaseFocusRef.current?.();
+    let ownsTabIndex = !target.hasAttribute("tabindex"), releaseTabIndex = () => {
+      target.removeEventListener("blur", releaseTabIndex), ownsTabIndex && target.getAttribute("tabindex") === "-1" && target.removeAttribute("tabindex"), releaseFocusRef.current = null;
+    };
+    return ownsTabIndex && (target.setAttribute("tabindex", "-1"), target.addEventListener("blur", releaseTabIndex, { once: !0 }), releaseFocusRef.current = releaseTabIndex), target.focus({ preventScroll: !0 }), !1;
+  }, []), handleLinkClick = useCallback2(
+    (id, event) => {
+      !mobile || event.defaultPrevented || (activationRef.current = "heading", destinationRef.current = id, startTransition2(() => setOpen(!1)));
+    },
+    [mobile]
+  ), contextValue = useMemo(
+    () => ({
+      activeId,
+      activate,
+      className,
+      desktopClassName,
+      desktopListClassName,
+      desktopNavRef: setDesktopNav,
+      handleFinalFocus,
+      handleLinkClick,
+      headings,
+      levels,
+      listClassName,
+      mobile,
+      mobileClassName,
+      mobileNavRef: setMobileNav,
+      mobileQuery,
+      onOpenChange: handleOpenChange,
+      open,
+      readingOffset,
+      title,
+      triggerRef
+    }),
+    [
+      activeId,
+      activate,
+      className,
+      desktopClassName,
+      desktopListClassName,
+      handleFinalFocus,
+      handleLinkClick,
+      headings,
+      levels,
+      listClassName,
+      mobile,
+      mobileClassName,
+      mobileQuery,
+      handleOpenChange,
+      open,
+      readingOffset,
+      title
+    ]
+  );
+  return /* @__PURE__ */ jsx("div", { ref: rootRef, className: "contents", children: /* @__PURE__ */ jsx(TocContext.Provider, { value: contextValue, children }) });
+}
+function TocDesktop({ children }) {
+  let context = useTocContext();
+  return /* @__PURE__ */ jsx("aside", { className: context.desktopClassName, children: children ?? /* @__PURE__ */ jsx(TocLinksSlot, {}) });
+}
+function TocMobile({ children }) {
+  let context = useTocContext();
+  return /* @__PURE__ */ jsx("div", { className: context.mobileClassName, children: /* @__PURE__ */ jsxs(
+    Popover,
+    {
+      modal: !1,
+      onOpenChange: context.onOpenChange,
+      open: context.open,
+      children: [
+        /* @__PURE__ */ jsxs(
+          PopoverTrigger,
+          {
+            ref: context.triggerRef,
+            "data-toc-mobile-trigger": !0,
+            className: "flex min-h-11 w-full touch-manipulation items-center justify-between gap-3 rounded-none border-b border-stroke-3 bg-surface-1 pl-[max(1.5rem,env(safe-area-inset-left))] pr-[max(1.5rem,env(safe-area-inset-right))] text-xs text-foreground-3 hover:bg-surface-hover hover:text-foreground-1 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus-stroke active:bg-surface-active",
+            children: [
+              context.title,
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  "aria-hidden": "true",
+                  className: cn(
+                    "size-3 motion-safe:transition-transform",
+                    context.open && "rotate-180"
+                  ),
+                  fill: "none",
+                  viewBox: "0 0 12 12",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: "m2.5 4.5 3.5 3 3.5-3",
+                      stroke: "currentColor",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: "1.25"
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(PopoverPortal, { children: /* @__PURE__ */ jsx(
+          PopoverPositioner,
+          {
+            align: "start",
+            collisionPadding: 0,
+            side: "bottom",
+            sideOffset: 0,
+            children: /* @__PURE__ */ jsx(
+              PopoverPopup,
+              {
+                "aria-label": context.title,
+                className: "flex max-h-[max(0px,calc(min(var(--available-height),calc(100dvh-2rem))_-_env(safe-area-inset-top)_-_env(safe-area-inset-bottom)))] w-(--anchor-width) max-w-(--available-width) flex-col overflow-hidden p-2 pl-[max(.5rem,env(safe-area-inset-left))] pr-[max(.5rem,env(safe-area-inset-right))]",
+                finalFocus: context.handleFinalFocus,
+                children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(TocMobileHeader, {}),
+                  /* @__PURE__ */ jsx(TocLinksSlot, { viewport: "mobile" })
+                ] })
+              }
+            )
+          }
+        ) })
+      ]
+    }
+  ) });
+}
+function TocMobileHeader({ children }) {
+  let { title } = useTocContext();
+  return /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center justify-between gap-4 px-2 pb-2", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-popover-foreground-2", children: children ?? title }),
+    /* @__PURE__ */ jsx(PopoverClose, { className: "min-h-11 min-w-11 px-2 text-xs", children: "Close" })
+  ] });
+}
+function TocLinksSlot({
+  className,
+  listClassName,
+  viewport = "desktop"
+}) {
+  let context = useTocContext(), isMobile = viewport === "mobile";
+  return /* @__PURE__ */ jsx(
+    TocLinks,
+    {
+      activeId: context.activeId,
+      className: cn(
+        context.className,
+        isMobile && "min-h-0 overflow-y-auto overscroll-contain px-2 pb-2",
+        !isMobile && context.desktopListClassName,
+        className
+      ),
+      headings: context.headings,
+      levels: context.levels,
+      listClassName: cn(context.listClassName, listClassName),
+      navRef: isMobile ? context.mobileNavRef : context.desktopNavRef,
+      onActivate: context.activate,
+      onLinkClick: isMobile ? context.handleLinkClick : void 0,
+      title: context.title
+    }
+  );
+}
+function TocTitle({
+  children,
+  className,
+  ...props
+}) {
+  let { title } = useTocContext();
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn("text-sm font-medium text-foreground-2", className),
+      ...props,
+      children: children ?? title
+    }
+  );
+}
+export {
+  TocClientProvider,
+  TocDesktop,
+  TocLinksSlot,
+  TocMobile,
+  TocMobileHeader,
+  TocTitle
+};

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

@@ -1,10 +1,28 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { TocDesktop, TocLinksSlot, TocMobile, TocMobileHeader, TocTitle } from './toc-client.js';
 
 type TocProps = {
+    children?: ReactNode;
     className?: string;
     content?: string;
+    desktopClassName?: string;
+    desktopListClassName?: string;
     levels?: [number, number];
+    listClassName?: string;
+    mobileClassName?: string;
+    mobileQuery?: string;
+    readingOffset?: number;
+    title?: string;
+};
+declare function TocRoot({ className, content, desktopClassName, desktopListClassName, levels, listClassName, mobileClassName, mobileQuery, readingOffset, title, children, }: TocProps): react.JSX.Element | null;
+declare const Toc: typeof TocRoot & {
+    Desktop: typeof TocDesktop;
+    Links: typeof TocLinksSlot;
+    Mobile: typeof TocMobile;
+    MobileHeader: typeof TocMobileHeader;
+    Root: typeof TocRoot;
+    Title: typeof TocTitle;
 };
-declare function Toc({ className, content, levels }: TocProps): react_jsx_runtime.JSX.Element | null;
 
 export { Toc, type TocProps };