@polderlabs/bizar 7.0.4 → 8.1.0

package/bizar-dash/src/web/v8/ui/navigation/Tabs.tsx

@@ -0,0 +1,128 @@
+import { forwardRef, type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import * as RxTabs from '@radix-ui/react-tabs';
+import { cx } from '../utils/cx.js';
+
+/**
+ * Tabs — content switcher with keyboard navigation.
+ *
+ * Built on Radix Tabs (left/right arrow keys, focus management).
+ *
+ * Variants:
+ *   - underline (default): 1px bottom border active indicator.
+ *   - pill: rounded filled active state.
+ */
+
+export type TabsVariant = 'underline' | 'pill';
+
+export interface TabsProps extends Omit<ComponentPropsWithoutRef<typeof RxTabs.Root>, 'children'> {
+  variant?: TabsVariant;
+  children: ReactNode;
+}
+
+export const Tabs = forwardRef<HTMLDivElement, TabsProps>(function Tabs(props, ref) {
+  const { variant = 'underline', className, ...rest } = props;
+  return (
+    <RxTabs.Root
+      ref={ref}
+      className={cx('v8-tabs', `v8-tabs--${variant}`, className)}
+      {...rest}
+    />
+  );
+});
+
+export interface TabsListProps extends ComponentPropsWithoutRef<typeof RxTabs.List> {
+  variant?: TabsVariant;
+  children: ReactNode;
+}
+
+export const TabsList = forwardRef<HTMLDivElement, TabsListProps>(function TabsList(props, ref) {
+  const { variant = 'underline', className, style, ...rest } = props;
+  return (
+    <RxTabs.List
+      ref={ref}
+      className={cx('v8-tabs__list', className)}
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: variant === 'pill' ? 4 : 0,
+        borderBottom: variant === 'underline' ? '1px solid var(--border)' : 'none',
+        padding: variant === 'pill' ? 4 : 0,
+        background: variant === 'pill' ? 'var(--surface-1)' : 'transparent',
+        borderRadius: variant === 'pill' ? 'var(--radius)' : 0,
+        border: variant === 'pill' ? '1px solid var(--border)' : undefined,
+        ...style,
+      }}
+      {...rest}
+    />
+  );
+});
+
+export interface TabsTriggerProps extends ComponentPropsWithoutRef<typeof RxTabs.Trigger> {
+  variant?: TabsVariant;
+  children: ReactNode;
+}
+
+export const TabsTrigger = forwardRef<HTMLButtonElement, TabsTriggerProps>(function TabsTrigger(
+  props,
+  ref,
+) {
+  const { variant = 'underline', className, style, ...rest } = props;
+  return (
+    <RxTabs.Trigger
+      ref={ref}
+      className={cx('v8-tabs__trigger', className)}
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 'var(--space-2)',
+        height: variant === 'pill' ? 28 : 32,
+        padding: variant === 'pill' ? '0 var(--space-3)' : '0 var(--space-3)',
+        background: 'transparent',
+        color: 'var(--fg-muted)',
+        border: 0,
+        borderBottom: variant === 'underline' ? '2px solid transparent' : 'none',
+        borderRadius: variant === 'pill' ? 'var(--radius-sm)' : 0,
+        marginBottom: variant === 'underline' ? -1 : 0,
+        fontSize: 'var(--fs-13)',
+        fontWeight: 500,
+        cursor: 'pointer',
+        fontFamily: 'inherit',
+        transition: 'color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-out)',
+        ...style,
+      }}
+      {...rest}
+    >
+      {props.children}
+      <style>{`
+        .v8-tabs__trigger[data-state='active'] {
+          color: var(--fg);
+        }
+        .v8-tabs--underline .v8-tabs__trigger[data-state='active'] {
+          border-bottom-color: var(--accent);
+        }
+        .v8-tabs--pill .v8-tabs__trigger[data-state='active'] {
+          background: var(--surface-2);
+          color: var(--fg);
+        }
+        .v8-tabs__trigger:hover:not([data-state='active']) {
+          color: var(--fg);
+        }
+      `}</style>
+    </RxTabs.Trigger>
+  );
+});
+
+export const TabsContent = forwardRef<
+  HTMLDivElement,
+  ComponentPropsWithoutRef<typeof RxTabs.Content>
+>(function TabsContent(props, ref) {
+  const { className, ...rest } = props;
+  return (
+    <RxTabs.Content
+      ref={ref}
+      className={cx('v8-tabs__content', className)}
+      style={{ paddingTop: 'var(--space-4)' }}
+      {...rest}
+    />
+  );
+});

package/bizar-dash/src/web/v8/ui/navigation/useCommandPaletteHotkey.test.ts

@@ -0,0 +1,79 @@
+import { describe, expect, it, vi } from 'vitest';
+import { act, renderHook } from '@testing-library/react';
+import { useCommandPaletteHotkey } from './CommandPalette.js';
+
+/**
+ * useCommandPaletteHotkey — wires ⌘K / Ctrl+K to toggle the palette.
+ *
+ * These tests directly exercise the hook (no DOM mount required). The hook
+ * attaches a window keydown listener on mount and removes it on unmount.
+ */
+
+describe('useCommandPaletteHotkey', () => {
+  it('starts closed', () => {
+    const { result } = renderHook(() => useCommandPaletteHotkey());
+    expect(result.current[0]).toBe(false);
+  });
+
+  it('opens when Meta+K is pressed', () => {
+    const { result } = renderHook(() => useCommandPaletteHotkey());
+    act(() => {
+      window.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true }));
+    });
+    expect(result.current[0]).toBe(true);
+  });
+
+  it('opens when Ctrl+K is pressed', () => {
+    const { result } = renderHook(() => useCommandPaletteHotkey());
+    act(() => {
+      window.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', ctrlKey: true }));
+    });
+    expect(result.current[0]).toBe(true);
+  });
+
+  it('toggles on a second ⌘K press', () => {
+    const { result } = renderHook(() => useCommandPaletteHotkey());
+    act(() => {
+      window.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true }));
+    });
+    expect(result.current[0]).toBe(true);
+    act(() => {
+      window.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true }));
+    });
+    expect(result.current[0]).toBe(false);
+  });
+
+  it('closes on Escape', () => {
+    const { result } = renderHook(() => useCommandPaletteHotkey());
+    act(() => {
+      window.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true }));
+    });
+    expect(result.current[0]).toBe(true);
+    act(() => {
+      window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+    });
+    expect(result.current[0]).toBe(false);
+  });
+
+  it('ignores K without Meta/Ctrl', () => {
+    const { result } = renderHook(() => useCommandPaletteHotkey());
+    act(() => {
+      window.dispatchEvent(new KeyboardEvent('keydown', { key: 'k' }));
+    });
+    expect(result.current[0]).toBe(false);
+  });
+
+  it('exposes a setter that can toggle externally', () => {
+    const { result } = renderHook(() => useCommandPaletteHotkey());
+    const [, setOpen] = result.current;
+    act(() => setOpen(true));
+    expect(result.current[0]).toBe(true);
+  });
+
+  it('removes its listener on unmount', () => {
+    const removeSpy = vi.spyOn(window, 'removeEventListener');
+    const { unmount } = renderHook(() => useCommandPaletteHotkey());
+    unmount();
+    expect(removeSpy).toHaveBeenCalledWith('keydown', expect.any(Function));
+  });
+});

package/bizar-dash/src/web/v8/ui/primitives/Box.tsx

@@ -0,0 +1,144 @@
+import { forwardRef, type ElementType, type HTMLAttributes, type ReactNode } from 'react';
+import { cx } from '../utils/cx.js';
+
+/**
+ * Box — the foundational layout primitive.
+ *
+ * A polymorphic `<div>` (or any element) that exposes design-token-driven
+ * style props. Used everywhere a layout-only container is needed so we
+ * never reach for raw className soup at call sites.
+ *
+ * Why polymorphic: lots of v8 surfaces (cards, alerts, banners) need to be
+ * a `<section>` / `<article>` / `<aside>` semantically while sharing layout.
+ */
+
+export type BoxStyleProps = {
+  /** Padding — uses --space-* tokens via inline mapping. */
+  p?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16;
+  px?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16;
+  py?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16;
+  pt?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16;
+  pb?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16;
+  pl?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16;
+  pr?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16;
+
+  /** Background — token name. */
+  bg?: 'bg' | 'surface-1' | 'surface-2' | 'surface-3' | 'surface-popover' | 'accent' | 'accent-soft' | 'transparent';
+
+  /** Border — token name (color) + optional width (defaults to 1px). */
+  border?: boolean;
+  borderColor?: 'border' | 'border-strong' | 'accent' | 'transparent';
+
+  /** Radius — token name. */
+  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'pill';
+
+  /** Shadow — token name. */
+  shadow?: 'none' | '1' | '2' | '3' | '4';
+
+  /** Inline-flex helpers for icon rows, badges, etc. */
+  inline?: boolean;
+  display?: 'block' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'none';
+};
+
+const SPACE_VAR: Record<NonNullable<BoxStyleProps['p']>, string> = {
+  0: 'var(--space-0, 0)',
+  1: 'var(--space-1)',
+  2: 'var(--space-2)',
+  3: 'var(--space-3)',
+  4: 'var(--space-4)',
+  5: 'var(--space-5)',
+  6: 'var(--space-6)',
+  8: 'var(--space-8)',
+  10: 'var(--space-10)',
+  12: 'var(--space-12)',
+  16: 'var(--space-16)',
+};
+
+function pad(value: BoxStyleProps['p']): string | undefined {
+  if (value === undefined) return undefined;
+  return SPACE_VAR[value];
+}
+
+const RADIUS_VAR: Record<NonNullable<BoxStyleProps['rounded']>, string> = {
+  none: '0',
+  sm: 'var(--radius-sm)',
+  md: 'var(--radius)',
+  lg: 'var(--radius-lg)',
+  pill: 'var(--radius-pill)',
+};
+
+const SHADOW_VAR: Record<NonNullable<BoxStyleProps['shadow']>, string> = {
+  none: 'none',
+  '1': 'var(--shadow-1)',
+  '2': 'var(--shadow-2)',
+  '3': 'var(--shadow-3)',
+  '4': 'var(--shadow-4)',
+};
+
+export type BoxProps = BoxStyleProps &
+  Omit<HTMLAttributes<HTMLElement>, 'color'> & {
+    as?: ElementType;
+    children?: ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+  };
+
+export const Box = forwardRef<HTMLElement, BoxProps>(function Box(props, ref) {
+  const {
+    as,
+    p,
+    px,
+    py,
+    pt,
+    pb,
+    pl,
+    pr,
+    bg,
+    border,
+    borderColor,
+    rounded,
+    shadow,
+    inline,
+    display,
+    className,
+    style,
+    children,
+    ...rest
+  } = props;
+
+  const Tag = (as ?? 'div') as ElementType;
+
+  const computedStyle: React.CSSProperties = { ...style };
+  if (p !== undefined) computedStyle.padding = SPACE_VAR[p];
+  if (px !== undefined) {
+    computedStyle.paddingLeft = SPACE_VAR[px];
+    computedStyle.paddingRight = SPACE_VAR[px];
+  }
+  if (py !== undefined) {
+    computedStyle.paddingTop = SPACE_VAR[py];
+    computedStyle.paddingBottom = SPACE_VAR[py];
+  }
+  if (pt !== undefined) computedStyle.paddingTop = SPACE_VAR[pt];
+  if (pb !== undefined) computedStyle.paddingBottom = SPACE_VAR[pb];
+  if (pl !== undefined) computedStyle.paddingLeft = SPACE_VAR[pl];
+  if (pr !== undefined) computedStyle.paddingRight = SPACE_VAR[pr];
+
+  if (bg !== undefined && bg !== 'transparent') {
+    computedStyle.background = `var(--${bg})`;
+  }
+  if (border) {
+    computedStyle.borderWidth = '1px';
+    computedStyle.borderStyle = 'solid';
+    computedStyle.borderColor = `var(--${borderColor ?? 'border'})`;
+  }
+  if (rounded !== undefined) computedStyle.borderRadius = RADIUS_VAR[rounded];
+  if (shadow !== undefined) computedStyle.boxShadow = SHADOW_VAR[shadow];
+  if (display !== undefined) computedStyle.display = display;
+  else if (inline) computedStyle.display = 'inline-flex';
+
+  return (
+    <Tag ref={ref} className={cx('v8-box', className)} style={computedStyle} {...rest}>
+      {children}
+    </Tag>
+  );
+});

package/bizar-dash/src/web/v8/ui/primitives/Center.tsx

@@ -0,0 +1,40 @@
+import { forwardRef, type CSSProperties, type ElementType, type HTMLAttributes, type ReactNode } from 'react';
+import { cx } from '../utils/cx.js';
+
+/**
+ * Center — centers its children both horizontally and vertically.
+ *
+ * Use for splash screens, loading states, modal bodies when there is a
+ * single child to center. For full-viewport centering, set `full`.
+ */
+export interface CenterProps extends HTMLAttributes<HTMLElement> {
+  as?: ElementType;
+  /** When true, fills its parent and centers a child inside it. */
+  full?: boolean;
+  /** Center along main axis only (justifyContent). */
+  inline?: boolean;
+  /** Disable vertical centering (e.g. only horizontal). */
+  noVertical?: boolean;
+  children?: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+}
+
+export const Center = forwardRef<HTMLElement, CenterProps>(function Center(props, ref) {
+  const { as, full, inline, noVertical, children, className, style, ...rest } = props;
+
+  const Tag = (as ?? 'div') as ElementType;
+  const computedStyle: CSSProperties = {
+    display: inline ? 'inline-flex' : 'flex',
+    alignItems: noVertical ? 'stretch' : 'center',
+    justifyContent: 'center',
+    ...(full && { width: '100%', height: '100%' }),
+    ...style,
+  };
+
+  return (
+    <Tag ref={ref} className={cx('v8-center', className)} style={computedStyle} {...rest}>
+      {children}
+    </Tag>
+  );
+});

package/bizar-dash/src/web/v8/ui/primitives/Cluster.tsx

@@ -0,0 +1,67 @@
+import { forwardRef, type ElementType, type HTMLAttributes, type ReactNode } from 'react';
+import { cx } from '../utils/cx.js';
+
+/**
+ * Cluster — a wrapping row with token-driven gap.
+ *
+ * For tag/chip rows, breadcrumb stacks, button toolbars that wrap.
+ * Identical to Inline but always wraps (so the "wrap" prop is implicit).
+ */
+export interface ClusterProps extends HTMLAttributes<HTMLElement> {
+  as?: ElementType;
+  gap?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16;
+  align?: 'start' | 'center' | 'end' | 'baseline' | 'stretch';
+  justify?: 'start' | 'center' | 'end' | 'between' | 'around';
+  children?: ReactNode;
+  className?: string;
+}
+
+const SPACE_VAR: Record<NonNullable<ClusterProps['gap']>, string> = {
+  0: '0',
+  1: 'var(--space-1)',
+  2: 'var(--space-2)',
+  3: 'var(--space-3)',
+  4: 'var(--space-4)',
+  5: 'var(--space-5)',
+  6: 'var(--space-6)',
+  8: 'var(--space-8)',
+  10: 'var(--space-10)',
+  12: 'var(--space-12)',
+  16: 'var(--space-16)',
+};
+
+const ALIGN_MAP = {
+  start: 'flex-start',
+  center: 'center',
+  end: 'flex-end',
+  baseline: 'baseline',
+  stretch: 'stretch',
+} as const;
+const JUSTIFY_MAP = {
+  start: 'flex-start',
+  center: 'center',
+  end: 'flex-end',
+  between: 'space-between',
+  around: 'space-around',
+} as const;
+
+export const Cluster = forwardRef<HTMLElement, ClusterProps>(function Cluster(props, ref) {
+  const { as, gap = 2, align, justify, children, className, style, ...rest } = props;
+
+  const Tag = (as ?? 'div') as ElementType;
+  const computedStyle: React.CSSProperties = {
+    display: 'flex',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: SPACE_VAR[gap],
+    ...(align !== undefined && { alignItems: ALIGN_MAP[align] }),
+    ...(justify !== undefined && { justifyContent: JUSTIFY_MAP[justify] }),
+    ...style,
+  };
+
+  return (
+    <Tag ref={ref} className={cx('v8-cluster', className)} style={computedStyle} {...rest}>
+      {children}
+    </Tag>
+  );
+});

package/bizar-dash/src/web/v8/ui/primitives/Grid.tsx

@@ -0,0 +1,104 @@
+import { forwardRef, type CSSProperties, type ElementType, type HTMLAttributes, type ReactNode } from 'react';
+import { cx } from '../utils/cx.js';
+
+/**
+ * Grid — CSS grid wrapper with token-driven gap and template columns.
+ *
+ * For responsive grids: pass `cols` as an object { base, sm, md, lg }.
+ * Otherwise pass a single number (1..12) for a uniform grid.
+ */
+export type GridCols =
+  | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 12
+  | { base?: number; sm?: number; md?: number; lg?: number; xl?: number };
+
+export interface GridProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+  as?: ElementType;
+  gap?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16;
+  rowGap?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16;
+  colGap?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16;
+  cols?: GridCols;
+  rows?: 1 | 2 | 3 | 4;
+  autoFlow?: 'row' | 'column' | 'dense';
+  align?: 'start' | 'center' | 'end' | 'stretch';
+  justify?: 'start' | 'center' | 'end' | 'stretch';
+  children?: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+}
+
+const SPACE_VAR: Record<NonNullable<GridProps['gap']>, string> = {
+  0: '0',
+  1: 'var(--space-1)',
+  2: 'var(--space-2)',
+  3: 'var(--space-3)',
+  4: 'var(--space-4)',
+  5: 'var(--space-5)',
+  6: 'var(--space-6)',
+  8: 'var(--space-8)',
+  10: 'var(--space-10)',
+  12: 'var(--space-12)',
+  16: 'var(--space-16)',
+};
+
+const COLS_VAR: Record<number, string> = {
+  1: 'repeat(1, minmax(0, 1fr))',
+  2: 'repeat(2, minmax(0, 1fr))',
+  3: 'repeat(3, minmax(0, 1fr))',
+  4: 'repeat(4, minmax(0, 1fr))',
+  5: 'repeat(5, minmax(0, 1fr))',
+  6: 'repeat(6, minmax(0, 1fr))',
+  8: 'repeat(8, minmax(0, 1fr))',
+  12: 'repeat(12, minmax(0, 1fr))',
+};
+
+function colsToStyle(cols: GridCols | undefined): CSSProperties {
+  if (cols === undefined) return {};
+  if (typeof cols === 'number') return { gridTemplateColumns: COLS_VAR[cols] };
+  // Responsive object — apply base as the default gridTemplateColumns; the
+  // breakpoint variants should be handled by the parent component or a
+  // generated class. We export the base here; responsive overrides can
+  // compose via additional style overrides at the call site.
+  const base = cols.base ?? 1;
+  return { gridTemplateColumns: COLS_VAR[base] };
+}
+
+const ALIGN_MAP = { start: 'start', center: 'center', end: 'end', stretch: 'stretch' } as const;
+const JUSTIFY_MAP = { start: 'start', center: 'center', end: 'end', stretch: 'stretch' } as const;
+
+export const Grid = forwardRef<HTMLElement, GridProps>(function Grid(props, ref) {
+  const {
+    as,
+    gap = 4,
+    rowGap,
+    colGap,
+    cols,
+    rows,
+    autoFlow,
+    align,
+    justify,
+    children,
+    className,
+    style,
+    ...rest
+  } = props;
+
+  const Tag = (as ?? 'div') as ElementType;
+  const computedStyle: CSSProperties = {
+    display: 'grid',
+    gap: SPACE_VAR[gap],
+    ...(rowGap !== undefined && { rowGap: SPACE_VAR[rowGap] }),
+    ...(colGap !== undefined && { columnGap: SPACE_VAR[colGap] }),
+    ...colsToStyle(cols),
+    ...(rows !== undefined && { gridTemplateRows: `repeat(${rows}, minmax(0, 1fr))` }),
+    ...(autoFlow !== undefined && { gridAutoFlow: autoFlow }),
+    ...(align !== undefined && { alignItems: ALIGN_MAP[align] }),
+    ...(justify !== undefined && { justifyItems: JUSTIFY_MAP[justify] }),
+    ...style,
+  };
+
+  return (
+    <Tag ref={ref} className={cx('v8-grid', className)} style={computedStyle} {...rest}>
+      {children}
+    </Tag>
+  );
+});

package/bizar-dash/src/web/v8/ui/primitives/Inline.tsx

@@ -0,0 +1,77 @@
+import { forwardRef, type ElementType, type HTMLAttributes, type ReactNode } from 'react';
+import { cx } from '../utils/cx.js';
+
+/**
+ * Inline — horizontal flexbox row with token-driven gap.
+ *
+ * Use for icon rows, button groups, breadcrumbs. For wrapping use Cluster.
+ */
+export interface InlineProps extends HTMLAttributes<HTMLElement> {
+  as?: ElementType;
+  gap?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16;
+  align?: 'start' | 'center' | 'end' | 'baseline' | 'stretch';
+  justify?: 'start' | 'center' | 'end' | 'between' | 'around';
+  wrap?: boolean;
+  children?: ReactNode;
+  className?: string;
+}
+
+const SPACE_VAR: Record<NonNullable<InlineProps['gap']>, string> = {
+  0: '0',
+  1: 'var(--space-1)',
+  2: 'var(--space-2)',
+  3: 'var(--space-3)',
+  4: 'var(--space-4)',
+  5: 'var(--space-5)',
+  6: 'var(--space-6)',
+  8: 'var(--space-8)',
+  10: 'var(--space-10)',
+  12: 'var(--space-12)',
+  16: 'var(--space-16)',
+};
+
+const ALIGN_MAP = {
+  start: 'flex-start',
+  center: 'center',
+  end: 'flex-end',
+  baseline: 'baseline',
+  stretch: 'stretch',
+} as const;
+const JUSTIFY_MAP = {
+  start: 'flex-start',
+  center: 'center',
+  end: 'flex-end',
+  between: 'space-between',
+  around: 'space-around',
+} as const;
+
+export const Inline = forwardRef<HTMLElement, InlineProps>(function Inline(props, ref) {
+  const {
+    as,
+    gap = 2,
+    align,
+    justify,
+    wrap,
+    children,
+    className,
+    style,
+    ...rest
+  } = props;
+
+  const Tag = (as ?? 'div') as ElementType;
+  const computedStyle: React.CSSProperties = {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: SPACE_VAR[gap],
+    ...(align !== undefined && { alignItems: ALIGN_MAP[align] }),
+    ...(justify !== undefined && { justifyContent: JUSTIFY_MAP[justify] }),
+    ...(wrap && { flexWrap: 'wrap' }),
+    ...style,
+  };
+
+  return (
+    <Tag ref={ref} className={cx('v8-inline', className)} style={computedStyle} {...rest}>
+      {children}
+    </Tag>
+  );
+});

package/bizar-dash/src/web/v8/ui/primitives/Portal.tsx

@@ -0,0 +1,33 @@
+import { useEffect, useState, type ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+
+/**
+ * Portal — render children into document.body.
+ *
+ * The v8 app uses Radix UI for most popups, but for some app-level surfaces
+ * (e.g. the live Cmd+K command palette's focus trap fallback) we still need
+ * a thin portal wrapper. This is that wrapper.
+ *
+ * SSR-safe: returns null on the server. Re-renders the portal after mount.
+ */
+export interface PortalProps {
+  children: ReactNode;
+  /** Override the container. Defaults to document.body. */
+  container?: HTMLElement | null;
+}
+
+export function Portal({ children, container }: PortalProps): JSX.Element | null {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) return null;
+  if (typeof document === 'undefined') return null;
+
+  const target = container ?? document.body;
+  if (target === null) return null;
+
+  return createPortal(children, target);
+}