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

package/dist/{chunk-NJS7FQRW.cjs → chunk-VYYLYZUC.cjs}

@@ -1,10 +1,10 @@
 "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 _chunkT5FRANE6cjs = require('./chunk-T5FRANE6.cjs');
+var _chunk7VI7TOGIcjs = require('./chunk-7VI7TOGI.cjs');
 
 
-var _chunk74ALTXXCcjs = require('./chunk-74ALTXXC.cjs');
+var _chunkYL6ZB2SRcjs = require('./chunk-YL6ZB2SR.cjs');
 
 
 
@@ -14,20 +14,36 @@ var _chunk74ALTXXCcjs = require('./chunk-74ALTXXC.cjs');
 
 
 
-var _chunk3RYIF4OWcjs = require('./chunk-3RYIF4OW.cjs');
+var _chunkXXJL5GY3cjs = require('./chunk-XXJL5GY3.cjs');
+
 
 
-var _chunkV45KLJQPcjs = require('./chunk-V45KLJQP.cjs');
 
+var _chunkXFRBEXQNcjs = require('./chunk-XFRBEXQN.cjs');
 
-var _chunkH3RYUTNDcjs = require('./chunk-H3RYUTND.cjs');
+
+var _chunkV45KLJQPcjs = require('./chunk-V45KLJQP.cjs');
 
 
-var _chunk3ATAYP36cjs = require('./chunk-3ATAYP36.cjs');
+var _chunk65VVJSQZcjs = require('./chunk-65VVJSQZ.cjs');
 
 // src/components/navigation/sticky-section-nav.tsx
 var _react = require('react');
 var _jsxruntime = require('react/jsx-runtime');
+var STICKY_SECTION_NAV_HEIGHT_CLASS = "h-14";
+var STICKY_SECTION_NAV_HEIGHT_PX = 56;
+var STICKY_SECTION_NAV_SKELETON_COUNT = 5;
+var HORIZONTAL_NAV_CLASS = "flex items-stretch gap-6 bg-ods-bg";
+var 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";
+var HORIZONTAL_ROW_CLASS = "flex h-full items-center gap-1 [scrollbar-width:none] content-lg:items-stretch";
+var HORIZONTAL_ACTION_CLASS = "hidden shrink-0 items-center content-lg:flex";
+var PILL_CLASS = _chunk65VVJSQZcjs.cn.call(void 0, 
+  "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"
+);
+var VERTICAL_NAV_CLASS = "relative bg-ods-bg";
+var VERTICAL_ROW_CLASS = "relative flex h-10 w-full items-stretch transition-all duration-200";
+var VERTICAL_BUTTON_CLASS = "relative flex flex-1 cursor-pointer items-center gap-2 px-3 py-2";
 function HorizontalSectionNav({
   sections,
   activeSection,
@@ -39,23 +55,23 @@ function HorizontalSectionNav({
 }) {
   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]);
+    const pill = _optionalChain([navRef, 'access', _2 => _2.current, 'optionalAccess', _3 => _3.querySelector, 'call', _4 => _4(`[data-section="${CSS.escape(activeSection)}"]`)]);
+    const row = _optionalChain([pill, 'optionalAccess', _5 => _5.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, 
-      _chunk74ALTXXCcjs.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__ */ _jsxruntime.jsxs.call(void 0, 
+    "nav",
+    {
+      ref: navRef,
+      "aria-label": label,
+      className: _chunk65VVJSQZcjs.cn.call(void 0, HORIZONTAL_NAV_CLASS, STICKY_SECTION_NAV_HEIGHT_CLASS, className),
+      children: [
+        brand && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: HORIZONTAL_BRAND_CLASS, children: brand }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYL6ZB2SRcjs.ScrollShadow, { axis: "horizontal", className: "min-w-0 flex-1", scrollClassName: HORIZONTAL_ROW_CLASS, children: sections.map((section) => {
           const active = activeSection === section.id;
           return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             _chunkV45KLJQPcjs.next_link_default,
@@ -67,21 +83,20 @@ function HorizontalSectionNav({
                 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",
+              className: _chunk65VVJSQZcjs.cn.call(void 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__ */ _jsxruntime.jsx.call(void 0, "div", { className: "hidden shrink-0 items-center content-lg:flex", children: action })
-  ] });
+        }) }),
+        action && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: HORIZONTAL_ACTION_CLASS, children: action })
+      ]
+    }
+  );
 }
 function StickySectionNav({
   sections,
@@ -95,6 +110,18 @@ function StickySectionNav({
   action,
   label
 }) {
+  if (_chunkXFRBEXQNcjs.useLoadingScope.call(void 0, ) && sections.length === 0) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      StickySectionNavSkeleton,
+      {
+        orientation,
+        brand,
+        action,
+        ribbonPosition,
+        className
+      }
+    );
+  }
   if (orientation === "horizontal") {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       HorizontalSectionNav,
@@ -110,7 +137,7 @@ function StickySectionNav({
     );
   }
   const navHeight = sections.length * 40;
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "nav", { "aria-label": label, className: _chunk3ATAYP36cjs.cn.call(void 0, "relative bg-ods-bg", className), children: [
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "nav", { "aria-label": label, className: _chunk65VVJSQZcjs.cn.call(void 0, VERTICAL_NAV_CLASS, className), children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "div",
       {
@@ -123,7 +150,7 @@ function StickySectionNav({
         }
       }
     ),
-    sections.map((section) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative flex h-10 w-full items-stretch transition-all duration-200", children: [
+    sections.map((section) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: VERTICAL_ROW_CLASS, children: [
       activeSection === section.id && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "div",
         {
@@ -143,11 +170,11 @@ 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__ */ _jsxruntime.jsx.call(void 0, 
             "span",
             {
-              className: _chunk3ATAYP36cjs.cn.call(void 0, 
+              className: _chunk65VVJSQZcjs.cn.call(void 0, 
                 "text-left transition-all duration-200 text-h6",
                 activeSection === section.id ? "text-ods-text-primary" : "text-ods-text-secondary hover:text-ods-text-primary"
               ),
@@ -159,8 +186,44 @@ function StickySectionNav({
     ] }, section.id))
   ] });
 }
+var 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__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk65VVJSQZcjs.cn.call(void 0, HORIZONTAL_NAV_CLASS, STICKY_SECTION_NAV_HEIGHT_CLASS, className), "aria-hidden": true, inert: true, children: [
+      brand && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: HORIZONTAL_BRAND_CLASS, children: brand }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunk65VVJSQZcjs.cn.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunk65VVJSQZcjs.cn.call(void 0, PILL_CLASS, "border-transparent"), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.TextLineSkeleton, { type: "h6", className: width }) }, i)
+      )) }),
+      action && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: HORIZONTAL_ACTION_CLASS, children: action })
+    ] });
+  }
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk65VVJSQZcjs.cn.call(void 0, VERTICAL_NAV_CLASS, className), "aria-hidden": true, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "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__ */ _jsxruntime.jsx.call(void 0, "div", { className: VERTICAL_ROW_CLASS, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: VERTICAL_BUTTON_CLASS, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.TextLineSkeleton, { type: "h6", className: width }) }) }, i))
+  ] });
+}
 function useSectionNavigation(sections, options) {
-  const [activeSection, setActiveSection] = _react.useState.call(void 0, _optionalChain([sections, 'access', _5 => _5[0], 'optionalAccess', _6 => _6.id]) || "");
+  const [activeSection, setActiveSection] = _react.useState.call(void 0, _optionalChain([sections, 'access', _6 => _6[0], 'optionalAccess', _7 => _7.id]) || "");
   const isScrollingFromClick = _react.useRef.call(void 0, false);
   const { offset = 100 } = options || {};
   const handleSectionClick = _react.useCallback.call(void 0, 
@@ -169,7 +232,7 @@ function useSectionNavigation(sections, options) {
       if (!targetElement) return;
       isScrollingFromClick.current = true;
       setActiveSection(sectionId);
-      _chunk3RYIF4OWcjs.scrollElementIntoView.call(void 0, targetElement, { headerOffset: offset });
+      _chunkXXJL5GY3cjs.scrollElementIntoView.call(void 0, targetElement, { headerOffset: offset });
       setTimeout(() => {
         isScrollingFromClick.current = false;
       }, 500);
@@ -188,7 +251,7 @@ function useSectionNavigation(sections, options) {
     const handleScroll = () => {
       if (isScrollingFromClick.current) return;
       const scrollPosition = window.scrollY + offset + 50;
-      let currentSection = _optionalChain([sections, 'access', _7 => _7[0], 'optionalAccess', _8 => _8.id]) || "";
+      let currentSection = _optionalChain([sections, 'access', _8 => _8[0], 'optionalAccess', _9 => _9.id]) || "";
       for (let i = sections.length - 1; i >= 0; i--) {
         const element = document.getElementById(sections[i].id);
         if (element && scrollPosition >= element.offsetTop) {
@@ -222,13 +285,13 @@ var SCROLL_OFFSET = 100;
 var ID_SEPARATOR = "\n";
 var LINE_TOLERANCE_PX = 1;
 function currentHashId() {
-  return _chunk3RYIF4OWcjs.normalizeHashFragment.call(void 0, window.location.hash).slice(1);
+  return _chunkXXJL5GY3cjs.normalizeHashFragment.call(void 0, window.location.hash).slice(1);
 }
 function activeChildAnchor(section) {
-  return _nullishCoalesce(_optionalChain([section, 'access', _9 => _9.querySelector, 'call', _10 => _10(`[${_chunk3RYIF4OWcjs.ACTIVE_ANCHOR_ATTRIBUTE}][id]`), 'optionalAccess', _11 => _11.id]), () => ( null));
+  return _nullishCoalesce(_optionalChain([section, 'access', _10 => _10.querySelector, 'call', _11 => _11(`[${_chunkXXJL5GY3cjs.ACTIVE_ANCHOR_ATTRIBUTE}][id]`), 'optionalAccess', _12 => _12.id]), () => ( null));
 }
 function hashIsWithin(section) {
-  return section.contains(_chunk3RYIF4OWcjs.getHashTargetElement.call(void 0, currentHashId()));
+  return section.contains(_chunkXXJL5GY3cjs.getHashTargetElement.call(void 0, currentHashId()));
 }
 function hashForSection(sectionId) {
   const section = document.getElementById(sectionId);
@@ -236,7 +299,7 @@ function hashForSection(sectionId) {
   return _nullishCoalesce(activeChildAnchor(section), () => ( (hashIsWithin(section) ? currentHashId() : sectionId)));
 }
 function resolveScroller(firstSection) {
-  const container = firstSection ? _chunk3RYIF4OWcjs.getScrollableAncestor.call(void 0, firstSection) : null;
+  const container = firstSection ? _chunkXXJL5GY3cjs.getScrollableAncestor.call(void 0, firstSection) : null;
   if (container) {
     return {
       target: container,
@@ -259,15 +322,15 @@ function useScrollSpy(sections, 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 sectionIdsKey = _react.useMemo.call(void 0, () => _nullishCoalesce(_optionalChain([sections, 'optionalAccess', _13 => _13.map, 'call', _14 => _14((s) => s.id), 'access', _15 => _15.join, 'call', _16 => _16(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) _chunk3RYIF4OWcjs.replaceLocationHash.call(void 0, _nullishCoalesce(activeChildAnchor(targetElement), () => ( sectionId)));
-      _chunk3RYIF4OWcjs.scrollElementIntoView.call(void 0, targetElement, { headerOffset });
+      if (syncHash) _chunkXXJL5GY3cjs.replaceLocationHash.call(void 0, _nullishCoalesce(activeChildAnchor(targetElement), () => ( sectionId)));
+      _chunkXXJL5GY3cjs.scrollElementIntoView.call(void 0, targetElement, { headerOffset });
       setTimeout(() => {
         isScrollingFromClick.current = false;
       }, 800);
@@ -283,7 +346,7 @@ function useScrollSpy(sections, options = {}) {
       const scrollTop = scroller.scrollTop();
       const viewportTop = scroller.viewportTop();
       const sectionTop = (element) => element.getBoundingClientRect().top - viewportTop + scrollTop;
-      const reached = (element) => scrollTop + Math.max(headerOffset, _chunk3RYIF4OWcjs.declaredScrollMarginTop.call(void 0, element)) + LINE_TOLERANCE_PX >= sectionTop(element);
+      const reached = (element) => scrollTop + Math.max(headerOffset, _chunkXXJL5GY3cjs.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();
@@ -306,16 +369,16 @@ function useScrollSpy(sections, options = {}) {
       setActiveSection((prev) => prev !== active ? active : prev);
       if (!syncHash) return;
       if (fromScroll) {
-        _chunk3RYIF4OWcjs.replaceLocationHash.call(void 0, isAboveFirst ? null : hashForSection(currentSection));
+        _chunkXXJL5GY3cjs.replaceLocationHash.call(void 0, isAboveFirst ? null : hashForSection(currentSection));
         return;
       }
-      if (restoredChecked.current || !_chunk3RYIF4OWcjs.isScrollSyncedHash.call(void 0, )) return;
-      const target = _chunk3RYIF4OWcjs.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 (restoredChecked.current || !_chunkXXJL5GY3cjs.isScrollSyncedHash.call(void 0, )) return;
+      const target = _chunkXXJL5GY3cjs.getHashTargetElement.call(void 0, currentHashId());
+      const tracked = sectionIds.some((id) => _nullishCoalesce(_optionalChain([document, 'access', _17 => _17.getElementById, 'call', _18 => _18(id), 'optionalAccess', _19 => _19.contains, 'call', _20 => _20(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)])) _chunk3RYIF4OWcjs.scrollElementIntoView.call(void 0, target, { headerOffset, behavior: "instant" });
+      if (!_optionalChain([section, 'optionalAccess', _21 => _21.contains, 'call', _22 => _22(target)])) _chunkXXJL5GY3cjs.scrollElementIntoView.call(void 0, target, { headerOffset, behavior: "instant" });
     };
     let scrollTimer;
     const throttledScroll = () => {
@@ -335,7 +398,70 @@ function useScrollSpy(sections, options = {}) {
 // src/components/navigation/multi-level-navigation.tsx
 var _lucidereact = require('lucide-react');
 
-var DEFAULT_FOLDER_INDEX_FILE2 = _chunkT5FRANE6cjs.DEFAULT_FOLDER_INDEX_FILE;
+var DEFAULT_FOLDER_INDEX_FILE2 = _chunk7VI7TOGIcjs.DEFAULT_FOLDER_INDEX_FILE;
+var NAV_LIST_CLASS = "space-y-2";
+var NAV_ITEM_CLASS = "space-y-1";
+var NAV_ROW_FRAME_CLASS = "relative w-full rounded-lg border transition-all duration-150";
+var NAV_ROW_CONTENT_CLASS = "flex w-full items-center rounded-lg px-2 text-h6";
+var NAV_ROW_PAD_CLASS = "px-2";
+var 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" }
+};
+var MULTI_LEVEL_NAVIGATION_SKELETON_ROWS = 17;
+var MOBILE_NAVIGATION_SKELETON_ROWS = 17;
+var NAV_SKELETON_LABEL_WIDTHS = ["w-3/5", "w-2/5", "w-1/2", "w-1/3"];
+var NAV_CHILDREN_CLASS = "space-y-1";
+var NAV_INDENT_CLASS = { desktop: "ml-4", mobile: "ml-3" };
+function NavigationRowSkeleton({
+  index,
+  rowHeightClass,
+  indentClass
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunk65VVJSQZcjs.cn.call(void 0, NAV_ROW_PAD_CLASS, indentClass), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunk65VVJSQZcjs.cn.call(void 0, NAV_ROW_FRAME_CLASS, "border-ods-border bg-ods-card"), children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk65VVJSQZcjs.cn.call(void 0, NAV_ROW_CONTENT_CLASS, rowHeightClass), children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.MediaSkeleton.Icon, { size: "sm", className: "mr-2 flex-shrink-0" }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.TextLineSkeleton, { type: "h6", className: NAV_SKELETON_LABEL_WIDTHS[index % NAV_SKELETON_LABEL_WIDTHS.length] })
+  ] }) }) });
+}
+function NavigationTreeSkeleton({
+  rows,
+  rowHeightClass,
+  indentClass,
+  className
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunk65VVJSQZcjs.cn.call(void 0, NAV_LIST_CLASS, className), "aria-hidden": true, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: NAV_ITEM_CLASS, "data-loading-item": true, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, NavigationRowSkeleton, { index: 0, rowHeightClass }),
+    rows > 1 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: NAV_CHILDREN_CLASS, children: Array.from({ length: rows - 1 }, (_, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: NAV_ITEM_CLASS, "data-loading-item": true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, NavigationRowSkeleton, { index: i + 1, rowHeightClass, indentClass }) }, i)) })
+  ] }) });
+}
+function MultiLevelNavigationSkeleton({
+  rows = MULTI_LEVEL_NAVIGATION_SKELETON_ROWS,
+  className
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    NavigationTreeSkeleton,
+    {
+      rows,
+      rowHeightClass: NAV_ROW_HEIGHT.desktop.row,
+      indentClass: NAV_INDENT_CLASS.desktop,
+      className
+    }
+  );
+}
+function MobileNavigationDropdownSkeleton({
+  rows = MOBILE_NAVIGATION_SKELETON_ROWS,
+  className
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    NavigationTreeSkeleton,
+    {
+      rows,
+      rowHeightClass: NAV_ROW_HEIGHT.mobile.row,
+      indentClass: NAV_INDENT_CLASS.mobile,
+      className
+    }
+  );
+}
 function isNodeVisuallySelected(node, selectedPath, folderIndexFile = DEFAULT_FOLDER_INDEX_FILE2) {
   const FOLDER_INDEX_FILE = folderIndexFile.toLowerCase();
   if (selectedPath === node.path) {
@@ -361,10 +487,8 @@ function MultiLevelNavigation({
   className,
   folderIndexFile = DEFAULT_FOLDER_INDEX_FILE2
 }) {
-  if (isLoading) {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunk3ATAYP36cjs.cn.call(void 0, "space-y-2", className), children: [1, 2, 3, 4].map((i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.UnifiedSkeleton, { className: "h-12 rounded-lg p-3" }, i)) });
-  }
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunk3ATAYP36cjs.cn.call(void 0, "space-y-2", className), role: "list", "aria-label": "Navigation list", children: nodes.map((node) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  if (_chunkXFRBEXQNcjs.useLoadingScope.call(void 0, ) || isLoading) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MultiLevelNavigationSkeleton, { className });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunk65VVJSQZcjs.cn.call(void 0, NAV_LIST_CLASS, className), role: "list", "aria-label": "Navigation list", children: nodes.map((node) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     NavigationItem,
     {
       node,
@@ -391,12 +515,12 @@ function NavigationItem({
   const isSelected = isNodeVisuallySelected(node, selectedPath, folderIndexFile);
   const children = _nullishCoalesce(node.children, () => ( []));
   const hasChildren = children.length > 0;
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "space-y-1", role: "listitem", children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunk3ATAYP36cjs.cn.call(void 0, "px-2", level > 0 && "ml-4"), children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: NAV_ITEM_CLASS, role: "listitem", "data-loading-item": true, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunk65VVJSQZcjs.cn.call(void 0, NAV_ROW_PAD_CLASS, level > 0 && NAV_INDENT_CLASS.desktop), children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       "div",
       {
-        className: _chunk3ATAYP36cjs.cn.call(void 0, 
-          "relative w-full rounded-lg border transition-all duration-150",
+        className: _chunk65VVJSQZcjs.cn.call(void 0, 
+          NAV_ROW_FRAME_CLASS,
           isSelected ? "border-ods-border bg-ods-border" : "border-ods-border bg-ods-card"
         ),
         children: [
@@ -404,10 +528,12 @@ function NavigationItem({
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
               "button",
               {
-                className: _chunk3ATAYP36cjs.cn.call(void 0, 
-                  "flex h-12 w-full items-center rounded-lg px-2 text-ods-text-primary transition-all duration-150 text-h6",
+                className: _chunk65VVJSQZcjs.cn.call(void 0, 
+                  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}`,
@@ -421,7 +547,10 @@ function NavigationItem({
             hasChildren && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               "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: _chunk65VVJSQZcjs.cn.call(void 0, 
+                  "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) {
@@ -439,7 +568,7 @@ function NavigationItem({
         ]
       }
     ) }),
-    hasChildren && isExpanded && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "space-y-1", children: children.map((child) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    hasChildren && isExpanded && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: NAV_CHILDREN_CLASS, children: children.map((child) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       NavigationItem,
       {
         node: child,
@@ -464,10 +593,8 @@ function MobileNavigationDropdown({
   className,
   folderIndexFile = DEFAULT_FOLDER_INDEX_FILE2
 }) {
-  if (isLoading) {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunk3ATAYP36cjs.cn.call(void 0, "space-y-2", className), children: [1, 2, 3].map((i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.UnifiedSkeleton, { className: "h-10 rounded-lg p-3" }, i)) });
-  }
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunk3ATAYP36cjs.cn.call(void 0, "space-y-2", className), children: nodes.map((node) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  if (_chunkXFRBEXQNcjs.useLoadingScope.call(void 0, ) || isLoading) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MobileNavigationDropdownSkeleton, { className });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunk65VVJSQZcjs.cn.call(void 0, NAV_LIST_CLASS, className), children: nodes.map((node) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     MobileNavigationItem,
     {
       node,
@@ -494,12 +621,12 @@ function MobileNavigationItem({
   const isSelected = isNodeVisuallySelected(node, selectedPath, folderIndexFile);
   const children = _nullishCoalesce(node.children, () => ( []));
   const hasChildren = children.length > 0;
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "space-y-1", children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunk3ATAYP36cjs.cn.call(void 0, "px-2", level > 0 && "ml-3"), children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: NAV_ITEM_CLASS, "data-loading-item": true, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunk65VVJSQZcjs.cn.call(void 0, NAV_ROW_PAD_CLASS, level > 0 && NAV_INDENT_CLASS.mobile), children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       "div",
       {
-        className: _chunk3ATAYP36cjs.cn.call(void 0, 
-          "relative w-full rounded-lg border transition-all duration-150",
+        className: _chunk65VVJSQZcjs.cn.call(void 0, 
+          NAV_ROW_FRAME_CLASS,
           isSelected ? "border-ods-border bg-ods-border" : "border-ods-border bg-ods-card"
         ),
         children: [
@@ -507,10 +634,12 @@ function MobileNavigationItem({
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
               "button",
               {
-                className: _chunk3ATAYP36cjs.cn.call(void 0, 
-                  "flex h-11 w-full items-center rounded-lg px-2 text-ods-text-primary transition-all duration-150 text-h6",
+                className: _chunk65VVJSQZcjs.cn.call(void 0, 
+                  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: [
@@ -523,7 +652,10 @@ function MobileNavigationItem({
             hasChildren && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               "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: _chunk65VVJSQZcjs.cn.call(void 0, 
+                  "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) {
@@ -541,7 +673,7 @@ function MobileNavigationItem({
         ]
       }
     ) }),
-    hasChildren && isExpanded && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "space-y-1", children: children.map((child) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    hasChildren && isExpanded && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: NAV_CHILDREN_CLASS, children: children.map((child) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       MobileNavigationItem,
       {
         node: child,
@@ -563,4 +695,5 @@ function MobileNavigationItem({
 
 
 
-exports.StickySectionNav = StickySectionNav; exports.useSectionNavigation = useSectionNavigation; exports.useScrollSpy = useScrollSpy; exports.MultiLevelNavigation = MultiLevelNavigation; exports.MobileNavigationDropdown = MobileNavigationDropdown;
+
+exports.STICKY_SECTION_NAV_HEIGHT_PX = STICKY_SECTION_NAV_HEIGHT_PX; exports.StickySectionNav = StickySectionNav; exports.useSectionNavigation = useSectionNavigation; exports.useScrollSpy = useScrollSpy; exports.MultiLevelNavigation = MultiLevelNavigation; exports.MobileNavigationDropdown = MobileNavigationDropdown;

package/dist/{chunk-NO5UJLLQ.cjs → chunk-WEANWBJH.cjs}

@@ -1,16 +1,21 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
+
+var _chunkXFRBEXQNcjs = require('./chunk-XFRBEXQN.cjs');
+
 // src/components/loading/loading-region.tsx
 var _jsxruntime = require('react/jsx-runtime');
 function LoadingRegion({
   label = "Loading",
   as: Tag = "div",
-  announce = true,
+  announce: announceGiven = true,
   status = true,
   className,
   children,
   ...props
 }) {
+  const inScope = _chunkXFRBEXQNcjs.useLoadingScope.call(void 0, );
+  const announce = announceGiven && !inScope;
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Tag, { "aria-busy": announce ? "true" : void 0, className, ...props, children: [
     announce && status && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { role: "status", "aria-live": "polite", className: "sr-only", children: label }),
     children

package/dist/{chunk-XFNWHCRM.cjs → chunk-WO3XO27C.cjs}

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _chunkVL6IXTAIcjs = require('./chunk-VL6IXTAI.cjs');
+var _chunkVRDHAR3Xcjs = require('./chunk-VRDHAR3X.cjs');
 
 
 var _chunkCKR42OBKcjs = require('./chunk-CKR42OBK.cjs');
@@ -11,13 +11,13 @@ var _chunkM7ZSKWT3cjs = require('./chunk-M7ZSKWT3.cjs');
 
 
 
-var _chunkNET74KSQcjs = require('./chunk-NET74KSQ.cjs');
+var _chunkTZ4GKUO2cjs = require('./chunk-TZ4GKUO2.cjs');
 
 
-var _chunkEQZXJUYVcjs = require('./chunk-EQZXJUYV.cjs');
+var _chunkJTSUAHDLcjs = require('./chunk-JTSUAHDL.cjs');
 
 
-var _chunk2QMBXGMQcjs = require('./chunk-2QMBXGMQ.cjs');
+var _chunkTF5D5MNOcjs = require('./chunk-TF5D5MNO.cjs');
 
 // src/components/embeds/file-download-card.tsx
 var _lucidereact = require('lucide-react');
@@ -29,10 +29,10 @@ function FileDownloadCard({ fileName, mimeType, fileSize, fileUrl }) {
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: "text-ods-text-primary text-h3", children: fileName || "File" }),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mt-2 flex items-center justify-center gap-3 text-ods-text-secondary text-h6", children: [
         mimeType && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: mimeType }),
-        typeof fileSize === "number" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: _chunkEQZXJUYVcjs.formatFileSize.call(void 0, fileSize) })
+        typeof fileSize === "number" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: _chunkJTSUAHDLcjs.formatFileSize.call(void 0, fileSize) })
       ] })
     ] }),
-    fileUrl && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2QMBXGMQcjs.Button, { variant: "accent", href: fileUrl, openInNewTab: true, leftIcon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Download, { className: "h-4 w-4" }), children: "Download File" })
+    fileUrl && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTF5D5MNOcjs.Button, { variant: "accent", href: fileUrl, openInNewTab: true, leftIcon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Download, { className: "h-4 w-4" }), children: "Download File" })
   ] }) });
 }
 
@@ -48,16 +48,16 @@ function GoogleSheetsViewer({ externalUrl, fileName, height }) {
     ] });
   }
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkVL6IXTAIcjs.EmbedViewerFrame,
+    _chunkVRDHAR3Xcjs.EmbedViewerFrame,
     {
       icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkCKR42OBKcjs.GoogleSheetsIcon, { className: "h-5 w-5 shrink-0" }),
       title: displayName,
       actions: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunk2QMBXGMQcjs.Button,
+        _chunkTF5D5MNOcjs.Button,
         {
           variant: "outline",
           size: "small-legacy",
-          href: _chunkNET74KSQcjs.toGoogleSheetsOriginalUrl.call(void 0, externalUrl),
+          href: _chunkTZ4GKUO2cjs.toGoogleSheetsOriginalUrl.call(void 0, externalUrl),
           openInNewTab: true,
           leftIcon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkCKR42OBKcjs.GoogleSheetsIcon, { className: "h-4 w-4" }),
           rightIcon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ExternalLink, { className: "h-4 w-4" }),
@@ -65,7 +65,7 @@ function GoogleSheetsViewer({ externalUrl, fileName, height }) {
           children: "Open in Google Sheets"
         }
       ),
-      src: _chunkNET74KSQcjs.toGoogleSheetsEmbedUrl.call(void 0, externalUrl),
+      src: _chunkTZ4GKUO2cjs.toGoogleSheetsEmbedUrl.call(void 0, externalUrl),
       height
     }
   );
@@ -83,13 +83,13 @@ function PdfViewer({ src, fileName, onPreview, onDownload, height }) {
     ] });
   }
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkVL6IXTAIcjs.EmbedViewerFrame,
+    _chunkVRDHAR3Xcjs.EmbedViewerFrame,
     {
       icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkM7ZSKWT3cjs.AdobePdfIcon, { className: "h-5 w-5 shrink-0" }),
       title: displayName,
       actions: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex w-full items-center gap-2 content-sm:w-auto", children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunk2QMBXGMQcjs.Button,
+          _chunkTF5D5MNOcjs.Button,
           {
             variant: "outline",
             size: "small-legacy",
@@ -102,7 +102,7 @@ function PdfViewer({ src, fileName, onPreview, onDownload, height }) {
           }
         ),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunk2QMBXGMQcjs.Button,
+          _chunkTF5D5MNOcjs.Button,
           {
             variant: "outline",
             size: "small-legacy",