feat(web): React UI v2.0 — Phase 1 Tasks 16-20 (5 component primitives)

web/src/components/Button.tsx

@@ -0,0 +1,68 @@
+import type { ButtonHTMLAttributes, CSSProperties, ReactNode } from 'react';
+
+type Variant = 'primary' | 'secondary' | 'ghost';
+type Size = 'default' | 'sm';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: Variant;
+  size?: Size;
+  children: ReactNode;
+}
+
+const baseStyle: CSSProperties = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: 'var(--s-2)',
+  fontFamily: 'var(--ff-sans)',
+  fontSize: 'var(--t-body)',
+  fontWeight: 500,
+  padding: '8px var(--s-4)',
+  border: '1px solid transparent',
+  cursor: 'pointer',
+  letterSpacing: '0.005em',
+  transition: 'background-color 0.12s, border-color 0.12s, color 0.12s',
+  borderRadius: 0,
+};
+
+const variantStyles: Record<Variant, CSSProperties> = {
+  primary: {
+    background: 'var(--ink-1)',
+    color: 'var(--bg-elev)',
+    borderColor: 'var(--ink-1)',
+  },
+  secondary: {
+    background: 'var(--bg-elev)',
+    color: 'var(--ink-1)',
+    border: '1px solid var(--hair-strong)',
+  },
+  ghost: {
+    background: 'transparent',
+    color: 'var(--ink-3)',
+    textDecoration: 'underline',
+    textDecorationColor: 'var(--ink-4)',
+    textUnderlineOffset: 2,
+    padding: '8px var(--s-3)',
+    border: 'none',
+  },
+};
+
+export function Button({
+  variant = 'primary',
+  size = 'default',
+  children,
+  style,
+  ...rest
+}: ButtonProps) {
+  const sizeOverride: CSSProperties =
+    size === 'sm' ? { padding: '4px var(--s-3)', fontSize: 'var(--t-meta)' } : {};
+  return (
+    <button
+      data-variant={variant}
+      data-size={size}
+      style={{ ...baseStyle, ...variantStyles[variant], ...sizeOverride, ...style }}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+}

web/src/components/Input.tsx

@@ -0,0 +1,48 @@
+import { forwardRef } from 'react';
+import type { InputHTMLAttributes } from 'react';
+
+type Size = 'default' | 'sm';
+
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  size?: Size;
+}
+
+const baseClass = 'asr-input';
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ size = 'default', style, className, ...rest }, ref) => {
+    const height = size === 'sm' ? 22 : 28;
+    return (
+      <input
+        ref={ref}
+        data-size={size}
+        className={[baseClass, className].filter(Boolean).join(' ')}
+        style={{
+          height,
+          padding: '0 10px',
+          fontFamily: 'var(--ff-sans)',
+          fontSize: size === 'sm' ? 'var(--t-meta)' : 'var(--t-body)',
+          color: 'var(--ink-1)',
+          background: 'var(--bg-elev)',
+          border: '1px solid var(--hair)',
+          borderRadius: 0,
+          outline: 'none',
+          transition: 'border-color 0.12s, box-shadow 0.12s',
+          ...style,
+        }}
+        onFocus={(e) => {
+          e.currentTarget.style.borderColor = 'var(--hair-strong)';
+          e.currentTarget.style.boxShadow = '0 0 0 1px var(--acc-soft)';
+          rest.onFocus?.(e);
+        }}
+        onBlur={(e) => {
+          e.currentTarget.style.borderColor = 'var(--hair)';
+          e.currentTarget.style.boxShadow = 'none';
+          rest.onBlur?.(e);
+        }}
+        {...rest}
+      />
+    );
+  },
+);
+Input.displayName = 'Input';

web/src/components/Modal.tsx

@@ -0,0 +1,194 @@
+import * as Dialog from '@radix-ui/react-dialog';
+import type { ReactNode } from 'react';
+
+interface PrimaryAction {
+  label: string;
+  onClick: () => void;
+  disabled?: boolean;
+}
+
+interface ModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: string;
+  eyebrow?: string;
+  children: ReactNode;
+  preview?: ReactNode;
+  primaryAction?: PrimaryAction;
+  cancelLabel?: string;
+}
+
+export function Modal({
+  open,
+  onOpenChange,
+  title,
+  eyebrow,
+  children,
+  preview,
+  primaryAction,
+  cancelLabel = 'Cancel',
+}: ModalProps) {
+  return (
+    <Dialog.Root open={open} onOpenChange={onOpenChange}>
+      <Dialog.Portal>
+        <Dialog.Overlay
+          style={{
+            position: 'fixed',
+            inset: 0,
+            background: 'rgba(21,17,10,0.18)',
+            backdropFilter: 'blur(2px)',
+            animation: 'asr-modal-fade-in 180ms cubic-bezier(0.16, 1, 0.3, 1)',
+            zIndex: 999,
+          }}
+        />
+        <Dialog.Content
+          style={{
+            position: 'fixed',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+            minWidth: 480,
+            maxWidth: 720,
+            maxHeight: '85vh',
+            display: 'flex',
+            flexDirection: 'column',
+            background: 'var(--bg-elev)',
+            border: '1px solid var(--hair-strong)',
+            borderRadius: 0,
+            boxShadow: 'var(--e-3)',
+            animation: 'asr-modal-scale-in 180ms cubic-bezier(0.16, 1, 0.3, 1)',
+            zIndex: 1000,
+          }}
+        >
+          <header
+            style={{
+              height: 52,
+              padding: '0 20px',
+              display: 'flex',
+              alignItems: 'center',
+              borderBottom: '1px solid var(--hair)',
+            }}
+          >
+            <div style={{ flex: 1, minWidth: 0 }}>
+              {eyebrow && (
+                <div
+                  style={{
+                    fontSize: 10,
+                    color: 'var(--ink-3)',
+                    letterSpacing: '0.14em',
+                    textTransform: 'uppercase',
+                    marginBottom: 2,
+                  }}
+                >
+                  {eyebrow}
+                </div>
+              )}
+              <Dialog.Title
+                style={{
+                  fontSize: 16,
+                  fontWeight: 600,
+                  color: 'var(--ink-1)',
+                  margin: 0,
+                  fontFamily: 'var(--ff-sans)',
+                }}
+              >
+                {title}
+              </Dialog.Title>
+            </div>
+            <Dialog.Close
+              aria-label="Close"
+              style={{
+                width: 28,
+                height: 28,
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                background: 'transparent',
+                border: 'none',
+                color: 'var(--ink-3)',
+                cursor: 'pointer',
+                fontSize: 18,
+                lineHeight: 1,
+              }}
+            >
+              ×
+            </Dialog.Close>
+          </header>
+          <div style={{ flex: 1, overflow: 'auto', padding: '20px' }}>{children}</div>
+          {preview && (
+            <div
+              style={{
+                padding: '12px 20px',
+                background: 'var(--bg-subtle)',
+                borderTop: '1px solid var(--hair)',
+              }}
+            >
+              {preview}
+            </div>
+          )}
+          <footer
+            style={{
+              height: 52,
+              padding: '0 20px',
+              display: 'flex',
+              alignItems: 'center',
+              gap: 8,
+              borderTop: '1px solid var(--hair)',
+            }}
+          >
+            <span
+              style={{
+                fontFamily: 'var(--ff-mono)',
+                fontSize: 10,
+                color: 'var(--ink-4)',
+              }}
+            >
+              Esc to close
+            </span>
+            <span style={{ flex: 1 }} />
+            <Dialog.Close asChild>
+              <button
+                type="button"
+                style={{
+                  height: 28,
+                  padding: '0 14px',
+                  fontFamily: 'var(--ff-sans)',
+                  fontSize: 'var(--t-body)',
+                  color: 'var(--ink-1)',
+                  background: 'var(--bg-elev)',
+                  border: '1px solid var(--hair-strong)',
+                  borderRadius: 0,
+                  cursor: 'pointer',
+                }}
+              >
+                {cancelLabel}
+              </button>
+            </Dialog.Close>
+            {primaryAction && (
+              <button
+                type="button"
+                onClick={primaryAction.onClick}
+                disabled={primaryAction.disabled}
+                style={{
+                  height: 28,
+                  padding: '0 14px',
+                  fontFamily: 'var(--ff-sans)',
+                  fontSize: 'var(--t-body)',
+                  fontWeight: 500,
+                  color: 'var(--bg-elev)',
+                  background: 'var(--ink-1)',
+                  border: '1px solid var(--ink-1)',
+                  borderRadius: 0,
+                  cursor: primaryAction.disabled ? 'not-allowed' : 'pointer',
+                  opacity: primaryAction.disabled ? 0.5 : 1,
+                }}
+              >
+                {primaryAction.label}
+              </button>
+            )}
+          </footer>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}

web/src/components/Pill.tsx

@@ -0,0 +1,39 @@
+import type { CSSProperties, ReactNode } from 'react';
+
+type Kind = 'running' | 'paused' | 'error' | 'resolved' | 'neutral';
+
+interface PillProps {
+  kind: Kind;
+  children: ReactNode;
+}
+
+const baseStyle: CSSProperties = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: 4,
+  padding: '2px 8px',
+  fontFamily: 'var(--ff-sans)',
+  fontSize: 'var(--t-micro)',
+  fontWeight: 500,
+  letterSpacing: '0.08em',
+  textTransform: 'uppercase',
+  border: '1px solid var(--hair)',
+  borderRadius: 0,
+  whiteSpace: 'nowrap',
+};
+
+const kindStyles: Record<Kind, CSSProperties> = {
+  running: { color: 'var(--acc)', borderColor: 'var(--acc-mid)', background: 'var(--acc-soft)' },
+  paused: { color: 'var(--warn)', borderColor: 'var(--warn)', background: 'var(--warn-bg)' },
+  error: { color: 'var(--danger)', borderColor: 'var(--danger)', background: 'var(--danger-bg)' },
+  resolved: { color: 'var(--good)', borderColor: 'var(--good)', background: 'var(--good-bg)' },
+  neutral: { color: 'var(--ink-3)', borderColor: 'var(--hair-strong)', background: 'var(--bg-subtle)' },
+};
+
+export function Pill({ kind, children }: PillProps) {
+  return (
+    <span data-kind={kind} style={{ ...baseStyle, ...kindStyles[kind] }}>
+      {children}
+    </span>
+  );
+}

web/src/components/Select.tsx

@@ -0,0 +1,39 @@
+import { forwardRef } from 'react';
+import type { SelectHTMLAttributes } from 'react';
+
+export interface SelectOption {
+  value: string;
+  label: string;
+}
+
+interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'children'> {
+  options: SelectOption[];
+  placeholder?: string;
+}
+
+export const Select = forwardRef<HTMLSelectElement, SelectProps>(
+  ({ options, placeholder, style, value, ...rest }, ref) => (
+    <select
+      ref={ref}
+      value={value ?? ''}
+      style={{
+        height: 28,
+        padding: '0 10px',
+        fontFamily: 'var(--ff-sans)',
+        fontSize: 'var(--t-body)',
+        color: 'var(--ink-1)',
+        background: 'var(--bg-elev)',
+        border: '1px solid var(--hair)',
+        borderRadius: 0,
+        ...style,
+      }}
+      {...rest}
+    >
+      {placeholder !== undefined && <option value="" disabled>{placeholder}</option>}
+      {options.map((o) => (
+        <option key={o.value} value={o.value}>{o.label}</option>
+      ))}
+    </select>
+  ),
+);
+Select.displayName = 'Select';