@jfrader/storybook-docs 0.7.0 → 0.9.0

package/dist/index.css

@@ -115,11 +115,13 @@
   }
   .toc-track {
     display: block;
+    min-width: 0;
     grid-column: 3;
     grid-row: 2;
   }
   .toc {
     display: block;
+    min-width: 0;
     padding: 34px 18px 40px 6px;
     font-size: 12.5px;
   }
@@ -140,9 +142,12 @@
     border-left: 1px solid var(--sd-border);
   }
   .toc-link {
-    display: flex;
-    align-items: center;
+    display: block;
     width: 100%;
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
     min-block-size: 24px;
     padding: 4px 8px;
     font: inherit;

package/dist/index.js

@@ -5,7 +5,7 @@ import { createRoot } from "react-dom/client";
 import { site as site3, themeCss, theme as theme2 } from "virtual:storybook-docs/site";
 
 // src/app.tsx
-import { Children, useEffect as useEffect8, useRef as useRef5, useState as useState9 } from "react";
+import { useEffect as useEffect8, useLayoutEffect as useLayoutEffect2, useRef as useRef5, useState as useState9 } from "react";
 import { catalog as catalog3, groups as groups2 } from "virtual:storybook-docs/catalog";
 import { pages, site as site2, theme } from "virtual:storybook-docs/site";
 
@@ -522,11 +522,12 @@ function LazySection({ children, placeholder = "\u2026" }) {
 }
 
 // src/toc.tsx
-import { useCallback, useEffect as useEffect3, useRef as useRef2, useState as useState3 } from "react";
+import { useCallback, useEffect as useEffect3, useLayoutEffect, useRef as useRef2, useState as useState3 } from "react";
 
 // src/rail.ts
 var RAIL_MEDIA = "(min-width: 1180px)";
 var RAIL_GAP = 20;
+var RAIL_SETTLE_MS = 120;
 function followRail(rail, header) {
   const track = rail.parentElement;
   if (!track) return () => {
@@ -535,6 +536,8 @@ function followRail(rail, header) {
   let lastY = window.scrollY;
   let direction = "down";
   let spacer = 0;
+  let scrolling = false;
+  let settleTimer;
   const geometry = () => {
     const top = header.offsetHeight + RAIL_GAP;
     const viewportBottom = window.innerHeight - RAIL_GAP;
@@ -544,8 +547,8 @@ function followRail(rail, header) {
       viewportBottom,
       height,
       fits: top + height <= viewportBottom,
-      trackTop: track.getBoundingClientRect().top + window.scrollY,
-      maxOffset: Math.max(0, track.clientHeight - height)
+      trackTop: track.getBoundingClientRect().top + window.scrollY + RAIL_GAP,
+      maxOffset: Math.max(0, track.clientHeight - height - RAIL_GAP)
     };
   };
   const clear = () => {
@@ -558,17 +561,28 @@ function followRail(rail, header) {
       return;
     }
     spacer = g.fits ? 0 : Math.min(spacer, g.maxOffset);
+    track.style.setProperty("--sd-rail-start", `${RAIL_GAP}px`);
     track.style.setProperty("--sd-rail-offset", `${spacer}px`);
     rail.style.position = "sticky";
-    rail.style.top = g.fits ? `${g.top}px` : direction === "down" ? `${g.viewportBottom - g.height}px` : "auto";
+    const parkedTop = g.fits ? g.top : g.viewportBottom - g.height;
+    const armedTop = Number.parseFloat(rail.style.top);
+    const stableTop = scrolling && Number.isFinite(armedTop) ? Math.min(armedTop, parkedTop) : parkedTop;
+    rail.style.top = g.fits || direction === "down" ? `${stableTop}px` : "auto";
     rail.style.bottom = g.fits || direction === "down" ? "auto" : `${window.innerHeight - g.top - g.height}px`;
   };
   const onScroll = () => {
     const y = window.scrollY;
+    scrolling = true;
+    window.clearTimeout(settleTimer);
+    settleTimer = window.setTimeout(() => {
+      scrolling = false;
+      arm();
+    }, RAIL_SETTLE_MS);
     const next = y > lastY ? "down" : y < lastY ? "up" : direction;
     if (next !== direction && media.matches) {
       const g = geometry();
-      spacer = direction === "down" ? Math.min(Math.max(spacer, lastY + g.viewportBottom - g.height - g.trackTop), g.maxOffset) : Math.max(Math.min(spacer, lastY + g.top - g.trackTop), 0);
+      const armedTop = Number.parseFloat(rail.style.top);
+      spacer = direction === "down" ? Math.min(Math.max(spacer, lastY + (Number.isFinite(armedTop) ? armedTop : g.viewportBottom - g.height) - g.trackTop), g.maxOffset) : Math.max(Math.min(spacer, lastY + g.top - g.trackTop), 0);
       direction = next;
       arm(g);
     }
@@ -586,6 +600,7 @@ function followRail(rail, header) {
   arm();
   return () => {
     observer.disconnect();
+    window.clearTimeout(settleTimer);
     window.removeEventListener("scroll", onScroll);
     window.removeEventListener("resize", relayout);
     media.removeEventListener("change", relayout);
@@ -615,13 +630,13 @@ function storyLink(location, story) {
   return `${base}${hashPath(location.hash)}?${new URLSearchParams({ [STORY_PARAM]: story })}`;
 }
 var slugify = (text) => text.normalize("NFKD").replace(/[̀-ͯ]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
-function useRailFollow(ref, ready = true) {
-  useEffect3(() => {
+function useRailFollow(ref, ready = true, pageKey) {
+  useLayoutEffect(() => {
     const element = ref.current;
     const header = element?.closest(".app")?.querySelector(".top");
-    if (!element || !header) return;
+    if (!ready || !element || !header) return;
     return followRail(element, header);
-  }, [ready, ref]);
+  }, [ready, ref, pageKey]);
 }
 function scanPage(root, pageKey) {
   const used = /* @__PURE__ */ new Set();
@@ -677,11 +692,14 @@ function scanPage(root, pageKey) {
 var signature = (scan) => `${scan.pageKey}|${scan.sections.map((s) => `${s.id}(${s.subs.map((sub) => sub.id).join("+")}):${s.stories.map((st) => `${st.id}:${st.name}`).join(",")}`).join(";")}`;
 var prefersReducedMotion = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 function scrollToElement(element) {
+  const hash = window.location.hash;
   element.scrollIntoView({ behavior: prefersReducedMotion() ? "auto" : "smooth", block: "start" });
   let ticks = SETTLE_TICKS;
   let lastY = window.scrollY;
+  let timer;
+  let cancelled = false;
   const settle = () => {
-    if (!element.isConnected || ticks === 0) return;
+    if (cancelled || window.location.hash !== hash || !element.isConnected || ticks === 0) return;
     ticks -= 1;
     const moving = window.scrollY !== lastY;
     lastY = window.scrollY;
@@ -689,9 +707,13 @@ function scrollToElement(element) {
       element.scrollIntoView({ behavior: "auto", block: "start" });
       lastY = window.scrollY;
     }
-    window.setTimeout(settle, SETTLE_TICK_MS);
+    timer = window.setTimeout(settle, SETTLE_TICK_MS);
+  };
+  timer = window.setTimeout(settle, SETTLE_TICK_MS);
+  return () => {
+    cancelled = true;
+    window.clearTimeout(timer);
   };
-  window.setTimeout(settle, SETTLE_TICK_MS);
 }
 function useActiveIds(scan) {
   const [active, setActive] = useState3({ section: null, story: null });
@@ -721,6 +743,12 @@ function PageRail({ pageKey }) {
   pageKeyRef.current = pageKey;
   const [target, setTarget] = useState3(() => storyFromHash(window.location.hash));
   const flashed = useRef2(null);
+  const cancelScroll = useRef2(null);
+  const go = useCallback((element) => {
+    cancelScroll.current?.();
+    cancelScroll.current = scrollToElement(element);
+  }, []);
+  useEffect3(() => () => cancelScroll.current?.(), []);
   useEffect3(() => {
     const main = document.querySelector(".main");
     if (!main) return;
@@ -752,17 +780,16 @@ function PageRail({ pageKey }) {
     if (!target || !scan || scan.pageKey !== pageKey) return;
     const match = scan.frames.find((frame) => frame.story === target) ?? scan.frames.find((frame) => frame.story.toLowerCase() === target.toLowerCase()) ?? scan.frames.find((frame) => frame.name === target) ?? scan.frames.find((frame) => frame.name.toLowerCase() === target.toLowerCase());
     if (!match) return;
-    scrollToElement(match.element);
+    go(match.element);
     flashed.current?.classList.remove("toc-flash");
     match.element.classList.add("toc-flash");
     flashed.current = match.element;
     window.setTimeout(() => match.element.classList.remove("toc-flash"), FLASH_MS);
     setTarget(null);
-  }, [target, scan, pageKey]);
+  }, [target, scan, pageKey, go]);
   const railRef = useRef2(null);
   useRailFollow(railRef, scan !== null);
   const active = useActiveIds(scan);
-  const go = useCallback((element) => scrollToElement(element), []);
   if (!scan) return null;
   return /* @__PURE__ */ jsx5(Fragment, { children: scan.sections.length > 0 ? /* @__PURE__ */ jsx5("div", { className: "rail-track toc-track", children: /* @__PURE__ */ jsxs3("aside", { className: "toc", "aria-label": "On this page", ref: railRef, children: [
     /* @__PURE__ */ jsx5("div", { className: "toc-title", children: "On this page" }),
@@ -772,17 +799,19 @@ function PageRail({ pageKey }) {
         {
           type: "button",
           className: "toc-link",
+          title: section.title,
           "aria-current": active.section === section.id ? "location" : void 0,
           onClick: () => go(section.heading),
           children: section.title
         }
       ),
-      section.subs.length > 0 ? /* @__PURE__ */ jsx5("ul", { children: section.subs.map((sub) => /* @__PURE__ */ jsx5("li", { children: /* @__PURE__ */ jsx5("button", { type: "button", className: "toc-link toc-sub", onClick: () => go(sub.element), children: sub.title }) }, sub.id)) }) : null,
+      section.subs.length > 0 ? /* @__PURE__ */ jsx5("ul", { children: section.subs.map((sub) => /* @__PURE__ */ jsx5("li", { children: /* @__PURE__ */ jsx5("button", { type: "button", className: "toc-link toc-sub", title: sub.title, onClick: () => go(sub.element), children: sub.title }) }, sub.id)) }) : null,
       section.stories.length > 0 ? /* @__PURE__ */ jsx5("ul", { children: section.stories.map((story) => /* @__PURE__ */ jsx5("li", { children: /* @__PURE__ */ jsx5(
         "button",
         {
           type: "button",
           className: "toc-link toc-story",
+          title: story.name,
           "aria-current": active.story === story.id ? "location" : void 0,
           onClick: () => go(story.element),
           children: story.name
@@ -1857,21 +1886,14 @@ function SearchBox() {
 import { releases as releases2 } from "virtual:storybook-docs/releases";
 import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
 var routeHref = (path) => `#${hrefFor(path)}`;
-var NAV_GROUP_WINDOW = 12;
-function NavGroup({ id, title, active, activeIndex = -1, children }) {
-  const [open, setOpen] = useState9(false);
-  const [showAll, setShowAll] = useState9(false);
-  const expanded = active || open;
-  const links = Children.toArray(children);
-  const capped = active && links.length > NAV_GROUP_WINDOW;
-  const start2 = Math.min(Math.max(activeIndex - NAV_GROUP_WINDOW / 2, 0), Math.max(0, links.length - NAV_GROUP_WINDOW));
-  const visibleLinks = capped && !showAll ? links.slice(start2, start2 + NAV_GROUP_WINDOW) : links;
+function NavGroup({ id, title, active, children }) {
+  const [open, setOpen] = useState9(active);
   return /* @__PURE__ */ jsxs13("div", { role: "group", "aria-labelledby": id, children: [
-    /* @__PURE__ */ jsx16("button", { type: "button", className: "grp", id, "aria-expanded": expanded, "aria-controls": `${id}-links`, disabled: active, onClick: () => setOpen(!open), children: title }),
-    /* @__PURE__ */ jsxs13("div", { id: `${id}-links`, hidden: !expanded, children: [
-      /* @__PURE__ */ jsx16("div", { id: `${id}-window`, children: visibleLinks }),
-      capped ? /* @__PURE__ */ jsx16("button", { type: "button", className: "nav-more", "aria-expanded": showAll, "aria-controls": `${id}-window`, onClick: () => setShowAll(!showAll), children: showAll ? "Show less" : `Show all ${links.length}` }) : null
-    ] })
+    /* @__PURE__ */ jsxs13("button", { type: "button", className: "grp", id, "aria-expanded": open, "aria-controls": `${id}-links`, onClick: () => setOpen(!open), children: [
+      /* @__PURE__ */ jsx16("span", { children: title }),
+      /* @__PURE__ */ jsx16("svg", { className: "grp-chevron", width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", children: /* @__PURE__ */ jsx16("path", { d: "m6 4 4 4-4 4" }) })
+    ] }),
+    /* @__PURE__ */ jsx16("div", { id: `${id}-links`, hidden: !open, children })
   ] });
 }
 function parseRoute(hash) {
@@ -1892,9 +1914,20 @@ function DocsApp() {
   const [mode, setMode] = useState9(theme.values?.[0] ?? "dark");
   const [navOpen, setNavOpen] = useState9(false);
   const navRef = useRef5(null);
-  useRailFollow(navRef);
+  const pageKey = route.kind === "component" ? `components/${route.slug}` : route.kind;
   const headerRef = useRef5(null);
   const mainRef = useRef5(null);
+  const renderedPage = useRef5(pageKey);
+  useLayoutEffect2(() => {
+    if (renderedPage.current !== pageKey) {
+      const reset = () => window.scrollTo({ top: 0, left: 0, behavior: "instant" });
+      reset();
+      const frame = requestAnimationFrame(reset);
+      renderedPage.current = pageKey;
+      return () => cancelAnimationFrame(frame);
+    }
+  }, [pageKey]);
+  useRailFollow(navRef, true, pageKey);
   useEffect8(() => {
     const header = headerRef.current;
     if (!header) return;
@@ -1914,7 +1947,6 @@ function DocsApp() {
     const onHash = () => {
       setRoute(parseRoute(window.location.hash));
       setNavOpen(false);
-      window.scrollTo(0, 0);
       mainRef.current?.focus({ preventScroll: true });
     };
     window.addEventListener("hashchange", onHash);
@@ -1999,7 +2031,7 @@ function DocsApp() {
           ]
         }
       ) : null,
-      foundations.length > 0 ? /* @__PURE__ */ jsx16(NavGroup, { id: "nav-grp-foundations", title: "Foundations", active: foundations.some((item) => route.kind === item.kind), children: foundations.map((item) => /* @__PURE__ */ jsx16(
+      foundations.length > 0 ? /* @__PURE__ */ jsx16(NavGroup, { id: "nav-grp-foundations", title: "Design tokens", active: foundations.some((item) => route.kind === item.kind), children: foundations.map((item) => /* @__PURE__ */ jsx16(
         "a",
         {
           href: item.href,
@@ -2011,8 +2043,8 @@ function DocsApp() {
       )) }, `foundations-${activeSlug ?? route.kind}`) : null,
       groups2.map((group, index) => {
         const entries = catalog3.filter((entry) => entry.group === group);
-        const activeIndex = entries.findIndex((entry) => entry.slug === activeSlug);
-        return /* @__PURE__ */ jsx16(NavGroup, { id: `nav-grp-${index}`, title: group, active: activeIndex !== -1, activeIndex, children: entries.map((entry) => /* @__PURE__ */ jsx16(
+        const active = entries.some((entry) => entry.slug === activeSlug);
+        return /* @__PURE__ */ jsx16(NavGroup, { id: `nav-grp-${index}`, title: group, active, children: entries.map((entry) => /* @__PURE__ */ jsx16(
           "a",
           {
             href: routeHref(`/components/${entry.slug}`),
@@ -2026,8 +2058,8 @@ function DocsApp() {
         )) }, `${group}-${activeSlug ?? route.kind}`);
       })
     ] }) }),
-    /* @__PURE__ */ jsx16("main", { id: "main", className: "main", tabIndex: -1, ref: mainRef, children: route.kind === "component" ? /* @__PURE__ */ jsx16(ComponentPage, { entry: catalog3.find((entry) => entry.slug === route.slug) }) : route.kind === "color" ? /* @__PURE__ */ jsx16(ColorPage, {}) : route.kind === "typography" ? /* @__PURE__ */ jsx16(TypePage, {}) : route.kind === "spacing" ? /* @__PURE__ */ jsx16(SpacingPage, {}) : route.kind === "effects" ? /* @__PURE__ */ jsx16(EffectsPage, {}) : route.kind === "releases" ? /* @__PURE__ */ jsx16(ReleasesPage, {}) : /* @__PURE__ */ jsx16(OverviewPage, {}) }),
-    route.kind !== "overview" ? /* @__PURE__ */ jsx16(PageRail, { pageKey: activeSlug ?? route.kind }) : null
+    /* @__PURE__ */ jsx16("main", { id: "main", className: "main", tabIndex: -1, ref: mainRef, children: route.kind === "component" ? /* @__PURE__ */ jsx16(ComponentPage, { entry: catalog3.find((entry) => entry.slug === route.slug) }, pageKey) : route.kind === "color" ? /* @__PURE__ */ jsx16(ColorPage, {}) : route.kind === "typography" ? /* @__PURE__ */ jsx16(TypePage, {}) : route.kind === "spacing" ? /* @__PURE__ */ jsx16(SpacingPage, {}) : route.kind === "effects" ? /* @__PURE__ */ jsx16(EffectsPage, {}) : route.kind === "releases" ? /* @__PURE__ */ jsx16(ReleasesPage, {}) : /* @__PURE__ */ jsx16(OverviewPage, {}) }),
+    route.kind !== "overview" ? /* @__PURE__ */ jsx16(PageRail, { pageKey }, pageKey) : null
   ] });
 }
 

package/dist/styles.css

@@ -194,7 +194,7 @@ body {
   .rail-track::before {
     content: '';
     display: block;
-    height: var(--sd-rail-offset, 0px);
+    height: calc(var(--sd-rail-start, 0px) + var(--sd-rail-offset, 0px));
   }
 }
 .nav {
@@ -202,8 +202,7 @@ body {
   background: var(--sd-surface);
   padding: 14px 12px 12px;
 }
-.nav a,
-.nav-more {
+.nav a {
   display: flex;
   align-items: center;
   box-sizing: border-box;
@@ -214,16 +213,7 @@ body {
   font-size: 13.5px;
   text-decoration: none;
 }
-.nav-more {
-  width: 100%;
-  background: none;
-  border: 0;
-  font-family: inherit;
-  cursor: pointer;
-  text-align: left;
-}
-.nav a:hover,
-.nav-more:hover {
+.nav a:hover {
   background: var(--sd-surface-hover);
   color: var(--sd-text);
 }
@@ -234,23 +224,46 @@ body {
 }
 .grp {
   margin: 3px 0 2px;
-  padding: 0 10px;
+  padding: 8px 10px;
   font-size: 10.5px;
   letter-spacing: 0.09em;
   text-transform: uppercase;
   color: var(--sd-text-muted);
   font-weight: 700;
-  display: block;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
   width: 100%;
   text-align: left;
   font-family: inherit;
   background: none;
   border: 0;
+  border-radius: 8px;
   cursor: pointer;
-  min-height: 28px;
+  min-height: 36px;
+}
+.grp[aria-expanded="true"] {
+  background: var(--sd-surface-raised);
+  color: var(--sd-text);
+}
+.grp:hover {
+  background: var(--sd-surface-hover);
+  color: var(--sd-text);
+}
+.grp-chevron {
+  flex-shrink: 0;
+  transition: transform 150ms ease;
+}
+.grp[aria-expanded="true"] .grp-chevron {
+  transform: rotate(90deg);
+}
+@media (prefers-reduced-motion: reduce) {
+  .grp-chevron {
+    transition: none;
+  }
 }
-.grp:focus-visible,
-.nav-more:focus-visible {
+.grp:focus-visible {
   outline: 2px solid var(--sd-focus-ring);
   outline-offset: 2px;
 }

package/dist/toc.d.ts

@@ -6,7 +6,7 @@ export declare function hashPath(hash: string): string;
 /** The `?story=` deep-link target of a hash, if any. */
 export declare function storyFromHash(hash: string): string | null;
 export declare function storyLink(location: Location, story: string): string;
-export declare function useRailFollow(ref: RefObject<HTMLElement | null>, ready?: boolean): void;
+export declare function useRailFollow(ref: RefObject<HTMLElement | null>, ready?: boolean, pageKey?: string): void;
 /** The "On this page" rail and the `?story=` deep-link landing. */
 export declare function PageRail({ pageKey }: {
     pageKey: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jfrader/storybook-docs",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "type": "module",
   "description": "A documentation front for any design system that has Storybook: navigation, live examples and API tables are generated from the story files themselves.",
   "exports": {