@sovereignfs/ui 0.41.0 → 0.54.0

package/src/components/Resizable/Resizable.tsx

@@ -0,0 +1,313 @@
+'use client';
+
+import { Children, isValidElement, useEffect, useRef, useState } from 'react';
+import type {
+  CSSProperties,
+  KeyboardEvent as ReactKeyboardEvent,
+  PointerEvent as ReactPointerEvent,
+  ReactElement,
+  ReactNode,
+} from 'react';
+import styles from './Resizable.module.css';
+
+export type ResizableDirection = 'horizontal' | 'vertical';
+
+export interface ResizablePanelProps {
+  /** Initial size as a percentage of the group's main axis. Defaults to an
+   * equal split across all panels in the group. */
+  defaultSize?: number;
+  /** Minimum size as a percentage. Defaults to 10. */
+  minSize?: number;
+  /** Maximum size as a percentage. Defaults to 90. */
+  maxSize?: number;
+  children?: ReactNode;
+  className?: string;
+  /** Injected by ResizablePanelGroup — not part of the public API. */
+  style?: CSSProperties;
+}
+
+/** One pane of a ResizablePanelGroup. Sizing is computed and injected by the
+ * group (via defaultSize/minSize/maxSize read off this element's props) —
+ * this component only renders the scrollable content box. */
+export function ResizablePanel({ children, className, style }: ResizablePanelProps) {
+  return (
+    <div className={[styles.panel, className].filter(Boolean).join(' ')} style={style}>
+      {children}
+    </div>
+  );
+}
+
+export interface ResizableHandleProps {
+  'aria-label'?: string;
+  /** Injected by ResizablePanelGroup — not part of the public API. */
+  direction?: ResizableDirection;
+  onPointerDown?: (e: ReactPointerEvent<HTMLDivElement>) => void;
+  onKeyDown?: (e: ReactKeyboardEvent<HTMLDivElement>) => void;
+  'aria-valuenow'?: number;
+  'aria-valuemin'?: number;
+  'aria-valuemax'?: number;
+}
+
+/** The draggable divider between two ResizablePanels. Placed directly
+ * between the two ResizablePanel elements it resizes — the group pairs each
+ * handle with its preceding and following panel by position.
+ *
+ * A `div` with `role="separator"` and `tabIndex=0` (the WAI-ARIA "window
+ * splitter" pattern), not a `<button>` — `separator` is a non-interactive
+ * role, and a native button's implicit role can't be overridden to it. */
+export function ResizableHandle({
+  'aria-label': ariaLabel = 'Resize panels',
+  direction = 'horizontal',
+  onPointerDown,
+  onKeyDown,
+  'aria-valuenow': valueNow,
+  'aria-valuemin': valueMin,
+  'aria-valuemax': valueMax,
+}: ResizableHandleProps) {
+  return (
+    /* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/no-noninteractive-tabindex -- WAI-ARIA "window splitter" pattern: a focusable, keyboard-operable separator is the documented exception to role="separator" being non-interactive (https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/). */
+    <div
+      className={[styles.handle, direction === 'vertical' ? styles.handleVertical : '']
+        .filter(Boolean)
+        .join(' ')}
+      role="separator"
+      tabIndex={0}
+      aria-orientation={direction === 'horizontal' ? 'vertical' : 'horizontal'}
+      aria-label={ariaLabel}
+      aria-valuenow={valueNow !== undefined ? Math.round(valueNow) : undefined}
+      aria-valuemin={valueMin}
+      aria-valuemax={valueMax}
+      onPointerDown={onPointerDown}
+      onKeyDown={onKeyDown}
+    />
+    /* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/no-noninteractive-tabindex */
+  );
+}
+
+export interface ResizablePanelGroupProps {
+  direction: ResizableDirection;
+  /** Alternating ResizablePanel / ResizableHandle elements — N panels
+   * separated by N-1 handles. */
+  children: ReactNode;
+  className?: string;
+}
+
+interface PanelConstraint {
+  defaultSize: number;
+  minSize: number;
+  maxSize: number;
+}
+
+const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);
+
+/**
+ * ResizablePanelGroup — a row or column of resizable panes (editor layouts,
+ * multi-pane inspectors). Each handle resizes only its two immediate
+ * neighbor panels (drag redistributes size between them, clamped to both
+ * panels' own min/max, so their combined size is a fixed invariant for the
+ * duration of one drag) — the same handle-local model most resizable-panel
+ * implementations use, rather than redistributing across the whole group.
+ *
+ * Desktop-oriented, like NavigationMenu — a drag handle has no direct touch
+ * equivalent; panels render at their default sizes on touch rather than
+ * attempting a redesign no consumer has asked for yet. For a two-pane
+ * layout that also needs a mobile single-column fallback, use SplitPane
+ * instead.
+ *
+ * `direction="vertical"` needs a definite-height ancestor — percentage
+ * flex-basis on a column's children only resolves against one.
+ */
+export function ResizablePanelGroup({ direction, children, className }: ResizablePanelGroupProps) {
+  const elements = Children.toArray(children).filter(isValidElement) as ReactElement<
+    ResizablePanelProps | ResizableHandleProps
+  >[];
+  const panelCount = elements.filter((el) => el.type === ResizablePanel).length;
+
+  const constraints: PanelConstraint[] = elements
+    .filter((el) => el.type === ResizablePanel)
+    .map((el) => {
+      const props = el.props as ResizablePanelProps;
+      return {
+        defaultSize: props.defaultSize ?? 100 / panelCount,
+        minSize: props.minSize ?? 10,
+        maxSize: props.maxSize ?? 90,
+      };
+    });
+
+  const [sizes, setSizes] = useState<number[]>(() => constraints.map((c) => c.defaultSize));
+
+  // A different set of panels rendered (count changed) — re-derive rather
+  // than keep stale entries. Legal "adjust state during render" pattern;
+  // sizes.length matches constraints.length again on the next render, so
+  // this cannot loop.
+  if (sizes.length !== constraints.length) {
+    setSizes(constraints.map((c) => c.defaultSize));
+  }
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  // Always-latest refs so the window-level pointer listeners (registered
+  // once, see below) never read stale values without needing to be
+  // re-registered on every render.
+  const constraintsRef = useRef(constraints);
+  constraintsRef.current = constraints;
+  const directionRef = useRef(direction);
+  directionRef.current = direction;
+
+  const dragState = useRef<{
+    handleIndex: number;
+    pointerId: number;
+    startPos: number;
+    startA: number;
+    combined: number;
+  } | null>(null);
+
+  function applyResize(handleIndex: number, nextA: number, combined: number) {
+    const a = constraintsRef.current[handleIndex];
+    const b = constraintsRef.current[handleIndex + 1];
+    if (!a || !b) return;
+    const clampedA = clamp(
+      nextA,
+      Math.max(a.minSize, combined - b.maxSize),
+      Math.min(a.maxSize, combined - b.minSize),
+    );
+    setSizes((prev) => {
+      const next = [...prev];
+      next[handleIndex] = clampedA;
+      next[handleIndex + 1] = combined - clampedA;
+      return next;
+    });
+  }
+
+  useEffect(() => {
+    function handlePointerMove(event: globalThis.PointerEvent) {
+      const drag = dragState.current;
+      const rect = containerRef.current?.getBoundingClientRect();
+      if (!drag || !rect || event.pointerId !== drag.pointerId) return;
+      const size = directionRef.current === 'horizontal' ? rect.width : rect.height;
+      if (size === 0) return;
+      const pos = directionRef.current === 'horizontal' ? event.clientX : event.clientY;
+      const deltaPercent = ((pos - drag.startPos) / size) * 100;
+      applyResize(drag.handleIndex, drag.startA + deltaPercent, drag.combined);
+    }
+
+    function stopDragging(event: globalThis.PointerEvent) {
+      if (!dragState.current || event.pointerId !== dragState.current.pointerId) return;
+      dragState.current = null;
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+    }
+
+    window.addEventListener('pointermove', handlePointerMove);
+    window.addEventListener('pointerup', stopDragging);
+    window.addEventListener('pointercancel', stopDragging);
+    return () => {
+      window.removeEventListener('pointermove', handlePointerMove);
+      window.removeEventListener('pointerup', stopDragging);
+      window.removeEventListener('pointercancel', stopDragging);
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+    };
+    // Registered once — handlePointerMove reads live state via refs instead
+    // of closing over props/state that would otherwise need to be deps.
+  }, []);
+
+  function startDragging(handleIndex: number, event: ReactPointerEvent<HTMLDivElement>) {
+    const startA = sizes[handleIndex] ?? 0;
+    const startB = sizes[handleIndex + 1] ?? 0;
+    dragState.current = {
+      handleIndex,
+      pointerId: event.pointerId,
+      startPos: direction === 'horizontal' ? event.clientX : event.clientY,
+      startA,
+      combined: startA + startB,
+    };
+    document.body.style.cursor = direction === 'horizontal' ? 'col-resize' : 'row-resize';
+    document.body.style.userSelect = 'none';
+    event.currentTarget.setPointerCapture(event.pointerId);
+  }
+
+  function resizeWithKeyboard(handleIndex: number, event: ReactKeyboardEvent<HTMLDivElement>) {
+    const step = event.shiftKey ? 10 : 5;
+    const forwardKey = direction === 'horizontal' ? 'ArrowRight' : 'ArrowDown';
+    const backwardKey = direction === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';
+    const sizeA = sizes[handleIndex] ?? 0;
+    const sizeB = sizes[handleIndex + 1] ?? 0;
+    const combined = sizeA + sizeB;
+    if (event.key === forwardKey) {
+      event.preventDefault();
+      applyResize(handleIndex, sizeA + step, combined);
+    } else if (event.key === backwardKey) {
+      event.preventDefault();
+      applyResize(handleIndex, sizeA - step, combined);
+    }
+  }
+
+  let panelIndex = -1;
+  let handleIndex = -1;
+
+  return (
+    <div
+      ref={containerRef}
+      className={[styles.group, direction === 'vertical' ? styles.groupVertical : '', className]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      {elements.map((element, key) => {
+        if (element.type === ResizablePanel) {
+          panelIndex += 1;
+          const size = sizes[panelIndex] ?? constraints[panelIndex]?.defaultSize ?? 0;
+          return (
+            <ResizablePanelClone
+              key={key}
+              element={element as ReactElement<ResizablePanelProps>}
+              flexBasis={size}
+            />
+          );
+        }
+        if (element.type === ResizableHandle) {
+          handleIndex += 1;
+          const index = handleIndex;
+          const constraint = constraints[index];
+          return (
+            <ResizableHandleClone
+              key={key}
+              element={element as ReactElement<ResizableHandleProps>}
+              direction={direction}
+              aria-valuenow={sizes[index]}
+              aria-valuemin={constraint?.minSize}
+              aria-valuemax={constraint?.maxSize}
+              onPointerDown={(e) => startDragging(index, e)}
+              onKeyDown={(e) => resizeWithKeyboard(index, e)}
+            />
+          );
+        }
+        return element;
+      })}
+    </div>
+  );
+}
+
+function ResizablePanelClone({
+  element,
+  flexBasis,
+}: {
+  element: ReactElement<ResizablePanelProps>;
+  flexBasis: number;
+}) {
+  const style: CSSProperties = {
+    ...element.props.style,
+    flexBasis: `${flexBasis}%`,
+    flexGrow: 0,
+    flexShrink: 0,
+  };
+  return <ResizablePanel {...element.props} style={style} />;
+}
+
+function ResizableHandleClone({
+  element,
+  ...injected
+}: {
+  element: ReactElement<ResizableHandleProps>;
+} & ResizableHandleProps) {
+  return <ResizableHandle {...element.props} {...injected} />;
+}

package/src/components/Resizable/__tests__/Resizable.test.tsx

@@ -0,0 +1,128 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it } from 'vitest';
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '../Resizable';
+
+afterEach(cleanup);
+
+describe('ResizablePanelGroup', () => {
+  it('renders each panel and a separator between them', () => {
+    render(
+      <ResizablePanelGroup direction="horizontal">
+        <ResizablePanel>
+          <p>Left</p>
+        </ResizablePanel>
+        <ResizableHandle aria-label="Resize sidebar" />
+        <ResizablePanel>
+          <p>Right</p>
+        </ResizablePanel>
+      </ResizablePanelGroup>,
+    );
+
+    expect(screen.getByText('Left')).toBeDefined();
+    expect(screen.getByText('Right')).toBeDefined();
+    expect(screen.getByRole('separator', { name: 'Resize sidebar' })).toBeDefined();
+  });
+
+  it('splits panels evenly by default', () => {
+    render(
+      <ResizablePanelGroup direction="horizontal">
+        <ResizablePanel>
+          <p>Left</p>
+        </ResizablePanel>
+        <ResizableHandle aria-label="Resize" />
+        <ResizablePanel>
+          <p>Right</p>
+        </ResizablePanel>
+      </ResizablePanelGroup>,
+    );
+
+    const separator = screen.getByRole('separator', { name: 'Resize' });
+    expect(separator.getAttribute('aria-valuenow')).toBe('50');
+  });
+
+  it('resizes the pair of neighboring panels with the keyboard, redistributing their combined size', () => {
+    render(
+      <ResizablePanelGroup direction="horizontal">
+        <ResizablePanel defaultSize={50} minSize={20} maxSize={80}>
+          <p>Left</p>
+        </ResizablePanel>
+        <ResizableHandle aria-label="Resize" />
+        <ResizablePanel defaultSize={50} minSize={20} maxSize={80}>
+          <p>Right</p>
+        </ResizablePanel>
+      </ResizablePanelGroup>,
+    );
+
+    const separator = screen.getByRole('separator', { name: 'Resize' });
+    fireEvent.keyDown(separator, { key: 'ArrowRight' });
+    expect(separator.getAttribute('aria-valuenow')).toBe('55');
+
+    fireEvent.keyDown(separator, { key: 'ArrowLeft', shiftKey: true });
+    expect(separator.getAttribute('aria-valuenow')).toBe('45');
+  });
+
+  it('clamps keyboard resizing to minSize/maxSize', () => {
+    render(
+      <ResizablePanelGroup direction="horizontal">
+        <ResizablePanel defaultSize={50} minSize={45} maxSize={55}>
+          <p>Left</p>
+        </ResizablePanel>
+        <ResizableHandle aria-label="Resize" />
+        <ResizablePanel defaultSize={50} minSize={45} maxSize={55}>
+          <p>Right</p>
+        </ResizablePanel>
+      </ResizablePanelGroup>,
+    );
+
+    const separator = screen.getByRole('separator', { name: 'Resize' });
+    fireEvent.keyDown(separator, { key: 'ArrowRight', shiftKey: true });
+    fireEvent.keyDown(separator, { key: 'ArrowRight', shiftKey: true });
+    fireEvent.keyDown(separator, { key: 'ArrowRight', shiftKey: true });
+    expect(separator.getAttribute('aria-valuenow')).toBe('55');
+  });
+
+  it('only affects the pair of panels adjacent to the handle that moved', () => {
+    render(
+      <ResizablePanelGroup direction="horizontal">
+        <ResizablePanel defaultSize={34}>
+          <p>A</p>
+        </ResizablePanel>
+        <ResizableHandle aria-label="Resize A-B" />
+        <ResizablePanel defaultSize={33}>
+          <p>B</p>
+        </ResizablePanel>
+        <ResizableHandle aria-label="Resize B-C" />
+        <ResizablePanel defaultSize={33}>
+          <p>C</p>
+        </ResizablePanel>
+      </ResizablePanelGroup>,
+    );
+
+    const first = screen.getByRole('separator', { name: 'Resize A-B' });
+    const second = screen.getByRole('separator', { name: 'Resize B-C' });
+    fireEvent.keyDown(first, { key: 'ArrowRight' });
+    expect(second.getAttribute('aria-valuenow')).toBe('28');
+  });
+
+  it('uses ArrowDown/ArrowUp for vertical groups instead of ArrowRight/ArrowLeft', () => {
+    render(
+      <ResizablePanelGroup direction="vertical">
+        <ResizablePanel defaultSize={50}>
+          <p>Top</p>
+        </ResizablePanel>
+        <ResizableHandle aria-label="Resize" />
+        <ResizablePanel defaultSize={50}>
+          <p>Bottom</p>
+        </ResizablePanel>
+      </ResizablePanelGroup>,
+    );
+
+    const separator = screen.getByRole('separator', { name: 'Resize' });
+    expect(separator.getAttribute('aria-orientation')).toBe('horizontal');
+    fireEvent.keyDown(separator, { key: 'ArrowRight' });
+    expect(separator.getAttribute('aria-valuenow')).toBe('50');
+    fireEvent.keyDown(separator, { key: 'ArrowDown' });
+    expect(separator.getAttribute('aria-valuenow')).toBe('55');
+  });
+});

package/src/components/ResponsiveSurface/ResponsiveSurface.tsx

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+import { useResponsiveLayout } from '../../hooks/useResponsiveLayout';
+
+export interface ResponsiveSurfaceProps {
+  web: ReactNode;
+  mobile: ReactNode;
+  breakpointPx?: number;
+}
+
+/**
+ * ResponsiveSurface — thin JSX convenience wrapper around
+ * `useResponsiveLayout` for the common two-tree case: render an entirely
+ * different component tree below the breakpoint, not a CSS squeeze of the
+ * same one. Renders only whichever side is active — the other tree is never
+ * mounted.
+ *
+ * This does not replace a plugin's own shell component (e.g. a
+ * `MobileAwareShell` that also threads plugin-specific props like a refresh
+ * signal) — those stay a thin per-plugin wrapper around this.
+ */
+export function ResponsiveSurface({ web, mobile, breakpointPx }: ResponsiveSurfaceProps) {
+  const { value } = useResponsiveLayout({ web, mobile, breakpointPx });
+  return <>{value}</>;
+}

package/src/components/ResponsiveSurface/__tests__/ResponsiveSurface.test.tsx

@@ -0,0 +1,73 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { act, cleanup, render, screen } from '@testing-library/react';
+import { ResponsiveSurface } from '../ResponsiveSurface';
+
+let changeHandler: ((e: MediaQueryListEvent) => void) | null = null;
+let matches = false;
+
+function installMatchMedia() {
+  changeHandler = null;
+  vi.stubGlobal(
+    'matchMedia',
+    vi.fn().mockImplementation((query: string) => ({
+      matches,
+      media: query,
+      addEventListener: (_: string, cb: (e: MediaQueryListEvent) => void) => {
+        changeHandler = cb;
+      },
+      removeEventListener: vi.fn(),
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    })),
+  );
+}
+
+describe('ResponsiveSurface', () => {
+  beforeEach(() => {
+    matches = false;
+    installMatchMedia();
+  });
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    cleanup();
+  });
+
+  it('renders the web tree by default and never mounts the mobile tree', () => {
+    render(
+      <ResponsiveSurface
+        web={<div data-testid="web">web</div>}
+        mobile={<div data-testid="mobile">mobile</div>}
+      />,
+    );
+    expect(screen.getByTestId('web')).toBeDefined();
+    expect(screen.queryByTestId('mobile')).toBeNull();
+  });
+
+  it('renders only the mobile tree below the breakpoint', () => {
+    matches = true;
+    installMatchMedia();
+    render(
+      <ResponsiveSurface
+        web={<div data-testid="web">web</div>}
+        mobile={<div data-testid="mobile">mobile</div>}
+      />,
+    );
+    expect(screen.getByTestId('mobile')).toBeDefined();
+    expect(screen.queryByTestId('web')).toBeNull();
+  });
+
+  it('swaps trees live when the viewport crosses the breakpoint', () => {
+    render(
+      <ResponsiveSurface
+        web={<div data-testid="web">web</div>}
+        mobile={<div data-testid="mobile">mobile</div>}
+      />,
+    );
+    expect(screen.getByTestId('web')).toBeDefined();
+    act(() => changeHandler?.({ matches: true } as MediaQueryListEvent));
+    expect(screen.getByTestId('mobile')).toBeDefined();
+    expect(screen.queryByTestId('web')).toBeNull();
+  });
+});

package/src/components/ScrollArea/ScrollArea.module.css

@@ -0,0 +1,20 @@
+.root {
+  overflow: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+  scrollbar-color: var(--sv-color-border-strong) transparent;
+}
+
+.root::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.root::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.root::-webkit-scrollbar-thumb {
+  background: var(--sv-color-border-strong);
+  border-radius: var(--sv-radius-full);
+}

package/src/components/ScrollArea/ScrollArea.stories.tsx

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ScrollArea } from './ScrollArea';
+
+const meta = {
+  title: 'Components/ScrollArea',
+  component: ScrollArea,
+  parameters: { layout: 'padded' },
+  args: { children: null },
+} satisfies Meta<typeof ScrollArea>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ---------------------------------------------------------------------------
+
+export const Vertical: Story = {
+  render: () => (
+    <div style={{ width: 280 }}>
+      <ScrollArea maxHeight={160}>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, padding: 4 }}>
+          {Array.from({ length: 20 }, (_, i) => (
+            <div key={i} style={{ fontSize: 14 }}>
+              Row {i + 1}
+            </div>
+          ))}
+        </div>
+      </ScrollArea>
+    </div>
+  ),
+};
+
+export const Horizontal: Story = {
+  render: () => (
+    <ScrollArea maxWidth={320}>
+      <div style={{ display: 'flex', gap: 8, padding: 4, width: 'max-content' }}>
+        {Array.from({ length: 12 }, (_, i) => (
+          <div
+            key={i}
+            style={{
+              width: 80,
+              height: 60,
+              flexShrink: 0,
+              background: 'var(--sv-color-surface-sunken)',
+              borderRadius: 'var(--sv-radius-md)',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              fontSize: 12,
+            }}
+          >
+            {i + 1}
+          </div>
+        ))}
+      </div>
+    </ScrollArea>
+  ),
+};

package/src/components/ScrollArea/ScrollArea.tsx

@@ -0,0 +1,27 @@
+import type { CSSProperties, ReactNode } from 'react';
+import styles from './ScrollArea.module.css';
+
+export interface ScrollAreaProps {
+  children: ReactNode;
+  /** Constrains the scrollable direction; content taller/wider than this scrolls. */
+  maxHeight?: string | number;
+  maxWidth?: string | number;
+  className?: string;
+}
+
+/**
+ * ScrollArea — a styled scrollable container (thin, token-colored scrollbar
+ * instead of the OS default). Native overflow scrolling underneath — no
+ * virtualization, no custom scroll physics.
+ */
+export function ScrollArea({ children, maxHeight, maxWidth, className }: ScrollAreaProps) {
+  const style: CSSProperties = {};
+  if (maxHeight !== undefined) style.maxHeight = maxHeight;
+  if (maxWidth !== undefined) style.maxWidth = maxWidth;
+
+  return (
+    <div className={[styles.root, className].filter(Boolean).join(' ')} style={style}>
+      {children}
+    </div>
+  );
+}

package/src/components/ScrollArea/__tests__/ScrollArea.test.tsx

@@ -0,0 +1,39 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it } from 'vitest';
+import { cleanup, render, screen } from '@testing-library/react';
+import { ScrollArea } from '../ScrollArea';
+
+afterEach(cleanup);
+
+describe('ScrollArea', () => {
+  it('renders children', () => {
+    render(
+      <ScrollArea>
+        <div>content</div>
+      </ScrollArea>,
+    );
+    expect(screen.getByText('content')).toBeDefined();
+  });
+
+  it('applies maxHeight/maxWidth as inline styles when given', () => {
+    render(
+      <ScrollArea maxHeight={200} maxWidth="100%">
+        <div data-testid="child">content</div>
+      </ScrollArea>,
+    );
+    const root = screen.getByTestId('child').parentElement;
+    expect(root?.style.maxHeight).toBe('200px');
+    expect(root?.style.maxWidth).toBe('100%');
+  });
+
+  it('does not set maxHeight/maxWidth styles when omitted', () => {
+    render(
+      <ScrollArea>
+        <div data-testid="child">content</div>
+      </ScrollArea>,
+    );
+    const root = screen.getByTestId('child').parentElement;
+    expect(root?.style.maxHeight).toBe('');
+    expect(root?.style.maxWidth).toBe('');
+  });
+});