@flamingo-stack/openframe-frontend-core 0.0.484 → 0.0.485

package/src/components/ui/scroll-fade.tsx

@@ -3,27 +3,39 @@
 import * as React from 'react'
 import { cn } from '../../utils/cn'
 
+export type ScrollFadeAxis = 'vertical' | 'horizontal' | 'both'
+
 /**
- * Tracks whether a scrollable element is scrolled away from its top/bottom
- * edge, so edge fades ("scroll shadows") can be shown only where content
- * continues. Attach `scrollRef` to the scrollable element and `update` to its
+ * Tracks whether a scrollable element is scrolled away from its edges, so
+ * edge fades ("scroll shadows") can be shown only where content continues.
+ * Attach `scrollRef` to the scrollable element and `update` to its
  * `onScroll`; content/size changes are re-measured via ResizeObserver.
  *
- * Canonical fade pattern shared by chat lists and FilterModal.
+ * `axis` picks which edges are tracked: 'vertical' (top/bottom — default,
+ * matches the original hook), 'horizontal' (left/right), or 'both'.
+ *
+ * Canonical fade pattern shared by chat lists, FilterModal, and the
+ * `ScrollShadow` wrapper below.
  */
-export function useScrollFade<T extends HTMLElement = HTMLDivElement>() {
+export function useScrollFade<T extends HTMLElement = HTMLDivElement>(axis: ScrollFadeAxis = 'vertical') {
   const scrollRef = React.useRef<T | null>(null)
-  const [fade, setFade] = React.useState({ top: false, bottom: false })
+  const [fade, setFade] = React.useState({ top: false, bottom: false, left: false, right: false })
 
   const update = React.useCallback(() => {
     const el = scrollRef.current
     if (!el) return
     setFade((prev) => {
-      const top = el.scrollTop > 0
-      const bottom = el.scrollHeight - el.scrollTop - el.clientHeight > 1
-      return prev.top === top && prev.bottom === bottom ? prev : { top, bottom }
+      const vertical = axis !== 'horizontal'
+      const horizontal = axis !== 'vertical'
+      const top = vertical && el.scrollTop > 0
+      const bottom = vertical && el.scrollHeight - el.scrollTop - el.clientHeight > 1
+      const left = horizontal && el.scrollLeft > 0
+      const right = horizontal && el.scrollWidth - el.scrollLeft - el.clientWidth > 1
+      return prev.top === top && prev.bottom === bottom && prev.left === left && prev.right === right
+        ? prev
+        : { top, bottom, left, right }
     })
-  }, [])
+  }, [axis])
 
   React.useLayoutEffect(() => {
     update()
@@ -47,25 +59,44 @@ export function useScrollFade<T extends HTMLElement = HTMLDivElement>() {
     }
   }, [update])
 
-  return { scrollRef, fadeTop: fade.top, fadeBottom: fade.bottom, update }
+  return {
+    scrollRef,
+    fadeTop: fade.top,
+    fadeBottom: fade.bottom,
+    fadeLeft: fade.left,
+    fadeRight: fade.right,
+    update,
+  }
 }
 
+export type ScrollFadeEdge = 'top' | 'bottom' | 'left' | 'right'
+
 export interface ScrollFadeOverlayProps {
   /** Which edge of the scroll container the fade sits on. */
-  edge: 'top' | 'bottom'
+  edge: ScrollFadeEdge
   /** Whether the fade is currently shown (content continues past this edge). */
   visible: boolean
   /**
    * CSS color the content fades into — should match the surface behind the
-   * list. Defaults to the page background token.
+   * list. Defaults to the page background token, which is theme-aware (the
+   * light theme redefines the token, so the fade flips with it).
    */
   color?: string
   className?: string
 }
 
+const EDGE_GRADIENT_ANGLE: Record<ScrollFadeEdge, string> = {
+  top: '0deg',
+  bottom: '180deg',
+  left: '270deg',
+  right: '90deg',
+}
+
 /**
  * Edge overlay that fades scrollable content into the surface behind it.
  * Render inside a `relative` wrapper around the scrollable element.
+ * Vertical fades are 64px tall (legacy chat/FilterModal size); horizontal
+ * fades are 40px wide per the ODS "scroll gradient" spec.
  */
 export function ScrollFadeOverlay({
   edge,
@@ -73,18 +104,86 @@ export function ScrollFadeOverlay({
   color = 'var(--color-bg)',
   className,
 }: ScrollFadeOverlayProps) {
+  const isVertical = edge === 'top' || edge === 'bottom'
   return (
     <div
       aria-hidden
       className={cn(
-        'pointer-events-none absolute inset-x-0 h-16 transition-opacity duration-150',
-        edge === 'top' ? 'top-0' : 'bottom-0',
+        'pointer-events-none absolute transition-opacity duration-150',
+        isVertical ? 'inset-x-0 h-16' : 'inset-y-0 w-10',
+        edge === 'top' && 'top-0',
+        edge === 'bottom' && 'bottom-0',
+        edge === 'left' && 'left-0',
+        edge === 'right' && 'right-0',
         visible ? 'opacity-100' : 'opacity-0',
         className,
       )}
       style={{
-        background: `linear-gradient(${edge === 'top' ? '0deg' : '180deg'}, transparent 0%, ${color} 100%)`,
+        background: `linear-gradient(${EDGE_GRADIENT_ANGLE[edge]}, transparent 0%, ${color} 100%)`,
       }}
     />
   )
 }
+
+export interface ScrollShadowProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Which scroll direction(s) to track and fade. */
+  axis?: ScrollFadeAxis
+  /**
+   * CSS color of the fade — the surface the content visually sits on.
+   * Defaults to the page background token; pass e.g. `var(--color-bg-card)`
+   * when the scrollable sits on a card. Tokens are theme-aware, so the same
+   * component works in light and dark themes (dark by default).
+   */
+  color?: string
+  /** Classes for the inner scrollable element (heights, paddings, etc.). */
+  scrollClassName?: string
+  /** Extra classes for every fade overlay (e.g. custom size). */
+  overlayClassName?: string
+  children: React.ReactNode
+}
+
+/**
+ * Drop-in wrapper that makes its child scrollable and fades the edges where
+ * more content exists — right/left for horizontal overflow (wide tables),
+ * top/bottom for vertical (long lists). Fades appear and hide automatically
+ * as the user scrolls or the content resizes.
+ *
+ * ```tsx
+ * <ScrollShadow axis="horizontal">
+ *   <WideTable />
+ * </ScrollShadow>
+ * ```
+ */
+export function ScrollShadow({
+  axis = 'vertical',
+  color = 'var(--color-bg)',
+  className,
+  scrollClassName,
+  overlayClassName,
+  children,
+  ...rest
+}: ScrollShadowProps) {
+  const { scrollRef, fadeTop, fadeBottom, fadeLeft, fadeRight, update } = useScrollFade<HTMLDivElement>(axis)
+  const vertical = axis !== 'horizontal'
+  const horizontal = axis !== 'vertical'
+
+  return (
+    <div className={cn('relative', className)} {...rest}>
+      <div
+        ref={scrollRef}
+        onScroll={update}
+        className={cn(horizontal && 'overflow-x-auto', vertical && 'overflow-y-auto', scrollClassName)}
+      >
+        {children}
+      </div>
+      {vertical && <ScrollFadeOverlay edge="top" visible={fadeTop} color={color} className={overlayClassName} />}
+      {vertical && (
+        <ScrollFadeOverlay edge="bottom" visible={fadeBottom} color={color} className={overlayClassName} />
+      )}
+      {horizontal && <ScrollFadeOverlay edge="left" visible={fadeLeft} color={color} className={overlayClassName} />}
+      {horizontal && (
+        <ScrollFadeOverlay edge="right" visible={fadeRight} color={color} className={overlayClassName} />
+      )}
+    </div>
+  )
+}

package/src/components/ui/table/.table-skeleton.md

@@ -18,8 +18,8 @@ Main export. Renders `n` skeleton card rows with responsive desktop (`md:flex`)
 | `rowClassName` | `string` | — | Extra classes on the inner flex row |
 
 ### Constants *(deprecated)*
-- `ROW_HEIGHT_DESKTOP` — `'h-[68px] md:h-[80px]'`
-- `ROW_HEIGHT_MOBILE` — `'h-[68px]'`
+- `ROW_HEIGHT_DESKTOP` — `'h-[66px] md:h-[78px]'` (inner; +2px border = 68/80 total)
+- `ROW_HEIGHT_MOBILE` — `'h-[66px]'` (inner)
 
 **Primary column detection:** The component automatically identifies the widest (`flex-1` or `flex-[n]`) column as "primary" and renders a second skeleton line on every other row to simulate multi-line content.
 

package/src/components/ui/table/table-skeleton.tsx

@@ -4,8 +4,10 @@ import React from 'react'
 import { cn } from '../../../utils/cn'
 import type { TableCardSkeletonProps } from './types'
 
-const ROW_HEIGHT_DESKTOP = 'h-[68px] md:h-[80px]'
-const ROW_HEIGHT_MOBILE = 'h-[68px]'
+// INNER row heights: the bordered row card adds 1px top + bottom, so the
+// outer block totals the designed 68px / 80px.
+const ROW_HEIGHT_DESKTOP = 'h-[66px] md:h-[78px]'
+const ROW_HEIGHT_MOBILE = 'h-[66px]'
 
 /** @deprecated Use `DataTableSkeleton` from `data-table` instead. */
 export function TableCardSkeleton({

package/src/stories/ScrollShadow.stories.tsx

@@ -0,0 +1,132 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { ScrollShadow } from '../components/ui/scroll-fade';
+
+const meta = {
+  title: 'UI/ScrollShadow',
+  component: ScrollShadow,
+  argTypes: {
+    axis: {
+      control: 'select',
+      options: ['vertical', 'horizontal', 'both'],
+    },
+    color: { control: 'text' },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Wrapper that makes its child scrollable and fades the edges where more content exists. ' +
+          'The fade color defaults to the page background token and is theme-aware; pass a card/light ' +
+          'surface color when the scrollable sits on another surface.',
+      },
+    },
+  },
+} satisfies Meta<typeof ScrollShadow>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const COLUMNS = ['HOSTNAME', 'PID', 'NAME', 'PATH', 'STATE', 'UID', 'RESIDENT', 'THREADS', 'START TIME'];
+
+const WideTable = () => (
+  <div className="w-max min-w-full">
+    <div className="flex px-[var(--spacing-system-mf)] gap-[var(--spacing-system-mf)]">
+      {COLUMNS.map(col => (
+        <div key={col} className="flex h-12 w-[160px] shrink-0 items-center">
+          <span className="text-h5 text-ods-text-secondary uppercase">{col}</span>
+        </div>
+      ))}
+    </div>
+    {[1, 2, 3].map(row => (
+      <div key={row} className="rounded-md bg-ods-card border border-ods-border overflow-hidden mb-[var(--spacing-system-xsf)]">
+        <div className="flex h-[78px] items-center px-[var(--spacing-system-mf)] gap-[var(--spacing-system-mf)]">
+          {COLUMNS.map(col => (
+            <div key={col} className="w-[160px] shrink-0">
+              <span className="text-h4 text-ods-text-primary truncate">
+                {col.toLowerCase()}-{row}
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+    ))}
+  </div>
+);
+
+/** Wide table: right fade on load, left fade appears once scrolled. */
+export const HorizontalTable: Story = {
+  args: {
+    axis: 'horizontal',
+    children: <WideTable />,
+  },
+  render: args => (
+    <div className="max-w-[720px] bg-ods-bg p-[var(--spacing-system-mf)]">
+      <ScrollShadow {...args} />
+    </div>
+  ),
+};
+
+const LongList = () => (
+  <div className="flex flex-col gap-[var(--spacing-system-xsf)] p-[var(--spacing-system-mf)]">
+    {Array.from({ length: 20 }).map((_, i) => (
+      <div key={i} className="rounded-md bg-ods-card border border-ods-border p-[var(--spacing-system-mf)]">
+        <span className="text-h4 text-ods-text-primary">Message {i + 1}</span>
+      </div>
+    ))}
+  </div>
+);
+
+/** Long list: bottom fade on load, top fade appears once scrolled down. */
+export const VerticalList: Story = {
+  args: {
+    axis: 'vertical',
+    children: <LongList />,
+    scrollClassName: 'h-[320px]',
+  },
+  render: args => (
+    <div className="max-w-[480px] bg-ods-bg">
+      <ScrollShadow {...args} />
+    </div>
+  ),
+};
+
+/**
+ * Light-surface usage (e.g. ChatMessageList themes): pass the surface color
+ * the content sits on — with theme-aware tokens the same prop value works in
+ * both themes; a literal color is shown here to make the story self-contained.
+ */
+export const LightSurface: Story = {
+  args: {
+    axis: 'vertical',
+    color: '#ffffff',
+    children: (
+      <div className="flex flex-col gap-2 p-4">
+        {Array.from({ length: 20 }).map((_, i) => (
+          <div key={i} className="rounded-md border border-gray-200 bg-gray-50 p-4">
+            <span className="text-gray-900">Light message {i + 1}</span>
+          </div>
+        ))}
+      </div>
+    ),
+    scrollClassName: 'h-[320px]',
+  },
+  render: args => (
+    <div className="max-w-[480px] bg-white rounded-md">
+      <ScrollShadow {...args} />
+    </div>
+  ),
+};
+
+/** Both axes at once. */
+export const BothAxes: Story = {
+  args: {
+    axis: 'both',
+    children: <WideTable />,
+    scrollClassName: 'h-[200px]',
+  },
+  render: args => (
+    <div className="max-w-[720px] bg-ods-bg p-[var(--spacing-system-mf)]">
+      <ScrollShadow {...args} />
+    </div>
+  ),
+};