@flamingo-stack/openframe-frontend-core 0.0.781 → 0.0.783

package/dist/{chunk-D46WFWWI.cjs → chunk-LGISRUGF.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 _chunkHLZUBJPLcjs = require('./chunk-HLZUBJPL.cjs');
+var _chunk62TMGBROcjs = require('./chunk-62TMGBRO.cjs');
 
 
-var _chunkAKCBLZAOcjs = require('./chunk-AKCBLZAO.cjs');
+var _chunkE2ZZOYSMcjs = require('./chunk-E2ZZOYSM.cjs');
 
 
 
@@ -18,15 +18,15 @@ var _chunkOJZBZH56cjs = require('./chunk-OJZBZH56.cjs');
 
 
 
-var _chunkYNDH72VUcjs = require('./chunk-YNDH72VU.cjs');
+var _chunkNNNRN4OFcjs = require('./chunk-NNNRN4OF.cjs');
 
 
-var _chunkCDBFQVPAcjs = require('./chunk-CDBFQVPA.cjs');
+var _chunkFLS6DZENcjs = require('./chunk-FLS6DZEN.cjs');
 
 
 
 
-var _chunkN6YCOBLKcjs = require('./chunk-N6YCOBLK.cjs');
+var _chunkMGEUZRNQcjs = require('./chunk-MGEUZRNQ.cjs');
 
 
 var _chunkV45KLJQPcjs = require('./chunk-V45KLJQP.cjs');
@@ -41,14 +41,14 @@ 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 = _chunkN6YCOBLKcjs.cn.call(void 0, 
+var PILL_CLASS = _chunkMGEUZRNQcjs.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_LAYOUT_CLASS = "flex-1 justify-start";
-var VERTICAL_BUTTON_SKELETON_CLASS = _chunkN6YCOBLKcjs.cn.call(void 0, _chunkN6YCOBLKcjs.BUTTON_KIND_CLASS.tab, VERTICAL_BUTTON_LAYOUT_CLASS);
+var VERTICAL_BUTTON_SKELETON_CLASS = _chunkMGEUZRNQcjs.cn.call(void 0, _chunkMGEUZRNQcjs.BUTTON_KIND_CLASS.tab, VERTICAL_BUTTON_LAYOUT_CLASS);
 function HorizontalSectionNav({
   sections,
   activeSection,
@@ -73,10 +73,10 @@ function HorizontalSectionNav({
     {
       ref: navRef,
       "aria-label": label,
-      className: _chunkN6YCOBLKcjs.cn.call(void 0, HORIZONTAL_NAV_CLASS, STICKY_SECTION_NAV_HEIGHT_CLASS, className),
+      className: _chunkMGEUZRNQcjs.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, _chunkAKCBLZAOcjs.ScrollShadow, { axis: "horizontal", className: "min-w-0 flex-1", scrollClassName: HORIZONTAL_ROW_CLASS, children: sections.map((section) => {
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkE2ZZOYSMcjs.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,
@@ -88,7 +88,7 @@ function HorizontalSectionNav({
                 event.preventDefault();
                 onSectionClick(section.id);
               },
-              className: _chunkN6YCOBLKcjs.cn.call(void 0, 
+              className: _chunkMGEUZRNQcjs.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"
@@ -115,7 +115,7 @@ function StickySectionNav({
   action,
   label
 }) {
-  if (_chunkN6YCOBLKcjs.useLoadingScope.call(void 0, ) && sections.length === 0) {
+  if (_chunkMGEUZRNQcjs.useLoadingScope.call(void 0, ) && sections.length === 0) {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       StickySectionNavSkeleton,
       {
@@ -142,7 +142,7 @@ function StickySectionNav({
     );
   }
   const navHeight = sections.length * 40;
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "nav", { "aria-label": label, className: _chunkN6YCOBLKcjs.cn.call(void 0, VERTICAL_NAV_CLASS, className), children: [
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "nav", { "aria-label": label, className: _chunkMGEUZRNQcjs.cn.call(void 0, VERTICAL_NAV_CLASS, className), children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "div",
       {
@@ -171,7 +171,7 @@ function StickySectionNav({
         }
       ),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkCDBFQVPAcjs.Button,
+        _chunkFLS6DZENcjs.Button,
         {
           variant: "tab",
           onClick: () => onSectionClick(section.id),
@@ -195,16 +195,16 @@ function StickySectionNavSkeleton({
 }) {
   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: _chunkN6YCOBLKcjs.cn.call(void 0, HORIZONTAL_NAV_CLASS, STICKY_SECTION_NAV_HEIGHT_CLASS, className), "aria-hidden": true, inert: true, children: [
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkMGEUZRNQcjs.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: _chunkN6YCOBLKcjs.cn.call(void 0, "min-w-0 flex-1 overflow-hidden", HORIZONTAL_ROW_CLASS, "content-lg:items-center"), children: widths.map((width, i) => (
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkMGEUZRNQcjs.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: _chunkN6YCOBLKcjs.cn.call(void 0, PILL_CLASS, "border-transparent"), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYNDH72VUcjs.TextLineSkeleton, { type: "h6", className: width }) }, i)
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkMGEUZRNQcjs.cn.call(void 0, PILL_CLASS, "border-transparent"), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNNNRN4OFcjs.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: _chunkN6YCOBLKcjs.cn.call(void 0, VERTICAL_NAV_CLASS, className), "aria-hidden": true, children: [
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkMGEUZRNQcjs.cn.call(void 0, VERTICAL_NAV_CLASS, className), "aria-hidden": true, children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "div",
       {
@@ -217,7 +217,7 @@ function StickySectionNavSkeleton({
         }
       }
     ),
-    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_SKELETON_CLASS, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYNDH72VUcjs.TextLineSkeleton, { type: "h6", className: width }) }) }, i))
+    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_SKELETON_CLASS, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNNNRN4OFcjs.TextLineSkeleton, { type: "h6", className: width }) }) }, i))
   ] });
 }
 function useSectionNavigation(sections, options) {
@@ -396,7 +396,7 @@ function useScrollSpy(sections, options = {}) {
 // src/components/navigation/multi-level-navigation.tsx
 var _lucidereact = require('lucide-react');
 
-var DEFAULT_FOLDER_INDEX_FILE2 = _chunkHLZUBJPLcjs.DEFAULT_FOLDER_INDEX_FILE;
+var DEFAULT_FOLDER_INDEX_FILE2 = _chunk62TMGBROcjs.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";
@@ -416,9 +416,9 @@ function NavigationRowSkeleton({
   rowHeightClass,
   indentClass
 }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkN6YCOBLKcjs.cn.call(void 0, NAV_ROW_PAD_CLASS, indentClass), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkN6YCOBLKcjs.cn.call(void 0, NAV_ROW_FRAME_CLASS, "border-ods-border bg-ods-card"), children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkN6YCOBLKcjs.cn.call(void 0, _chunkN6YCOBLKcjs.BUTTON_KIND_CLASS.row, rowHeightClass), children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYNDH72VUcjs.MediaSkeleton.Icon, { size: "sm", className: "mr-2 flex-shrink-0" }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYNDH72VUcjs.TextLineSkeleton, { type: "h6", className: NAV_SKELETON_LABEL_WIDTHS[index % NAV_SKELETON_LABEL_WIDTHS.length] })
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkMGEUZRNQcjs.cn.call(void 0, NAV_ROW_PAD_CLASS, indentClass), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkMGEUZRNQcjs.cn.call(void 0, NAV_ROW_FRAME_CLASS, "border-ods-border bg-ods-card"), children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkMGEUZRNQcjs.cn.call(void 0, _chunkMGEUZRNQcjs.BUTTON_KIND_CLASS.row, rowHeightClass), children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNNNRN4OFcjs.MediaSkeleton.Icon, { size: "sm", className: "mr-2 flex-shrink-0" }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNNNRN4OFcjs.TextLineSkeleton, { type: "h6", className: NAV_SKELETON_LABEL_WIDTHS[index % NAV_SKELETON_LABEL_WIDTHS.length] })
   ] }) }) });
 }
 function NavigationTreeSkeleton({
@@ -427,7 +427,7 @@ function NavigationTreeSkeleton({
   indentClass,
   className
 }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkN6YCOBLKcjs.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: [
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkMGEUZRNQcjs.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)) })
   ] }) });
@@ -485,8 +485,8 @@ function MultiLevelNavigation({
   className,
   folderIndexFile = DEFAULT_FOLDER_INDEX_FILE2
 }) {
-  if (_chunkN6YCOBLKcjs.useLoadingScope.call(void 0, ) || isLoading) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MultiLevelNavigationSkeleton, { className });
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkN6YCOBLKcjs.cn.call(void 0, NAV_LIST_CLASS, className), role: "list", "aria-label": "Navigation list", children: nodes.map((node) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  if (_chunkMGEUZRNQcjs.useLoadingScope.call(void 0, ) || isLoading) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MultiLevelNavigationSkeleton, { className });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkMGEUZRNQcjs.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,
@@ -514,21 +514,22 @@ function NavigationItem({
   const children = _nullishCoalesce(node.children, () => ( []));
   const hasChildren = children.length > 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: _chunkN6YCOBLKcjs.cn.call(void 0, NAV_ROW_PAD_CLASS, level > 0 && NAV_INDENT_CLASS.desktop), children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkMGEUZRNQcjs.cn.call(void 0, NAV_ROW_PAD_CLASS, level > 0 && NAV_INDENT_CLASS.desktop), children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       "div",
       {
-        className: _chunkN6YCOBLKcjs.cn.call(void 0, 
+        className: _chunkMGEUZRNQcjs.cn.call(void 0, 
           NAV_ROW_FRAME_CLASS,
           isSelected ? "border-ods-border bg-ods-border" : "border-ods-border bg-ods-card"
         ),
         children: [
           /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative flex items-center", children: [
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-              _chunkCDBFQVPAcjs.Button,
+              _chunkFLS6DZENcjs.Button,
               {
                 variant: "row",
                 "data-state": isSelected ? "active" : void 0,
-                className: _chunkN6YCOBLKcjs.cn.call(void 0, NAV_ROW_LAYOUT_CLASS, NAV_ROW_HEIGHT.desktop),
+                "data-tone": "muted",
+                className: _chunkMGEUZRNQcjs.cn.call(void 0, NAV_ROW_LAYOUT_CLASS, NAV_ROW_HEIGHT.desktop),
                 onClick: () => onNodeClick(node),
                 "aria-label": `${isSelected ? "Selected" : "Select"} ${node.name}`,
                 children: [
@@ -539,9 +540,9 @@ function NavigationItem({
               }
             ),
             hasChildren && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _chunkCDBFQVPAcjs.Button,
+              _chunkFLS6DZENcjs.Button,
               {
-                variant: "transparent",
+                variant: "bare",
                 size: "icon-sm",
                 className: "mr-[var(--spacing-system-xxs)] shrink-0",
                 onClick: (e) => {
@@ -586,8 +587,8 @@ function MobileNavigationDropdown({
   className,
   folderIndexFile = DEFAULT_FOLDER_INDEX_FILE2
 }) {
-  if (_chunkN6YCOBLKcjs.useLoadingScope.call(void 0, ) || isLoading) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MobileNavigationDropdownSkeleton, { className });
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkN6YCOBLKcjs.cn.call(void 0, NAV_LIST_CLASS, className), children: nodes.map((node) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  if (_chunkMGEUZRNQcjs.useLoadingScope.call(void 0, ) || isLoading) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MobileNavigationDropdownSkeleton, { className });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkMGEUZRNQcjs.cn.call(void 0, NAV_LIST_CLASS, className), children: nodes.map((node) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     MobileNavigationItem,
     {
       node,
@@ -615,21 +616,22 @@ function MobileNavigationItem({
   const children = _nullishCoalesce(node.children, () => ( []));
   const hasChildren = children.length > 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: _chunkN6YCOBLKcjs.cn.call(void 0, NAV_ROW_PAD_CLASS, level > 0 && NAV_INDENT_CLASS.mobile), children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkMGEUZRNQcjs.cn.call(void 0, NAV_ROW_PAD_CLASS, level > 0 && NAV_INDENT_CLASS.mobile), children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       "div",
       {
-        className: _chunkN6YCOBLKcjs.cn.call(void 0, 
+        className: _chunkMGEUZRNQcjs.cn.call(void 0, 
           NAV_ROW_FRAME_CLASS,
           isSelected ? "border-ods-border bg-ods-border" : "border-ods-border bg-ods-card"
         ),
         children: [
           /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative flex items-center", children: [
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-              _chunkCDBFQVPAcjs.Button,
+              _chunkFLS6DZENcjs.Button,
               {
                 variant: "row",
                 "data-state": isSelected ? "active" : void 0,
-                className: _chunkN6YCOBLKcjs.cn.call(void 0, NAV_ROW_LAYOUT_CLASS, NAV_ROW_HEIGHT.mobile),
+                "data-tone": "muted",
+                className: _chunkMGEUZRNQcjs.cn.call(void 0, NAV_ROW_LAYOUT_CLASS, NAV_ROW_HEIGHT.mobile),
                 onClick: () => onNodeClick(node),
                 children: [
                   /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "mr-2 flex-shrink-0", children: node.type === "folder" ? isExpanded ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.FolderOpen, { className: "h-4 w-4" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Folder, { className: "h-4 w-4" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.FileText, { className: "h-4 w-4" }) }),
@@ -639,9 +641,9 @@ function MobileNavigationItem({
               }
             ),
             hasChildren && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _chunkCDBFQVPAcjs.Button,
+              _chunkFLS6DZENcjs.Button,
               {
-                variant: "transparent",
+                variant: "bare",
                 size: "icon-sm",
                 className: "mr-[var(--spacing-system-xxs)] shrink-0",
                 onClick: (e) => {

package/dist/{chunk-2OYKOHFK.cjs → chunk-LUWYWYNC.cjs}

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _chunkIYU2ZH2Jcjs = require('./chunk-IYU2ZH2J.cjs');
+var _chunkCS5SZJFVcjs = require('./chunk-CS5SZJFV.cjs');
 
 // src/components/tool-icon.tsx
 var _react = require('react');
@@ -12,7 +12,7 @@ function toolIcon(toolType) {
   const words = toolType.toLowerCase().split("_").filter(Boolean);
   let icon = null;
   for (let count = words.length; count >= 1 && !icon; count -= 1) {
-    icon = _chunkIYU2ZH2Jcjs.findIcon.call(void 0, `${words.slice(0, count).join("-")}-logo-grey`);
+    icon = _chunkCS5SZJFVcjs.findIcon.call(void 0, `${words.slice(0, count).join("-")}-logo-grey`);
   }
   TOOL_ICONS.set(toolType, icon);
   return icon;

package/dist/{chunk-N6YCOBLK.cjs → chunk-MGEUZRNQ.cjs}

@@ -64,8 +64,8 @@ function AnnouncedLoadingScope({
 }) {
   const outer = useLoadingScope();
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    status && active && !outer && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LoadingStatus, { label }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LoadingScope, { active, as, className, children })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LoadingScope, { active, as, className, children }),
+    status && active && !outer && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LoadingStatus, { label })
   ] });
 }
 function InertWhileLoading({
@@ -89,7 +89,8 @@ function LoadingItems({ count, children }) {
 // src/components/ui/button/button-styles.ts
 var buttonSurfaceClasses = {
   accent: "bg-ods-accent text-ods-text-on-accent hover:bg-ods-accent-hover active:bg-ods-accent-active disabled:bg-ods-disabled aria-disabled:bg-ods-disabled",
-  outline: "bg-ods-card text-ods-text-primary hover:bg-ods-bg-hover active:bg-ods-bg-active disabled:bg-ods-card disabled:text-ods-text-disabled aria-disabled:bg-ods-card aria-disabled:text-ods-text-disabled",
+  // `data-tone="accent"`: the accent fill on hover (a card's "view" action).
+  outline: "bg-ods-card text-ods-text-primary hover:bg-ods-bg-hover active:bg-ods-bg-active disabled:bg-ods-card disabled:text-ods-text-disabled aria-disabled:bg-ods-card aria-disabled:text-ods-text-disabled data-[tone=accent]:hover:bg-ods-accent",
   transparent: "bg-transparent text-ods-text-primary hover:bg-ods-bg-hover active:bg-ods-bg-active disabled:bg-transparent disabled:text-ods-text-disabled aria-disabled:bg-transparent aria-disabled:text-ods-text-disabled",
   destructive: "bg-ods-error text-ods-text-on-accent hover:bg-ods-error-hover active:bg-ods-error-active disabled:bg-ods-disabled aria-disabled:bg-ods-disabled",
   warning: "bg-ods-warning text-ods-text-on-accent hover:bg-ods-warning-hover active:bg-ods-warning-active disabled:bg-ods-disabled aria-disabled:bg-ods-disabled",
@@ -108,7 +109,39 @@ var buttonSurfaceClasses = {
   // hover, and no surface in any state. Promoted to a variant because the
   // disclosure toggle was a primitive <button> restating these classes. Pair
   // with size="compact" and noPaddingX so the label aligns with the text above.
-  link: "bg-transparent text-ods-text-secondary hover:bg-transparent hover:text-ods-accent active:bg-transparent active:text-ods-accent-active disabled:bg-transparent disabled:text-ods-text-disabled aria-disabled:bg-transparent aria-disabled:text-ods-text-disabled",
+  //
+  // States, from the element's attributes: `data-state="active"` holds the accent (a filter trigger with filters
+  // applied). `data-tone="neutral"` takes the primary text on hover instead of the accent (a secondary text action:
+  // "Select all", "Mark all read"); `data-tone="primary"` sits in the primary text and takes the accent on hover (a
+  // value that opens something: an info row's link, a breadcrumb).
+  link: [
+    "bg-transparent text-ods-text-secondary hover:bg-transparent hover:text-ods-accent active:bg-transparent active:text-ods-accent-active disabled:bg-transparent disabled:text-ods-text-disabled aria-disabled:bg-transparent aria-disabled:text-ods-text-disabled",
+    "data-[tone=neutral]:hover:text-ods-text-primary",
+    "data-[tone=primary]:text-ods-text-primary data-[tone=primary]:hover:text-ods-accent",
+    "data-[state=active]:text-ods-accent data-[state=active]:hover:text-ods-accent data-[tone=neutral]:data-[state=active]:hover:text-ods-accent"
+  ].join(" "),
+  // A bare glyph control with no surface (a composer's send / add-context, a copy, a close, a field's clear): the
+  // secondary text, the primary on hover and keyboard focus, faded when disabled. Distinct from `transparent`, which
+  // is primary text on a hover fill. States, from the element's attributes:
+  //  - `aria-expanded="true"`: its popup is open, the glyph stays lit (primary);
+  //  - `data-state="active"`: the glyph is armed (the composer's send while the editor has focus), the accent;
+  //  - `data-tone="accent"`: a trigger that opens and presses in the accent (the composer's add-context);
+  //  - `data-tone="danger"`: a removal that takes the error colour on hover;
+  //  - `data-tone="error"` / `data-tone="success"`: a glyph drawn in that colour (an error's copy, a done state),
+  //    dimmed on hover;
+  //  - `data-tone="field"`: a field's adornment, lit in the accent while the field (the enclosing `group`) has focus
+  //    and in the error colour while it is invalid (`data-invalid` on the group).
+  bare: [
+    "bg-transparent text-ods-text-secondary outline-none hover:bg-transparent hover:text-ods-text-primary focus-visible:text-ods-text-primary active:bg-transparent",
+    "aria-expanded:text-ods-text-primary",
+    "data-[state=active]:text-ods-accent",
+    "data-[tone=accent]:aria-expanded:text-ods-accent data-[tone=accent]:active:text-ods-accent",
+    "data-[tone=danger]:hover:text-ods-error",
+    "data-[tone=error]:text-ods-error data-[tone=error]:hover:text-ods-error data-[tone=error]:hover:opacity-80",
+    "data-[tone=success]:text-ods-success data-[tone=success]:hover:text-ods-success data-[tone=success]:hover:opacity-80",
+    "data-[tone=field]:group-has-[textarea:focus]:text-ods-accent data-[tone=field]:focus-visible:text-ods-accent data-[tone=field]:group-data-[invalid]:text-ods-error",
+    "disabled:cursor-not-allowed disabled:bg-transparent disabled:opacity-40 disabled:hover:text-ods-text-secondary aria-disabled:opacity-40"
+  ].join(" "),
   // Chrome that sits ON media (video cards, image lightboxes): a scrim disc so
   // the glyph stays legible over an arbitrary frame. Promoted to a variant
   // because the walkthrough card, its theater and the bite cards were each
@@ -179,22 +212,62 @@ var BUTTON_KIND_CLASS = {
     "h-11 rounded-[6px] md:h-12",
     "border-ods-border bg-ods-card text-ods-text-primary text-h4 transition-colors duration-200",
     "enabled:hover:border-ods-border-hover enabled:hover:bg-ods-bg-hover enabled:active:border-ods-border-active enabled:active:bg-ods-bg-active",
+    // Open: the accent border, held under the cursor (a hover must not read as closing it).
     "data-[state=open]:border-ods-accent aria-expanded:border-ods-accent",
-    "data-[invalid]:border-ods-error enabled:data-[invalid]:hover:border-ods-error",
+    "enabled:data-[state=open]:hover:border-ods-accent enabled:aria-expanded:hover:border-ods-accent",
+    // Selected (a choice drawn as a field, `aria-selected="true"`): the accent border on the accent's light fill,
+    // whose hover and press are the fill's own steps.
+    "aria-selected:border-ods-accent aria-selected:bg-ods-open-yellow-light",
+    "enabled:aria-selected:hover:border-ods-accent enabled:aria-selected:hover:bg-ods-open-yellow-light-hover",
+    "enabled:aria-selected:active:border-ods-accent enabled:aria-selected:active:bg-ods-open-yellow-light-action",
+    // Invalid wins over open.
+    "data-[invalid]:border-ods-error enabled:data-[invalid]:hover:border-ods-error enabled:data-[invalid]:active:border-ods-error",
+    "data-[invalid]:data-[state=open]:border-ods-error data-[invalid]:aria-expanded:border-ods-error",
+    "enabled:data-[invalid]:data-[state=open]:hover:border-ods-error enabled:data-[invalid]:aria-expanded:hover:border-ods-error",
     "disabled:cursor-not-allowed disabled:bg-ods-bg disabled:text-ods-text-disabled disabled:[&_svg]:text-ods-text-disabled",
     "outline-none focus-visible:border-ods-accent",
     "[&_svg]:shrink-0"
   ].join(" "),
   // A clickable row of a list, a menu or a navigation: full width, its content on the left, the hover and the
-  // selected surface of the list.
+  // selected surface of the list. The selected row (`data-state="active"`) takes the hover surface; a list that marks
+  // its selection differently names its look with `data-tone` (the attribute, on the row and on its skeleton):
+  //  - `accent`: the accent's secondary fill, no hover surface (a chat list's open conversation);
+  //  - `link`: the accent text, no surface at all (a chat rail's navigation entries);
+  //  - `surface`: the raised surface, the hover still showing over it (a filter dropdown's checked option);
+  //  - `muted`: the border-grey fill, held under the cursor (a timeline's current event, a docs tree's open page);
+  //  - `card`: a card with its border, no hover over it; idle rows keep a transparent border (a capability list);
+  //  - `framed`: every row a bordered card, the selected one with the accent border (the mobile menu's entries).
   row: [
     "flex w-full items-center gap-[var(--spacing-system-s)] rounded-md px-[var(--spacing-system-m)] py-[var(--spacing-system-s)] text-left",
     "bg-transparent text-ods-text-primary text-h4 transition-colors duration-150",
-    "hover:bg-ods-bg-hover active:bg-ods-bg-active data-[state=active]:bg-ods-bg-active",
+    "hover:bg-ods-bg-hover active:bg-ods-bg-active data-[state=active]:bg-ods-bg-hover",
+    "data-[tone=accent]:hover:bg-transparent data-[tone=accent]:active:bg-transparent",
+    "data-[tone=accent]:data-[state=active]:bg-ods-accent-secondary data-[tone=accent]:data-[state=active]:hover:bg-ods-accent-secondary data-[tone=accent]:data-[state=active]:active:bg-ods-accent-secondary",
+    "data-[tone=link]:hover:bg-transparent data-[tone=link]:active:bg-transparent data-[tone=link]:data-[state=active]:bg-transparent data-[tone=link]:data-[state=active]:text-ods-accent",
+    "data-[tone=surface]:data-[state=active]:bg-ods-bg-surface data-[tone=surface]:data-[state=active]:hover:bg-ods-bg-hover",
+    "data-[tone=muted]:data-[state=active]:bg-ods-border",
+    "data-[tone=card]:border data-[tone=card]:border-transparent data-[tone=card]:data-[state=active]:border-ods-border data-[tone=card]:data-[state=active]:bg-ods-card",
+    "data-[tone=framed]:border data-[tone=framed]:border-ods-border data-[tone=framed]:bg-ods-card data-[tone=framed]:data-[state=active]:border-ods-accent data-[tone=framed]:data-[state=active]:bg-ods-card data-[tone=framed]:data-[state=active]:hover:bg-ods-bg-hover",
     "disabled:cursor-not-allowed disabled:text-ods-text-disabled disabled:hover:bg-transparent",
     KIND_FOCUS_INSET,
     "[&_svg]:shrink-0"
   ].join(" "),
+  // A navigation rail's entry (the app sidebar): the row's box with the rail's two layers. The hover is a wash on its
+  // own layer (`::after`), so it can fade while the current page switches in a single frame: the current page's entry
+  // (`data-state="active"`) takes the accent's light fill, the accent text and glyphs and the accent bar on its leading
+  // edge (`::before`). An entry whose route is still committing (`aria-busy="true"`) holds the hover wash and nothing
+  // else.
+  rail: [
+    "relative isolate flex w-full items-center justify-start gap-[var(--spacing-system-s)] px-[var(--spacing-system-m)] py-[var(--spacing-system-s)] text-left",
+    "bg-transparent text-ods-text-primary text-h4 [&_svg]:fill-ods-text-secondary",
+    "after:pointer-events-none after:absolute after:inset-0 after:-z-10 after:bg-ods-bg-hover after:opacity-0 after:transition-opacity after:duration-150 after:content-['']",
+    "before:absolute before:bottom-0 before:left-0 before:top-0 before:w-1 before:content-['']",
+    "hover:after:opacity-100 aria-busy:after:opacity-100",
+    "data-[state=active]:bg-ods-open-yellow-light data-[state=active]:text-ods-accent data-[state=active]:[&_svg]:fill-ods-accent data-[state=active]:before:bg-ods-accent data-[state=active]:after:opacity-0",
+    "disabled:cursor-not-allowed disabled:text-ods-text-secondary disabled:opacity-50 disabled:after:opacity-0",
+    KIND_FOCUS_INSET,
+    "[&_svg]:shrink-0"
+  ].join(" "),
   // A tab of a tab strip or a tab list: secondary until it is the open one. A strip that marks its open and hovered
   // tab with the accent fade (the admin strip) says so on each tab with `data-emphasis="fade"`. ODS colour vars hold
   // hex values, so a Tailwind alpha modifier would produce no CSS; color-mix() derives the 10% stop from the token.
@@ -208,12 +281,29 @@ var BUTTON_KIND_CLASS = {
     KIND_FOCUS_INSET,
     "[&_svg]:shrink-0"
   ].join(" "),
+  // A segment of a segmented control (`TabSelector`): the label on the strip, a hover fill, and the selected segment
+  // (`data-state="active"`) filled with the raised surface; `data-tone="accent"` fills it with the accent instead. A
+  // disabled selected segment keeps the raised surface with secondary text.
+  segment: [
+    "flex items-center justify-center gap-[var(--spacing-system-xs)] whitespace-nowrap rounded-xs p-[var(--spacing-system-xsf)]",
+    "bg-transparent text-ods-text-primary text-h4 transition-colors duration-200",
+    "hover:bg-ods-bg-hover",
+    "data-[state=active]:cursor-default data-[state=active]:bg-ods-bg-surface data-[state=active]:text-ods-text-primary data-[state=active]:hover:bg-ods-bg-surface",
+    "data-[tone=accent]:data-[state=active]:bg-ods-accent data-[tone=accent]:data-[state=active]:text-ods-text-on-accent data-[tone=accent]:data-[state=active]:hover:bg-ods-accent",
+    "disabled:cursor-not-allowed disabled:bg-transparent disabled:text-ods-text-secondary disabled:hover:bg-transparent",
+    "disabled:data-[state=active]:bg-ods-bg-surface disabled:data-[state=active]:text-ods-text-secondary disabled:data-[state=active]:hover:bg-ods-bg-surface",
+    "disabled:data-[tone=accent]:data-[state=active]:bg-ods-bg-surface disabled:data-[tone=accent]:data-[state=active]:text-ods-text-secondary disabled:data-[tone=accent]:data-[state=active]:hover:bg-ods-bg-surface",
+    KIND_FOCUS_INSET,
+    "[&_svg]:shrink-0"
+  ].join(" "),
   // A choice drawn as a pill (a filter, a quick question, an answer option): bordered, the accent when picked.
   chip: [
     "inline-flex h-8 items-center gap-[var(--spacing-system-xxs)] rounded-full border px-[var(--spacing-system-sf)]",
     "border-ods-border bg-ods-card text-ods-text-primary text-h6 transition-colors duration-200",
     "hover:border-ods-border-hover hover:bg-ods-bg-hover",
     "aria-pressed:border-ods-accent data-[state=active]:border-ods-accent",
+    // `data-tone="accent"`: a pill that links somewhere takes the accent border on hover (a vendor pill).
+    "data-[tone=accent]:hover:border-ods-accent",
     "disabled:cursor-not-allowed disabled:text-ods-text-disabled disabled:hover:bg-ods-card",
     KIND_FOCUS,
     "[&_svg]:h-4 [&_svg]:w-4 [&_svg]:shrink-0"
@@ -222,11 +312,13 @@ var BUTTON_KIND_CLASS = {
   // content is the look; the button gives it the click, the keyboard and the focus ring.
   card: ["relative block w-full rounded-md text-left text-ods-text-primary", KIND_FOCUS].join(" "),
   // A cell of a bar (a header's or a chat's top bar): the bar's full height, an icon or a short label, secondary
-  // until hovered or pressed.
+  // until hovered. The current cell (`data-state="active"`: the header's open section) takes the pressed surface and
+  // the primary text.
   cell: [
     "flex h-full shrink-0 items-center justify-center gap-[var(--spacing-system-xsf)] px-[var(--spacing-system-m)]",
     "bg-transparent text-ods-text-secondary text-h4 transition-colors duration-200",
-    "hover:bg-ods-bg-hover hover:text-ods-text-primary aria-pressed:text-ods-accent aria-expanded:text-ods-text-primary data-[state=active]:text-ods-accent",
+    "hover:bg-ods-bg-hover hover:text-ods-text-primary aria-expanded:text-ods-text-primary",
+    "data-[state=active]:bg-ods-bg-active data-[state=active]:text-ods-text-primary",
     KIND_FOCUS_INSET,
     "[&_svg]:h-6 [&_svg]:w-6 [&_svg]:shrink-0"
   ].join(" ")