@polderlabs/bizar 9.0.0 → 10.0.7

package/.claude/worktrees/kanban-overhaul/bizar-dash/src/web/v8/ui/data/StatTile.tsx

@@ -1,150 +0,0 @@
-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/.claude/worktrees/kanban-overhaul/bizar-dash/src/web/v8/ui/data/Table.tsx

@@ -1,170 +0,0 @@
-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/.claude/worktrees/kanban-overhaul/bizar-dash/src/web/v8/ui/data/Timeline.tsx

@@ -1,130 +0,0 @@
-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/.claude/worktrees/kanban-overhaul/bizar-dash/src/web/v8/ui/data/ViewHeader.tsx

@@ -1,122 +0,0 @@
-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/.claude/worktrees/kanban-overhaul/bizar-dash/src/web/v8/ui/feedback/Alert.tsx

@@ -1,95 +0,0 @@
-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>
-  );
-});