@polderlabs/bizar 10.7.2 → 10.10.0

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

@@ -1,89 +0,0 @@
-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/feedback/useFocusTrap.ts

@@ -1,58 +0,0 @@
-/**
- * useFocusTrap — traps Tab/Shift+Tab focus inside a container.
- *
- * Used by popover/dialog primitives that don't use @radix-ui/react-dialog.
- * Radix Dialog components get this for free; this hook covers the few
- * custom role="dialog" surfaces that remain.
- *
- * ponytail: edge-case (disabled elements, inert) — upgrade to focus-trap npm pkg when needed.
- */
-
-import { useEffect, useRef } from 'react';
-
-const FOCUSABLE = [
-  'a[href]',
-  'button:not([disabled])',
-  'input:not([disabled])',
-  'select:not([disabled])',
-  'textarea:not([disabled])',
-  '[tabindex]:not([tabindex="-1"])',
-  'details > summary',
-].join(',');
-
-export function useFocusTrap(containerRef: React.RefObject<HTMLElement | null>, active: boolean): void {
-  const previousFocus = useRef<Element | null>(null);
-
-  useEffect(() => {
-    if (!active || !containerRef.current) return;
-
-    // Restore focus on unmount.
-    previousFocus.current = document.activeElement;
-    const container = containerRef.current;
-
-    // Focus first focusable child on mount.
-    const first = container.querySelector<HTMLElement>(FOCUSABLE);
-    first?.focus();
-
-    const onKeyDown = (e: KeyboardEvent): void => {
-      if (e.key !== 'Tab') return;
-      const focusable = Array.from(container.querySelectorAll<HTMLElement>(FOCUSABLE));
-      if (focusable.length === 0) { e.preventDefault(); return; }
-
-      const first = focusable[0];
-      const last = focusable[focusable.length - 1];
-
-      if (e.shiftKey) {
-        if (document.activeElement === first) { e.preventDefault(); last.focus(); }
-      } else {
-        if (document.activeElement === last) { e.preventDefault(); first.focus(); }
-      }
-    };
-
-    container.addEventListener('keydown', onKeyDown);
-    return () => {
-      container.removeEventListener('keydown', onKeyDown);
-      if (previousFocus.current instanceof HTMLElement) previousFocus.current.focus();
-    };
-  }, [active, containerRef]);
-}

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

@@ -1,176 +0,0 @@
-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/GoalDetail.tsx

@@ -1,278 +0,0 @@
-import { useEffect, useState } from 'react';
-import { Plus, Trash2, ExternalLink } from 'lucide-react';
-import { Sheet, SheetContent } from '../feedback/Sheet.js';
-import { Stack } from '../primitives/Stack.js';
-import { Inline } from '../primitives/Inline.js';
-import { Button } from '../controls/Button.js';
-import { Input } from '../controls/Input.js';
-import { Select, SelectContent, SelectItem, SelectTrigger } from '../controls/Select.js';
-import { Skeleton } from '../feedback/Skeleton.js';
-import { Badge } from '../data/Badge.js';
-import { fetchJson } from '../../data/fetcher.js';
-import type { Goal } from '../../data/types.js';
-
-/**
- * GoalDetail — Sprint S12. Right-side Drawer with editable
- * title / status / due / owner / key-results.
- *
- * Source-of-truth = `.bizar/PROGRESS.md` (per user direction). Each
- * edit PATCHes `/api/goals/:id` and the server re-broadcasts the
- * canonical state via `goals:change`.
- */
-
-const STATUS_OPTIONS = [
-  { value: 'on-track', label: 'On track' },
-  { value: 'at-risk', label: 'At risk' },
-  { value: 'off-track', label: 'Off track' },
-  { value: 'blocked', label: 'Blocked' },
-  { value: 'active', label: 'Active' },
-  { value: 'done', label: 'Done' },
-];
-
-export interface GoalDetailProps {
-  goal: Goal;
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-}
-
-export function GoalDetail(props: GoalDetailProps): JSX.Element {
-  const { goal, open, onOpenChange } = props;
-  const [deleting, setDeleting] = useState<boolean>(false);
-
-  const removeGoal = async (): Promise<void> => {
-    const ok = typeof window !== 'undefined' && typeof window.confirm === 'function'
-      ? window.confirm(`Delete goal "${goal.title}"? This removes it from PROGRESS.md.`)
-      : true;
-    if (!ok) return;
-    setDeleting(true);
-    try {
-      await fetchJson(`/api/goals/${encodeURIComponent(goal.id)}`, { method: 'DELETE' });
-      onOpenChange(false);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : String(err));
-    } finally {
-      setDeleting(false);
-    }
-  };
-  const [title, setTitle] = useState<string>(goal.title);
-  const [status, setStatus] = useState<string>(goal.status);
-  const [owner, setOwner] = useState<string>(goal.owner || '');
-  const [due, setDue] = useState<string>(goal.due || '');
-  const [newKr, setNewKr] = useState<string>('');
-  const [busy, setBusy] = useState<string | null>(null);
-  const [message, setMessage] = useState<string | null>(null);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    if (open) {
-      setTitle(goal.title);
-      setStatus(goal.status);
-      setOwner(goal.owner || '');
-      setDue(goal.due || '');
-      setMessage(null);
-      setError(null);
-      setNewKr('');
-    }
-  }, [open, goal]);
-
-  const patch = async (body: Record<string, unknown>, label: string): Promise<void> => {
-    setBusy(label);
-    setMessage(null);
-    setError(null);
-    try {
-      await fetchJson(`/api/goals/${encodeURIComponent(goal.id)}`, { method: 'PATCH', body });
-      setMessage(`${label} saved.`);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : String(err));
-    } finally {
-      setBusy(null);
-    }
-  };
-
-  const saveTitle = (): void => {
-    if (title.trim() && title !== goal.title) void patch({ title: title.trim() }, 'Title');
-  };
-  const saveStatus = (v: string): void => {
-    setStatus(v);
-    if (v !== goal.status) void patch({ status: v }, 'Status');
-  };
-  const saveOwner = (): void => {
-    const v = owner.trim();
-    if (v !== (goal.owner || '')) void patch({ owner: v }, 'Owner');
-  };
-  const saveDue = (): void => {
-    const v = due.trim();
-    if (v !== (goal.due || '')) void patch({ due: v }, 'Due');
-  };
-
-  const toggleKr = async (krId: string, current: boolean): Promise<void> => {
-    setBusy(`kr-${krId}`);
-    setError(null);
-    try {
-      await fetchJson(`/api/goals/${encodeURIComponent(goal.id)}/key-results/${encodeURIComponent(krId)}`, {
-        method: 'PATCH',
-        body: { done: !current },
-      });
-    } catch (err) {
-      setError(err instanceof Error ? err.message : String(err));
-    } finally {
-      setBusy(null);
-    }
-  };
-
-  const addKr = async (): Promise<void> => {
-    const v = newKr.trim();
-    if (!v) return;
-    setNewKr('');
-    setBusy('add-kr');
-    setError(null);
-    try {
-      await fetchJson(`/api/goals/${encodeURIComponent(goal.id)}/key-results`, {
-        method: 'POST',
-        body: { title: v },
-      });
-    } catch (err) {
-      setError(err instanceof Error ? err.message : String(err));
-    } finally {
-      setBusy(null);
-    }
-  };
-
-  const removeKr = async (krId: string): Promise<void> => {
-    setBusy(`remove-${krId}`);
-    setError(null);
-    try {
-      await fetchJson(`/api/goals/${encodeURIComponent(goal.id)}/key-results/${encodeURIComponent(krId)}`, {
-        method: 'DELETE',
-      });
-    } catch (err) {
-      setError(err instanceof Error ? err.message : String(err));
-    } finally {
-      setBusy(null);
-    }
-  };
-
-  return (
-    <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent side="right" title="Edit goal">
-      <Stack gap={4} style={{ padding: 'var(--space-4)' }}>
-        <Stack gap={2}>
-          <label htmlFor="goal-title" style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>
-            Title
-          </label>
-          <Inline gap={2}>
-            <Input
-              id="goal-title"
-              value={title}
-              onChange={(e) => setTitle(e.target.value)}
-              onBlur={saveTitle}
-              disabled={busy !== null}
-              style={{ flex: 1 }}
-            />
-          </Inline>
-        </Stack>
-
-        <Stack gap={2}>
-          <label htmlFor="goal-status" style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>
-            Status
-          </label>
-          <Select value={status} onValueChange={saveStatus}>
-            <SelectTrigger id="goal-status" size="sm" placeholder="Status" />
-            <SelectContent>
-              {STATUS_OPTIONS.map((opt) => (
-                <SelectItem key={opt.value} value={opt.value}>
-                  {opt.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </Stack>
-
-        <Inline gap={2}>
-          <Stack gap={2} style={{ flex: 1 }}>
-            <label htmlFor="goal-owner" style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>
-              Owner
-            </label>
-            <Input id="goal-owner" value={owner} onChange={(e) => setOwner(e.target.value)} onBlur={saveOwner} disabled={busy !== null} />
-          </Stack>
-          <Stack gap={2} style={{ flex: 1 }}>
-            <label htmlFor="goal-due" style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>
-              Due
-            </label>
-            <Input id="goal-due" value={due} onChange={(e) => setDue(e.target.value)} onBlur={saveDue} placeholder="2026-09-30" disabled={busy !== null} />
-          </Stack>
-        </Inline>
-
-        <Stack gap={2}>
-          <div style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>Key results</div>
-          <Stack gap={1}>
-            {goal.keyResults.length === 0 && (
-              <div style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>None yet.</div>
-            )}
-            {goal.keyResults.map((kr) => (
-              <Inline key={kr.id} gap={2} align="center">
-                <input
-                  type="checkbox"
-                  checked={kr.done}
-                  onChange={() => { void toggleKr(kr.id, kr.done); }}
-                  aria-label={`Toggle ${kr.title}`}
-                  disabled={busy !== null}
-                />
-                <span style={{ flex: 1, fontSize: 'var(--fs-13)', textDecoration: kr.done ? 'line-through' : 'none' }}>
-                  {kr.title}
-                </span>
-                {kr.assignee && <Badge tone="neutral">{kr.assignee}</Badge>}
-                {kr.taskId && (
-                  <Badge tone="info" title={`Decomposed task: ${kr.taskId}`}>
-                    <ExternalLink size={10} aria-hidden style={{ marginRight: 4, verticalAlign: 'text-bottom' }} />
-                    task
-                  </Badge>
-                )}
-                <Button
-                  variant="ghost"
-                  onClick={() => { void removeKr(kr.id); }}
-                  disabled={busy !== null}
-                  aria-label={`Remove ${kr.title}`}
-                >
-                  <Trash2 size={12} aria-hidden />
-                </Button>
-              </Inline>
-            ))}
-          </Stack>
-          <Inline gap={2}>
-            <Input
-              value={newKr}
-              onChange={(e) => setNewKr(e.target.value)}
-              onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); void addKr(); } }}
-              placeholder="Add key result…"
-              disabled={busy !== null}
-              style={{ flex: 1 }}
-            />
-            <Button variant="secondary" onClick={() => { void addKr(); }} disabled={!newKr.trim() || busy !== null}>
-              <Plus size={14} aria-hidden /> Add
-            </Button>
-          </Inline>
-        </Stack>
-
-        <div style={{ borderTop: '1px solid var(--border)', paddingTop: 'var(--space-3)' }}>
-          <Button
-            variant="danger"
-            onClick={() => { void removeGoal(); }}
-            disabled={deleting || busy !== null}
-          >
-            <Trash2 size={14} aria-hidden /> {deleting ? 'Deleting…' : 'Delete goal'}
-          </Button>
-        </div>
-
-        {message !== null && (
-          <div role="status" style={{ fontSize: 'var(--fs-12)', color: 'var(--success)' }}>{message}</div>
-        )}
-        {error !== null && (
-          <div role="alert" style={{ fontSize: 'var(--fs-12)', color: 'var(--danger)' }}>{error}</div>
-        )}
-        {busy !== null && <Skeleton style={{ height: 12 }} />}
-      </Stack>
-    </SheetContent>
-    </Sheet>
-  );
-}