@flamingo-stack/openframe-frontend-core 0.0.499 → 0.0.500

package/dist/{chunk-QUFB5SDZ.js → chunk-SOX7CGFX.js}

@@ -23,6 +23,7 @@ import {
   useHumanitySignals,
   useImageEdgeColor,
   useIsTruncated,
+  useIsomorphicLayoutEffect,
   useLgUp,
   useLocalStorage,
   useMarqueeEngine,
@@ -35,7 +36,7 @@ import {
   useResetOnPageHidden,
   useSuppressCloneFocus,
   useToast
-} from "./chunk-QL5YB4F7.js";
+} from "./chunk-P7IOCYGD.js";
 import {
   AlertCircleIcon,
   AnthropicLogoGreyIcon,
@@ -191,7 +192,7 @@ import {
   init_button2,
   init_split_button,
   usePortalContainer
-} from "./chunk-QKWOBV55.js";
+} from "./chunk-WHJGRRK2.js";
 import {
   CheckboxCheckmarkIcon,
   SearchIcon
@@ -29968,7 +29969,6 @@ var FiltersDropdown = ({
     const handleClickOutside = (event) => {
       if (containerRef.current && !containerRef.current.contains(event.target)) {
         setIsOpen(false);
-        setActualPlacement(placement);
       }
     };
     if (isOpen) {
@@ -29980,17 +29980,16 @@ var FiltersDropdown = ({
         document.removeEventListener("mousedown", handleClickOutside);
       };
     }
-  }, [isOpen, placement]);
+  }, [isOpen]);
   useEffect50(() => {
     const handleEscape = (e) => {
       if (e.key === "Escape" && isOpen) {
         setIsOpen(false);
-        setActualPlacement(placement);
       }
     };
     document.addEventListener("keydown", handleEscape);
     return () => document.removeEventListener("keydown", handleEscape);
-  }, [isOpen, placement]);
+  }, [isOpen]);
   const handleToggleOption = (sectionId, optionId, sectionType) => {
     setSelectedFilters((prev) => {
       const current = prev[sectionId] || [];
@@ -30035,7 +30034,6 @@ var FiltersDropdown = ({
   const handleApply = () => {
     onApply(selectedFilters);
     setIsOpen(false);
-    setActualPlacement(placement);
   };
   const getActiveFiltersCount = () => {
     return Object.values(selectedFilters).reduce((acc, curr) => acc + curr.length, 0);
@@ -38525,7 +38523,7 @@ function useSectionNavigation(sections, options) {
 }
 
 // src/components/navigation/navigation-sidebar.tsx
-import { useCallback as useCallback37, useEffect as useEffect70, useLayoutEffect as useLayoutEffect8, useMemo as useMemo39, useState as useState93 } from "react";
+import { useCallback as useCallback37, useEffect as useEffect70, useMemo as useMemo39, useState as useState93 } from "react";
 
 // src/components/navigation/navigation-sidebar-header.tsx
 import { jsx as jsx289, jsxs as jsxs227 } from "react/jsx-runtime";
@@ -38623,6 +38621,12 @@ var NavigationSidebarItemButton = memo6(function NavigationSidebarItemButton2({
   }
   return /* @__PURE__ */ jsx290(next_link_default, { href: item.path, onClick: (event) => onClick(item, event), ...shared, children: content });
 });
+function NavigationSidebarItemSkeleton({ showLabel }) {
+  return /* @__PURE__ */ jsxs228("div", { className: "w-full flex items-center justify-start h-14 p-[var(--spacing-system-m)]", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx290("div", { className: "relative flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx290("div", { className: "h-6 w-6 animate-pulse rounded bg-ods-border" }) }),
+    showLabel && /* @__PURE__ */ jsx290("div", { className: "h-4 flex-1 ml-[var(--spacing-system-xs)] animate-pulse rounded bg-ods-border" })
+  ] });
+}
 
 // src/components/navigation/navigation-sidebar-toggle.tsx
 import { jsx as jsx291, jsxs as jsxs229 } from "react/jsx-runtime";
@@ -38645,15 +38649,7 @@ function NavigationSidebarToggle({
       title: minimized ? "Hide Menu" : void 0,
       "aria-label": "Hide Menu",
       children: [
-        /* @__PURE__ */ jsx291("div", { className: "flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx291(
-          Chevrons03LeftIcon,
-          {
-            className: cn(
-              "text-ods-text-secondary w-6 h-6 transition-transform duration-300",
-              minimized && "rotate-180"
-            )
-          }
-        ) }),
+        /* @__PURE__ */ jsx291("div", { className: "flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx291(Chevrons03LeftIcon, { className: "rotate-180 @[140px]/of-nav-sidebar:rotate-0 text-ods-text-secondary w-6 h-6 transition-transform duration-300" }) }),
         /* @__PURE__ */ jsx291(
           "span",
           {
@@ -38675,6 +38671,20 @@ import { Fragment as Fragment61, jsx as jsx292, jsxs as jsxs230 } from "react/js
 var MINIMIZED_WIDTH = 56;
 var EXPANDED_WIDTH = 224;
 var STORAGE_KEY = "of.navigationSidebar.minimized";
+var NAVIGATION_SIDEBAR_WIDTH_VAR = "--of-navigation-sidebar-width";
+var SIDEBAR_CONTAINER = "@container/of-nav-sidebar";
+var SIDEBAR_GEOMETRY_CLASSES = [
+  // Tablet: float over the content, anchored to the layout row (`absolute`
+  // within AppLayout's `relative` row) — NOT the viewport — so an optional
+  // `topBar` above the row is not overlapped. With no topBar the row spans the
+  // full viewport, so this is visually identical to a viewport-fixed sidebar.
+  "md:absolute md:inset-y-0 md:left-0 md:z-[45]",
+  // Desktop: back in the flex flow, width from the persisted preference. The
+  // fallback IS the default, so the property needs no global declaration and an
+  // unseeded consumer gets the full sidebar rather than a rail with no labels.
+  "lg:relative lg:inset-auto lg:z-auto lg:h-full lg:w-[var(--of-navigation-sidebar-width,14rem)]"
+].join(" ");
+var SIDEBAR_TABLET_WIDTH = { rail: "md:w-14", overlay: "md:w-56" };
 var isModifiedClick = (event) => !!event && (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0);
 function NavigationSidebar({ config, disabled = false }) {
   const isMdUp = useMdUp() ?? false;
@@ -38688,7 +38698,9 @@ function NavigationSidebar({ config, disabled = false }) {
   useEffect70(() => {
     if (isTablet) setTabletMinimized(true);
   }, [isTablet]);
-  const minimized = isTablet ? tabletMinimized : desktopMinimized;
+  const [hydrated, setHydrated] = useState93(false);
+  useEffect70(() => setHydrated(true), []);
+  const minimized = hydrated ? isTablet ? tabletMinimized : desktopMinimized : config.minimized ?? false;
   const [transitionsEnabled, setTransitionsEnabled] = useState93(false);
   const isOverlayOpen = isTablet && !minimized;
   const showLabel = !minimized;
@@ -38739,11 +38751,23 @@ function NavigationSidebar({ config, disabled = false }) {
     primaryItems: config.items.filter((item) => item.section !== "secondary"),
     secondaryItems: config.items.filter((item) => item.section === "secondary")
   }), [config.items]);
+  const loadingRows = useMemo39(() => {
+    if (!config.loading) return null;
+    const primary = config.loadingRows?.primary ?? 7;
+    const secondary = config.loadingRows?.secondary ?? 2;
+    return {
+      primary: Array.from({ length: Math.max(0, primary) }, (_, i) => `primary-${i}`),
+      secondary: Array.from({ length: Math.max(0, secondary) }, (_, i) => `secondary-${i}`)
+    };
+  }, [config.loading, config.loadingRows?.primary, config.loadingRows?.secondary]);
   const sidebarWidth = useMemo39(
     () => minimized ? `${MINIMIZED_WIDTH}px` : `${EXPANDED_WIDTH}px`,
     [minimized]
   );
-  useLayoutEffect8(() => {
+  useIsomorphicLayoutEffect(() => {
+    document.documentElement.style.setProperty(NAVIGATION_SIDEBAR_WIDTH_VAR, sidebarWidth);
+  }, [sidebarWidth]);
+  useIsomorphicLayoutEffect(() => {
     if (!transitionsEnabled) {
       const id = requestAnimationFrame(() => {
         setTransitionsEnabled(true);
@@ -38765,35 +38789,27 @@ function NavigationSidebar({ config, disabled = false }) {
         "aria-hidden": "true"
       }
     ),
-    isTablet && /* @__PURE__ */ jsx292(
-      "div",
-      {
-        className: "h-full hidden md:block flex-shrink-0",
-        style: { width: `${MINIMIZED_WIDTH}px` },
-        "aria-hidden": "true"
-      }
-    ),
+    /* @__PURE__ */ jsx292("div", { className: "h-full hidden md:block lg:hidden w-14 flex-shrink-0", "aria-hidden": "true" }),
     /* @__PURE__ */ jsxs230(
       "aside",
       {
         className: cn(
+          SIDEBAR_CONTAINER,
           "flex-col hidden md:flex flex-shrink-0",
           "bg-ods-card border-r border-ods-border",
-          // Tablet: float the sidebar over content. Anchored to the layout row
-          // (`absolute` within AppLayout's `relative` row) — NOT the viewport —
-          // so an optional `topBar` above the row is not overlapped. With no
-          // topBar the row spans the full viewport, so this is visually
-          // identical to a viewport-fixed sidebar.
-          isTablet ? "absolute inset-y-0 left-0 z-[45]" : "relative h-full",
+          SIDEBAR_GEOMETRY_CLASSES,
+          // The one width a viewport cannot imply: an overlay the user opened on
+          // tablet. Only ever true after a click, so the first paint always gets
+          // the rail.
+          isOverlayOpen ? SIDEBAR_TABLET_WIDTH.overlay : SIDEBAR_TABLET_WIDTH.rail,
           transitionsEnabled && "transition-[width] duration-300",
           config.className
         ),
-        style: { width: sidebarWidth },
         "aria-label": "Main navigation sidebar",
         children: [
           /* @__PURE__ */ jsx292(NavigationSidebarHeader, { minimized }),
           /* @__PURE__ */ jsxs230("div", { className: "flex-1 flex flex-col justify-between py-4 overflow-y-auto", children: [
-            /* @__PURE__ */ jsx292("nav", { className: "flex flex-col", "aria-label": "Primary navigation", children: primaryItems.map((item) => /* @__PURE__ */ jsx292(
+            /* @__PURE__ */ jsx292("nav", { className: "flex flex-col", "aria-label": "Primary navigation", "aria-busy": !!loadingRows, children: loadingRows ? loadingRows.primary.map((key) => /* @__PURE__ */ jsx292(NavigationSidebarItemSkeleton, { showLabel }, key)) : primaryItems.map((item) => /* @__PURE__ */ jsx292(
               NavigationSidebarItemButton,
               {
                 item,
@@ -38805,7 +38821,7 @@ function NavigationSidebar({ config, disabled = false }) {
               },
               item.id
             )) }),
-            secondaryItems.length > 0 && /* @__PURE__ */ jsx292("nav", { className: "flex flex-col", "aria-label": "Secondary navigation", children: secondaryItems.map((item) => /* @__PURE__ */ jsx292(
+            (loadingRows ? loadingRows.secondary.length > 0 : secondaryItems.length > 0) && /* @__PURE__ */ jsx292("nav", { className: "flex flex-col", "aria-label": "Secondary navigation", "aria-busy": !!loadingRows, children: loadingRows ? loadingRows.secondary.map((key) => /* @__PURE__ */ jsx292(NavigationSidebarItemSkeleton, { showLabel }, key)) : secondaryItems.map((item) => /* @__PURE__ */ jsx292(
               NavigationSidebarItemButton,
               {
                 item,
@@ -38917,6 +38933,11 @@ function HeaderMingoButton({
       "aria-pressed": isActive,
       className: cn(
         "flex items-center shrink-0 h-full gap-2 px-4",
+        // Fixed 140px cell from md, so the header's right-hand cluster has a
+        // known width and a loading placeholder can reserve it exactly
+        // (`AppHeaderProps.loadingActionCells` → `'wide'`). Content-width below
+        // md, and in `iconOnly` mode, where the control is a square affordance.
+        !iconOnly && "md:w-[140px] md:justify-center",
         "transition-colors duration-200",
         "focus:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent",
         // Transparent at rest so the cell inherits the bar's background
@@ -39025,9 +39046,32 @@ var AppHeader = React116.memo(function AppHeader2({
   className,
   isMobileMenuOpen,
   onToggleMobileMenu,
-  disabled = false
+  disabled = false,
+  loading = false,
+  loadingActionCells
 }) {
   const isMdUp = useMdUp() ?? false;
+  if (loading) {
+    return /* @__PURE__ */ jsx296(
+      AppHeaderSkeleton,
+      {
+        showSearch,
+        actionCells: loadingActionCells ?? // Fallback: what the `show*` props imply, in the order the live cells are
+        // mounted below. Only correct for a host that knows its header composition
+        // before it starts loading. The cell types carry each control's own
+        // breakpoint — the organization filter is `hidden lg:flex`, the avatar is
+        // gated on `isMdUp`, and Mingo is `iconOnly` below md.
+        [
+          showOrganizations && "icon-lg",
+          showTimeTracker && "icon",
+          showNotifications && "icon",
+          showUser && "icon-md",
+          showMingoAI && "wide"
+        ].filter(Boolean),
+        className
+      }
+    );
+  }
   const dimmedClass = disabled ? "pointer-events-none opacity-50" : "";
   const cellDivider = "border-l border-ods-border";
   return /* @__PURE__ */ jsx296(
@@ -39195,6 +39239,60 @@ function NotificationsHeaderButton({ fallbackUnreadCount, disabled, dimmedClass
     }
   );
 }
+var CELL_VISIBILITY = {
+  icon: void 0,
+  "icon-md": "hidden md:flex",
+  "icon-lg": "hidden lg:flex"
+};
+function HeaderCellSkeleton({ className }) {
+  return /* @__PURE__ */ jsx296(
+    "div",
+    {
+      className: cn(
+        "flex h-full w-12 shrink-0 items-center justify-center border-l border-ods-border md:w-14",
+        className
+      ),
+      children: /* @__PURE__ */ jsx296("div", { className: "h-4 w-4 animate-pulse rounded bg-ods-border md:h-6 md:w-6" })
+    }
+  );
+}
+function HeaderWideCellSkeleton() {
+  return /* @__PURE__ */ jsxs234("div", { className: "flex h-full w-12 shrink-0 items-center justify-center gap-2 border-l border-ods-border md:w-[140px] md:px-4", children: [
+    /* @__PURE__ */ jsx296("div", { className: "h-4 w-4 shrink-0 animate-pulse rounded bg-ods-border md:h-6 md:w-6" }),
+    /* @__PURE__ */ jsx296("div", { className: "hidden h-5 animate-pulse rounded bg-ods-border md:block md:w-[72px]" })
+  ] });
+}
+function AppHeaderSkeleton({
+  showSearch,
+  actionCells,
+  className
+}) {
+  const cells = typeof actionCells === "number" ? Array.from({ length: Math.max(0, actionCells) }, () => "icon") : actionCells;
+  return /* @__PURE__ */ jsx296(
+    TopNavigation,
+    {
+      className: cn("sticky top-0 z-40", className),
+      centerBreakpoint: "md",
+      "aria-busy": "true",
+      leading: (
+        // Burger cell: mobile only, in CSS.
+        /* @__PURE__ */ jsx296("div", { className: "flex h-full w-12 shrink-0 items-center justify-center border-r border-ods-border md:hidden", children: /* @__PURE__ */ jsx296("div", { className: "h-4 w-4 animate-pulse rounded bg-ods-border" }) })
+      ),
+      logo: /* @__PURE__ */ jsxs234(Fragment62, { children: [
+        /* @__PURE__ */ jsx296("div", { className: "h-6 w-6 shrink-0 animate-pulse rounded bg-ods-border" }),
+        /* @__PURE__ */ jsx296("div", { className: "h-4 w-24 animate-pulse rounded bg-ods-border" })
+      ] }),
+      logoClassName: "gap-2 md:hidden",
+      center: showSearch ? /* @__PURE__ */ jsx296("div", { className: "h-10 w-full animate-pulse rounded-md bg-ods-border" }) : void 0,
+      sideActions: /* @__PURE__ */ jsxs234(Fragment62, { children: [
+        showSearch && /* @__PURE__ */ jsx296(HeaderCellSkeleton, { className: "md:hidden" }),
+        cells.map(
+          (cell, i) => cell === "wide" ? /* @__PURE__ */ jsx296(HeaderWideCellSkeleton, {}, i) : /* @__PURE__ */ jsx296(HeaderCellSkeleton, { className: CELL_VISIBILITY[cell] }, i)
+        )
+      ] })
+    }
+  );
+}
 
 // src/components/navigation/app-layout.tsx
 import { Suspense as Suspense2, useCallback as useCallback39, useMemo as useMemo40, useRef as useRef53, useState as useState94 } from "react";
@@ -42133,26 +42231,45 @@ function DataTableRoot({ table, children, className }) {
 }
 
 // src/components/ui/data-table/data-table-header.tsx
-import { flexRender } from "@tanstack/react-table";
 init_cn();
+import { flexRender } from "@tanstack/react-table";
 
 // src/components/ui/data-table/data-table-column-filter.tsx
 init_cn();
 import { useCallback as useCallback43, useMemo as useMemo43 } from "react";
 
 // src/components/ui/data-table/utils.ts
+var BREAKPOINT_ORDER = ["md", "lg", "xl", "2xl"];
 function getHideClasses2(hideAt) {
   if (!hideAt) return "";
   const breakpoints = Array.isArray(hideAt) ? hideAt : [hideAt];
-  const order = ["md", "lg", "xl", "2xl"];
   if (breakpoints.length === 1) {
     return `hidden ${breakpoints[0]}:flex`;
   }
-  const maxIdx = Math.max(...breakpoints.map((bp) => order.indexOf(bp)));
+  const maxIdx = Math.max(...breakpoints.map((bp) => BREAKPOINT_ORDER.indexOf(bp)));
   const hideClasses = breakpoints.map((bp) => `${bp}:hidden`).join(" ");
-  const showBreakpoint = order[maxIdx + 1];
+  const showBreakpoint = BREAKPOINT_ORDER[maxIdx + 1];
   return showBreakpoint ? `${hideClasses} ${showBreakpoint}:flex` : hideClasses;
 }
+function getHideAtVisibility(hideAt) {
+  const steps = BREAKPOINT_ORDER.length + 1;
+  if (!hideAt) return Array.from({ length: steps }, () => true);
+  const breakpoints = Array.isArray(hideAt) ? hideAt : [hideAt];
+  if (breakpoints.length === 1) {
+    const showFrom = BREAKPOINT_ORDER.indexOf(breakpoints[0]) + 1;
+    return Array.from({ length: steps }, (_, step) => step >= showFrom);
+  }
+  const maxIdx = Math.max(...breakpoints.map((bp) => BREAKPOINT_ORDER.indexOf(bp)));
+  const showBreakpoint = BREAKPOINT_ORDER[maxIdx + 1];
+  const visible = [true];
+  for (const bp of BREAKPOINT_ORDER) {
+    let state = visible[visible.length - 1];
+    if (breakpoints.includes(bp)) state = false;
+    if (bp === showBreakpoint) state = true;
+    visible.push(state);
+  }
+  return visible;
+}
 function alignJustify(align) {
   switch (align) {
     case "center":
@@ -42208,38 +42325,56 @@ function DataTableColumnFilter({
   const handleReset = useCallback43(() => {
     column.setFilterValue(void 0);
   }, [column]);
+  const isPending = options.length === 0;
+  const trigger = /* @__PURE__ */ jsxs264(
+    "div",
+    {
+      className: cn(
+        // Fixed 48px per design, same as the plain header cell next to it —
+        // NOT padding around the label. The two were drifting: 12px+20px+12px
+        // came out 44px here while the sibling was pinned to 48, so in a
+        // header mixing filterable and plain columns the labels sat on
+        // different centre lines and the filter's hit area was 4px short of
+        // the row it belongs to.
+        "group flex w-full items-center gap-[var(--spacing-system-xsf)] h-12 rounded-sm transition-colors duration-200 select-none",
+        alignJustify(align),
+        isPending ? "cursor-default" : "cursor-pointer"
+      ),
+      "aria-label": `Filter by ${label}`,
+      "aria-disabled": isPending || void 0,
+      children: [
+        /* @__PURE__ */ jsx332(
+          "span",
+          {
+            className: cn(
+              "text-h5 text-ods-text-secondary whitespace-nowrap transition-colors duration-200",
+              !isPending && "group-hover:text-ods-text-primary"
+            ),
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsx332(
+          Filter02Icon,
+          {
+            className: cn(
+              "w-4 h-4 transition-colors",
+              activeCount > 0 && "text-ods-accent",
+              activeCount === 0 && "text-ods-text-secondary",
+              activeCount === 0 && !isPending && "group-hover:text-ods-text-primary"
+            )
+          }
+        )
+      ]
+    }
+  );
+  if (isPending) {
+    return /* @__PURE__ */ jsx332("div", { className: "block w-full", children: trigger });
+  }
   return /* @__PURE__ */ jsx332(
     FiltersDropdown,
     {
       className: "!block w-full",
-      triggerElement: /* @__PURE__ */ jsxs264(
-        "div",
-        {
-          className: cn(
-            // Fixed 48px per design, same as the plain header cell next to it —
-            // NOT padding around the label. The two were drifting: 12px+20px+12px
-            // came out 44px here while the sibling was pinned to 48, so in a
-            // header mixing filterable and plain columns the labels sat on
-            // different centre lines and the filter's hit area was 4px short of
-            // the row it belongs to.
-            "group flex w-full items-center gap-[var(--spacing-system-xsf)] h-12 rounded-sm cursor-pointer transition-colors duration-200 select-none",
-            alignJustify(align)
-          ),
-          "aria-label": `Filter by ${label}`,
-          children: [
-            /* @__PURE__ */ jsx332("span", { className: "text-h5 text-ods-text-secondary whitespace-nowrap transition-colors duration-200 group-hover:text-ods-text-primary", children: label }),
-            /* @__PURE__ */ jsx332(
-              Filter02Icon,
-              {
-                className: cn(
-                  "w-4 h-4 transition-colors",
-                  activeCount > 0 ? "text-ods-accent" : "text-ods-text-secondary group-hover:text-ods-text-primary"
-                )
-              }
-            )
-          ]
-        }
-      ),
+      triggerElement: trigger,
       sections,
       currentFilters,
       onApply: handleApply,
@@ -42261,15 +42396,11 @@ function DataTableHeader({
   onSortChange
 }) {
   const table = useDataTableContext();
-  const isLgUp = useLgUp() ?? false;
   const headerGroup = table.getHeaderGroups()[0];
   if (!headerGroup) return null;
-  const hasVisibleHeaderCell = headerGroup.headers.some((header) => {
-    if (header.isPlaceholder) return false;
-    if (isLgUp) return true;
-    const meta = header.column.columnDef.meta;
-    return Boolean(meta?.filter) || meta?.alwaysShowHeader === true;
-  });
+  const hasTabletVisibleCell = headerGroup.headers.some(
+    (header) => !header.isPlaceholder && keepsCellOnTablet(header.column.columnDef.meta)
+  );
   return /* @__PURE__ */ jsx333(
     "div",
     {
@@ -42279,45 +42410,101 @@ function DataTableHeader({
         className
       ),
       children: /* @__PURE__ */ jsxs265("div", { className: "flex items-stretch gap-[var(--spacing-system-mf)] px-[var(--spacing-system-mf)] relative", children: [
-        headerGroup.headers.map((header) => /* @__PURE__ */ jsx333(
-          HeaderCell,
+        headerGroup.headers.map((header) => /* @__PURE__ */ jsx333(HeaderCell, { header, sort, onSortChange }, header.id)),
+        rightSlot && /* @__PURE__ */ jsx333(
+          "div",
           {
-            header,
-            isLgUp,
-            sort,
-            onSortChange
-          },
-          header.id
-        )),
-        rightSlot && (hasVisibleHeaderCell ? /* @__PURE__ */ jsx333("div", { className: "absolute right-[var(--spacing-system-mf)] inset-y-0 flex items-center", children: rightSlot }) : (
-          // In-flow fallback: with no visible header cell this slot is the
-          // only thing giving the row height, so it carries the same fixed 48
-          // rather than padding out to 44.
-          /* @__PURE__ */ jsx333("div", { className: "ml-auto flex items-center h-12", children: rightSlot })
-        ))
+            className: cn(
+              "flex items-center",
+              hasTabletVisibleCell ? "absolute right-[var(--spacing-system-mf)] inset-y-0" : (
+                // No cell is visible below lg, so there this slot is the only thing
+                // giving the row height and carries the same fixed 48 rather than
+                // padding out to 44. From lg the cells are back and it returns to
+                // the absolute placement. Safe as a `max-lg:` override: nothing
+                // else in this string sets margin or height, so it competes only
+                // with unprefixed defaults, never with a `md:`/`lg:` class.
+                "max-lg:ml-auto max-lg:h-12 lg:absolute lg:right-[var(--spacing-system-mf)] lg:inset-y-0"
+              )
+            ),
+            children: rightSlot
+          }
+        )
       ] })
     }
   );
 }
-function HeaderCell({ header, isLgUp, sort, onSortChange }) {
+function keepsCellOnTablet(meta) {
+  return Boolean(meta?.filter) || meta?.alwaysShowHeader === true;
+}
+var SHOW_FROM = {
+  md: "md:flex",
+  lg: "lg:flex",
+  xl: "xl:flex",
+  "2xl": "2xl:flex"
+};
+var HIDE_FROM = {
+  md: "md:hidden",
+  lg: "lg:hidden",
+  xl: "xl:hidden",
+  "2xl": "2xl:hidden"
+};
+var LG_STEP = BREAKPOINT_ORDER.indexOf("lg") + 1;
+function getCellVisibilityClasses(keepOnTablet, hideAt) {
+  const fromHideAt = getHideAtVisibility(hideAt);
+  const visible = fromHideAt.map(
+    (shown, step) => keepOnTablet ? (
+      // Reachable below lg whatever `hideAt` says; from lg it governs again.
+      step < LG_STEP || shown
+    ) : (
+      // Otherwise lg is a floor `hideAt` can raise but never lower.
+      shown && step >= LG_STEP
+    )
+  );
+  const classes = [visible[0] ? "flex" : "hidden"];
+  for (let step = 1; step < visible.length; step++) {
+    if (visible[step] === visible[step - 1]) continue;
+    const breakpoint = BREAKPOINT_ORDER[step - 1];
+    classes.push(visible[step] ? SHOW_FROM[breakpoint] : HIDE_FROM[breakpoint]);
+  }
+  return classes.join(" ");
+}
+function HeaderCell({ header, sort, onSortChange }) {
   if (header.isPlaceholder) return null;
   const column = header.column;
   const meta = column.columnDef.meta;
   const hasFilter = Boolean(meta?.filter);
-  const keepOnTablet = hasFilter || meta?.alwaysShowHeader === true;
+  const keepOnTablet = keepsCellOnTablet(meta);
   const align = meta?.align ?? "left";
   const canSort = meta?.sortable === true;
   const sortDir = sort?.id === column.id ? sort.desc ? "desc" : "asc" : false;
-  if (!isLgUp && !keepOnTablet) return null;
   return /* @__PURE__ */ jsx333(
     "div",
     {
       className: cn(
-        "flex items-stretch",
-        isLgUp && (meta?.width || "flex-1 min-w-0"),
-        meta?.headerClassName,
-        // Don't apply hide classes if column is filterable on tablet (keep filter accessible)
-        !(keepOnTablet && !isLgUp) && getHideClasses2(meta?.hideAt)
+        "items-stretch",
+        // Cells are hidden rather than dropped from the tree, so which columns
+        // exist never depends on when an effect ran.
+        getCellVisibilityClasses(keepOnTablet, meta?.hideAt),
+        // Width applies from lg only. Stated as "always, neutralized below lg"
+        // because `meta.width` is an opaque consumer string that cannot be
+        // prefixed. Only `keepOnTablet` cells need the override — the rest are
+        // hidden below lg anyway.
+        //
+        // `[&&]` doubles the class in the selector (`.cls.cls`, specificity 0-2-0),
+        // and it is load-bearing: consumers routinely write a RESPONSIVE width
+        // (`w-[80px] md:w-1/5` is the common shape), and between md and lg that
+        // `md:` rule and this `max-lg:` one both match. At equal specificity source
+        // order decides, and Tailwind emits the `max-lg` block BEFORE the `md` one
+        // — the same ordering documented for visibility above — so the tablet would
+        // keep a width the design drops there, leaving the cells spread across the
+        // row instead of packed beside their filters. An opaque consumer string
+        // cannot be outranked by ordering, so this wins on the cascade's other axis.
+        // Specificity rather than `!important`: it stays a normal declaration, so a
+        // consumer that genuinely needs a tablet width can still take it back with a
+        // more specific rule — `!important` could only be answered with another one.
+        meta?.width || "flex-1 min-w-0",
+        keepOnTablet && "max-lg:[&&]:w-auto max-lg:[&&]:flex-none max-lg:[&&]:basis-auto",
+        meta?.headerClassName
       ),
       children: hasFilter ? /* @__PURE__ */ jsx333(
         DataTableColumnFilter,
@@ -42335,7 +42522,9 @@ function HeaderCell({ header, isLgUp, sort, onSortChange }) {
             // Fixed 48px header height per design (20px label centered inside)
             // instead of the padding-driven 44px.
             "flex w-full items-center gap-[var(--spacing-system-xsf)] h-12 rounded-sm select-none transition-colors duration-200",
-            isLgUp && alignJustify(align),
+            // Same "always, neutralized below lg" shape as the width above.
+            alignJustify(align),
+            keepOnTablet && "max-lg:justify-start",
             canSort && "group cursor-pointer"
           ),
           onClick: canSort ? () => onSortChange?.(column.id) : void 0,
@@ -42396,6 +42585,7 @@ init_cn();
 import { Fragment as Fragment69, jsx as jsx335, jsxs as jsxs266 } from "react/jsx-runtime";
 var ROW_HEIGHT_DESKTOP2 = "h-[66px] md:h-[78px]";
 var ROW_HEIGHT_MOBILE2 = "h-[66px]";
+var ROW_SHELL_CLASSES = "items-center gap-[var(--spacing-system-mf)] px-[var(--spacing-system-mf)]";
 function DataTableSkeleton({
   rows = 10,
   className,
@@ -42416,7 +42606,8 @@ function DataTableSkeleton({
           "div",
           {
             className: cn(
-              "hidden md:flex items-center gap-[var(--spacing-system-mf)] px-[var(--spacing-system-mf)] py-0",
+              "hidden md:flex py-0",
+              ROW_SHELL_CLASSES,
               ROW_HEIGHT_DESKTOP2,
               rowClassName
             ),
@@ -42449,7 +42640,8 @@ function DataTableSkeleton({
           "div",
           {
             className: cn(
-              "flex md:hidden gap-[var(--spacing-system-sf)] items-center justify-start px-[var(--spacing-system-sf)] py-0",
+              "flex md:hidden justify-start py-0",
+              ROW_SHELL_CLASSES,
               ROW_HEIGHT_MOBILE2,
               rowClassName
             ),
@@ -42505,7 +42697,8 @@ function DataTableRowImpl({
     "div",
     {
       className: cn(
-        "flex items-center gap-[var(--spacing-system-mf)] px-[var(--spacing-system-mf)]",
+        "flex",
+        ROW_SHELL_CLASSES,
         compact ? "py-[var(--spacing-system-xsf)]" : autoHeight ? "py-[var(--spacing-system-sf)] min-h-[66px] md:min-h-[78px]" : `py-0 ${ROW_HEIGHT_DESKTOP2}`,
         hasSubRow && "border-b border-ods-border"
       ),
@@ -42625,7 +42818,8 @@ function DataTableBody({
             "div",
             {
               className: cn(
-                "hidden md:flex items-center gap-[var(--spacing-system-mf)] px-[var(--spacing-system-mf)] py-0",
+                "hidden md:flex py-0",
+                ROW_SHELL_CLASSES,
                 ROW_HEIGHT_DESKTOP2
               )
             }
@@ -42634,7 +42828,8 @@ function DataTableBody({
             "div",
             {
               className: cn(
-                "flex md:hidden gap-[var(--spacing-system-sf)] items-center justify-start px-[var(--spacing-system-sf)] py-0",
+                "flex md:hidden justify-start py-0",
+                ROW_SHELL_CLASSES,
                 ROW_HEIGHT_MOBILE2
               )
             }
@@ -57212,6 +57407,7 @@ export {
   DataTableEmpty,
   ROW_HEIGHT_DESKTOP2 as ROW_HEIGHT_DESKTOP,
   ROW_HEIGHT_MOBILE2 as ROW_HEIGHT_MOBILE,
+  ROW_SHELL_CLASSES,
   DataTableSkeleton,
   DataTableRow,
   DataTableBody,
@@ -57265,6 +57461,7 @@ export {
   SlidingSidebar,
   StickySectionNav,
   useSectionNavigation,
+  NAVIGATION_SIDEBAR_WIDTH_VAR,
   NavigationSidebar,
   HeaderGlobalSearch,
   HeaderMingoButton,
@@ -57289,4 +57486,4 @@ export {
   LogsList,
   assets
 };
-//# sourceMappingURL=chunk-QUFB5SDZ.js.map
+//# sourceMappingURL=chunk-SOX7CGFX.js.map