@polderlabs/bizar 7.0.4 → 8.1.0

package/bizar-dash/src/web/v8/ui/data/Table.tsx

@@ -0,0 +1,170 @@
+import { forwardRef, type HTMLAttributes, type ReactNode, type ThHTMLAttributes, type TdHTMLAttributes } from 'react';
+import { cx } from '../utils/cx.js';
+
+/**
+ * Table — semantic data table primitives.
+ *
+ * This is a thin wrapper around native <table> elements, providing the
+ * v8 token-driven visuals. For sorting / pagination / virtualization,
+ * wrap with TanStack Table at the call site (Sprint S3 follow-up).
+ */
+
+export interface TableProps extends HTMLAttributes<HTMLTableElement> {
+  children: ReactNode;
+  /** Compact row height (default comfortable = 36px). */
+  density?: 'comfortable' | 'compact';
+}
+
+export const Table = forwardRef<HTMLTableElement, TableProps>(function Table(props, ref) {
+  const { children, density = 'comfortable', className, ...rest } = props;
+  return (
+    <div
+      style={{
+        border: '1px solid var(--border)',
+        borderRadius: 'var(--radius-lg)',
+        overflow: 'hidden',
+        background: 'var(--surface-1)',
+      }}
+    >
+      <table
+        ref={ref}
+        className={cx('v8-table', `v8-table--${density}`, className)}
+        style={{
+          width: '100%',
+          borderCollapse: 'separate',
+          borderSpacing: 0,
+          fontSize: 'var(--fs-13)',
+          color: 'var(--fg)',
+        }}
+        {...rest}
+      >
+        {children}
+      </table>
+    </div>
+  );
+});
+
+export interface TableHeadProps extends HTMLAttributes<HTMLTableSectionElement> {
+  children: ReactNode;
+}
+
+export const TableHead = forwardRef<HTMLTableSectionElement, TableHeadProps>(function TableHead(
+  props,
+  ref,
+) {
+  const { children, ...rest } = props;
+  return (
+    <thead
+      ref={ref}
+      style={{
+        background: 'var(--surface-0)',
+        borderBottom: '1px solid var(--border)',
+        textAlign: 'left',
+        fontSize: 'var(--fs-12)',
+        fontWeight: 600,
+        color: 'var(--fg-muted)',
+        textTransform: 'uppercase',
+        letterSpacing: 'var(--tracking-wide)',
+      }}
+      {...rest}
+    >
+      {children}
+    </thead>
+  );
+});
+
+export interface TableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {
+  children: ReactNode;
+}
+
+export const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(function TableBody(
+  props,
+  ref,
+) {
+  return <tbody ref={ref} {...props} />;
+});
+
+export interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
+  /** Highlight the row (e.g. selected). */
+  selected?: boolean;
+  /** Stripe the row background. */
+  striped?: boolean;
+}
+
+export const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(function TableRow(
+  props,
+  ref,
+) {
+  const { selected, striped, className, style, ...rest } = props;
+  return (
+    <tr
+      ref={ref}
+      className={cx('v8-table__row', selected && 'is-selected', className)}
+      style={{
+        background: selected === true
+          ? 'var(--accent-soft)'
+          : striped === true
+            ? 'var(--surface-0)'
+            : 'transparent',
+        borderBottom: '1px solid var(--border)',
+        transition: 'background var(--motion-fast) var(--ease-out)',
+        ...style,
+      }}
+      {...rest}
+    />
+  );
+});
+
+export interface TableHeaderProps extends ThHTMLAttributes<HTMLTableCellElement> {
+  /** Right-align numeric columns. */
+  align?: 'left' | 'right' | 'center';
+  /** Width constraint. */
+  width?: number | string;
+}
+
+export const TableHeader = forwardRef<HTMLTableCellElement, TableHeaderProps>(function TableHeader(
+  props,
+  ref,
+) {
+  const { align = 'left', width, className, style, ...rest } = props;
+  return (
+    <th
+      ref={ref}
+      className={cx('v8-table__th', className)}
+      style={{
+        padding: 'var(--space-2) var(--space-3)',
+        textAlign: align,
+        width,
+        ...style,
+      }}
+      {...rest}
+    />
+  );
+});
+
+export interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
+  align?: 'left' | 'right' | 'center';
+  /** Use the density-row-h height token (default true). */
+  rowHeight?: boolean;
+}
+
+export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(function TableCell(
+  props,
+  ref,
+) {
+  const { align = 'left', rowHeight = true, className, style, ...rest } = props;
+  return (
+    <td
+      ref={ref}
+      className={cx('v8-table__td', className)}
+      style={{
+        padding: 'var(--space-2) var(--space-3)',
+        textAlign: align,
+        height: rowHeight === true ? 'var(--density-row-h)' : undefined,
+        verticalAlign: 'middle',
+        ...style,
+      }}
+      {...rest}
+    />
+  );
+});

package/bizar-dash/src/web/v8/ui/data/Timeline.tsx

@@ -0,0 +1,130 @@
+import { forwardRef, type OlHTMLAttributes, type ReactNode } from 'react';
+import { cx } from '../utils/cx.js';
+
+/**
+ * Timeline — vertical event feed (activity, runs, comments).
+ *
+ * Each item is a dot on a vertical rail + body to the right. Use inside
+ * Activity view, Agent detail, or anywhere you'd reach for a feed.
+ */
+
+export interface TimelineItem {
+  id: string;
+  /** Optional leading icon/avatar (rendered inside the dot). */
+  icon?: ReactNode;
+  /** Tone color for the dot. */
+  tone?: 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'accent';
+  title: ReactNode;
+  description?: ReactNode;
+  /** Right-aligned timestamp / metadata. */
+  meta?: ReactNode;
+}
+
+export interface TimelineProps extends OlHTMLAttributes<HTMLOListElement> {
+  items: readonly TimelineItem[];
+}
+
+const TONE_BG: Record<NonNullable<TimelineItem['tone']>, string> = {
+  neutral: 'var(--fg-subtle)',
+  info: 'var(--info)',
+  success: 'var(--success)',
+  warning: 'var(--warning)',
+  danger: 'var(--danger)',
+  accent: 'var(--accent)',
+};
+
+const TONE_RING: Record<NonNullable<TimelineItem['tone']>, string> = {
+  neutral: 'color-mix(in oklch, var(--fg-subtle) 30%, var(--surface-0))',
+  info: 'color-mix(in oklch, var(--info) 30%, var(--surface-0))',
+  success: 'color-mix(in oklch, var(--success) 30%, var(--surface-0))',
+  warning: 'color-mix(in oklch, var(--warning) 30%, var(--surface-0))',
+  danger: 'color-mix(in oklch, var(--danger) 30%, var(--surface-0))',
+  accent: 'color-mix(in oklch, var(--accent) 30%, var(--surface-0))',
+};
+
+export const Timeline = forwardRef<HTMLOListElement, TimelineProps>(function Timeline(props, ref) {
+  const { items, className, style, ...rest } = props;
+  return (
+    <ol
+      ref={ref}
+      className={cx('v8-timeline', className)}
+      style={{
+        listStyle: 'none',
+        margin: 0,
+        padding: 0,
+        ...style,
+      }}
+      {...rest}
+    >
+      {items.map((item, idx) => {
+        const tone = item.tone ?? 'neutral';
+        const isLast = idx === items.length - 1;
+        return (
+          <li
+            key={item.id}
+            style={{
+              position: 'relative',
+              display: 'grid',
+              gridTemplateColumns: '20px 1fr',
+              gap: 'var(--space-3)',
+              paddingBottom: isLast ? 0 : 'var(--space-4)',
+            }}
+          >
+            <span
+              aria-hidden="true"
+              style={{
+                position: 'relative',
+                width: 20,
+                display: 'flex',
+                justifyContent: 'center',
+              }}
+            >
+              {!isLast && (
+                <span
+                  style={{
+                    position: 'absolute',
+                    top: 16,
+                    bottom: -16,
+                    width: 1,
+                    background: 'var(--border)',
+                  }}
+                />
+              )}
+              <span
+                style={{
+                  position: 'relative',
+                  width: 14,
+                  height: 14,
+                  borderRadius: 'var(--radius-pill)',
+                  background: TONE_BG[tone],
+                  boxShadow: `0 0 0 3px ${TONE_RING[tone]}`,
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  marginTop: 4,
+                  fontSize: 10,
+                  color: 'var(--bg)',
+                }}
+              >
+                {item.icon}
+              </span>
+            </span>
+            <div>
+              <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 'var(--space-2)' }}>
+                <div style={{ fontSize: 'var(--fs-13)', fontWeight: 500, color: 'var(--fg)' }}>{item.title}</div>
+                {item.meta !== undefined && (
+                  <div style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-subtle)', flexShrink: 0 }}>{item.meta}</div>
+                )}
+              </div>
+              {item.description !== undefined && (
+                <div style={{ fontSize: 'var(--fs-13)', color: 'var(--fg-muted)', marginTop: 2 }}>
+                  {item.description}
+                </div>
+              )}
+            </div>
+          </li>
+        );
+      })}
+    </ol>
+  );
+});

package/bizar-dash/src/web/v8/ui/data/ViewHeader.tsx

@@ -0,0 +1,122 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
+import { ChevronRight } from 'lucide-react';
+import { cx } from '../utils/cx.js';
+
+/**
+ * ViewHeader — page-level header pattern (title, description, breadcrumb, actions).
+ *
+ * Layout:
+ *   [Breadcrumb]
+ *   [Title]                        [Primary action]
+ *   [Description]                  [Secondary actions...]
+ *
+ * Use at the top of every view: Overview, Tasks, Goals, Agents, etc.
+ */
+
+export interface BreadcrumbItem {
+  label: ReactNode;
+  href?: string;
+  onClick?: () => void;
+}
+
+export interface ViewHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  title: ReactNode;
+  description?: ReactNode;
+  /** Optional breadcrumb trail rendered above the title. */
+  breadcrumb?: readonly BreadcrumbItem[];
+  /** Primary action (e.g. "New task"). */
+  action?: ReactNode;
+  /** Secondary actions (e.g. filter, export). */
+  actions?: ReactNode;
+  /** Optional metadata row below the description (e.g. status pills, counts). */
+  meta?: ReactNode;
+}
+
+export const ViewHeader = forwardRef<HTMLDivElement, ViewHeaderProps>(function ViewHeader(
+  props,
+  ref,
+) {
+  const { title, description, breadcrumb, action, actions, meta, className, style, ...rest } = props;
+  return (
+    <header
+      ref={ref}
+      className={cx('v8-view-header', className)}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 'var(--space-2)',
+        padding: 'var(--space-4) 0 var(--space-5)',
+        borderBottom: '1px solid var(--border)',
+        marginBottom: 'var(--space-5)',
+        ...style,
+      }}
+      {...rest}
+    >
+      {breadcrumb !== undefined && breadcrumb.length > 0 && (
+        <nav
+          aria-label="Breadcrumb"
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 4,
+            fontSize: 'var(--fs-12)',
+            color: 'var(--fg-subtle)',
+            marginBottom: 'var(--space-1)',
+          }}
+        >
+          {breadcrumb.map((item, i) => {
+            const isLast = i === breadcrumb.length - 1;
+            return (
+              <span
+                key={i}
+                style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}
+              >
+                {item.onClick !== undefined ? (
+                  <button
+                    onClick={item.onClick}
+                    style={{
+                      background: 'transparent',
+                      border: 0,
+                      padding: 0,
+                      font: 'inherit',
+                      color: 'inherit',
+                      cursor: 'pointer',
+                    }}
+                  >
+                    {item.label}
+                  </button>
+                ) : (
+                  <span style={{ color: isLast ? 'var(--fg)' : 'inherit' }}>{item.label}</span>
+                )}
+                {!isLast && (
+                  <ChevronRight size={12} aria-hidden="true" style={{ color: 'var(--fg-subtle)' }} />
+                )}
+              </span>
+            );
+          })}
+        </nav>
+      )}
+      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 'var(--space-4)' }}>
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <h1 style={{ fontSize: 'var(--fs-24)', lineHeight: 'var(--lh-tight)', fontWeight: 600, margin: 0, color: 'var(--fg)' }}>
+            {title}
+          </h1>
+          {description !== undefined && (
+            <div style={{ fontSize: 'var(--fs-13)', color: 'var(--fg-muted)', marginTop: 4 }}>
+              {description}
+            </div>
+          )}
+        </div>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-2)', flexShrink: 0 }}>
+          {actions}
+          {action}
+        </div>
+      </div>
+      {meta !== undefined && (
+        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-2)', flexWrap: 'wrap' }}>
+          {meta}
+        </div>
+      )}
+    </header>
+  );
+});

package/bizar-dash/src/web/v8/ui/feedback/Alert.tsx

@@ -0,0 +1,95 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
+import React from 'react';
+import { AlertCircle, AlertTriangle, CheckCircle2, Info } from 'lucide-react';
+import { cx } from '../utils/cx.js';
+
+/**
+ * Alert — inline contextual message.
+ *
+ * Tones: info | success | warning | danger.
+ *
+ * Use cases: empty states, inline help text, error banners inside forms.
+ * For status pulses (topbar live indicator) use a small dot, not an Alert.
+ */
+
+export type AlertTone = 'info' | 'success' | 'warning' | 'danger';
+
+const ICON = {
+  info: Info,
+  success: CheckCircle2,
+  warning: AlertTriangle,
+  danger: AlertCircle,
+} as const;
+
+const TONE_BG = {
+  info: 'color-mix(in oklch, var(--info) 12%, var(--surface-1))',
+  success: 'color-mix(in oklch, var(--success) 12%, var(--surface-1))',
+  warning: 'color-mix(in oklch, var(--warning) 12%, var(--surface-1))',
+  danger: 'color-mix(in oklch, var(--danger) 12%, var(--surface-1))',
+} as const;
+
+const TONE_FG = {
+  info: 'var(--info)',
+  success: 'var(--success)',
+  warning: 'var(--warning)',
+  danger: 'var(--danger)',
+} as const;
+
+const TONE_BORDER = {
+  info: 'color-mix(in oklch, var(--info) 30%, var(--border))',
+  success: 'color-mix(in oklch, var(--success) 30%, var(--border))',
+  warning: 'color-mix(in oklch, var(--warning) 30%, var(--border))',
+  danger: 'color-mix(in oklch, var(--danger) 30%, var(--border))',
+} as const;
+
+export interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> {
+  tone?: AlertTone;
+  title?: ReactNode;
+  children?: ReactNode;
+  /** Optional right-aligned action (button). */
+  action?: ReactNode;
+  /** Override the leading icon. Pass `false` to hide. */
+  icon?: ReactNode | false;
+}
+
+export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(props, ref) {
+  const { tone = 'info', title, children, action, icon, className, ...rest } = props;
+  const showIcon = icon !== false;
+  const IconNode = icon === false ? null : (icon ?? React.createElement(ICON[tone], { size: 16, 'aria-hidden': true }));
+  return (
+    <div
+      ref={ref}
+      role={tone === 'danger' || tone === 'warning' ? 'alert' : 'status'}
+      className={cx('v8-alert', `v8-alert--${tone}`, className)}
+      style={{
+        display: 'flex',
+        alignItems: 'flex-start',
+        gap: 'var(--space-3)',
+        padding: 'var(--space-3) var(--space-4)',
+        background: TONE_BG[tone],
+        border: '1px solid',
+        borderColor: TONE_BORDER[tone],
+        borderRadius: 'var(--radius)',
+        color: 'var(--fg)',
+      }}
+      {...rest}
+    >
+      {showIcon && IconNode !== null && (
+        <span style={{ color: TONE_FG[tone], flexShrink: 0, marginTop: 1, display: 'inline-flex' }}>
+          {IconNode}
+        </span>
+      )}
+      <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', gap: 'var(--space-1)' }}>
+        {title !== undefined && (
+          <div style={{ fontSize: 'var(--fs-13)', fontWeight: 600 }}>{title}</div>
+        )}
+        {children !== undefined && (
+          <div style={{ fontSize: 'var(--fs-13)', color: 'var(--fg-muted)' }}>{children}</div>
+        )}
+      </div>
+      {action !== undefined && (
+        <div style={{ flexShrink: 0, display: 'flex', alignItems: 'center' }}>{action}</div>
+      )}
+    </div>
+  );
+});

package/bizar-dash/src/web/v8/ui/feedback/Banner.tsx

@@ -0,0 +1,39 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
+import { cx } from '../utils/cx.js';
+
+/**
+ * Banner — a top-of-page contextual announcement.
+ *
+ * Use sparingly. Distinct from StatusBar (which is system-level) and
+ * Alert (which is inline). Banner occupies its own row above the page header.
+ */
+export interface BannerProps extends HTMLAttributes<HTMLDivElement> {
+  tone?: 'info' | 'warning' | 'success' | 'danger';
+  children: ReactNode;
+  action?: ReactNode;
+}
+
+export const Banner = forwardRef<HTMLDivElement, BannerProps>(function Banner(props, ref) {
+  const { tone = 'info', children, action, className, ...rest } = props;
+  return (
+    <div
+      ref={ref}
+      role={tone === 'danger' ? 'alert' : 'status'}
+      className={cx('v8-banner', `v8-banner--${tone}`, className)}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 'var(--space-3)',
+        padding: 'var(--space-3) var(--space-4)',
+        background: `color-mix(in oklch, var(--${tone}) 8%, var(--surface-1))`,
+        borderBottom: '1px solid var(--border)',
+        fontSize: 'var(--fs-13)',
+        color: 'var(--fg)',
+      }}
+      {...rest}
+    >
+      <div style={{ flex: 1, minWidth: 0 }}>{children}</div>
+      {action !== undefined && <div style={{ flexShrink: 0 }}>{action}</div>}
+    </div>
+  );
+});

package/bizar-dash/src/web/v8/ui/feedback/ContextMenu.tsx

@@ -0,0 +1,143 @@
+import { forwardRef, type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import * as RxContextMenu from '@radix-ui/react-context-menu';
+import { cx } from '../utils/cx.js';
+
+/**
+ * ContextMenu — right-click menu. Rule #1 of the v8 dashboard.
+ *
+ * "Right-click is sacred" — every interactive surface that has meaningful
+ * actions must use ContextMenu. The keyboard equivalent is Shift+F10.
+ *
+ * Built on Radix ContextMenu. Reuses the same Item / Separator / Label
+ * primitives as DropdownMenu so visuals are identical (only the trigger
+ * differs — left-click for DropdownMenu, right-click for ContextMenu).
+ */
+
+export type ContextMenuProps = ComponentPropsWithoutRef<typeof RxContextMenu.Root>;
+
+export const ContextMenu = ({ children, ...rest }: ContextMenuProps) => (
+  <RxContextMenu.Root {...rest}>{children}</RxContextMenu.Root>
+);
+
+export const ContextMenuTrigger = forwardRef<
+  HTMLSpanElement,
+  ComponentPropsWithoutRef<typeof RxContextMenu.Trigger>
+>(function ContextMenuTrigger(props, ref) {
+  return <RxContextMenu.Trigger ref={ref} {...props} />;
+});
+
+export interface ContextMenuContentProps
+  extends ComponentPropsWithoutRef<typeof RxContextMenu.Content> {
+  children: ReactNode;
+}
+
+export const ContextMenuContent = forwardRef<HTMLDivElement, ContextMenuContentProps>(
+  function ContextMenuContent(props, ref) {
+    const { className, children, ...rest } = props;
+    return (
+      <RxContextMenu.Portal>
+        <RxContextMenu.Content
+          ref={ref}
+          className={cx('v8-context-menu', className)}
+          style={{
+            minWidth: 200,
+            background: 'var(--surface-popover)',
+            border: '1px solid var(--border)',
+            borderRadius: 'var(--radius)',
+            boxShadow: 'var(--shadow-3)',
+            padding: 'var(--space-1)',
+            zIndex: 'var(--z-popover)',
+          }}
+          {...rest}
+        >
+          {children}
+        </RxContextMenu.Content>
+      </RxContextMenu.Portal>
+    );
+  },
+);
+
+export interface ContextMenuItemProps extends ComponentPropsWithoutRef<typeof RxContextMenu.Item> {
+  shortcut?: string;
+  danger?: boolean;
+  leftIcon?: ReactNode;
+}
+
+export const ContextMenuItem = forwardRef<HTMLDivElement, ContextMenuItemProps>(
+  function ContextMenuItem(props, ref) {
+    const { className, children, shortcut, danger, leftIcon, disabled, ...rest } = props;
+    return (
+      <RxContextMenu.Item
+        ref={ref}
+        disabled={disabled}
+        className={cx('v8-context-menu__item', danger && 'is-danger', className)}
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 'var(--space-2)',
+          height: 28,
+          padding: '0 var(--space-2) 0 var(--space-3)',
+          borderRadius: 'var(--radius-sm)',
+          fontSize: 'var(--fs-13)',
+          color: danger === true ? 'var(--danger)' : 'var(--fg)',
+          cursor: disabled === true ? 'not-allowed' : 'pointer',
+          outline: 0,
+          userSelect: 'none',
+        }}
+        {...rest}
+      >
+        {leftIcon !== undefined && (
+          <span style={{ width: 14, display: 'inline-flex', color: 'var(--fg-muted)' }}>{leftIcon}</span>
+        )}
+        <span style={{ flex: 1, minWidth: 0 }}>{children}</span>
+        {shortcut !== undefined && (
+          <span
+            style={{
+              fontFamily: 'var(--font-mono)',
+              fontSize: 'var(--fs-12)',
+              color: 'var(--fg-muted)',
+              marginLeft: 'var(--space-2)',
+            }}
+          >
+            {shortcut}
+          </span>
+        )}
+      </RxContextMenu.Item>
+    );
+  },
+);
+
+export const ContextMenuSeparator = forwardRef<
+  HTMLDivElement,
+  ComponentPropsWithoutRef<typeof RxContextMenu.Separator>
+>(function ContextMenuSeparator(props, ref) {
+  return (
+    <RxContextMenu.Separator
+      ref={ref}
+      style={{ height: 1, margin: 'var(--space-1) 0', background: 'var(--border)' }}
+      {...props}
+    />
+  );
+});
+
+export const ContextMenuLabel = forwardRef<
+  HTMLDivElement,
+  ComponentPropsWithoutRef<typeof RxContextMenu.Label>
+>(function ContextMenuLabel(props, ref) {
+  return (
+    <RxContextMenu.Label
+      ref={ref}
+      style={{
+        padding: 'var(--space-2) var(--space-3) var(--space-1)',
+        fontSize: 'var(--fs-12)',
+        fontWeight: 600,
+        color: 'var(--fg-subtle)',
+        textTransform: 'uppercase',
+        letterSpacing: 'var(--tracking-wide)',
+      }}
+      {...props}
+    />
+  );
+});
+
+export const ContextMenuGroup = RxContextMenu.Group;