@polderlabs/bizar 7.0.4 → 8.1.0

package/bizar-dash/src/web/v8/ui/index.ts

@@ -0,0 +1,322 @@
+/**
+ * v8 UI barrel — public surface of the v8 component library.
+ *
+ * Naming convention:
+ *   - layouts/primitives → exported directly
+ *   - controls/*         → Sprint S2
+ *   - feedback/*         → Sprint S2
+ *   - data/*             → Sprint S3
+ *   - navigation/*       → Sprint S4
+ *   - kanban/*           → Sprint S5 (centerpiece)
+ *
+ * Always import from this barrel — never reach into individual files.
+ * That keeps refactors inside the v8 tree trivial.
+ */
+
+// primitives (Sprint S1)
+export { Box, type BoxProps, type BoxStyleProps } from './primitives/Box.js';
+export { Stack, type StackProps } from './primitives/Stack.js';
+export { Inline, type InlineProps } from './primitives/Inline.js';
+export { Cluster, type ClusterProps } from './primitives/Cluster.js';
+export { Grid, type GridProps, type GridCols } from './primitives/Grid.js';
+export { Center, type CenterProps } from './primitives/Center.js';
+export { Separator, type SeparatorProps } from './primitives/Separator.js';
+export { ScrollArea, type ScrollAreaProps } from './primitives/ScrollArea.js';
+export { Portal, type PortalProps } from './primitives/Portal.js';
+export { VisuallyHidden, type VisuallyHiddenProps } from './primitives/VisuallyHidden.js';
+
+// utils
+export { cx } from './utils/cx.js';
+
+// theme
+export {
+  ThemeProvider,
+  type ThemeProviderProps,
+  type ThemeMode,
+  type ResolvedTheme,
+  type ThemeContextValue,
+  ThemeContext,
+} from './theme/ThemeProvider.js';
+export { useTheme } from './theme/useTheme.js';
+export {
+  DensityProvider,
+  type DensityProviderProps,
+  type Density,
+  type DensityContextValue,
+  DensityContext,
+} from './theme/DensityProvider.js';
+export { useDensity } from './theme/useDensity.js';
+export { ThemeToggle, DensityToggle } from './theme/ThemeToggle.js';
+
+// ── controls (Sprint S2) ─────────────────────────────────────────────────
+
+export {
+  Button,
+  type ButtonProps,
+  type ButtonVariant,
+  type ButtonSize,
+} from './controls/Button.js';
+export {
+  IconButton,
+  type IconButtonProps,
+  type IconButtonVariant,
+  type IconButtonSize,
+} from './controls/IconButton.js';
+export { ButtonGroup, type ButtonGroupProps } from './controls/ButtonGroup.js';
+export { Input, type InputProps } from './controls/Input.js';
+export { Textarea, type TextareaProps } from './controls/Textarea.js';
+export { Checkbox, type CheckboxProps } from './controls/Checkbox.js';
+export { Switch, type SwitchProps } from './controls/Switch.js';
+export { Toggle, type ToggleProps } from './controls/Toggle.js';
+export {
+  ToggleGroup,
+  ToggleGroupItem,
+  type ToggleGroupProps,
+  type ToggleGroupItemProps,
+  type ToggleGroupType,
+} from './controls/ToggleGroup.js';
+export { RadioGroup, RadioGroupItem, type RadioGroupProps } from './controls/RadioGroup.js';
+export {
+  Select,
+  SelectTrigger,
+  SelectContent,
+  SelectItem,
+  SelectGroup,
+  SelectLabel,
+  SelectSeparator,
+  type SelectProps,
+} from './controls/Select.js';
+export { Slider, type SliderProps } from './controls/Slider.js';
+export { Field, type FieldProps } from './controls/Field.js';
+export { Form, type FormProps } from './controls/Form.js';
+
+// ── feedback (Sprint S2) ─────────────────────────────────────────────────
+
+export {
+  Dialog,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogPortal,
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  type DialogProps,
+  type DialogContentProps,
+  type DialogSize,
+} from './feedback/Dialog.js';
+export {
+  Tooltip,
+  TooltipProvider,
+  type TooltipProps,
+  type TooltipSide,
+  type TooltipAlign,
+} from './feedback/Tooltip.js';
+export {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverAnchor,
+  PopoverClose,
+  type PopoverProps,
+  type PopoverContentProps,
+} from './feedback/Popover.js';
+export { Toaster, toast, type ToasterProps } from './feedback/Toast.js';
+export { Alert, type AlertProps, type AlertTone } from './feedback/Alert.js';
+export { Banner, type BannerProps } from './feedback/Banner.js';
+export { Skeleton, SkeletonText, type SkeletonProps } from './feedback/Skeleton.js';
+export { Spinner, type SpinnerProps } from './feedback/Spinner.js';
+export { EmptyState, type EmptyStateProps } from './feedback/EmptyState.js';
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  type DropdownMenuProps,
+  type DropdownMenuContentProps,
+  type DropdownMenuItemProps,
+} from './feedback/DropdownMenu.js';
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuLabel,
+  ContextMenuGroup,
+  type ContextMenuProps,
+  type ContextMenuContentProps,
+  type ContextMenuItemProps,
+} from './feedback/ContextMenu.js';
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  type SheetProps,
+  type SheetContentProps,
+  type SheetSide,
+} from './feedback/Sheet.js';
+export {
+  Drawer,
+  DrawerContent,
+  DrawerTrigger,
+  DrawerClose,
+} from './feedback/Drawer.js';
+
+// ── data (Sprint S3) ──────────────────────────────────────────────────────
+
+export { Card, CardHeader, CardBody, CardFooter, type CardProps, type CardHeaderProps, type CardVariant } from './data/Card.js';
+export { Badge, type BadgeProps, type BadgeTone, type BadgeSize } from './data/Badge.js';
+export { Chip, type ChipProps } from './data/Chip.js';
+export { Avatar, AvatarStack, type AvatarProps, type AvatarSize, type AvatarStackProps } from './data/Avatar.js';
+export { StatTile, StatGrid, type StatTileProps, type StatTrend, type StatGridProps } from './data/StatTile.js';
+export { Sparkline, type SparklineProps } from './data/Sparkline.js';
+export { BarList, type BarListProps, type BarListItem } from './data/BarList.js';
+export { Timeline, type TimelineProps, type TimelineItem } from './data/Timeline.js';
+export {
+  Accordion,
+  AccordionItem,
+  type AccordionProps,
+  type AccordionItemProps,
+} from './data/Accordion.js';
+export { ViewHeader, type ViewHeaderProps, type BreadcrumbItem } from './data/ViewHeader.js';
+export {
+  Table,
+  TableHead,
+  TableBody,
+  TableRow,
+  TableHeader,
+  TableCell,
+  type TableProps,
+  type TableHeadProps,
+  type TableBodyProps,
+  type TableRowProps,
+  type TableHeaderProps,
+  type TableCellProps,
+} from './data/Table.js';
+export { Kbd, type KbdProps } from './data/Kbd.js';
+
+// ── navigation (Sprint S4) ────────────────────────────────────────────────
+
+export {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+  type TabsProps,
+  type TabsListProps,
+  type TabsTriggerProps,
+  type TabsVariant,
+} from './navigation/Tabs.js';
+export { NavLink, type NavLinkProps } from './navigation/NavLink.js';
+export { Pagination, type PaginationProps } from './navigation/Pagination.js';
+export {
+  CommandPalette,
+  CommandPaletteGroup,
+  CommandPaletteItem,
+  CommandPaletteSeparator,
+  useCommandPaletteHotkey,
+  type CommandPaletteProps,
+  type CommandPaletteGroupProps,
+  type CommandPaletteItemProps,
+} from './navigation/CommandPalette.js';
+
+// ── kanban (Sprint S5 — centerpiece) ──────────────────────────────────────
+
+export {
+  KanbanCard,
+  useKanbanCardSortable,
+  type KanbanCardProps,
+  type KanbanCardData,
+  type KanbanCardVariant,
+  type KanbanPriority,
+} from './kanban/KanbanCard.js';
+export {
+  KanbanColumn,
+  type KanbanColumnProps,
+  type KanbanColumnData,
+} from './kanban/KanbanColumn.js';
+export { KanbanBoard, type KanbanBoardProps } from './kanban/KanbanBoard.js';
+export { KanbanQuickAdd, type KanbanQuickAddProps } from './kanban/KanbanQuickAdd.js';
+export { KanbanContextMenu, type KanbanContextMenuProps } from './kanban/KanbanContextMenu.js';
+
+// ── goals (Sprint S6) ─────────────────────────────────────────────────────
+
+export {
+  GoalCard,
+  type GoalCardProps,
+  type GoalStatus,
+} from './goals/GoalCard.js';
+export {
+  KeyResult,
+  type KeyResultProps,
+  type KeyResultStatus,
+} from './goals/KeyResult.js';
+
+// ── agents (Sprint S6) ────────────────────────────────────────────────────
+
+export {
+  AgentCard,
+  type AgentCardProps,
+  type AgentStatus,
+} from './agents/AgentCard.js';
+export {
+  AgentActivity,
+  type AgentActivityProps,
+  type AgentActivityItem,
+} from './agents/AgentActivity.js';
+
+// ── activity (Sprint S7) ──────────────────────────────────────────────────
+
+export {
+  ActivityFeed,
+  type ActivityFeedProps,
+  type ActivityItem,
+  type ActivityTone,
+} from './activity/ActivityFeed.js';
+
+// ── memory (Sprint S7) ────────────────────────────────────────────────────
+
+export {
+  MemoryVault,
+  type MemoryVaultProps,
+  type MemoryEntry,
+  type MemoryScope,
+} from './memory/MemoryVault.js';
+
+// ── libraries (Sprint S7) ─────────────────────────────────────────────────
+
+export {
+  LibraryItem,
+  type LibraryItemProps,
+  type LibraryStatus,
+} from './libraries/LibraryItem.js';
+export { LibraryGrid, type LibraryGridProps } from './libraries/LibraryGrid.js';
+
+// ── settings (Sprint S8) ──────────────────────────────────────────────────
+
+export {
+  SettingsSection,
+  type SettingsSectionProps,
+} from './settings/SettingsSection.js';
+export {
+  SettingsRow,
+  type SettingsRowProps,
+} from './settings/SettingsRow.js';
+export {
+  SettingsNav,
+  type SettingsNavProps,
+  type SettingsNavItem,
+} from './settings/SettingsNav.js';

package/bizar-dash/src/web/v8/ui/kanban/KanbanBoard.tsx

@@ -0,0 +1,83 @@
+import { useState, type ReactNode } from 'react';
+import {
+  DndContext,
+  closestCorners,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from '@dnd-kit/core';
+import { sortableKeyboardCoordinates } from '@dnd-kit/sortable';
+import { cx } from '../utils/cx.js';
+
+/**
+ * KanbanBoard — horizontal-scrolling board hosting multiple columns.
+ *
+ * The board owns drag state. It receives:
+ *   - columns: definition + droppable ids
+ *   - renderColumn: function that takes column data + isOver flag + children
+ *   - onCardMove: invoked when a card moves between columns (or reorders within)
+ *
+ * For most cases, prefer using the higher-level `KanbanBoardSimple` wrapper
+ * which handles the dnd-kit boilerplate for you.
+ */
+
+export interface KanbanBoardProps {
+  columns: readonly { id: string }[];
+  onCardMove?: (cardId: string, fromColumnId: string, toColumnId: string) => void;
+  children: ReactNode;
+  className?: string;
+}
+
+export function KanbanBoard({ columns, onCardMove, children, className }: KanbanBoardProps) {
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+  );
+  const [, setActiveId] = useState<string | null>(null);
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    setActiveId(null);
+    const { active, over } = event;
+    if (over === null) return;
+    const cardId = String(active.id);
+    const targetId = String(over.id);
+    // The "over" can be a column id (drop on empty) or another card id.
+    const toColumn = columns.find((c) => c.id === targetId)?.id ?? cardId.split('::')[0];
+    if (toColumn === undefined) return;
+    const fromColumn = cardId.split('::')[0] ?? '';
+    if (fromColumn !== toColumn && onCardMove !== undefined) {
+      onCardMove(cardId, fromColumn, toColumn);
+    }
+  };
+
+  return (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCorners}
+      onDragStart={(e) => setActiveId(String(e.active.id))}
+      onDragEnd={handleDragEnd}
+    >
+      <div
+        className={cx('v8-kanban-board', className)}
+        style={{
+          display: 'grid',
+          gridAutoFlow: 'column',
+          gridAutoColumns: 'minmax(320px, 1fr)',
+          gap: 'var(--space-4)',
+          padding: 'var(--space-4) var(--space-5)',
+          overflowX: 'auto',
+          overflowY: 'hidden',
+          height: '100%',
+          width: '100%',
+          alignItems: 'stretch',
+        }}
+        role="region"
+        aria-label="Kanban board"
+      >
+        {children}
+      </div>
+    </DndContext>
+  );
+}

package/bizar-dash/src/web/v8/ui/kanban/KanbanCard.tsx

@@ -0,0 +1,247 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { Calendar, MessageSquare, Paperclip, GitBranch } from 'lucide-react';
+import { cx } from '../utils/cx.js';
+
+/**
+ * KanbanCard — the primary surface of the v8 dashboard.
+ *
+ * Built per DESIGN.md §6: compact metadata, never decorative, drag-handle
+ * is the whole card, every card has a right-click context menu.
+ *
+ * Variants:
+ *   - default:  full metadata row (date, comments, attachments, branch)
+ *   - compact:  title + 1 priority dot only (for crowded boards)
+ *   - detailed: title + description preview + metadata
+ */
+
+export type KanbanCardVariant = 'default' | 'compact' | 'detailed';
+
+export type KanbanPriority = 'low' | 'medium' | 'high' | 'urgent';
+
+export interface KanbanCardData {
+  id: string;
+  title: string;
+  description?: string;
+  priority?: KanbanPriority;
+  /** Due date as ISO string or relative phrase ("Today", "Tomorrow"). */
+  due?: string;
+  /** Number of comments; renders icon + count. */
+  comments?: number;
+  /** Number of attachments. */
+  attachments?: number;
+  /** Branch name to show in the meta row. */
+  branch?: string;
+  /** IDs of assigned agents/users; rendered as AvatarStack. */
+  assignees?: readonly string[];
+  /** Tone of the leading priority stripe. */
+  accentTone?: 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'accent';
+  /** Custom badge / chip to render after the title. */
+  badges?: ReactNode;
+}
+
+export interface KanbanCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'id'> {
+  card: KanbanCardData;
+  variant?: KanbanCardVariant;
+  /** When true, the card is being dragged (visual lift + shadow). */
+  isDragging?: boolean;
+  /** Drag handlers from useSortable (omit to make the card non-draggable). */
+  dragHandleProps?: Record<string, unknown>;
+}
+
+const PRIORITY_FG: Record<KanbanPriority, string> = {
+  low: 'var(--fg-subtle)',
+  medium: 'var(--info)',
+  high: 'var(--warning)',
+  urgent: 'var(--danger)',
+};
+
+const PRIORITY_LABEL: Record<KanbanPriority, string> = {
+  low: 'Low',
+  medium: 'Medium',
+  high: 'High',
+  urgent: 'Urgent',
+};
+
+const ACCENT_FG: Record<NonNullable<KanbanCardData['accentTone']>, string> = {
+  neutral: 'var(--fg-subtle)',
+  info: 'var(--info)',
+  success: 'var(--success)',
+  warning: 'var(--warning)',
+  danger: 'var(--danger)',
+  accent: 'var(--accent)',
+};
+
+export const KanbanCard = forwardRef<HTMLDivElement, KanbanCardProps>(function KanbanCard(
+  props,
+  ref,
+) {
+  const { card, variant = 'default', isDragging, dragHandleProps, className, style, ...rest } =
+    props;
+
+  return (
+    <div
+      ref={ref}
+      data-kanban-card-id={card.id}
+      className={cx('v8-kanban-card', `v8-kanban-card--${variant}`, isDragging && 'is-dragging', className)}
+      style={{
+        position: 'relative',
+        background: 'var(--surface-1)',
+        border: '1px solid var(--border)',
+        borderRadius: 'var(--radius-md)',
+        padding: 'var(--space-4) var(--space-4) var(--space-3)',
+        boxShadow: isDragging === true ? 'var(--shadow-3)' : 'var(--shadow-1)',
+        transform: isDragging === true ? 'rotate(1.5deg)' : undefined,
+        transition: 'box-shadow var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out)',
+        ...style,
+      }}
+      {...(dragHandleProps as Record<string, unknown>)}
+      {...rest}
+    >
+      {/* Leading accent stripe — colored by priority or accentTone. */}
+      {variant !== 'compact' && (
+        <span
+          aria-hidden="true"
+          style={{
+            position: 'absolute',
+            left: 0,
+            top: 6,
+            bottom: 6,
+            width: 3,
+            borderRadius: '0 var(--radius-pill) var(--radius-pill) 0',
+            background:
+              card.priority !== undefined
+                ? PRIORITY_FG[card.priority]
+                : ACCENT_FG[card.accentTone ?? 'neutral'],
+          }}
+        />
+      )}
+      <div style={{ paddingLeft: variant !== 'compact' ? 'var(--space-2)' : 0 }}>
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'flex-start',
+            gap: 'var(--space-2)',
+            marginBottom: variant === 'detailed' ? 'var(--space-2)' : 0,
+          }}
+        >
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <div
+              style={{
+                fontSize: 'var(--fs-13)',
+                fontWeight: 500,
+                color: 'var(--fg)',
+                lineHeight: 'var(--lh-snug)',
+              }}
+            >
+              {card.title}
+            </div>
+            {variant === 'detailed' && card.description !== undefined && (
+              <div
+                style={{
+                  fontSize: 'var(--fs-12)',
+                  color: 'var(--fg-muted)',
+                  marginTop: 'var(--space-1)',
+                  display: '-webkit-box',
+                  WebkitLineClamp: 2,
+                  WebkitBoxOrient: 'vertical',
+                  overflow: 'hidden',
+                }}
+              >
+                {card.description}
+              </div>
+            )}
+          </div>
+          {card.priority !== undefined && (
+            <span
+              aria-label={`Priority: ${PRIORITY_LABEL[card.priority]}`}
+              style={{
+                width: 8,
+                height: 8,
+                borderRadius: 'var(--radius-pill)',
+                background: PRIORITY_FG[card.priority],
+                flexShrink: 0,
+                marginTop: 6,
+              }}
+            />
+          )}
+        </div>
+        {card.badges !== undefined && (
+          <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap', marginTop: 'var(--space-2)' }}>
+            {card.badges}
+          </div>
+        )}
+        {variant !== 'compact' &&
+          (card.due !== undefined ||
+            card.comments !== undefined ||
+            card.attachments !== undefined ||
+            card.branch !== undefined) && (
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 'var(--space-3)',
+                marginTop: 'var(--space-2)',
+                fontSize: 'var(--fs-12)',
+                color: 'var(--fg-muted)',
+                fontVariantNumeric: 'tabular-nums',
+              }}
+            >
+              {card.due !== undefined && (
+                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
+                  <Calendar size={12} aria-hidden="true" />
+                  {card.due}
+                </span>
+              )}
+              {card.comments !== undefined && card.comments > 0 && (
+                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
+                  <MessageSquare size={12} aria-hidden="true" />
+                  {card.comments}
+                </span>
+              )}
+              {card.attachments !== undefined && card.attachments > 0 && (
+                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
+                  <Paperclip size={12} aria-hidden="true" />
+                  {card.attachments}
+                </span>
+              )}
+              {card.branch !== undefined && (
+                <span
+                  style={{
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    gap: 4,
+                    fontFamily: 'var(--font-mono)',
+                  }}
+                  title={card.branch}
+                >
+                  <GitBranch size={12} aria-hidden="true" />
+                  {card.branch}
+                </span>
+              )}
+            </div>
+          )}
+      </div>
+    </div>
+  );
+});
+
+/**
+ * useKanbanCardSortable — convenience hook wrapping @dnd-kit/sortable's
+ * useSortable for a card. Returns props to spread onto <KanbanCard>.
+ */
+export function useKanbanCardSortable(id: string) {
+  const sortable = useSortable({ id });
+  const style = {
+    transform: CSS.Transform.toString(sortable.transform),
+    transition: sortable.transition,
+  };
+  return {
+    attributes: sortable.attributes,
+    listeners: sortable.listeners,
+    setNodeRef: sortable.setNodeRef,
+    isDragging: sortable.isDragging,
+    style,
+  };
+}