@flamingo-stack/openframe-frontend-core 0.0.764 → 0.0.766

package/dist/components/navigation/multi-level-navigation.js

@@ -3,8 +3,72 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDown, ChevronUp, FileText, Folder, FolderOpen } from "lucide-react";
 import { cn } from "../../utils/cn.js";
 import { DEFAULT_FOLDER_INDEX_FILE as CANONICAL_FOLDER_INDEX_FILE } from "../../utils/doc-tree-nav.js";
-import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
+import { MediaSkeleton, TextLineSkeleton } from "../loading/unified-skeleton.js";
+import { useLoadingScope } from "../ui/loading-scope.js";
 const DEFAULT_FOLDER_INDEX_FILE = CANONICAL_FOLDER_INDEX_FILE;
+const NAV_LIST_CLASS = "space-y-2";
+const NAV_ITEM_CLASS = "space-y-1";
+const NAV_ROW_FRAME_CLASS = "relative w-full rounded-lg border transition-all duration-150";
+const NAV_ROW_CONTENT_CLASS = "flex w-full items-center rounded-lg px-2 text-h6";
+const NAV_ROW_PAD_CLASS = "px-2";
+const NAV_ROW_HEIGHT = {
+  desktop: { row: "h-12", toggle: "h-12 w-12", toggleRoom: "pr-12" },
+  mobile: { row: "h-11", toggle: "h-11 w-11", toggleRoom: "pr-11" }
+};
+const MULTI_LEVEL_NAVIGATION_SKELETON_ROWS = 17;
+const MOBILE_NAVIGATION_SKELETON_ROWS = 17;
+const NAV_SKELETON_LABEL_WIDTHS = ["w-3/5", "w-2/5", "w-1/2", "w-1/3"];
+const NAV_CHILDREN_CLASS = "space-y-1";
+const NAV_INDENT_CLASS = { desktop: "ml-4", mobile: "ml-3" };
+function NavigationRowSkeleton({
+  index,
+  rowHeightClass,
+  indentClass
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn(NAV_ROW_PAD_CLASS, indentClass), children: /* @__PURE__ */ jsx("div", { className: cn(NAV_ROW_FRAME_CLASS, "border-ods-border bg-ods-card"), children: /* @__PURE__ */ jsxs("div", { className: cn(NAV_ROW_CONTENT_CLASS, rowHeightClass), children: [
+    /* @__PURE__ */ jsx(MediaSkeleton.Icon, { size: "sm", className: "mr-2 flex-shrink-0" }),
+    /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: NAV_SKELETON_LABEL_WIDTHS[index % NAV_SKELETON_LABEL_WIDTHS.length] })
+  ] }) }) });
+}
+function NavigationTreeSkeleton({
+  rows,
+  rowHeightClass,
+  indentClass,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn(NAV_LIST_CLASS, className), "aria-hidden": true, children: /* @__PURE__ */ jsxs("div", { className: NAV_ITEM_CLASS, "data-loading-item": true, children: [
+    /* @__PURE__ */ jsx(NavigationRowSkeleton, { index: 0, rowHeightClass }),
+    rows > 1 && /* @__PURE__ */ jsx("div", { className: NAV_CHILDREN_CLASS, children: Array.from({ length: rows - 1 }, (_, i) => /* @__PURE__ */ jsx("div", { className: NAV_ITEM_CLASS, "data-loading-item": true, children: /* @__PURE__ */ jsx(NavigationRowSkeleton, { index: i + 1, rowHeightClass, indentClass }) }, i)) })
+  ] }) });
+}
+function MultiLevelNavigationSkeleton({
+  rows = MULTI_LEVEL_NAVIGATION_SKELETON_ROWS,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    NavigationTreeSkeleton,
+    {
+      rows,
+      rowHeightClass: NAV_ROW_HEIGHT.desktop.row,
+      indentClass: NAV_INDENT_CLASS.desktop,
+      className
+    }
+  );
+}
+function MobileNavigationDropdownSkeleton({
+  rows = MOBILE_NAVIGATION_SKELETON_ROWS,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    NavigationTreeSkeleton,
+    {
+      rows,
+      rowHeightClass: NAV_ROW_HEIGHT.mobile.row,
+      indentClass: NAV_INDENT_CLASS.mobile,
+      className
+    }
+  );
+}
 function isNodeVisuallySelected(node, selectedPath, folderIndexFile = DEFAULT_FOLDER_INDEX_FILE) {
   const FOLDER_INDEX_FILE = folderIndexFile.toLowerCase();
   if (selectedPath === node.path) {
@@ -30,10 +94,8 @@ function MultiLevelNavigation({
   className,
   folderIndexFile = DEFAULT_FOLDER_INDEX_FILE
 }) {
-  if (isLoading) {
-    return /* @__PURE__ */ jsx("div", { className: cn("space-y-2", className), children: [1, 2, 3, 4].map((i) => /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-12 rounded-lg p-3" }, i)) });
-  }
-  return /* @__PURE__ */ jsx("div", { className: cn("space-y-2", className), role: "list", "aria-label": "Navigation list", children: nodes.map((node) => /* @__PURE__ */ jsx(
+  if (useLoadingScope() || isLoading) return /* @__PURE__ */ jsx(MultiLevelNavigationSkeleton, { className });
+  return /* @__PURE__ */ jsx("div", { className: cn(NAV_LIST_CLASS, className), role: "list", "aria-label": "Navigation list", children: nodes.map((node) => /* @__PURE__ */ jsx(
     NavigationItem,
     {
       node,
@@ -60,12 +122,12 @@ function NavigationItem({
   const isSelected = isNodeVisuallySelected(node, selectedPath, folderIndexFile);
   const children = node.children ?? [];
   const hasChildren = children.length > 0;
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-1", role: "listitem", children: [
-    /* @__PURE__ */ jsx("div", { className: cn("px-2", level > 0 && "ml-4"), children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs("div", { className: NAV_ITEM_CLASS, role: "listitem", "data-loading-item": true, children: [
+    /* @__PURE__ */ jsx("div", { className: cn(NAV_ROW_PAD_CLASS, level > 0 && NAV_INDENT_CLASS.desktop), children: /* @__PURE__ */ jsxs(
       "div",
       {
         className: cn(
-          "relative w-full rounded-lg border transition-all duration-150",
+          NAV_ROW_FRAME_CLASS,
           isSelected ? "border-ods-border bg-ods-border" : "border-ods-border bg-ods-card"
         ),
         children: [
@@ -74,9 +136,11 @@ function NavigationItem({
               "button",
               {
                 className: cn(
-                  "flex h-12 w-full items-center rounded-lg px-2 text-ods-text-primary transition-all duration-150 text-h6",
+                  NAV_ROW_CONTENT_CLASS,
+                  NAV_ROW_HEIGHT.desktop.row,
+                  "text-ods-text-primary transition-all duration-150",
                   !isSelected && "hover:bg-ods-bg-hover",
-                  hasChildren && "pr-12"
+                  hasChildren && NAV_ROW_HEIGHT.desktop.toggleRoom
                 ),
                 onClick: () => onNodeClick(node),
                 "aria-label": `${isSelected ? "Selected" : "Select"} ${node.name}`,
@@ -90,7 +154,10 @@ function NavigationItem({
             hasChildren && /* @__PURE__ */ jsx(
               "button",
               {
-                className: "absolute right-0 top-0 flex h-12 w-12 items-center justify-center text-ods-text-secondary transition-colors duration-150 hover:text-ods-text-primary",
+                className: cn(
+                  "absolute right-0 top-0 flex items-center justify-center text-ods-text-secondary transition-colors duration-150 hover:text-ods-text-primary",
+                  NAV_ROW_HEIGHT.desktop.toggle
+                ),
                 onClick: (e) => {
                   e.stopPropagation();
                   if (onToggleExpand) {
@@ -108,7 +175,7 @@ function NavigationItem({
         ]
       }
     ) }),
-    hasChildren && isExpanded && /* @__PURE__ */ jsx("div", { className: "space-y-1", children: children.map((child) => /* @__PURE__ */ jsx(
+    hasChildren && isExpanded && /* @__PURE__ */ jsx("div", { className: NAV_CHILDREN_CLASS, children: children.map((child) => /* @__PURE__ */ jsx(
       NavigationItem,
       {
         node: child,
@@ -133,10 +200,8 @@ function MobileNavigationDropdown({
   className,
   folderIndexFile = DEFAULT_FOLDER_INDEX_FILE
 }) {
-  if (isLoading) {
-    return /* @__PURE__ */ jsx("div", { className: cn("space-y-2", className), children: [1, 2, 3].map((i) => /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-10 rounded-lg p-3" }, i)) });
-  }
-  return /* @__PURE__ */ jsx("div", { className: cn("space-y-2", className), children: nodes.map((node) => /* @__PURE__ */ jsx(
+  if (useLoadingScope() || isLoading) return /* @__PURE__ */ jsx(MobileNavigationDropdownSkeleton, { className });
+  return /* @__PURE__ */ jsx("div", { className: cn(NAV_LIST_CLASS, className), children: nodes.map((node) => /* @__PURE__ */ jsx(
     MobileNavigationItem,
     {
       node,
@@ -163,12 +228,12 @@ function MobileNavigationItem({
   const isSelected = isNodeVisuallySelected(node, selectedPath, folderIndexFile);
   const children = node.children ?? [];
   const hasChildren = children.length > 0;
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-    /* @__PURE__ */ jsx("div", { className: cn("px-2", level > 0 && "ml-3"), children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs("div", { className: NAV_ITEM_CLASS, "data-loading-item": true, children: [
+    /* @__PURE__ */ jsx("div", { className: cn(NAV_ROW_PAD_CLASS, level > 0 && NAV_INDENT_CLASS.mobile), children: /* @__PURE__ */ jsxs(
       "div",
       {
         className: cn(
-          "relative w-full rounded-lg border transition-all duration-150",
+          NAV_ROW_FRAME_CLASS,
           isSelected ? "border-ods-border bg-ods-border" : "border-ods-border bg-ods-card"
         ),
         children: [
@@ -177,9 +242,11 @@ function MobileNavigationItem({
               "button",
               {
                 className: cn(
-                  "flex h-11 w-full items-center rounded-lg px-2 text-ods-text-primary transition-all duration-150 text-h6",
+                  NAV_ROW_CONTENT_CLASS,
+                  NAV_ROW_HEIGHT.mobile.row,
+                  "text-ods-text-primary transition-all duration-150",
                   !isSelected && "hover:bg-ods-bg-hover",
-                  hasChildren && "pr-11"
+                  hasChildren && NAV_ROW_HEIGHT.mobile.toggleRoom
                 ),
                 onClick: () => onNodeClick(node),
                 children: [
@@ -192,7 +259,10 @@ function MobileNavigationItem({
             hasChildren && /* @__PURE__ */ jsx(
               "button",
               {
-                className: "absolute right-0 top-0 flex h-11 w-11 items-center justify-center text-ods-text-secondary transition-colors duration-150 hover:text-ods-text-primary",
+                className: cn(
+                  "absolute right-0 top-0 flex items-center justify-center text-ods-text-secondary transition-colors duration-150 hover:text-ods-text-primary",
+                  NAV_ROW_HEIGHT.mobile.toggle
+                ),
                 onClick: (e) => {
                   e.stopPropagation();
                   if (onToggleExpand) {
@@ -210,7 +280,7 @@ function MobileNavigationItem({
         ]
       }
     ) }),
-    hasChildren && isExpanded && /* @__PURE__ */ jsx("div", { className: "space-y-1", children: children.map((child) => /* @__PURE__ */ jsx(
+    hasChildren && isExpanded && /* @__PURE__ */ jsx("div", { className: NAV_CHILDREN_CLASS, children: children.map((child) => /* @__PURE__ */ jsx(
       MobileNavigationItem,
       {
         node: child,
@@ -226,6 +296,10 @@ function MobileNavigationItem({
   ] });
 }
 export {
+  MOBILE_NAVIGATION_SKELETON_ROWS,
+  MULTI_LEVEL_NAVIGATION_SKELETON_ROWS,
   MobileNavigationDropdown,
-  MultiLevelNavigation
+  MobileNavigationDropdownSkeleton,
+  MultiLevelNavigation,
+  MultiLevelNavigationSkeleton
 };

package/dist/components/navigation/page-section-bar.d.ts

@@ -0,0 +1,50 @@
+/**
+ * THE bar that follows the reader down a long page: its sections as tabs, the
+ * one being read marked. A full-width band stuck directly under the site header
+ * (`useHeaderHeight` with `stuckOnly`: the header alone, never the announcement
+ * bar, which scrolls away), its content on the page's gutters. `StickySectionNav`
+ * owns its look; `useScrollSpy` says which section is being read and keeps the
+ * URL's hash on it (`syncHash`), so a reload stays where the reader was, and
+ * above the first section (the hero) nothing is active and the URL has no hash.
+ *
+ * A tab is shown only for a section that RENDERED: a section that leaves itself
+ * out (its anchor element empty, e.g. a list with no rows) loses its tab, also
+ * when that happens after a client read (`useRenderedSections`). A page puts
+ * `PAGE_ANCHOR_SCOPE_CLASS` on its `<main>` so every anchor clears the header and
+ * the bar when a link lands on it.
+ */
+import { type ReactNode } from 'react';
+import { type StickyNavSection } from './sticky-section-nav';
+/** The bar's own height: what a section's anchor must clear besides the header. */
+export declare const SECTION_BAR_HEIGHT_PX = 56;
+/**
+ * What a section clears when a link lands on it: the site header (72px), this
+ * bar (56px) and the gap (16px), 144px = `scroll-mt-36`. The CSS twin of the
+ * offset the bar's tabs scroll by. Written out twice below (a class built at
+ * runtime emits no CSS); the test pins both to the px sum.
+ */
+export declare const PAGE_ANCHOR_SCROLL_MARGIN_CLASS = "scroll-mt-36";
+/** The same margin for every anchored element under a page's `<main>` (sections, cards, tabs). */
+export declare const PAGE_ANCHOR_SCOPE_CLASS = "[&_[id]]:scroll-mt-36";
+/** The breath between the bars and the heading a link lands on. */
+export declare const PAGE_ANCHOR_GAP_PX = 16;
+export interface PageSectionBarProps {
+    /** The sections on the page, in page order. A stable array while the set is (the spy re-binds on a new one). */
+    sections: StickyNavSection[];
+    /** The bar's accessible name. */
+    label?: string;
+    /** Before the tabs (a product's mark and name). */
+    brand?: ReactNode;
+    /**
+     * A link after the tabs (a product page's "pricing"): the site's one link (the
+     * unified nav rule); a same-page `#id` scrolls the way the tabs do (the bar's
+     * own scroll, with the header's live offset).
+     */
+    action?: {
+        label: ReactNode;
+        href: string;
+        className?: string;
+    };
+}
+export declare function PageSectionBar({ sections: listed, label, brand, action }: PageSectionBarProps): import("react").JSX.Element | null;
+//# sourceMappingURL=page-section-bar.d.ts.map

package/dist/components/navigation/page-section-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-section-bar.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/page-section-bar.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;GAcG;AACH,OAAO,EAAE,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAO5D,OAAO,EAAkD,KAAK,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAE7G,mFAAmF;AACnF,eAAO,MAAM,qBAAqB,KAA+B,CAAC;AAClE;;;;;GAKG;AACH,eAAO,MAAM,+BAA+B,iBAAiB,CAAC;AAC9D,kGAAkG;AAClG,eAAO,MAAM,uBAAuB,0BAA0B,CAAC;AAC/D,mEAAmE;AACnE,eAAO,MAAM,kBAAkB,KAAK,CAAC;AA+BrC,MAAM,WAAW,mBAAmB;IAClC,gHAAgH;IAChH,QAAQ,EAAE,gBAAgB,EAAE,CAAC;IAC7B,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;OAIG;IACH,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,SAAS,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACjE;AAED,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,mBAAmB,sCA+C7F"}

package/dist/components/navigation/page-section-bar.js

@@ -0,0 +1,85 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { useHeaderHeight } from "../../hooks/ui/use-header-height.js";
+import { cn } from "../../utils/cn.js";
+import { NavLinkAnchorViaRuntime } from "../chat/nav-link-anchor-via-runtime.js";
+import { useScrollSpy } from "../docs/use-scroll-spy.js";
+import { PageContainer } from "../layout/page-container.js";
+import { useLoadingScope } from "../ui/loading-scope.js";
+import { STICKY_SECTION_NAV_HEIGHT_PX, StickySectionNav } from "./sticky-section-nav.js";
+const SECTION_BAR_HEIGHT_PX = STICKY_SECTION_NAV_HEIGHT_PX;
+const PAGE_ANCHOR_SCROLL_MARGIN_CLASS = "scroll-mt-36";
+const PAGE_ANCHOR_SCOPE_CLASS = "[&_[id]]:scroll-mt-36";
+const PAGE_ANCHOR_GAP_PX = 16;
+const SECTION_BAR_INSET_CLASS = "px-[var(--spacing-system-lf)] md:px-20";
+function useRenderedSections(sections) {
+  const [empty, setEmpty] = useState(() => /* @__PURE__ */ new Set());
+  useEffect(() => {
+    const measure = () => setEmpty((prev) => {
+      const next = new Set(
+        sections.filter((section) => !document.getElementById(section.id)?.hasChildNodes()).map((s) => s.id)
+      );
+      return next.size === prev.size && [...next].every((id) => prev.has(id)) ? prev : next;
+    });
+    measure();
+    const observer = new MutationObserver(measure);
+    for (const section of sections) {
+      const element = document.getElementById(section.id);
+      if (element) observer.observe(element, { childList: true });
+    }
+    return () => observer.disconnect();
+  }, [sections]);
+  return empty.size === 0 ? sections : sections.filter((section) => !empty.has(section.id));
+}
+function PageSectionBar({ sections: listed, label, brand, action }) {
+  const sections = useRenderedSections(listed);
+  const inScope = useLoadingScope();
+  const headerBottom = useHeaderHeight(void 0, { stuckOnly: true });
+  const { activeSection, handleSectionClick } = useScrollSpy(sections, {
+    syncHash: true,
+    aboveFirst: "none",
+    headerOffset: headerBottom + SECTION_BAR_HEIGHT_PX + PAGE_ANCHOR_GAP_PX
+  });
+  if (sections.length === 0 && !inScope) return null;
+  return /* @__PURE__ */ jsx(
+    PageContainer,
+    {
+      as: "div",
+      backgroundClassName: "sticky z-30 border-b border-ods-border bg-ods-bg transition-[top] duration-300 ease-in-out motion-reduce:transition-none",
+      backgroundStyle: { top: headerBottom },
+      contentPadding: SECTION_BAR_INSET_CLASS,
+      children: /* @__PURE__ */ jsx(
+        StickySectionNav,
+        {
+          orientation: "horizontal",
+          label,
+          sections,
+          activeSection,
+          onSectionClick: handleSectionClick,
+          brand,
+          action: action && /* @__PURE__ */ jsx(
+            NavLinkAnchorViaRuntime,
+            {
+              href: action.href,
+              onClick: (event) => {
+                if (!action.href.startsWith("#")) return;
+                event.preventDefault();
+                handleSectionClick(action.href.slice(1));
+              },
+              className: cn("whitespace-nowrap text-h6 hover:underline", action.className),
+              children: action.label
+            }
+          )
+        }
+      )
+    }
+  );
+}
+export {
+  PAGE_ANCHOR_GAP_PX,
+  PAGE_ANCHOR_SCOPE_CLASS,
+  PAGE_ANCHOR_SCROLL_MARGIN_CLASS,
+  PageSectionBar,
+  SECTION_BAR_HEIGHT_PX
+};

package/dist/components/navigation/sticky-section-nav.d.ts

@@ -1,4 +1,9 @@
 import type React from 'react';
+/** The bar's height, as a class and in px (the offset a page's anchors clear besides the header). */
+export declare const STICKY_SECTION_NAV_HEIGHT_CLASS = "h-14";
+export declare const STICKY_SECTION_NAV_HEIGHT_PX = 56;
+/** How many sections the skeleton draws when the sections are read with the page. */
+export declare const STICKY_SECTION_NAV_SKELETON_COUNT = 5;
 export interface StickyNavSection {
     id: string;
     label: string;
@@ -29,6 +34,13 @@ interface StickySectionNavProps {
  * Used in vendor detail pages, knowledge base, documentation, etc.
  */
 export declare function StickySectionNav({ sections, activeSection, onSectionClick, className, ribbonPosition, ribbonColor, orientation, brand, action, label, }: StickySectionNavProps): React.JSX.Element;
+/**
+ * The section navigation while its sections are read: the same bar (horizontal: its brand and action as given,
+ * the sections as pill boxes) or list (vertical: its rail, each row a bar of its label).
+ */
+export declare function StickySectionNavSkeleton({ orientation, count, brand, action, ribbonPosition, className, }: Pick<StickySectionNavProps, 'orientation' | 'brand' | 'action' | 'ribbonPosition' | 'className'> & {
+    count?: number;
+}): React.JSX.Element;
 /**
  * SIMPLEST POSSIBLE IMPLEMENTATION - Just make it work
  */

package/dist/components/navigation/sticky-section-nav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sticky-section-nav.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/sticky-section-nav.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,gBAAgB,EAAE,CAAC;IAC7B,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,mGAAmG;IACnG,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,0FAA0F;IAC1F,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAoED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,aAAa,EACb,cAAc,EACd,SAAS,EACT,cAAuB,EACvB,WAA2C,EAC3C,WAAwB,EACxB,KAAK,EACL,MAAM,EACN,KAAK,GACN,EAAE,qBAAqB,qBAqEvB;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAClC,QAAQ,EAAE;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;CAAE,EAAE,EAC7D,OAAO,CAAC,EAAE;IACR,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;;oCAWa,MAAM;EAqErB"}
+{"version":3,"file":"sticky-section-nav.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/sticky-section-nav.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,qGAAqG;AACrG,eAAO,MAAM,+BAA+B,SAAS,CAAC;AACtD,eAAO,MAAM,4BAA4B,KAAK,CAAC;AAE/C,qFAAqF;AACrF,eAAO,MAAM,iCAAiC,IAAI,CAAC;AAoBnD,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,gBAAgB,EAAE,CAAC;IAC7B,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,mGAAmG;IACnG,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,0FAA0F;IAC1F,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA+DD;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,aAAa,EACb,cAAc,EACd,SAAS,EACT,cAAuB,EACvB,WAA2C,EAC3C,WAAwB,EACxB,KAAK,EACL,MAAM,EACN,KAAK,GACN,EAAE,qBAAqB,qBAkFvB;AAKD;;;GAGG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,WAAwB,EACxB,KAAyC,EACzC,KAAK,EACL,MAAM,EACN,cAAuB,EACvB,SAAS,GACV,EAAE,IAAI,CAAC,qBAAqB,EAAE,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,gBAAgB,GAAG,WAAW,CAAC,GAAG;IACpG,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,qBAsCA;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAClC,QAAQ,EAAE;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;CAAE,EAAE,EAC7D,OAAO,CAAC,EAAE;IACR,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;;oCAWa,MAAM;EAqErB"}

package/dist/components/navigation/sticky-section-nav.js

@@ -4,7 +4,23 @@ import { useEffect, useState, useCallback, useRef } from "react";
 import Link from "../../embed-shims/next-link.js";
 import { cn } from "../../utils/index.js";
 import { scrollElementIntoView } from "../../utils/scroll-into-view.js";
+import { TextLineSkeleton } from "../loading/unified-skeleton.js";
+import { useLoadingScope } from "../ui/loading-scope.js";
 import { ScrollShadow } from "../ui/scroll-fade.js";
+const STICKY_SECTION_NAV_HEIGHT_CLASS = "h-14";
+const STICKY_SECTION_NAV_HEIGHT_PX = 56;
+const STICKY_SECTION_NAV_SKELETON_COUNT = 5;
+const HORIZONTAL_NAV_CLASS = "flex items-stretch gap-6 bg-ods-bg";
+const HORIZONTAL_BRAND_CLASS = "hidden shrink-0 items-center gap-2.5 border-r border-ods-border pr-6 text-ods-text-primary text-h4 content-lg:flex";
+const HORIZONTAL_ROW_CLASS = "flex h-full items-center gap-1 [scrollbar-width:none] content-lg:items-stretch";
+const HORIZONTAL_ACTION_CLASS = "hidden shrink-0 items-center content-lg:flex";
+const PILL_CLASS = cn(
+  "flex shrink-0 items-center whitespace-nowrap rounded-full border px-3 py-1.5 text-h6",
+  "content-lg:rounded-none content-lg:border-x-0 content-lg:border-b-2 content-lg:border-t-0 content-lg:py-0"
+);
+const VERTICAL_NAV_CLASS = "relative bg-ods-bg";
+const VERTICAL_ROW_CLASS = "relative flex h-10 w-full items-stretch transition-all duration-200";
+const VERTICAL_BUTTON_CLASS = "relative flex flex-1 cursor-pointer items-center gap-2 px-3 py-2";
 function HorizontalSectionNav({
   sections,
   activeSection,
@@ -24,15 +40,15 @@ function HorizontalSectionNav({
       row.scrollTo({ left: Math.max(0, left - 12), behavior: "smooth" });
     }
   }, [activeSection]);
-  return /* @__PURE__ */ jsxs("nav", { ref: navRef, "aria-label": label, className: cn("flex h-14 items-stretch gap-6 bg-ods-bg", className), children: [
-    brand && /* @__PURE__ */ jsx("div", { className: "hidden shrink-0 items-center gap-2.5 border-r border-ods-border pr-6 text-ods-text-primary text-h4 content-lg:flex", children: brand }),
-    /* @__PURE__ */ jsx(
-      ScrollShadow,
-      {
-        axis: "horizontal",
-        className: "min-w-0 flex-1",
-        scrollClassName: "flex h-full items-center gap-1 [scrollbar-width:none] content-lg:items-stretch",
-        children: sections.map((section) => {
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      ref: navRef,
+      "aria-label": label,
+      className: cn(HORIZONTAL_NAV_CLASS, STICKY_SECTION_NAV_HEIGHT_CLASS, className),
+      children: [
+        brand && /* @__PURE__ */ jsx("div", { className: HORIZONTAL_BRAND_CLASS, children: brand }),
+        /* @__PURE__ */ jsx(ScrollShadow, { axis: "horizontal", className: "min-w-0 flex-1", scrollClassName: HORIZONTAL_ROW_CLASS, children: sections.map((section) => {
           const active = activeSection === section.id;
           return /* @__PURE__ */ jsx(
             Link,
@@ -45,20 +61,19 @@ function HorizontalSectionNav({
                 onSectionClick(section.id);
               },
               className: cn(
-                // A pill on a narrow area; from the content `lg` step a tab the height of the bar.
-                "flex shrink-0 items-center whitespace-nowrap rounded-full border px-3 py-1.5 transition-colors text-h6 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ods-accent",
-                "content-lg:rounded-none content-lg:border-x-0 content-lg:border-b-2 content-lg:border-t-0 content-lg:py-0",
+                PILL_CLASS,
+                "transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ods-accent",
                 active ? "border-ods-border bg-ods-card text-ods-text-primary content-lg:border-ods-accent content-lg:bg-transparent content-lg:bg-gradient-to-b content-lg:from-transparent content-lg:to-ods-accent/10" : "border-transparent text-ods-text-secondary hover:text-ods-text-primary content-lg:hover:bg-ods-bg-hover"
               ),
               children: section.label
             },
             section.id
           );
-        })
-      }
-    ),
-    action && /* @__PURE__ */ jsx("div", { className: "hidden shrink-0 items-center content-lg:flex", children: action })
-  ] });
+        }) }),
+        action && /* @__PURE__ */ jsx("div", { className: HORIZONTAL_ACTION_CLASS, children: action })
+      ]
+    }
+  );
 }
 function StickySectionNav({
   sections,
@@ -72,6 +87,18 @@ function StickySectionNav({
   action,
   label
 }) {
+  if (useLoadingScope() && sections.length === 0) {
+    return /* @__PURE__ */ jsx(
+      StickySectionNavSkeleton,
+      {
+        orientation,
+        brand,
+        action,
+        ribbonPosition,
+        className
+      }
+    );
+  }
   if (orientation === "horizontal") {
     return /* @__PURE__ */ jsx(
       HorizontalSectionNav,
@@ -87,7 +114,7 @@ function StickySectionNav({
     );
   }
   const navHeight = sections.length * 40;
-  return /* @__PURE__ */ jsxs("nav", { "aria-label": label, className: cn("relative bg-ods-bg", className), children: [
+  return /* @__PURE__ */ jsxs("nav", { "aria-label": label, className: cn(VERTICAL_NAV_CLASS, className), children: [
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -100,7 +127,7 @@ function StickySectionNav({
         }
       }
     ),
-    sections.map((section) => /* @__PURE__ */ jsxs("div", { className: "relative flex h-10 w-full items-stretch transition-all duration-200", children: [
+    sections.map((section) => /* @__PURE__ */ jsxs("div", { className: VERTICAL_ROW_CLASS, children: [
       activeSection === section.id && /* @__PURE__ */ jsx(
         "div",
         {
@@ -120,7 +147,7 @@ function StickySectionNav({
         {
           onClick: () => onSectionClick(section.id),
           "aria-current": activeSection === section.id ? "location" : void 0,
-          className: "relative flex flex-1 cursor-pointer items-center gap-2 px-3 py-2",
+          className: VERTICAL_BUTTON_CLASS,
           children: /* @__PURE__ */ jsx(
             "span",
             {
@@ -136,6 +163,42 @@ function StickySectionNav({
     ] }, section.id))
   ] });
 }
+const SKELETON_LABEL_WIDTHS = ["w-24", "w-32", "w-20", "w-28", "w-24"];
+function StickySectionNavSkeleton({
+  orientation = "vertical",
+  count = STICKY_SECTION_NAV_SKELETON_COUNT,
+  brand,
+  action,
+  ribbonPosition = "left",
+  className
+}) {
+  const widths = Array.from({ length: count }, (_, i) => SKELETON_LABEL_WIDTHS[i % SKELETON_LABEL_WIDTHS.length]);
+  if (orientation === "horizontal") {
+    return /* @__PURE__ */ jsxs("div", { className: cn(HORIZONTAL_NAV_CLASS, STICKY_SECTION_NAV_HEIGHT_CLASS, className), "aria-hidden": true, inert: true, children: [
+      brand && /* @__PURE__ */ jsx("div", { className: HORIZONTAL_BRAND_CLASS, children: brand }),
+      /* @__PURE__ */ jsx("div", { className: cn("min-w-0 flex-1 overflow-hidden", HORIZONTAL_ROW_CLASS, "content-lg:items-center"), children: widths.map((width, i) => (
+        // The pill's own box (a tab from the content `lg` step), its label a bar.
+        /* @__PURE__ */ jsx("div", { className: cn(PILL_CLASS, "border-transparent"), children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: width }) }, i)
+      )) }),
+      action && /* @__PURE__ */ jsx("div", { className: HORIZONTAL_ACTION_CLASS, children: action })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn(VERTICAL_NAV_CLASS, className), "aria-hidden": true, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute bg-ods-border",
+        style: {
+          width: "1px",
+          height: `${count * 40}px`,
+          [ribbonPosition === "left" ? "left" : "right"]: "-2px",
+          top: "0px"
+        }
+      }
+    ),
+    widths.map((width, i) => /* @__PURE__ */ jsx("div", { className: VERTICAL_ROW_CLASS, children: /* @__PURE__ */ jsx("div", { className: VERTICAL_BUTTON_CLASS, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: width }) }) }, i))
+  ] });
+}
 function useSectionNavigation(sections, options) {
   const [activeSection, setActiveSection] = useState(sections[0]?.id || "");
   const isScrollingFromClick = useRef(false);
@@ -193,6 +256,10 @@ function useSectionNavigation(sections, options) {
   };
 }
 export {
+  STICKY_SECTION_NAV_HEIGHT_CLASS,
+  STICKY_SECTION_NAV_HEIGHT_PX,
+  STICKY_SECTION_NAV_SKELETON_COUNT,
   StickySectionNav,
+  StickySectionNavSkeleton,
   useSectionNavigation
 };

package/dist/components/navigation/ticket-alerts-button.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
+import { buildTicketOpenHref } from "../../utils/dev-sections/dev-section-param-keys.js";
 import { LifeBuoyIcon } from "../icons-v2-generated/interface/life-buoy-icon.js";
 import { useOptionalTicketLive } from "../tickets/ticket-live-provider.js";
-import { buildTicketOpenHref } from "../tickets/types.js";
 import { HeaderButton } from "./header-button.js";
 import { UnreadCountBadge } from "./unread-dot.js";
 function TicketAlertsButton({ href, onNavigate, disabled, className }) {

package/dist/components/onboarding-guides/hooks/use-onboarding-guides.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-onboarding-guides.d.ts","sourceRoot":"","sources":["../../../../src/components/onboarding-guides/hooks/use-onboarding-guides.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EACV,eAAe,EACf,sBAAsB,EACtB,2BAA2B,EAC3B,6BAA6B,EAC9B,MAAM,4CAA4C,CAAC;AAEpD;;;;;;;;GAQG;AACH,eAAO,MAAM,mBAAmB;;;oBAGd,sBAAsB;;mBAEvB,MAAM;;;;;uBAKJ,MAAM;;;CAGxB,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,OAAO,CAAC,EAAE,sBAAsB,sFAmBnE;AAED,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,0EAU1D;AAED,wBAAgB,0BAA0B,2FAUzC"}
+{"version":3,"file":"use-onboarding-guides.d.ts","sourceRoot":"","sources":["../../../../src/components/onboarding-guides/hooks/use-onboarding-guides.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EACV,eAAe,EACf,sBAAsB,EACtB,2BAA2B,EAC3B,6BAA6B,EAC9B,MAAM,4CAA4C,CAAC;AAGpD;;;;;;;;GAQG;AACH,eAAO,MAAM,mBAAmB;;;oBAGd,sBAAsB;;mBAEvB,MAAM;;;;;uBAKJ,MAAM;;;CAGxB,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,OAAO,CAAC,EAAE,sBAAsB,sFAsBnE;AAED,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,0EAW1D;AAED,wBAAgB,0BAA0B,2FAYzC"}

package/dist/components/onboarding-guides/hooks/use-onboarding-guides.js

@@ -1,5 +1,6 @@
 "use client";
 import { useQuery } from "@tanstack/react-query";
+import { useLoadingScope } from "../../ui/loading-scope.js";
 const onboardingGuideKeys = {
   all: ["onboarding-guides"],
   lists: () => [...onboardingGuideKeys.all, "list"],
@@ -15,7 +16,9 @@ const onboardingGuideKeys = {
   }
 };
 function useOnboardingGuides(filters) {
+  const held = useLoadingScope();
   return useQuery({
+    enabled: !held,
     queryKey: onboardingGuideKeys.list(filters || {}),
     queryFn: async () => {
       const params = new URLSearchParams();
@@ -31,6 +34,7 @@ function useOnboardingGuides(filters) {
   });
 }
 function useOnboardingGuide(slug) {
+  const held = useLoadingScope();
   return useQuery({
     queryKey: onboardingGuideKeys.detail(slug || ""),
     queryFn: async () => {
@@ -38,11 +42,13 @@ function useOnboardingGuide(slug) {
       if (!res.ok) throw new Error("Failed to fetch onboarding guide");
       return await res.json();
     },
-    enabled: !!slug
+    enabled: !!slug && !held
   });
 }
 function useOnboardingGuideSections() {
+  const held = useLoadingScope();
   return useQuery({
+    enabled: !held,
     queryKey: onboardingGuideKeys.sections(),
     queryFn: async () => {
       const res = await fetch("/api/onboarding-guides/sections");