@polderlabs/bizar 7.0.2 → 8.0.0

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

@@ -0,0 +1,103 @@
+import { forwardRef, type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import * as RxDialog from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
+import { cx } from '../utils/cx.js';
+
+/**
+ * Sheet — a side-anchored panel.
+ *
+ * Use for: task detail, agent detail, settings panels (mobile), kanban card
+ * expanded. Use a Dialog when the content is best presented centered.
+ */
+
+export type SheetSide = 'top' | 'right' | 'bottom' | 'left';
+
+export interface SheetProps extends Omit<ComponentPropsWithoutRef<typeof RxDialog.Root>, 'children'> {
+  children: ReactNode;
+}
+
+export const Sheet = ({ children, ...rest }: SheetProps) => (
+  <RxDialog.Root {...rest}>{children}</RxDialog.Root>
+);
+
+export const SheetTrigger = RxDialog.Trigger;
+export const SheetClose = RxDialog.Close;
+
+export interface SheetContentProps extends ComponentPropsWithoutRef<typeof RxDialog.Content> {
+  side?: SheetSide;
+  title: string;
+  description?: string;
+  children: ReactNode;
+}
+
+const SIDE_STYLE: Record<SheetSide, React.CSSProperties> = {
+  top: { top: 0, left: 0, right: 0, height: '60vh', borderBottom: '1px solid var(--border)', borderRadius: '0 0 var(--radius-lg) var(--radius-lg)' },
+  right: { top: 0, right: 0, bottom: 0, width: 'min(560px, 100vw)', borderLeft: '1px solid var(--border)' },
+  bottom: { bottom: 0, left: 0, right: 0, height: '60vh', borderTop: '1px solid var(--border)', borderRadius: 'var(--radius-lg) var(--radius-lg) 0 0' },
+  left: { top: 0, left: 0, bottom: 0, width: 'min(560px, 100vw)', borderRight: '1px solid var(--border)' },
+};
+
+export const SheetContent = forwardRef<HTMLDivElement, SheetContentProps>(function SheetContent(
+  props,
+  ref,
+) {
+  const { className, side = 'right', title, description, children, ...rest } = props;
+  return (
+    <RxDialog.Portal>
+      <RxDialog.Overlay
+        style={{
+          position: 'fixed',
+          inset: 0,
+          background: 'oklch(0 0 0 / 0.4)',
+          zIndex: 'var(--z-modal)',
+        }}
+      />
+      <RxDialog.Content
+        ref={ref}
+        data-side={side}
+        className={cx('v8-sheet', className)}
+        style={{
+          position: 'fixed',
+          background: 'var(--surface-popover)',
+          padding: 'var(--space-6)',
+          overflow: 'auto',
+          boxShadow: 'var(--shadow-4)',
+          zIndex: 'calc(var(--z-modal) + 1)',
+          ...SIDE_STYLE[side],
+        }}
+        {...rest}
+      >
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 'var(--space-4)' }}>
+          <div>
+            <RxDialog.Title style={{ fontSize: 'var(--fs-18)', fontWeight: 600 }}>{title}</RxDialog.Title>
+            {description !== undefined && (
+              <RxDialog.Description
+                style={{ fontSize: 'var(--fs-13)', color: 'var(--fg-muted)', marginTop: 'var(--space-1)' }}
+              >
+                {description}
+              </RxDialog.Description>
+            )}
+          </div>
+          <RxDialog.Close
+            aria-label="Close"
+            style={{
+              width: 28,
+              height: 28,
+              display: 'inline-flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              background: 'transparent',
+              border: 0,
+              borderRadius: 'var(--radius-sm)',
+              color: 'var(--fg-muted)',
+              cursor: 'pointer',
+            }}
+          >
+            <X size={16} aria-hidden="true" />
+          </RxDialog.Close>
+        </div>
+        {children}
+      </RxDialog.Content>
+    </RxDialog.Portal>
+  );
+});

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

@@ -0,0 +1,67 @@
+import { type HTMLAttributes } from 'react';
+import { cx } from '../utils/cx.js';
+
+/**
+ * Skeleton — a placeholder that pulses while content loads.
+ *
+ * Per DESIGN.md §10: NEVER use a spinner labelled "Loading…". Use
+ * skeleton shapes that mirror the final content (text widths, card
+ * outlines, chart frames).
+ */
+export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+  width?: number | string;
+  height?: number | string;
+  radius?: 'sm' | 'md' | 'pill';
+}
+
+export function Skeleton({
+  width = '100%',
+  height = 16,
+  radius = 'sm',
+  className,
+  style,
+  ...rest
+}: SkeletonProps): JSX.Element {
+  const radiusValue = radius === 'sm' ? 'var(--radius-sm)' : radius === 'pill' ? 'var(--radius-pill)' : 'var(--radius)';
+  return (
+    <div
+      className={cx('v8-skeleton', className)}
+      style={{
+        display: 'inline-block',
+        width: typeof width === 'number' ? `${width}px` : width,
+        height: typeof height === 'number' ? `${height}px` : height,
+        background:
+          'linear-gradient(90deg, var(--surface-1) 0%, var(--surface-2) 50%, var(--surface-1) 100%)',
+        backgroundSize: '200% 100%',
+        borderRadius: radiusValue,
+        animation: 'v8-skeleton-pulse 1.4s ease-in-out infinite',
+        ...style,
+      }}
+      aria-hidden="true"
+      {...rest}
+    />
+  );
+}
+
+/**
+ * SkeletonText — multi-line text placeholder.
+ */
+export interface SkeletonTextProps {
+  lines?: number;
+  /** Width of the last line (defaults to 60%). */
+  lastLineWidth?: string;
+}
+
+export function SkeletonText({ lines = 3, lastLineWidth = '60%' }: SkeletonTextProps): JSX.Element {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-2)' }} aria-hidden="true">
+      {Array.from({ length: lines }, (_, i) => (
+        <Skeleton
+          key={i}
+          width={i === lines - 1 ? lastLineWidth : '100%'}
+          height={12}
+        />
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,30 @@
+import { Loader2 } from 'lucide-react';
+import { cx } from '../utils/cx.js';
+
+/**
+ * Spinner — animated loading indicator.
+ *
+ * Per DESIGN.md §10 the v8 dashboard discourages standalone spinners —
+ * prefer <Skeleton> shapes. Use Spinner only inside small controls
+ * (Button loading state) or as an inline status indicator.
+ */
+export interface SpinnerProps {
+  size?: number;
+  className?: string;
+  label?: string;
+}
+
+export function Spinner({ size = 16, className, label }: SpinnerProps): JSX.Element {
+  return (
+    <Loader2
+      size={size}
+      aria-label={label ?? 'Loading'}
+      role="status"
+      className={cx('v8-spinner', className)}
+      style={{
+        color: 'var(--fg-muted)',
+        animation: 'v8-spin 0.8s linear infinite',
+      }}
+    />
+  );
+}

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

@@ -0,0 +1,66 @@
+import { Toaster as SonnerToaster, toast as sonnerToast } from 'sonner';
+import { CheckCircle2, AlertCircle, Info, XCircle } from 'lucide-react';
+import { type ReactNode } from 'react';
+
+/**
+ * Toast — transient feedback notifications.
+ *
+ * Built on `sonner` (the same library Linear + Vercel use). Wire the
+ * `<Toaster />` once at the app root; then call `toast.*` from anywhere.
+ *
+ * Per DESIGN.md §9: optimistic mutations rollback with a toast.
+ */
+
+export interface ToasterProps {
+  position?: 'top-right' | 'top-center' | 'top-left' | 'bottom-right' | 'bottom-center' | 'bottom-left';
+}
+
+export function Toaster({ position = 'bottom-right' }: ToasterProps): JSX.Element {
+  return (
+    <SonnerToaster
+      position={position}
+      theme="system"
+      toastOptions={{
+        style: {
+          background: 'var(--surface-popover)',
+          color: 'var(--fg)',
+          border: '1px solid var(--border)',
+          fontSize: 'var(--fs-13)',
+        },
+      }}
+      icons={{
+        success: <CheckCircle2 size={16} aria-hidden="true" style={{ color: 'var(--success)' }} />,
+        info: <Info size={16} aria-hidden="true" style={{ color: 'var(--info)' }} />,
+        warning: <AlertCircle size={16} aria-hidden="true" style={{ color: 'var(--warning)' }} />,
+        error: <XCircle size={16} aria-hidden="true" style={{ color: 'var(--danger)' }} />,
+      }}
+    />
+  );
+}
+
+export interface ToastOptions {
+  description?: ReactNode;
+  duration?: number;
+  action?: { label: string; onClick: () => void };
+}
+
+export const toast = {
+  success(message: string, opts?: ToastOptions): string | number {
+    return sonnerToast.success(message, opts as never);
+  },
+  error(message: string, opts?: ToastOptions): string | number {
+    return sonnerToast.error(message, opts as never);
+  },
+  info(message: string, opts?: ToastOptions): string | number {
+    return sonnerToast.info(message, opts as never);
+  },
+  warning(message: string, opts?: ToastOptions): string | number {
+    return sonnerToast.warning(message, opts as never);
+  },
+  message(message: string, opts?: ToastOptions): string | number {
+    return sonnerToast.message(message, opts as never);
+  },
+  dismiss(id?: string | number): void {
+    sonnerToast.dismiss(id);
+  },
+};

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

@@ -0,0 +1,89 @@
+import { forwardRef, type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import * as RxTooltip from '@radix-ui/react-tooltip';
+import { cx } from '../utils/cx.js';
+
+/**
+ * Tooltip — small popup with descriptive text.
+ *
+ * Built on Radix Tooltip. Per DESIGN.md §10:
+ *   - tooltip on disabled controls is BANNED — use inline helper text
+ *   - never put interactive content inside a tooltip
+ */
+export type TooltipSide = 'top' | 'right' | 'bottom' | 'left';
+export type TooltipAlign = 'start' | 'center' | 'end';
+
+export interface TooltipProps extends Omit<ComponentPropsWithoutRef<typeof RxTooltip.Root>, 'children'> {
+  children: ReactNode;
+  content: ReactNode;
+  side?: TooltipSide;
+  align?: TooltipAlign;
+  delayDuration?: number;
+  shortcut?: string;
+}
+
+export const TooltipProvider = RxTooltip.Provider;
+
+export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(function Tooltip(props, ref) {
+  const {
+    children,
+    content,
+    side = 'top',
+    align = 'center',
+    delayDuration = 250,
+    shortcut,
+    open,
+    defaultOpen,
+    onOpenChange,
+  } = props;
+
+  return (
+    <RxTooltip.Root
+      delayDuration={delayDuration}
+      open={open}
+      defaultOpen={defaultOpen}
+      onOpenChange={onOpenChange}
+    >
+      <RxTooltip.Trigger asChild>{children}</RxTooltip.Trigger>
+      <RxTooltip.Portal>
+        <RxTooltip.Content
+          ref={ref}
+          side={side}
+          align={align}
+          sideOffset={6}
+          className={cx('v8-tooltip')}
+          style={{
+            background: 'var(--fg)',
+            color: 'var(--bg)',
+            fontSize: 'var(--fs-12)',
+            fontWeight: 500,
+            padding: '4px 8px',
+            borderRadius: 'var(--radius-sm)',
+            boxShadow: 'var(--shadow-2)',
+            maxWidth: 280,
+            zIndex: 'var(--z-tooltip)',
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: 'var(--space-2)',
+            userSelect: 'none',
+          }}
+        >
+          {content}
+          {shortcut !== undefined && (
+            <kbd
+              style={{
+                fontFamily: 'var(--font-mono)',
+                fontSize: 'var(--fs-12)',
+                padding: '0 4px',
+                background: 'oklch(from var(--fg) l c h / 0.15)',
+                borderRadius: 'var(--radius-sm)',
+              }}
+            >
+              {shortcut}
+            </kbd>
+          )}
+          <RxTooltip.Arrow style={{ fill: 'var(--fg)' }} />
+        </RxTooltip.Content>
+      </RxTooltip.Portal>
+    </RxTooltip.Root>
+  );
+});

package/bizar-dash/src/web/v8/ui/goals/GoalCard.tsx

@@ -0,0 +1,176 @@
+import { type ReactNode } from 'react';
+import { Calendar, ChevronRight } from 'lucide-react';
+import { cx } from '../utils/cx.js';
+import { ProgressBar } from '../data/ProgressBar.js';
+import { Badge } from '../data/Badge.js';
+
+/**
+ * GoalCard — long-horizon goal surface (PLAN.md: "Goals page").
+ *
+ * Goals are NOT kanban cards. They are intentional commitments tracked
+ * over weeks/months. Each card shows: title, why (description), status,
+ * progress, due, owner, key results count.
+ */
+
+export type GoalStatus = 'on-track' | 'at-risk' | 'off-track' | 'done';
+
+export interface GoalCardProps {
+  id: string;
+  title: string;
+  /** Why this goal matters (the "because"). */
+  description?: string;
+  status: GoalStatus;
+  /** 0..1 fractional progress. */
+  progress: number;
+  /** Due date label (e.g. "Q3 2026", "Mar 31"). */
+  due?: string;
+  /** Owner name (renders as Avatar when paired with avatarUrl). */
+  ownerName?: string;
+  ownerAvatarUrl?: string;
+  /** Key results count + done count (e.g. "3 / 5 key results"). */
+  keyResultsDone?: number;
+  keyResultsTotal?: number;
+  /** Optional badges row (priority, tags). */
+  badges?: ReactNode;
+  /** Click handler — opens the goal detail. */
+  onOpen?: () => void;
+  className?: string;
+}
+
+const STATUS_LABEL: Record<GoalStatus, string> = {
+  'on-track': 'On track',
+  'at-risk': 'At risk',
+  'off-track': 'Off track',
+  done: 'Done',
+};
+
+const STATUS_TONE: Record<GoalStatus, 'success' | 'warning' | 'danger' | 'neutral'> = {
+  'on-track': 'success',
+  'at-risk': 'warning',
+  'off-track': 'danger',
+  done: 'neutral',
+};
+
+export function GoalCard(props: GoalCardProps) {
+  const {
+    title,
+    description,
+    status,
+    progress,
+    due,
+    ownerName,
+    ownerAvatarUrl,
+    keyResultsDone,
+    keyResultsTotal,
+    badges,
+    onOpen,
+    className,
+  } = props;
+
+  return (
+    <button
+      type="button"
+      onClick={onOpen}
+      className={cx('v8-goal-card', `v8-goal-card--${status}`, className)}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 'var(--space-3)',
+        width: '100%',
+        padding: 'var(--space-4)',
+        background: 'var(--surface-1)',
+        border: '1px solid var(--border)',
+        borderRadius: 'var(--radius-lg)',
+        textAlign: 'left',
+        cursor: 'pointer',
+        font: 'inherit',
+        color: 'inherit',
+        transition: 'border-color var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-out)',
+      }}
+    >
+      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 'var(--space-2)' }}>
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <div style={{ fontSize: 'var(--fs-14)', fontWeight: 600, color: 'var(--fg)', lineHeight: 'var(--lh-snug)' }}>
+            {title}
+          </div>
+          {description !== undefined && (
+            <div
+              style={{
+                fontSize: 'var(--fs-13)',
+                color: 'var(--fg-muted)',
+                marginTop: 4,
+                display: '-webkit-box',
+                WebkitLineClamp: 2,
+                WebkitBoxOrient: 'vertical',
+                overflow: 'hidden',
+              }}
+            >
+              {description}
+            </div>
+          )}
+        </div>
+        <Badge tone={STATUS_TONE[status]} dot>
+          {STATUS_LABEL[status]}
+        </Badge>
+      </div>
+      <div>
+        <ProgressBar
+          value={progress}
+          tone={status === 'on-track' ? 'success' : status === 'at-risk' ? 'warning' : status === 'off-track' ? 'danger' : 'accent'}
+        />
+        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 6, fontSize: 'var(--fs-12)', color: 'var(--fg-muted)', fontVariantNumeric: 'tabular-nums' }}>
+          <span>{Math.round(progress * 100)}% complete</span>
+          {keyResultsDone !== undefined && keyResultsTotal !== undefined && (
+            <span>
+              {keyResultsDone} / {keyResultsTotal} key results
+            </span>
+          )}
+        </div>
+      </div>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          gap: 'var(--space-2)',
+          fontSize: 'var(--fs-12)',
+          color: 'var(--fg-subtle)',
+        }}
+      >
+        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)' }}>
+          {due !== undefined && (
+            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
+              <Calendar size={12} aria-hidden="true" />
+              {due}
+            </span>
+          )}
+          {ownerName !== undefined && (
+            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
+              <span
+                aria-hidden="true"
+                style={{
+                  width: 16,
+                  height: 16,
+                  borderRadius: 'var(--radius-pill)',
+                  background: ownerAvatarUrl !== undefined ? `url(${ownerAvatarUrl}) center/cover` : 'var(--accent)',
+                  display: 'inline-block',
+                }}
+              />
+              {ownerName}
+            </span>
+          )}
+        </div>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-2)' }}>
+          {badges}
+          <ChevronRight size={14} aria-hidden="true" style={{ color: 'var(--fg-subtle)' }} />
+        </div>
+      </div>
+      <style>{`
+        .v8-goal-card:hover {
+          border-color: var(--accent);
+          background: var(--surface-2);
+        }
+      `}</style>
+    </button>
+  );
+}

package/bizar-dash/src/web/v8/ui/goals/KeyResult.tsx

@@ -0,0 +1,115 @@
+import { type ReactNode } from 'react';
+import { CheckCircle2, Circle, Minus } from 'lucide-react';
+import { cx } from '../utils/cx.js';
+import { ProgressBar } from '../data/ProgressBar.js';
+
+/**
+ * KeyResult — a measurable sub-goal inside a Goal.
+ *
+ * Renders title + progress + status icon + optional metric caption
+ * (e.g. "47 / 100 tasks completed").
+ */
+
+export type KeyResultStatus = 'done' | 'in-progress' | 'not-started';
+
+export interface KeyResultProps {
+  id: string;
+  title: string;
+  status: KeyResultStatus;
+  /** 0..1 fractional progress. */
+  progress: number;
+  /** Optional metric caption (e.g. "47 / 100"). */
+  metric?: ReactNode;
+  /** Optional assignee name. */
+  assignee?: string;
+  onToggle?: () => void;
+  className?: string;
+}
+
+const STATUS_ICON = {
+  done: CheckCircle2,
+  'in-progress': Minus,
+  'not-started': Circle,
+} as const;
+
+const STATUS_FG = {
+  done: 'var(--success)',
+  'in-progress': 'var(--info)',
+  'not-started': 'var(--fg-subtle)',
+} as const;
+
+export function KeyResult(props: KeyResultProps) {
+  const { title, status, progress, metric, assignee, onToggle, className } = props;
+  const Icon = STATUS_ICON[status];
+  return (
+    <div
+      className={cx('v8-key-result', `v8-key-result--${status}`, className)}
+      style={{
+        display: 'flex',
+        alignItems: 'flex-start',
+        gap: 'var(--space-3)',
+        padding: 'var(--space-3)',
+        background: 'var(--surface-0)',
+        border: '1px solid var(--border)',
+        borderRadius: 'var(--radius)',
+      }}
+    >
+      <button
+        type="button"
+        onClick={onToggle}
+        aria-label={status === 'done' ? 'Mark as not done' : 'Mark as done'}
+        style={{
+          display: 'inline-flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: 20,
+          height: 20,
+          marginTop: 2,
+          padding: 0,
+          background: 'transparent',
+          border: 0,
+          borderRadius: 'var(--radius-sm)',
+          color: STATUS_FG[status],
+          cursor: 'pointer',
+          flexShrink: 0,
+        }}
+      >
+        <Icon size={18} aria-hidden="true" />
+      </button>
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <div
+          style={{
+            fontSize: 'var(--fs-13)',
+            color: status === 'done' ? 'var(--fg-muted)' : 'var(--fg)',
+            fontWeight: 500,
+            textDecoration: status === 'done' ? 'line-through' : 'none',
+            lineHeight: 'var(--lh-snug)',
+          }}
+        >
+          {title}
+        </div>
+        {status !== 'not-started' && (
+          <div style={{ marginTop: 'var(--space-2)' }}>
+            <ProgressBar value={progress} tone={status === 'done' ? 'success' : 'accent'} height={4} />
+          </div>
+        )}
+        {(metric !== undefined || assignee !== undefined) && (
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              gap: 'var(--space-2)',
+              marginTop: 6,
+              fontSize: 'var(--fs-12)',
+              color: 'var(--fg-subtle)',
+            }}
+          >
+            {metric !== undefined && <span style={{ fontVariantNumeric: 'tabular-nums' }}>{metric}</span>}
+            {assignee !== undefined && <span>@{assignee}</span>}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}