@polderlabs/bizar 7.0.2 → 8.0.0

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

@@ -0,0 +1,150 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
+import { TrendingDown, TrendingUp, Minus } from 'lucide-react';
+import { cx } from '../utils/cx.js';
+
+/**
+ * StatTile — a single KPI tile for the overview.
+ *
+ * Pattern: `[label]   [trend-icon delta]`
+ *          `[BIG value]`
+ *          `[sparkline?]`
+ *
+ * Use cases: Overview dashboard, agent detail, goal detail.
+ */
+export type StatTrend = 'up' | 'down' | 'flat';
+
+export interface StatTileProps extends HTMLAttributes<HTMLDivElement> {
+  label: ReactNode;
+  value: ReactNode;
+  /** Optional delta with trend direction (e.g. "+12%" vs last week). */
+  delta?: ReactNode;
+  trend?: StatTrend;
+  /** Optional helper text under the value. */
+  hint?: ReactNode;
+  /** Optional icon for the top-right corner. */
+  icon?: ReactNode;
+  /** Inline sparkline rendered beneath the value (use the Sparkline component). */
+  sparkline?: ReactNode;
+  /** Loading state — replaces value with skeleton. */
+  loading?: boolean;
+}
+
+const TREND_FG: Record<StatTrend, string> = {
+  up: 'var(--success)',
+  down: 'var(--danger)',
+  flat: 'var(--fg-muted)',
+};
+
+const TREND_ICON: Record<StatTrend, typeof TrendingUp> = {
+  up: TrendingUp,
+  down: TrendingDown,
+  flat: Minus,
+};
+
+export const StatTile = forwardRef<HTMLDivElement, StatTileProps>(function StatTile(props, ref) {
+  const {
+    label,
+    value,
+    delta,
+    trend,
+    hint,
+    icon,
+    sparkline,
+    loading,
+    className,
+    style,
+    ...rest
+  } = props;
+  const TrendIcon = trend !== undefined ? TREND_ICON[trend] : null;
+  return (
+    <div
+      ref={ref}
+      className={cx('v8-stat-tile', className)}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 'var(--space-2)',
+        padding: 'var(--space-5)',
+        background: 'var(--surface-1)',
+        border: '1px solid var(--border)',
+        borderRadius: 'var(--radius-lg)',
+        ...style,
+      }}
+      {...rest}
+    >
+      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 'var(--space-2)' }}>
+        <div style={{ fontSize: 'var(--fs-13)', color: 'var(--fg-muted)', fontWeight: 500 }}>
+          {label}
+        </div>
+        {icon !== undefined && (
+          <span style={{ color: 'var(--fg-subtle)', display: 'inline-flex' }}>{icon}</span>
+        )}
+      </div>
+      <div style={{ display: 'flex', alignItems: 'baseline', gap: 'var(--space-2)' }}>
+        <div
+          style={{
+            fontSize: 'var(--fs-24)',
+            fontWeight: 600,
+            color: 'var(--fg)',
+            fontVariantNumeric: 'tabular-nums',
+            lineHeight: 'var(--lh-tight)',
+          }}
+        >
+          {loading === true ? '—' : value}
+        </div>
+        {(delta !== undefined || TrendIcon !== null) && (
+          <div
+            style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              gap: 2,
+              fontSize: 'var(--fs-12)',
+              fontWeight: 500,
+              color: trend !== undefined ? TREND_FG[trend] : 'var(--fg-muted)',
+              fontVariantNumeric: 'tabular-nums',
+            }}
+          >
+            {TrendIcon !== null && <TrendIcon size={12} aria-hidden="true" />}
+            {delta}
+          </div>
+        )}
+      </div>
+      {hint !== undefined && (
+        <div style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-subtle)' }}>{hint}</div>
+      )}
+      {sparkline !== undefined && <div style={{ marginTop: 'var(--space-1)' }}>{sparkline}</div>}
+    </div>
+  );
+});
+
+/**
+ * StatGrid — responsive grid for StatTiles. Auto-fits 1..4 columns.
+ */
+export interface StatGridProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+  /** Min tile width (default 200px). */
+  minWidth?: number;
+  cols?: 2 | 3 | 4;
+}
+
+export const StatGrid = forwardRef<HTMLDivElement, StatGridProps>(function StatGrid(props, ref) {
+  const { children, cols, minWidth = 200, className, style, ...rest } = props;
+  const gridTemplate = cols !== undefined
+    ? `repeat(${cols}, minmax(0, 1fr))`
+    : `repeat(auto-fit, minmax(${minWidth}px, 1fr))`;
+  return (
+    <div
+      ref={ref}
+      className={cx('v8-stat-grid', className)}
+      style={{
+        display: 'grid',
+        gridTemplateColumns: gridTemplate,
+        gap: 'var(--space-3)',
+        ...style,
+      }}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+});

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>
+  );
+});