@polderlabs/bizar 9.0.0 → 10.0.7

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

@@ -1,101 +0,0 @@
-import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
-import { cx } from '../utils/cx.js';
-
-/**
- * BarList — horizontal bar list for distributions (e.g. tasks per agent,
- * memory by category). Renders each row as a label + animated bar + value.
- */
-
-export interface BarListItem {
-  /** Unique key for React. */
-  id: string;
-  label: ReactNode;
-  value: number;
-  /** Optional secondary text (e.g. percentage). */
-  hint?: ReactNode;
-  /** Optional leading slot (e.g. avatar, icon). */
-  leading?: ReactNode;
-  /** Override the bar color. */
-  color?: string;
-}
-
-export interface BarListProps extends HTMLAttributes<HTMLDivElement> {
-  items: readonly BarListItem[];
-  /** Show numeric values on the right (default true). */
-  showValue?: boolean;
-  /** Bar height in px (default 6). */
-  barHeight?: number;
-  /** Cap so the longest bar doesn't visually overwhelm. */
-  cap?: number;
-}
-
-export const BarList = forwardRef<HTMLDivElement, BarListProps>(function BarList(props, ref) {
-  const { items, showValue = true, barHeight = 6, cap, className, style, ...rest } = props;
-  const max = cap ?? Math.max(1, ...items.map((i) => i.value));
-
-  return (
-    <div
-      ref={ref}
-      className={cx('v8-bar-list', className)}
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 'var(--space-3)',
-        ...style,
-      }}
-      {...rest}
-    >
-      {items.map((item) => {
-        const pct = Math.min(100, (item.value / max) * 100);
-        return (
-          <div key={item.id} style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)' }}>
-            {item.leading !== undefined && (
-              <span style={{ flexShrink: 0 }}>{item.leading}</span>
-            )}
-            <div style={{ flex: 1, minWidth: 0 }}>
-              <div style={{ display: 'flex', justifyContent: 'space-between', gap: 'var(--space-2)', marginBottom: 4 }}>
-                <span style={{ fontSize: 'var(--fs-13)', color: 'var(--fg)', minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                  {item.label}
-                </span>
-                {showValue === true && (
-                  <span
-                    style={{
-                      fontSize: 'var(--fs-12)',
-                      color: 'var(--fg-muted)',
-                      fontVariantNumeric: 'tabular-nums',
-                      flexShrink: 0,
-                    }}
-                  >
-                    {item.hint ?? item.value}
-                  </span>
-                )}
-              </div>
-              <div
-                style={{
-                  position: 'relative',
-                  height: barHeight,
-                  background: 'var(--surface-2)',
-                  borderRadius: 'var(--radius-pill)',
-                  overflow: 'hidden',
-                }}
-              >
-                <div
-                  style={{
-                    position: 'absolute',
-                    top: 0,
-                    left: 0,
-                    height: '100%',
-                    width: `${pct}%`,
-                    background: item.color ?? 'var(--accent)',
-                    borderRadius: 'var(--radius-pill)',
-                    transition: 'width var(--motion-base) var(--ease-out)',
-                  }}
-                />
-              </div>
-            </div>
-          </div>
-        );
-      })}
-    </div>
-  );
-});

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

@@ -1,140 +0,0 @@
-import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
-import { cx } from '../utils/cx.js';
-
-/**
- * Card — the v8 surface primitive.
- *
- * Variants:
- *   - default: bordered, --surface-1 background, used for kanban cards, settings groups.
- *   - elevated: --surface-1 background + shadow, used for popovers/dropdowns hovering over content.
- *   - ghost:    no border, transparent background, used inside other Cards (nested).
- *   - outlined: thicker border, --surface-0 background, used for group containers.
- *
- * All variants have a consistent --radius-lg corner and pad via --density-card-pad.
- * The header / body / footer slots are conventions — pass any children you want.
- */
-export type CardVariant = 'default' | 'elevated' | 'ghost' | 'outlined';
-
-export interface CardProps extends HTMLAttributes<HTMLDivElement> {
-  variant?: CardVariant;
-  /** Removes padding so the child fills the card edge-to-edge. */
-  flush?: boolean;
-  /** Adds hover lift + cursor pointer for clickable cards. */
-  interactive?: boolean;
-  children?: ReactNode;
-}
-
-const VARIANT_STYLE: Record<CardVariant, React.CSSProperties> = {
-  default: {
-    background: 'var(--surface-1)',
-    border: '1px solid var(--border)',
-    boxShadow: 'none',
-  },
-  elevated: {
-    background: 'var(--surface-1)',
-    border: '1px solid var(--border)',
-    boxShadow: 'var(--shadow-2)',
-  },
-  ghost: {
-    background: 'transparent',
-    border: '1px solid transparent',
-    boxShadow: 'none',
-  },
-  outlined: {
-    background: 'var(--surface-0)',
-    border: '1px solid var(--border)',
-    boxShadow: 'none',
-  },
-};
-
-export const Card = forwardRef<HTMLDivElement, CardProps>(function Card(props, ref) {
-  const { variant = 'default', flush, interactive, className, style, ...rest } = props;
-  return (
-    <div
-      ref={ref}
-      className={cx('v8-card', `v8-card--${variant}`, interactive && 'is-interactive', className)}
-      style={{
-        borderRadius: 'var(--radius-lg)',
-        padding: flush === true ? 0 : 'var(--density-card-pad)',
-        cursor: interactive === true ? 'pointer' : undefined,
-        transition: interactive === true
-          ? 'border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out)'
-          : undefined,
-        ...VARIANT_STYLE[variant],
-        ...style,
-      }}
-      {...rest}
-    />
-  );
-});
-
-/** Card header — title row + optional actions. */
-export interface CardHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
-  title: ReactNode;
-  description?: ReactNode;
-  action?: ReactNode;
-}
-
-export const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(function CardHeader(
-  props,
-  ref,
-) {
-  const { title, description, action, className, style, ...rest } = props;
-  return (
-    <div
-      ref={ref}
-      className={cx('v8-card__header', className)}
-      style={{
-        display: 'flex',
-        alignItems: 'flex-start',
-        justifyContent: 'space-between',
-        gap: 'var(--space-3)',
-        marginBottom: 'var(--space-3)',
-        ...style,
-      }}
-      {...rest}
-    >
-      <div style={{ flex: 1, minWidth: 0 }}>
-        <div style={{ fontSize: 'var(--fs-14)', fontWeight: 600, color: 'var(--fg)' }}>{title}</div>
-        {description !== undefined && (
-          <div style={{ fontSize: 'var(--fs-13)', color: 'var(--fg-muted)', marginTop: 2 }}>
-            {description}
-          </div>
-        )}
-      </div>
-      {action !== undefined && <div style={{ flexShrink: 0 }}>{action}</div>}
-    </div>
-  );
-});
-
-/** Card body — main content slot. */
-export const CardBody = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
-  function CardBody(props, ref) {
-    const { className, ...rest } = props;
-    return <div ref={ref} className={cx('v8-card__body', className)} {...rest} />;
-  },
-);
-
-/** Card footer — typically action buttons right-aligned. */
-export const CardFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
-  function CardFooter(props, ref) {
-    const { className, style, ...rest } = props;
-    return (
-      <div
-        ref={ref}
-        className={cx('v8-card__footer', className)}
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'flex-end',
-          gap: 'var(--space-2)',
-          marginTop: 'var(--space-3)',
-          paddingTop: 'var(--space-3)',
-          borderTop: '1px solid var(--border)',
-          ...style,
-        }}
-        {...rest}
-      />
-    );
-  },
-);

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

@@ -1,96 +0,0 @@
-import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
-import { X } from 'lucide-react';
-import { cx } from '../utils/cx.js';
-
-/**
- * Chip — filter pill with an optional remove button.
- *
- * Different from Badge: Badge is a status indicator (read-only).
- * Chip is interactive — clickable for selection, removable for filters.
- */
-
-export interface ChipProps extends HTMLAttributes<HTMLSpanElement> {
-  /** Visual tone. */
-  tone?: 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'accent';
-  /** When true, render with selected styling (used for filter chips). */
-  selected?: boolean;
-  /** When provided, render a close button that invokes this handler. */
-  onRemove?: () => void;
-  children: ReactNode;
-}
-
-const TONE_BG: Record<NonNullable<ChipProps['tone']>, string> = {
-  neutral: 'var(--surface-1)',
-  info: 'color-mix(in oklch, var(--info) 14%, var(--surface-1))',
-  success: 'color-mix(in oklch, var(--success) 14%, var(--surface-1))',
-  warning: 'color-mix(in oklch, var(--warning) 14%, var(--surface-1))',
-  danger: 'color-mix(in oklch, var(--danger) 14%, var(--surface-1))',
-  accent: 'color-mix(in oklch, var(--accent) 14%, var(--surface-1))',
-};
-
-const TONE_BORDER: Record<NonNullable<ChipProps['tone']>, string> = {
-  neutral: 'var(--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))',
-  accent: 'color-mix(in oklch, var(--accent) 30%, var(--border))',
-};
-
-export const Chip = forwardRef<HTMLSpanElement, ChipProps>(function Chip(props, ref) {
-  const { tone = 'neutral', selected, onRemove, children, className, style, ...rest } = props;
-  const isInteractive = selected !== undefined || onRemove !== undefined;
-  return (
-    <span
-      ref={ref}
-      className={cx('v8-chip', `v8-chip--${tone}`, selected === true && 'is-selected', className)}
-      style={{
-        display: 'inline-flex',
-        alignItems: 'center',
-        gap: 'var(--space-1)',
-        height: 24,
-        padding: '0 8px',
-        background: selected === true ? `color-mix(in oklch, var(--accent) 18%, var(--surface-1))` : TONE_BG[tone],
-        border: '1px solid',
-        borderColor: selected === true ? 'var(--accent)' : TONE_BORDER[tone],
-        borderRadius: 'var(--radius-pill)',
-        fontSize: 'var(--fs-12)',
-        fontWeight: 500,
-        color: selected === true ? 'var(--accent)' : 'var(--fg)',
-        cursor: isInteractive === true ? 'pointer' : 'default',
-        whiteSpace: 'nowrap',
-        ...style,
-      }}
-      {...rest}
-    >
-      {children}
-      {onRemove !== undefined && (
-        <button
-          type="button"
-          onClick={(e) => {
-            e.stopPropagation();
-            onRemove();
-          }}
-          aria-label="Remove"
-          style={{
-            display: 'inline-flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            width: 14,
-            height: 14,
-            marginLeft: 2,
-            marginRight: -4,
-            padding: 0,
-            background: 'transparent',
-            border: 0,
-            borderRadius: 'var(--radius-sm)',
-            color: 'var(--fg-muted)',
-            cursor: 'pointer',
-          }}
-        >
-          <X size={10} aria-hidden="true" />
-        </button>
-      )}
-    </span>
-  );
-});

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

@@ -1,42 +0,0 @@
-import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
-import { cx } from '../utils/cx.js';
-
-/**
- * Kbd — keyboard key chip. Use inside Tooltips, ContextMenu shortcuts,
- * Settings — Keyboard page, etc.
- */
-export interface KbdProps extends HTMLAttributes<HTMLElement> {
-  children: ReactNode;
-  /** Use on a dark surface where the default light bg won't show. */
-  inverted?: boolean;
-}
-
-export const Kbd = forwardRef<HTMLElement, KbdProps>(function Kbd(props, ref) {
-  const { children, inverted, className, style, ...rest } = props;
-  return (
-    <kbd
-      ref={ref}
-      className={cx('v8-kbd', inverted && 'is-inverted', className)}
-      style={{
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        minWidth: '1.4em',
-        height: '1.4em',
-        padding: '0 6px',
-        fontFamily: 'var(--font-mono)',
-        fontSize: 'var(--fs-12)',
-        fontWeight: 500,
-        color: inverted === true ? 'var(--bg)' : 'var(--fg-muted)',
-        background: inverted === true ? 'var(--fg)' : 'var(--surface-1)',
-        border: '1px solid var(--border)',
-        borderBottomWidth: 2,
-        borderRadius: 'var(--radius-sm)',
-        ...style,
-      }}
-      {...rest}
-    >
-      {children}
-    </kbd>
-  );
-});

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

@@ -1,93 +0,0 @@
-import { forwardRef, type HTMLAttributes } from 'react';
-import { cx } from '../utils/cx.js';
-
-/**
- * ProgressBar — linear progress indicator.
- *
- * Use cases: Goal progress, task completion, capacity usage.
- * For circular progress use the inline circle ring (S9) or a third-party.
- */
-
-export interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
-  /** 0..1 (or 0..100 if `max` is 100). */
-  value: number;
-  max?: number;
-  /** Tone color for the filled portion. */
-  tone?: 'accent' | 'info' | 'success' | 'warning' | 'danger';
-  /** Render the value as a percentage label on the right. */
-  showLabel?: boolean;
-  /** Bar height in px. */
-  height?: number;
-}
-
-const TONE_BG: Record<NonNullable<ProgressBarProps['tone']>, string> = {
-  accent: 'var(--accent)',
-  info: 'var(--info)',
-  success: 'var(--success)',
-  warning: 'var(--warning)',
-  danger: 'var(--danger)',
-};
-
-export const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(function ProgressBar(
-  props,
-  ref,
-) {
-  const {
-    value,
-    max = 1,
-    tone = 'accent',
-    showLabel,
-    height = 6,
-    className,
-    style,
-    ...rest
-  } = props;
-  const pct = Math.min(100, Math.max(0, (value / max) * 100));
-  return (
-    <div
-      ref={ref}
-      className={cx('v8-progress', className)}
-      style={{
-        position: 'relative',
-        display: 'flex',
-        alignItems: 'center',
-        gap: 'var(--space-2)',
-        ...style,
-      }}
-      {...rest}
-    >
-      <div
-        style={{
-          flex: 1,
-          height,
-          background: 'var(--surface-2)',
-          borderRadius: 'var(--radius-pill)',
-          overflow: 'hidden',
-        }}
-      >
-        <div
-          style={{
-            width: `${pct}%`,
-            height: '100%',
-            background: TONE_BG[tone],
-            borderRadius: 'var(--radius-pill)',
-            transition: 'width var(--motion-base) var(--ease-out)',
-          }}
-        />
-      </div>
-      {showLabel === true && (
-        <span
-          style={{
-            fontSize: 'var(--fs-12)',
-            color: 'var(--fg-muted)',
-            fontVariantNumeric: 'tabular-nums',
-            minWidth: 32,
-            textAlign: 'right',
-          }}
-        >
-          {Math.round(pct)}%
-        </span>
-      )}
-    </div>
-  );
-});

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

@@ -1,98 +0,0 @@
-import { forwardRef, type HTMLAttributes } from 'react';
-import { cx } from '../utils/cx.js';
-
-/**
- * Sparkline — tiny inline line chart.
- *
- * Pure SVG so it composes inside StatTile, Table cells, Card headers
- * without bringing in a chart library dependency.
- */
-export interface SparklineProps extends Omit<HTMLAttributes<SVGSVGElement>, 'children'> {
-  data: readonly number[];
-  width?: number;
-  height?: number;
-  /** Stroke color (defaults to --accent). */
-  stroke?: string;
-  /** Optional fill color (defaults to a 14% mix of stroke). */
-  fill?: string;
-  /** Show the area under the line. */
-  area?: boolean;
-  /** Goal/expected value rendered as a dashed horizontal line. */
-  goal?: number;
-}
-
-export const Sparkline = forwardRef<SVGSVGElement, SparklineProps>(function Sparkline(props, ref) {
-  const {
-    data,
-    width = 120,
-    height = 32,
-    stroke = 'var(--accent)',
-    fill,
-    area = true,
-    goal,
-    className,
-    style,
-    ...rest
-  } = props;
-
-  if (data.length < 2) {
-    return (
-      <svg
-        ref={ref}
-        width={width}
-        height={height}
-        viewBox={`0 0 ${width} ${height}`}
-        className={cx('v8-sparkline', className)}
-        style={style}
-        aria-hidden="true"
-        {...rest}
-      />
-    );
-  }
-
-  const min = Math.min(...data);
-  const max = Math.max(...data);
-  const range = max - min || 1;
-  const pad = 2;
-  const stepX = (width - pad * 2) / (data.length - 1);
-
-  const points = data.map((v, i) => {
-    const x = pad + stepX * i;
-    const y = pad + (height - pad * 2) * (1 - (v - min) / range);
-    return { x, y };
-  });
-
-  const linePath = points.map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(' ');
-  const areaPath = area
-    ? `${linePath} L${points[points.length - 1]?.x.toFixed(1) ?? '0'},${(height - pad).toFixed(1)} L${points[0]?.x.toFixed(1) ?? '0'},${(height - pad).toFixed(1)} Z`
-    : '';
-
-  const fillColor = fill ?? `color-mix(in oklch, ${stroke} 14%, transparent)`;
-
-  return (
-    <svg
-      ref={ref}
-      width={width}
-      height={height}
-      viewBox={`0 0 ${width} ${height}`}
-      className={cx('v8-sparkline', className)}
-      style={style}
-      aria-hidden="true"
-      {...rest}
-    >
-      {area === true && <path d={areaPath} fill={fillColor} stroke="none" />}
-      <path d={linePath} fill="none" stroke={stroke} strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" />
-      {goal !== undefined && (
-        <line
-          x1={pad}
-          x2={width - pad}
-          y1={pad + (height - pad * 2) * (1 - (goal - min) / range)}
-          y2={pad + (height - pad * 2) * (1 - (goal - min) / range)}
-          stroke="var(--fg-subtle)"
-          strokeWidth={1}
-          strokeDasharray="2 2"
-        />
-      )}
-    </svg>
-  );
-});