@polderlabs/bizar 10.0.5 → 10.0.7

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

@@ -1,8 +1,11 @@
 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 { Check } from 'lucide-react';
+import { Calendar, MessageSquare, Paperclip, GitBranch, Repeat, User as UserIcon } from 'lucide-react';
 import { cx } from '../utils/cx.js';
+import { KanbanProgress } from './KanbanProgress.js';
+import { KanbanCardBadges, type KanbanCardBadge } from './KanbanCardBadges.js';
 
 /**
  * KanbanCard — the primary surface of the v8 dashboard.
@@ -33,12 +36,28 @@ export interface KanbanCardData {
   attachments?: number;
   /** Branch name to show in the meta row. */
   branch?: string;
+  /** Assignee name (single). Rendered as a chip when set. */
+  assignee?: 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;
+  /** Live progress 0..100. */
+  progress?: number;
+  /** Current step description (rendered under the progress bar). */
+  currentStep?: string;
+  /** Optional badges array. */
+  cardBadges?: readonly KanbanCardBadge[];
+  /** Tags (rendered as small chips when no badges are provided). */
+  tags?: readonly string[];
+  /** Recurring task indicator. */
+  recurring?: boolean;
+  /** Number of subtasks. */
+  subtaskCount?: number;
+  /** Number of dependencies. */
+  dependencyCount?: number;
 }
 
 export interface KanbanCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'id'> {
@@ -48,6 +67,14 @@ export interface KanbanCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'i
   isDragging?: boolean;
   /** Drag handlers from useSortable (omit to make the card non-draggable). */
   dragHandleProps?: Record<string, unknown>;
+  /** When true, the card is checked in the multi-select toolbar. */
+  selected?: boolean;
+  /** Indeterminate state (selection box between checked/unchecked). */
+  indeterminate?: boolean;
+  /** Called when the selection checkbox toggles. Omit to hide the checkbox. */
+  onSelectionChange?: (id: string, next: boolean) => void;
+  /** When true, render the selection checkbox even without hover. */
+  showSelection?: boolean;
 }
 
 const PRIORITY_FG: Record<KanbanPriority, string> = {
@@ -77,28 +104,122 @@ export const KanbanCard = forwardRef<HTMLDivElement, KanbanCardProps>(function K
   props,
   ref,
 ) {
-  const { card, variant = 'default', isDragging, dragHandleProps, className, style, ...rest } =
-    props;
+  const {
+    card,
+    variant = 'default',
+    isDragging,
+    dragHandleProps,
+    selected,
+    indeterminate,
+    onSelectionChange,
+    showSelection,
+    className,
+    style,
+    ...rest
+  } = props;
+
+  const showCheckbox = onSelectionChange !== undefined;
+
+  // Resolve which badges to render. Prefer caller-provided badges, else
+  // derive from the convenience props on `card`.
+  const derivedBadges: KanbanCardBadge[] = [];
+  if (card.cardBadges === undefined) {
+    if (card.recurring === true) {
+      derivedBadges.push({ label: 'Recurring', tone: 'info', icon: <Repeat size={10} aria-hidden="true" /> });
+    }
+    if (card.assignee) {
+      derivedBadges.push({
+        label: card.assignee,
+        tone: 'accent',
+        icon: <UserIcon size={10} aria-hidden="true" />,
+      });
+    }
+    if (card.subtaskCount !== undefined && card.subtaskCount > 0) {
+      derivedBadges.push({ label: `${card.subtaskCount} subtasks`, tone: 'neutral' });
+    }
+    if (card.dependencyCount !== undefined && card.dependencyCount > 0) {
+      derivedBadges.push({ label: `${card.dependencyCount} deps`, tone: 'warning' });
+    }
+    if (card.tags) {
+      for (const t of card.tags.slice(0, 3)) {
+        derivedBadges.push({ label: t, tone: 'neutral' });
+      }
+    }
+  }
+  const badges = card.cardBadges ?? derivedBadges;
 
   return (
     <div
       ref={ref}
       data-kanban-card-id={card.id}
-      className={cx('v8-kanban-card', `v8-kanban-card--${variant}`, isDragging && 'is-dragging', className)}
+      data-selected={selected === true ? 'true' : undefined}
+      className={cx(
+        'v8-kanban-card',
+        `v8-kanban-card--${variant}`,
+        isDragging && 'is-dragging',
+        selected === true && 'is-selected',
+        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)',
+        background: selected === true ? 'var(--surface-2)' : 'var(--surface-1)',
+        border: `1px solid ${selected === true ? 'var(--accent)' : 'var(--border)'}`,
+        borderRadius: 'var(--radius)',
+        padding: 'var(--space-3)',
+        boxShadow: isDragging === true ? 'var(--shadow-3)' : 'none',
         transform: isDragging === true ? 'rotate(1.5deg)' : undefined,
-        transition: 'box-shadow var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out)',
+        transition:
+          'box-shadow var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-out)',
         ...style,
       }}
       {...(dragHandleProps as Record<string, unknown>)}
       {...rest}
     >
+      {showCheckbox && (
+        <button
+          type="button"
+          role="checkbox"
+          aria-checked={indeterminate === true ? 'mixed' : selected === true}
+          aria-label={selected === true ? 'Deselect card' : 'Select card'}
+          onClick={(e) => {
+            // Stop the click from initiating a drag or bubbling up.
+            e.stopPropagation();
+            onSelectionChange?.(card.id, !(selected === true));
+          }}
+          onPointerDown={(e) => e.stopPropagation()}
+          style={{
+            position: 'absolute',
+            top: 6,
+            left: 6,
+            width: 16,
+            height: 16,
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderRadius: 'var(--radius-sm)',
+            border: `1px solid ${selected === true ? 'var(--accent)' : 'var(--border-strong)'}`,
+            background: selected === true ? 'var(--accent)' : 'var(--surface-0)',
+            color: 'var(--fg-on-accent)',
+            cursor: 'pointer',
+            opacity: showSelection === true || selected === true ? 1 : 0,
+            zIndex: 2,
+          }}
+          className="v8-kanban-card__checkbox"
+        >
+          {selected === true && <Check size={10} aria-hidden="true" />}
+          {indeterminate === true && (
+            <span
+              aria-hidden="true"
+              style={{
+                width: 8,
+                height: 2,
+                background: 'var(--fg-on-accent)',
+                borderRadius: 1,
+              }}
+            />
+          )}
+        </button>
+      )}
       {/* Leading accent stripe — colored by priority or accentTone. */}
       {variant !== 'compact' && (
         <span
@@ -117,7 +238,16 @@ export const KanbanCard = forwardRef<HTMLDivElement, KanbanCardProps>(function K
           }}
         />
       )}
-      <div style={{ paddingLeft: variant !== 'compact' ? 'var(--space-2)' : 0 }}>
+      <div
+        style={{
+          paddingLeft:
+            showCheckbox
+              ? `calc(${variant !== 'compact' ? 'var(--space-2)' : '0'} + 18px)`
+              : variant !== 'compact'
+                ? 'var(--space-2)'
+                : 0,
+        }}
+      >
         <div
           style={{
             display: 'flex',
@@ -172,6 +302,20 @@ export const KanbanCard = forwardRef<HTMLDivElement, KanbanCardProps>(function K
             {card.badges}
           </div>
         )}
+        {badges.length > 0 && (
+          <KanbanCardBadges badges={badges} />
+        )}
+        {card.progress !== undefined && (
+          <div style={{ marginTop: 'var(--space-2)' }}>
+            <KanbanProgress
+              value={card.progress}
+              label={`${Math.round(card.progress)}%`}
+              caption={card.currentStep}
+              tone={card.progress >= 100 ? 'success' : 'accent'}
+              layout={card.currentStep ? 'block' : 'inline'}
+            />
+          </div>
+        )}
         {variant !== 'compact' &&
           (card.due !== undefined ||
             card.comments !== undefined ||
@@ -244,4 +388,4 @@ export function useKanbanCardSortable(id: string) {
     isDragging: sortable.isDragging,
     style,
   };
-}
+}

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

@@ -0,0 +1,111 @@
+import type { ReactNode } from 'react';
+import { cx } from '../utils/cx.js';
+
+/**
+ * KanbanCardBadges — chip row rendered under the title on a card.
+ *
+ * Pure presentational. Consumers pass an array of badges; this
+ * component handles overflow (caps at `max` and rolls the rest into
+ * a "+N" chip).
+ */
+
+export interface KanbanCardBadge {
+  /** Visible label. */
+  label: ReactNode;
+  /** Short hint on hover. */
+  title?: string;
+  /** Tone forwarded to the inline pill. */
+  tone?: 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'accent';
+  /** Optional leading icon (Lucide, 12px). */
+  icon?: ReactNode;
+}
+
+export interface KanbanCardBadgesProps {
+  badges: readonly KanbanCardBadge[];
+  /** Maximum number of badges to render before collapsing into "+N". */
+  max?: number;
+  className?: string;
+}
+
+const TONE_FG: Record<NonNullable<KanbanCardBadge['tone']>, string> = {
+  neutral: 'var(--fg-muted)',
+  info: 'var(--info)',
+  success: 'var(--success)',
+  warning: 'var(--warning)',
+  danger: 'var(--danger)',
+  accent: 'var(--accent)',
+};
+
+const TONE_BG: Record<NonNullable<KanbanCardBadge['tone']>, string> = {
+  neutral: 'color-mix(in oklch, var(--fg-muted) 12%, transparent)',
+  info: 'color-mix(in oklch, var(--info) 14%, transparent)',
+  success: 'color-mix(in oklch, var(--success) 14%, transparent)',
+  warning: 'color-mix(in oklch, var(--warning) 14%, transparent)',
+  danger: 'color-mix(in oklch, var(--danger) 14%, transparent)',
+  accent: 'color-mix(in oklch, var(--accent) 14%, transparent)',
+};
+
+export function KanbanCardBadges({ badges, max = 4, className }: KanbanCardBadgesProps): JSX.Element | null {
+  if (badges.length === 0) return null;
+  const visible = badges.slice(0, max);
+  const overflow = badges.length - visible.length;
+  return (
+    <div
+      className={cx('v8-kanban-card-badges', className)}
+      style={{
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: 4,
+        marginTop: 'var(--space-2)',
+      }}
+    >
+      {visible.map((b, i) => {
+        const tone = b.tone ?? 'neutral';
+        return (
+          <span
+            key={i}
+            title={b.title}
+            style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              gap: 4,
+              height: 18,
+              padding: '0 6px',
+              borderRadius: 'var(--radius-pill)',
+              background: TONE_BG[tone],
+              color: TONE_FG[tone],
+              fontSize: 'var(--fs-12)',
+              fontWeight: 500,
+              lineHeight: 1,
+              whiteSpace: 'nowrap',
+              maxWidth: 140,
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+            }}
+          >
+            {b.icon !== undefined && <span style={{ display: 'inline-flex' }}>{b.icon}</span>}
+            <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{b.label}</span>
+          </span>
+        );
+      })}
+      {overflow > 0 && (
+        <span
+          style={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            height: 18,
+            padding: '0 6px',
+            borderRadius: 'var(--radius-pill)',
+            background: 'color-mix(in oklch, var(--fg-muted) 12%, transparent)',
+            color: 'var(--fg-muted)',
+            fontSize: 'var(--fs-12)',
+            fontWeight: 500,
+            lineHeight: 1,
+          }}
+        >
+          +{overflow}
+        </span>
+      )}
+    </div>
+  );
+}

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

@@ -57,12 +57,12 @@ export const KanbanColumn = forwardRef<HTMLElement, KanbanColumnProps>(function
       style={{
         display: 'flex',
         flexDirection: 'column',
-        minWidth: 320,
+        width: 280,
+        flexShrink: 0,
         background: 'var(--surface-0)',
         border: '1px solid var(--border)',
         borderRadius: 'var(--radius-lg)',
         height: '100%',
-        boxShadow: 'var(--shadow-1)',
         ...style,
       }}
       aria-label={typeof column.title === 'string' ? column.title : undefined}
@@ -70,16 +70,11 @@ export const KanbanColumn = forwardRef<HTMLElement, KanbanColumnProps>(function
     >
       <header
         style={{
-          position: 'sticky',
-          top: 0,
-          zIndex: 2,
           display: 'flex',
           alignItems: 'center',
           gap: 'var(--space-2)',
-          padding: 'var(--space-3) var(--space-4)',
+          padding: 'var(--space-3) var(--space-3)',
           borderBottom: '1px solid var(--border)',
-          background: 'color-mix(in oklch, var(--surface-0) 92%, transparent)',
-          backdropFilter: 'blur(8px)',
         }}
       >
         <span
@@ -170,10 +165,10 @@ export const KanbanColumn = forwardRef<HTMLElement, KanbanColumnProps>(function
         style={{
           flex: 1,
           minHeight: 0,
-          padding: 'var(--space-3) var(--space-3) var(--space-4)',
+          padding: 'var(--space-2)',
           display: 'flex',
           flexDirection: 'column',
-          gap: 'var(--space-3)',
+          gap: 'var(--space-2)',
           overflowY: 'auto',
           background: isOver ? 'color-mix(in oklch, var(--accent) 6%, transparent)' : 'transparent',
           transition: 'background var(--motion-fast) var(--ease-out)',

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

@@ -46,6 +46,8 @@ export interface KanbanContextMenuProps {
   canMoveLeft?: boolean;
   /** Whether "move right" is available (not the rightmost column). */
   canMoveRight?: boolean;
+  /** Optional card-specific items rendered between Move and Archive. */
+  extraItems?: ReactNode;
 }
 
 export function KanbanContextMenu(props: KanbanContextMenuProps) {
@@ -62,6 +64,7 @@ export function KanbanContextMenu(props: KanbanContextMenuProps) {
     onDelete,
     canMoveLeft = true,
     canMoveRight = true,
+    extraItems,
   } = props;
 
   return (
@@ -100,6 +103,7 @@ export function KanbanContextMenu(props: KanbanContextMenuProps) {
           Move to next column
           <kbd style={{ marginLeft: 'auto', fontFamily: 'var(--font-mono)', fontSize: 10 }}>→</kbd>
         </ContextMenuItem>
+        {extraItems}
         <ContextMenuSeparator />
         <ContextMenuItem leftIcon={<UserPlus size={14} aria-hidden="true" />} onSelect={onAssign}>
           Assign…