@flamingo-stack/openframe-frontend-core 0.0.355 → 0.0.357-snapshot.20260702003231

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.355",
+  "version": "0.0.357-snapshot.20260702003231",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "main": "./dist/index.js",

package/src/components/ui/floating-tooltip.tsx

@@ -7,6 +7,7 @@ import {
   offset,
   flip,
   shift,
+  size,
   useDismiss,
   useRole,
   useInteractions,
@@ -100,6 +101,16 @@ export function FloatingTooltip({
         padding: 8,
       }),
       shift({ padding: 8 }),
+      // Cap the tooltip to the space left in the viewport so tall content
+      // scrolls inside it instead of overflowing off-screen. Applied straight to
+      // the floating node's style (no React state → no autoUpdate re-render loop);
+      // the inner scroll wrapper below turns the cap into an actual scroll area.
+      size({
+        padding: 8,
+        apply({ availableHeight, elements }) {
+          elements.floating.style.maxHeight = `${Math.max(64, availableHeight)}px`
+        },
+      }),
       arrow({ element: arrowRef }),
     ],
     whileElementsMounted: autoUpdate,
@@ -153,17 +164,20 @@ export function FloatingTooltip({
             }}
             {...getFloatingProps()}
             className={cn(
-              // ODS Design System tooltip styling
-              "max-w-xs overflow-hidden rounded-md",
+              // ODS Design System tooltip styling. `flex flex-col` + `overflow-hidden`
+              // let the inner wrapper own the scroll while the rounded corners clip it.
+              "max-w-xs flex flex-col overflow-hidden rounded-md",
               "bg-ods-card border border-ods-border",
-              "px-3 py-2.5 text-sm leading-relaxed text-ods-text-primary",
-              "whitespace-pre-line",
               // ODS shadows for proper elevation
               "shadow-[var(--shadow-md)]",
               className
             )}
           >
-            {parsedContent}
+            {/* Scroll wrapper — `min-h-0` lets it shrink below content height inside
+                the max-height cap set by the `size` middleware, so tall content scrolls. */}
+            <div className="min-h-0 overflow-y-auto px-3 py-2.5 text-sm leading-relaxed text-ods-text-primary whitespace-pre-line">
+              {parsedContent}
+            </div>
             {/* Arrow element */}
             <div
               ref={arrowRef}

package/src/components/ui/tab-navigation.tsx

@@ -115,6 +115,7 @@ export function TabNavigation({
   }
 
   const scrollRef = useRef<HTMLDivElement>(null)
+  const activeTabRef = useRef<HTMLButtonElement>(null)
   const [canScrollLeft, setCanScrollLeft] = useState(false)
   const [canScrollRight, setCanScrollRight] = useState(false)
 
@@ -131,16 +132,57 @@ export function TabNavigation({
 
     updateScrollShadows()
 
+    // Translate a vertical mouse wheel into horizontal scroll. macOS mice emit
+    // only deltaY, which the browser won't apply to a horizontal-only overflow
+    // container, so the strip is otherwise un-scrollable with a plain mouse.
+    // Non-passive so preventDefault() can suppress the page from scrolling.
+    const onWheel = (e: WheelEvent) => {
+      // A trackpad's horizontal gesture (deltaX) already scrolls natively; a
+      // pinch-zoom arrives as wheel+ctrlKey — leave both untouched.
+      if (e.deltaX !== 0 || e.ctrlKey) return
+      if (el.scrollWidth <= el.clientWidth) return
+      // deltaY isn't always pixels: Firefox mice report lines (deltaMode 1),
+      // some devices pages (mode 2). Normalize so the scroll isn't a no-op.
+      const delta = e.deltaMode === 1 ? e.deltaY * 40 : e.deltaMode === 2 ? e.deltaY * el.clientWidth : e.deltaY
+      // Only consume the event while there's room to scroll in that direction;
+      // at either edge, let it bubble so the page scrolls (native chaining).
+      const canGoRight = el.scrollLeft + el.clientWidth < el.scrollWidth - 1
+      const canGoLeft = el.scrollLeft > 0
+      if ((delta > 0 && !canGoRight) || (delta < 0 && !canGoLeft)) return
+      el.scrollLeft += delta
+      e.preventDefault()
+    }
+
     el.addEventListener('scroll', updateScrollShadows, { passive: true })
+    el.addEventListener('wheel', onWheel, { passive: false })
     const ro = new ResizeObserver(updateScrollShadows)
     ro.observe(el)
 
     return () => {
       el.removeEventListener('scroll', updateScrollShadows)
+      el.removeEventListener('wheel', onWheel)
       ro.disconnect()
     }
   }, [updateScrollShadows])
 
+  // Bring the active tab into view when it changes (e.g. clicking a partly
+  // off-screen tab, or a URL-driven change). Uses the browser's own smooth
+  // scroll and moves ONLY the strip — never the page — by nudging just enough
+  // to reveal the tab on whichever edge it's clipped. Complements the native
+  // trackpad / Shift+wheel / mouse-wheel scrolling rather than fighting it.
+  useEffect(() => {
+    const el = scrollRef.current
+    const active = activeTabRef.current
+    if (!el || !active) return
+    const elRect = el.getBoundingClientRect()
+    const aRect = active.getBoundingClientRect()
+    if (aRect.left < elRect.left) {
+      el.scrollBy({ left: aRect.left - elRect.left, behavior: 'smooth' })
+    } else if (aRect.right > elRect.right) {
+      el.scrollBy({ left: aRect.right - elRect.right, behavior: 'smooth' })
+    }
+  }, [activeTab])
+
   const leftFade = canScrollLeft || showLeftGradient
   const rightFade = canScrollRight || showRightGradient
 
@@ -168,6 +210,7 @@ export function TabNavigation({
             return (
               <button
                 key={tab.id}
+                ref={isActive ? activeTabRef : undefined}
                 type="button"
                 onClick={() => handleTabChange(tab.id)}
                 className={cn(
@@ -210,10 +253,10 @@ export function TabNavigation({
 
         {/* Fade shadows — visible when content overflows or when forced via props */}
         {leftFade && (
-          <div className={cn("absolute left-0 top-0 w-10 h-14 pointer-events-none bg-gradient-to-r to-transparent", shadowClassName || "from-ods-bg")} />
+          <div className={cn("absolute left-0 top-0 bottom-0 w-10 pointer-events-none bg-gradient-to-r to-transparent", shadowClassName || "from-ods-bg")} />
         )}
         {rightFade && (
-          <div className={cn("absolute right-0 top-0 w-10 h-14 pointer-events-none bg-gradient-to-l to-transparent", shadowClassName || "from-ods-bg")} />
+          <div className={cn("absolute right-0 top-0 bottom-0 w-10 pointer-events-none bg-gradient-to-l to-transparent", shadowClassName || "from-ods-bg")} />
         )}
 
         {/* Bottom border — a gradient-capable 1px line that fades to transparent on any edge that has an active fade shadow. */}

package/src/components/ui/tooltip.tsx

@@ -24,7 +24,9 @@ const TooltipContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-[1400] rounded-md bg-ods-card border border-ods-border px-3 py-2 text-sm text-ods-text-primary shadow-lg animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        // `max-h` uses Radix's available-height var so tall content scrolls inside
+        // the tooltip instead of overflowing off-screen (only engages on overflow).
+        "z-[1400] max-h-[var(--radix-popper-available-height)] overflow-y-auto rounded-md bg-ods-card border border-ods-border px-3 py-2 text-sm text-ods-text-primary shadow-lg animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
       {...props}

package/src/types/tool.types.ts

@@ -31,7 +31,7 @@ export const toolLabels: Record<ToolType, string> = {
   OPENFRAME: 'OpenFrame',
   OPENFRAME_CHAT: 'OpenFrame Chat',
   OPENFRAME_CLIENT: 'OpenFrame Client',
-  OPENFRAME_RMM: 'OpenFrame RMM',
+  OPENFRAME_RMM: 'RMM',
   OSQUERY: 'Osquery',
   SYSTEM: 'System'
 }