@flamingo-stack/openframe-frontend-core 0.0.711 → 0.0.712

package/dist/{chunk-PRX7HVLE.cjs → chunk-JVCAK4W3.cjs}

@@ -1,10 +1,21 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
 
 
-var _chunkFYOKS5RIcjs = require('./chunk-FYOKS5RI.cjs');
 
+var _chunkHETQETPVcjs = require('./chunk-HETQETPV.cjs');
 
-var _chunkUVTD52MDcjs = require('./chunk-UVTD52MD.cjs');
+
+
+
+
+
+
+
+
+var _chunkGQ7JJUITcjs = require('./chunk-GQ7JJUIT.cjs');
+
+
+var _chunkLLRGR4I5cjs = require('./chunk-LLRGR4I5.cjs');
 
 
 var _chunk3ATAYP36cjs = require('./chunk-3ATAYP36.cjs');
@@ -12,16 +23,89 @@ var _chunk3ATAYP36cjs = require('./chunk-3ATAYP36.cjs');
 // src/components/navigation/sticky-section-nav.tsx
 var _react = require('react');
 var _jsxruntime = require('react/jsx-runtime');
+function HorizontalSectionNav({
+  sections,
+  activeSection,
+  onSectionClick,
+  className,
+  brand,
+  action,
+  label
+}) {
+  const navRef = _react.useRef.call(void 0, null);
+  _react.useEffect.call(void 0, () => {
+    const pill = _optionalChain([navRef, 'access', _ => _.current, 'optionalAccess', _2 => _2.querySelector, 'call', _3 => _3(`[data-section="${CSS.escape(activeSection)}"]`)]);
+    const row = _optionalChain([pill, 'optionalAccess', _4 => _4.parentElement]);
+    if (!row || !pill) return;
+    const left = pill.offsetLeft - row.offsetLeft;
+    if (left < row.scrollLeft || left + pill.offsetWidth > row.scrollLeft + row.clientWidth) {
+      row.scrollTo({ left: Math.max(0, left - 12), behavior: "smooth" });
+    }
+  }, [activeSection]);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "nav", { ref: navRef, "aria-label": label, className: _chunk3ATAYP36cjs.cn.call(void 0, "flex h-14 items-stretch gap-6 bg-ods-bg", className), children: [
+    brand && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkHETQETPVcjs.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) => {
+          const active = activeSection === section.id;
+          return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _chunkLLRGR4I5cjs.next_link_default,
+            {
+              href: `#${section.id}`,
+              "data-section": section.id,
+              "aria-current": active ? "location" : void 0,
+              onClick: (event) => {
+                event.preventDefault();
+                onSectionClick(section.id);
+              },
+              className: _chunk3ATAYP36cjs.cn.call(void 0, 
+                // 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",
+                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__ */ _jsxruntime.jsx.call(void 0, "div", { className: "hidden shrink-0 items-center content-lg:flex", children: action })
+  ] });
+}
 function StickySectionNav({
   sections,
   activeSection,
   onSectionClick,
   className,
   ribbonPosition = "left",
-  ribbonColor = "var(--color-accent-primary)"
+  ribbonColor = "var(--color-accent-primary)",
+  orientation = "vertical",
+  brand,
+  action,
+  label
 }) {
+  if (orientation === "horizontal") {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      HorizontalSectionNav,
+      {
+        sections,
+        activeSection,
+        onSectionClick,
+        className,
+        brand,
+        action,
+        label
+      }
+    );
+  }
   const navHeight = sections.length * 40;
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "nav", { className: _chunk3ATAYP36cjs.cn.call(void 0, "relative bg-ods-bg", className), children: [
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "nav", { "aria-label": label, className: _chunk3ATAYP36cjs.cn.call(void 0, "relative bg-ods-bg", className), children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "div",
       {
@@ -71,7 +155,7 @@ function StickySectionNav({
   ] });
 }
 function useSectionNavigation(sections, options) {
-  const [activeSection, setActiveSection] = _react.useState.call(void 0, _optionalChain([sections, 'access', _ => _[0], 'optionalAccess', _2 => _2.id]) || "");
+  const [activeSection, setActiveSection] = _react.useState.call(void 0, _optionalChain([sections, 'access', _5 => _5[0], 'optionalAccess', _6 => _6.id]) || "");
   const isScrollingFromClick = _react.useRef.call(void 0, false);
   const { offset = 100 } = options || {};
   const handleSectionClick = _react.useCallback.call(void 0, 
@@ -80,7 +164,7 @@ function useSectionNavigation(sections, options) {
       if (!targetElement) return;
       isScrollingFromClick.current = true;
       setActiveSection(sectionId);
-      _chunkUVTD52MDcjs.scrollElementIntoView.call(void 0, targetElement, { headerOffset: offset });
+      _chunkGQ7JJUITcjs.scrollElementIntoView.call(void 0, targetElement, { headerOffset: offset });
       setTimeout(() => {
         isScrollingFromClick.current = false;
       }, 500);
@@ -99,7 +183,7 @@ function useSectionNavigation(sections, options) {
     const handleScroll = () => {
       if (isScrollingFromClick.current) return;
       const scrollPosition = window.scrollY + offset + 50;
-      let currentSection = _optionalChain([sections, 'access', _3 => _3[0], 'optionalAccess', _4 => _4.id]) || "";
+      let currentSection = _optionalChain([sections, 'access', _7 => _7[0], 'optionalAccess', _8 => _8.id]) || "";
       for (let i = sections.length - 1; i >= 0; i--) {
         const element = document.getElementById(sections[i].id);
         if (element && scrollPosition >= element.offsetTop) {
@@ -127,10 +211,126 @@ function useSectionNavigation(sections, options) {
   };
 }
 
+// src/components/docs/use-scroll-spy.ts
+
+var SCROLL_OFFSET = 100;
+var ID_SEPARATOR = "\n";
+var LINE_TOLERANCE_PX = 1;
+function currentHashId() {
+  return _chunkGQ7JJUITcjs.normalizeHashFragment.call(void 0, window.location.hash).slice(1);
+}
+function activeChildAnchor(section) {
+  return _nullishCoalesce(_optionalChain([section, 'access', _9 => _9.querySelector, 'call', _10 => _10(`[${_chunkGQ7JJUITcjs.ACTIVE_ANCHOR_ATTRIBUTE}][id]`), 'optionalAccess', _11 => _11.id]), () => ( null));
+}
+function hashIsWithin(section) {
+  return section.contains(_chunkGQ7JJUITcjs.getHashTargetElement.call(void 0, currentHashId()));
+}
+function hashForSection(sectionId) {
+  const section = document.getElementById(sectionId);
+  if (!section) return sectionId;
+  return _nullishCoalesce(activeChildAnchor(section), () => ( (hashIsWithin(section) ? currentHashId() : sectionId)));
+}
+function resolveScroller(firstSection) {
+  const container = firstSection ? _chunkGQ7JJUITcjs.getScrollableAncestor.call(void 0, firstSection) : null;
+  if (container) {
+    return {
+      target: container,
+      scrollTop: () => container.scrollTop,
+      viewportTop: () => container.getBoundingClientRect().top,
+      clientHeight: () => container.clientHeight,
+      scrollHeight: () => container.scrollHeight
+    };
+  }
+  return {
+    target: window,
+    scrollTop: () => window.scrollY,
+    viewportTop: () => 0,
+    clientHeight: () => window.innerHeight,
+    scrollHeight: () => document.documentElement.scrollHeight
+  };
+}
+function useScrollSpy(sections, options = {}) {
+  const { syncHash = false, headerOffset = SCROLL_OFFSET, aboveFirst = "first" } = options;
+  const [activeSection, setActiveSection] = _react.useState.call(void 0, "");
+  const isScrollingFromClick = _react.useRef.call(void 0, false);
+  const restoredChecked = _react.useRef.call(void 0, false);
+  const sectionIdsKey = _react.useMemo.call(void 0, () => _nullishCoalesce(_optionalChain([sections, 'optionalAccess', _12 => _12.map, 'call', _13 => _13((s) => s.id), 'access', _14 => _14.join, 'call', _15 => _15(ID_SEPARATOR)]), () => ( "")), [sections]);
+  const handleSectionClick = _react.useCallback.call(void 0, 
+    (sectionId) => {
+      const targetElement = document.getElementById(sectionId);
+      if (!targetElement) return;
+      isScrollingFromClick.current = true;
+      setActiveSection(sectionId);
+      if (syncHash) _chunkGQ7JJUITcjs.replaceLocationHash.call(void 0, _nullishCoalesce(activeChildAnchor(targetElement), () => ( sectionId)));
+      _chunkGQ7JJUITcjs.scrollElementIntoView.call(void 0, targetElement, { headerOffset });
+      setTimeout(() => {
+        isScrollingFromClick.current = false;
+      }, 800);
+    },
+    [syncHash, headerOffset]
+  );
+  _react.useEffect.call(void 0, () => {
+    const sectionIds = sectionIdsKey === "" ? [] : sectionIdsKey.split(ID_SEPARATOR);
+    if (sectionIds.length === 0) return void 0;
+    const scroller = resolveScroller(document.getElementById(_nullishCoalesce(sectionIds[0], () => ( ""))));
+    const handleScroll = (fromScroll = false) => {
+      if (isScrollingFromClick.current) return;
+      const scrollTop = scroller.scrollTop();
+      const viewportTop = scroller.viewportTop();
+      const sectionTop = (element) => element.getBoundingClientRect().top - viewportTop + scrollTop;
+      const reached = (element) => scrollTop + Math.max(headerOffset, _chunkGQ7JJUITcjs.declaredScrollMarginTop.call(void 0, element)) + LINE_TOLERANCE_PX >= sectionTop(element);
+      const first = document.getElementById(_nullishCoalesce(sectionIds[0], () => ( "")));
+      let currentSection = _nullishCoalesce(sectionIds[0], () => ( ""));
+      const scrollHeight = scroller.scrollHeight();
+      const clientHeight = scroller.clientHeight();
+      const scrollable = scrollHeight > clientHeight + 2;
+      const atBottom = scrollable && clientHeight + scrollTop >= scrollHeight - 2;
+      if (atBottom) {
+        currentSection = _nullishCoalesce(sectionIds[sectionIds.length - 1], () => ( currentSection));
+      } else {
+        for (let i = sectionIds.length - 1; i >= 0; i--) {
+          const element = document.getElementById(sectionIds[i]);
+          if (element && reached(element)) {
+            currentSection = sectionIds[i];
+            break;
+          }
+        }
+      }
+      const isAboveFirst = !atBottom && first !== null && !reached(first);
+      const active = isAboveFirst && aboveFirst === "none" ? "" : currentSection;
+      setActiveSection((prev) => prev !== active ? active : prev);
+      if (!syncHash) return;
+      if (fromScroll) {
+        _chunkGQ7JJUITcjs.replaceLocationHash.call(void 0, isAboveFirst ? null : hashForSection(currentSection));
+        return;
+      }
+      if (restoredChecked.current || !_chunkGQ7JJUITcjs.isScrollSyncedHash.call(void 0, )) return;
+      const target = _chunkGQ7JJUITcjs.getHashTargetElement.call(void 0, currentHashId());
+      const tracked = sectionIds.some((id) => _nullishCoalesce(_optionalChain([document, 'access', _16 => _16.getElementById, 'call', _17 => _17(id), 'optionalAccess', _18 => _18.contains, 'call', _19 => _19(target)]), () => ( false)));
+      if (!target || !tracked) return;
+      restoredChecked.current = true;
+      const section = isAboveFirst ? null : document.getElementById(currentSection);
+      if (!_optionalChain([section, 'optionalAccess', _20 => _20.contains, 'call', _21 => _21(target)])) _chunkGQ7JJUITcjs.scrollElementIntoView.call(void 0, target, { headerOffset, behavior: "instant" });
+    };
+    let scrollTimer;
+    const throttledScroll = () => {
+      clearTimeout(scrollTimer);
+      scrollTimer = setTimeout(() => handleScroll(true), 100);
+    };
+    scroller.target.addEventListener("scroll", throttledScroll);
+    handleScroll();
+    return () => {
+      scroller.target.removeEventListener("scroll", throttledScroll);
+      clearTimeout(scrollTimer);
+    };
+  }, [sectionIdsKey, syncHash, headerOffset, aboveFirst]);
+  return { activeSection, handleSectionClick };
+}
+
 // src/components/navigation/multi-level-navigation.tsx
 var _lucidereact = require('lucide-react');
 
-var DEFAULT_FOLDER_INDEX_FILE2 = _chunkFYOKS5RIcjs.DEFAULT_FOLDER_INDEX_FILE;
+var DEFAULT_FOLDER_INDEX_FILE2 = _chunkHETQETPVcjs.DEFAULT_FOLDER_INDEX_FILE;
 function isNodeVisuallySelected(node, selectedPath, folderIndexFile = DEFAULT_FOLDER_INDEX_FILE2) {
   const FOLDER_INDEX_FILE = folderIndexFile.toLowerCase();
   if (selectedPath === node.path) {
@@ -357,4 +557,5 @@ function MobileNavigationItem({
 
 
 
-exports.StickySectionNav = StickySectionNav; exports.useSectionNavigation = useSectionNavigation; exports.MultiLevelNavigation = MultiLevelNavigation; exports.MobileNavigationDropdown = MobileNavigationDropdown;
+
+exports.StickySectionNav = StickySectionNav; exports.useSectionNavigation = useSectionNavigation; exports.useScrollSpy = useScrollSpy; exports.MultiLevelNavigation = MultiLevelNavigation; exports.MobileNavigationDropdown = MobileNavigationDropdown;