@polderlabs/bizar 6.2.5 → 7.0.0

package/bizar-dash/src/web/styles/tasks-redesign.css

@@ -0,0 +1,231 @@
+/*
+ * tasks-redesign.css — Wave 3 task board view (Supabase-style simplicity).
+ *
+ * Imports are intentionally narrow: this file ships the visual surface for
+ * the redesigned Tasks view (kanban columns + compact task rows). Every
+ * value references a design-system token from ui/styles/tokens.css — no
+ * hardcoded colours, no gradients, no shadows beyond hairline, no radii
+ * greater than --radius-lg (6px). Legacy classes (`.task-card`, etc.) in
+ * main.css are intentionally bypassed in favour of the redesigned shapes.
+ *
+ * Class scoping: every selector is namespaced under `.tasks-wave3` so the
+ * new rules never collide with the legacy kanban/task-card styles that
+ * remain in main.css for the mobile view.
+ */
+
+.tasks-wave3 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+/* ── Header ─────────────────────────────────────────────────────── */
+
+.tasks-wave3__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+}
+
+.tasks-wave3__title-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--text-lg);
+  font-weight: var(--weight-semibold);
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.tasks-wave3__subtitle {
+  margin: var(--space-1) 0 0;
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+}
+
+/* ── Toolbar ────────────────────────────────────────────────────── */
+
+.tasks-wave3__toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  flex-wrap: wrap;
+  padding: var(--space-3);
+  background: var(--surface-1);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+}
+
+.tasks-wave3__toolbar-group {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.tasks-wave3__toolbar-label {
+  font-size: var(--text-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-tertiary);
+}
+
+.tasks-wave3__toolbar-spacer {
+  flex: 1;
+}
+
+/* ── Kanban grid ────────────────────────────────────────────────── */
+
+.tasks-wave3__kanban {
+  align-items: stretch;
+}
+
+.tasks-wave3__column {
+  min-width: 0;
+  height: 100%;
+}
+
+.tasks-wave3__column-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  min-height: 120px;
+}
+
+.tasks-wave3__column-count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 22px;
+  padding: 0 var(--space-2);
+  height: 18px;
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  font-weight: var(--weight-medium);
+  color: var(--text-secondary);
+  background: var(--surface-overlay);
+  border-radius: var(--radius-full);
+  font-variant-numeric: tabular-nums;
+}
+
+.tasks-wave3__column-title {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--text-base);
+  font-weight: var(--weight-semibold);
+  color: var(--text-primary);
+  line-height: var(--leading-tight);
+}
+
+.tasks-wave3__column-empty {
+  padding: var(--space-5) var(--space-3);
+  font-size: var(--text-sm);
+  color: var(--text-tertiary);
+  text-align: center;
+  font-style: italic;
+}
+
+/* ── Task row ───────────────────────────────────────────────────── */
+
+.tasks-wave3__row {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  padding: var(--space-3);
+  background: var(--surface-0);
+  border: 1px solid var(--border-subtle);
+  border-left-width: 3px;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: border-color var(--duration-fast) var(--ease-out),
+    background var(--duration-fast) var(--ease-out);
+  min-height: 76px;
+}
+
+.tasks-wave3__row:hover {
+  border-color: var(--border-default);
+  background: var(--surface-1);
+}
+
+.tasks-wave3__row:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 1px;
+}
+
+.tasks-wave3__row--priority-high {
+  border-left-color: var(--danger);
+}
+
+.tasks-wave3__row--priority-normal {
+  border-left-color: var(--info);
+}
+
+.tasks-wave3__row--priority-low {
+  border-left-color: var(--text-tertiary);
+}
+
+.tasks-wave3__row-title-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-2);
+}
+
+.tasks-wave3__row-title {
+  flex: 1;
+  min-width: 0;
+  font-size: var(--text-base);
+  font-weight: var(--weight-medium);
+  color: var(--text-primary);
+  line-height: var(--leading-snug);
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  word-break: break-word;
+}
+
+.tasks-wave3__row-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-1);
+  align-items: center;
+}
+
+.tasks-wave3__row-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+  margin-top: auto;
+  padding-top: var(--space-1);
+}
+
+.tasks-wave3__row-time {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--text-tertiary);
+  font-variant-numeric: tabular-nums;
+}
+
+.tasks-wave3__row-actions {
+  display: flex;
+  gap: var(--space-1);
+  align-items: center;
+}
+
+/* Status dot accent for column header — pairs with the redesigned Badge variants. */
+.tasks-wave3__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-full);
+  flex-shrink: 0;
+}
+
+.tasks-wave3__dot--info    { background: var(--info); }
+.tasks-wave3__dot--accent  { background: var(--accent); }
+.tasks-wave3__dot--success { background: var(--success); }
+.tasks-wave3__dot--warning { background: var(--warning); }
+.tasks-wave3__dot--danger  { background: var(--danger); }

package/bizar-dash/src/web/ui/controls/Button.tsx

@@ -0,0 +1,77 @@
+/*
+ * Button.tsx — primary action control (Wave 2A).
+ *
+ * Variants: primary (green accent CTA), secondary (neutral chrome), ghost
+ * (transparent chrome), subtle (accent tint), danger (red destructive).
+ * Sizes: xs/sm/md/lg. `loading` replaces the click target with a spinner
+ * and sets `disabled` so the user cannot double-fire while the request is
+ * in flight. `icon` (left) and `iconRight` slot arbitrary ReactNode — most
+ * callers pass a lucide-react icon. Styled by controls.css; use cx() to
+ * compose classes.
+ */
+
+import {
+  forwardRef,
+  type ButtonHTMLAttributes,
+  type ReactNode,
+} from 'react';
+import { cx } from '../utils/cx';
+
+export type ButtonVariant =
+  | 'primary'
+  | 'secondary'
+  | 'ghost'
+  | 'subtle'
+  | 'danger';
+export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
+
+export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  loading?: boolean;
+  fullWidth?: boolean;
+  icon?: ReactNode;
+  iconRight?: ReactNode;
+};
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  function Button(
+    {
+      variant = 'secondary',
+      size = 'md',
+      loading = false,
+      fullWidth = false,
+      icon,
+      iconRight,
+      disabled,
+      className,
+      children,
+      type = 'button',
+      ...rest
+    },
+    ref,
+  ) {
+    return (
+      <button
+        ref={ref}
+        type={type}
+        disabled={disabled || loading}
+        aria-busy={loading || undefined}
+        className={cx(
+          'btn',
+          `btn-${variant}`,
+          `btn-size-${size}`,
+          loading && 'btn-loading',
+          fullWidth && 'btn-full',
+          className,
+        )}
+        {...rest}
+      >
+        {loading && <span className="btn-spinner" aria-hidden />}
+        {icon}
+        {children}
+        {iconRight}
+      </button>
+    );
+  },
+);

package/bizar-dash/src/web/ui/controls/Checkbox.tsx

@@ -0,0 +1,95 @@
+/*
+ * Checkbox.tsx — tri-state checkbox (Wave 2A).
+ *
+ * Three visual states: unchecked, checked, indeterminate (set the
+ * `indeterminate` boolean when partial selection applies — e.g. a
+ * parent whose children are partially selected). Built as a label +
+ * visually-hidden input pattern so the entire row is clickable and
+ * keyboard activatable (space).
+ *
+ * Wrapper-level props (data-testid, id, aria-*, className) flow to the
+ * <label>; the inner <input> only takes its own concerns.
+ */
+
+import {
+  forwardRef,
+  useEffect,
+  useRef,
+  type HTMLAttributes,
+  type ReactNode,
+} from 'react';
+import { Check, Minus } from 'lucide-react';
+import { cx } from '../utils/cx';
+
+export type CheckboxProps = Omit<
+  HTMLAttributes<HTMLLabelElement>,
+  'onChange' | 'children'
+> & {
+  checked: boolean;
+  onChange: (next: boolean) => void;
+  label?: ReactNode;
+  indeterminate?: boolean;
+  disabled?: boolean;
+  name?: string;
+  autoFocus?: boolean;
+  required?: boolean;
+};
+
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
+  function Checkbox(
+    {
+      checked,
+      onChange,
+      label,
+      indeterminate = false,
+      disabled,
+      name,
+      autoFocus,
+      required,
+      className,
+      ...labelProps
+    },
+    ref,
+  ) {
+    const innerRef = useRef<HTMLInputElement | null>(null);
+    useEffect(() => {
+      if (innerRef.current) innerRef.current.indeterminate = indeterminate;
+    }, [indeterminate]);
+    const setRef = (el: HTMLInputElement | null) => {
+      innerRef.current = el;
+      if (typeof ref === 'function') ref(el);
+      else if (ref) ref.current = el;
+    };
+    return (
+      <label
+        {...labelProps}
+        className={cx(
+          'checkbox',
+          checked && 'checkbox-checked',
+          indeterminate && 'checkbox-indeterminate',
+          className,
+        )}
+      >
+        <input
+          ref={setRef}
+          type="checkbox"
+          name={name}
+          checked={checked}
+          disabled={disabled}
+          required={required}
+          autoFocus={autoFocus}
+          onChange={(e) => onChange(e.target.checked)}
+          className="checkbox-input"
+        />
+        <span className="checkbox-box" aria-hidden>
+          {indeterminate ? (
+            <Minus strokeWidth={3} />
+          ) : checked ? (
+            <Check strokeWidth={3} />
+          ) : null}
+        </span>
+        {label !== undefined && <span className="checkbox-label">{label}</span>}
+      </label>
+    );
+  },
+);

package/bizar-dash/src/web/ui/controls/IconButton.tsx

@@ -0,0 +1,66 @@
+/*
+ * IconButton.tsx — square icon-only button (Wave 2A).
+ *
+ * Use for toolbar actions, dialog close buttons, and other in-line controls
+ * that need only a glyph. Always pair with `aria-label` (or `aria-labelledby`)
+ * — the rendered children are the icon, so sighted-only labels are absent.
+ * Mirrors Button's variant taxonomy (primary/secondary/ghost/danger/subtle)
+ * with sizes sm/md/lg (24/32/40 px squares).
+ */
+
+import {
+  forwardRef,
+  type ButtonHTMLAttributes,
+  type ReactNode,
+} from 'react';
+import { cx } from '../utils/cx';
+
+export type IconButtonVariant =
+  | 'primary'
+  | 'secondary'
+  | 'ghost'
+  | 'danger'
+  | 'subtle';
+export type IconButtonSize = 'sm' | 'md' | 'lg';
+
+export type IconButtonProps = Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  'children'
+> & {
+  variant?: IconButtonVariant;
+  size?: IconButtonSize;
+  icon: ReactNode;
+  'aria-label': string;
+};
+
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  function IconButton(
+    {
+      variant = 'secondary',
+      size = 'md',
+      icon,
+      disabled,
+      className,
+      type = 'button',
+      ...rest
+    },
+    ref,
+  ) {
+    return (
+      <button
+        ref={ref}
+        type={type}
+        disabled={disabled}
+        className={cx(
+          'icon-btn',
+          `icon-btn-${variant}`,
+          `icon-btn-size-${size}`,
+          className,
+        )}
+        {...rest}
+      >
+        {icon}
+      </button>
+    );
+  },
+);

package/bizar-dash/src/web/ui/controls/Kbd.tsx

@@ -0,0 +1,24 @@
+/*
+ * Kbd.tsx — keyboard-shortcut affordance (Wave 2A).
+ *
+ * Renders a single key glyph (or short label) inside a <kbd> element
+ * styled with a hairline border + monospace font. Use for inline
+ * shortcut hints next to menu items, command palette entries, or any
+ * place a user needs to see "this is a keyboard shortcut". Stacking
+ * multiple Kbds inline renders a "⌘ K" / "Ctrl K" style hint.
+ */
+
+import type { HTMLAttributes, ReactNode } from 'react';
+import { cx } from '../utils/cx';
+
+export type KbdProps = HTMLAttributes<HTMLElement> & {
+  children?: ReactNode;
+};
+
+export function Kbd({ children, className, ...rest }: KbdProps): React.JSX.Element {
+  return (
+    <kbd className={cx('kbd', className)} {...rest}>
+      {children}
+    </kbd>
+  );
+}

package/bizar-dash/src/web/ui/controls/NumberInput.tsx

@@ -0,0 +1,77 @@
+/*
+ * NumberInput.tsx — numeric input (Wave 2A).
+ *
+ * Wraps <input type="number"> and accepts string | number for `value`
+ * (the native input gives back a string from typing but consumers
+ * typically want to work with numbers). `onChange` normalises: if the
+ * field is empty, emit ''; otherwise coerce to Number. When the parsed
+ * number is NaN we emit the raw string so the consumer can decide.
+ */
+
+import { forwardRef, type InputHTMLAttributes } from 'react';
+import { cx } from '../utils/cx';
+
+export type NumberInputSize = 'sm' | 'md' | 'lg';
+
+export type NumberInputProps = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  'type' | 'value' | 'onChange' | 'size' | 'children'
+> & {
+  inputSize?: NumberInputSize;
+  error?: string | null;
+  value: string | number;
+  onChange: (next: string | number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+};
+
+export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
+  function NumberInput(
+    {
+      inputSize = 'md',
+      error,
+      value,
+      onChange,
+      min,
+      max,
+      step,
+      disabled,
+      className,
+      ...rest
+    },
+    ref,
+  ) {
+    return (
+      <span
+        className={cx(
+          'field',
+          `field-size-${inputSize}`,
+          className,
+        )}
+      >
+        <input
+          ref={ref}
+          type="number"
+          disabled={disabled}
+          value={value}
+          min={min}
+          max={max}
+          step={step}
+          aria-invalid={error ? true : undefined}
+          className={cx('field-input', error && 'field-error')}
+          onChange={(e) => {
+            const raw = e.target.value;
+            if (raw === '') {
+              onChange('');
+              return;
+            }
+            const n = Number(raw);
+            onChange(Number.isFinite(n) ? n : raw);
+          }}
+          {...rest}
+        />
+      </span>
+    );
+  },
+);

package/bizar-dash/src/web/ui/controls/RadioGroup.tsx

@@ -0,0 +1,109 @@
+/*
+ * RadioGroup.tsx — single-select radio group (Wave 2A).
+ *
+ * Renders a radiogroup shell and lays out one label-wrapping-input per
+ * option. Keyboard navigation (arrow keys) is inherited from native
+ * <input type="radio"> inside a single name group. `orientation`
+ * controls horizontal vs vertical layout; CSS handles the actual flex
+ * direction. Wrapper-level props (data-testid, id, aria-*, className)
+ * land on the radiogroup container, not on each input.
+ */
+
+import {
+  forwardRef,
+  type HTMLAttributes,
+  type ReactNode,
+} from 'react';
+import { cx } from '../utils/cx';
+
+export type RadioOption = {
+  value: string;
+  label: ReactNode;
+  description?: ReactNode;
+  disabled?: boolean;
+};
+
+export type RadioOrientation = 'horizontal' | 'vertical';
+
+export type RadioGroupProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  'onChange' | 'children'
+> & {
+  name: string;
+  value: string;
+  onChange: (next: string) => void;
+  options: RadioOption[];
+  orientation?: RadioOrientation;
+  legend?: ReactNode;
+  disabled?: boolean;
+  required?: boolean;
+};
+
+export const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
+  function RadioGroup(
+    {
+      name,
+      value,
+      onChange,
+      options,
+      orientation = 'vertical',
+      legend,
+      disabled: groupDisabled,
+      required,
+      className,
+      ...wrapperProps
+    },
+    ref,
+  ) {
+    return (
+      <div
+        ref={ref}
+        role="radiogroup"
+        {...wrapperProps}
+        className={cx(
+          'radio-group',
+          orientation === 'horizontal' && 'radio-group-horizontal',
+          className,
+        )}
+      >
+        {legend !== undefined && (
+          <p className="radio-option-label" style={{ marginBottom: 4 }}>
+            {legend}
+          </p>
+        )}
+        {options.map((opt) => {
+          const isChecked = opt.value === value;
+          return (
+            <label
+              key={opt.value}
+              className={cx(
+                'radio-option',
+                isChecked && 'radio-option-checked',
+              )}
+            >
+              <input
+                type="radio"
+                name={name}
+                value={opt.value}
+                checked={isChecked}
+                disabled={groupDisabled || opt.disabled}
+                required={required}
+                onChange={() => onChange(opt.value)}
+                className="radio-option-input"
+              />
+              <span className="radio-option-box" aria-hidden>
+                <span className="radio-option-dot" />
+              </span>
+              <span className="radio-option-content">
+                <span className="radio-option-label">{opt.label}</span>
+                {opt.description !== undefined && (
+                  <span className="radio-option-desc">{opt.description}</span>
+                )}
+              </span>
+            </label>
+          );
+        })}
+      </div>
+    );
+  },
+);