@polderlabs/bizar 9.0.0 → 10.0.7

package/.claude/worktrees/kanban-overhaul/bizar-dash/src/web/v8/ui/primitives/Grid.tsx

@@ -1,104 +0,0 @@
-import { forwardRef, type CSSProperties, type ElementType, type HTMLAttributes, type ReactNode } from 'react';
-import { cx } from '../utils/cx.js';
-
-/**
- * Grid — CSS grid wrapper with token-driven gap and template columns.
- *
- * For responsive grids: pass `cols` as an object { base, sm, md, lg }.
- * Otherwise pass a single number (1..12) for a uniform grid.
- */
-export type GridCols =
-  | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 12
-  | { base?: number; sm?: number; md?: number; lg?: number; xl?: number };
-
-export interface GridProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
-  as?: ElementType;
-  gap?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16;
-  rowGap?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16;
-  colGap?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16;
-  cols?: GridCols;
-  rows?: 1 | 2 | 3 | 4;
-  autoFlow?: 'row' | 'column' | 'dense';
-  align?: 'start' | 'center' | 'end' | 'stretch';
-  justify?: 'start' | 'center' | 'end' | 'stretch';
-  children?: ReactNode;
-  className?: string;
-  style?: CSSProperties;
-}
-
-const SPACE_VAR: Record<NonNullable<GridProps['gap']>, string> = {
-  0: '0',
-  1: 'var(--space-1)',
-  2: 'var(--space-2)',
-  3: 'var(--space-3)',
-  4: 'var(--space-4)',
-  5: 'var(--space-5)',
-  6: 'var(--space-6)',
-  8: 'var(--space-8)',
-  10: 'var(--space-10)',
-  12: 'var(--space-12)',
-  16: 'var(--space-16)',
-};
-
-const COLS_VAR: Record<number, string> = {
-  1: 'repeat(1, minmax(0, 1fr))',
-  2: 'repeat(2, minmax(0, 1fr))',
-  3: 'repeat(3, minmax(0, 1fr))',
-  4: 'repeat(4, minmax(0, 1fr))',
-  5: 'repeat(5, minmax(0, 1fr))',
-  6: 'repeat(6, minmax(0, 1fr))',
-  8: 'repeat(8, minmax(0, 1fr))',
-  12: 'repeat(12, minmax(0, 1fr))',
-};
-
-function colsToStyle(cols: GridCols | undefined): CSSProperties {
-  if (cols === undefined) return {};
-  if (typeof cols === 'number') return { gridTemplateColumns: COLS_VAR[cols] };
-  // Responsive object — apply base as the default gridTemplateColumns; the
-  // breakpoint variants should be handled by the parent component or a
-  // generated class. We export the base here; responsive overrides can
-  // compose via additional style overrides at the call site.
-  const base = cols.base ?? 1;
-  return { gridTemplateColumns: COLS_VAR[base] };
-}
-
-const ALIGN_MAP = { start: 'start', center: 'center', end: 'end', stretch: 'stretch' } as const;
-const JUSTIFY_MAP = { start: 'start', center: 'center', end: 'end', stretch: 'stretch' } as const;
-
-export const Grid = forwardRef<HTMLElement, GridProps>(function Grid(props, ref) {
-  const {
-    as,
-    gap = 4,
-    rowGap,
-    colGap,
-    cols,
-    rows,
-    autoFlow,
-    align,
-    justify,
-    children,
-    className,
-    style,
-    ...rest
-  } = props;
-
-  const Tag = (as ?? 'div') as ElementType;
-  const computedStyle: CSSProperties = {
-    display: 'grid',
-    gap: SPACE_VAR[gap],
-    ...(rowGap !== undefined && { rowGap: SPACE_VAR[rowGap] }),
-    ...(colGap !== undefined && { columnGap: SPACE_VAR[colGap] }),
-    ...colsToStyle(cols),
-    ...(rows !== undefined && { gridTemplateRows: `repeat(${rows}, minmax(0, 1fr))` }),
-    ...(autoFlow !== undefined && { gridAutoFlow: autoFlow }),
-    ...(align !== undefined && { alignItems: ALIGN_MAP[align] }),
-    ...(justify !== undefined && { justifyItems: JUSTIFY_MAP[justify] }),
-    ...style,
-  };
-
-  return (
-    <Tag ref={ref} className={cx('v8-grid', className)} style={computedStyle} {...rest}>
-      {children}
-    </Tag>
-  );
-});

package/.claude/worktrees/kanban-overhaul/bizar-dash/src/web/v8/ui/primitives/Inline.tsx

@@ -1,77 +0,0 @@
-import { forwardRef, type ElementType, type HTMLAttributes, type ReactNode } from 'react';
-import { cx } from '../utils/cx.js';
-
-/**
- * Inline — horizontal flexbox row with token-driven gap.
- *
- * Use for icon rows, button groups, breadcrumbs. For wrapping use Cluster.
- */
-export interface InlineProps extends HTMLAttributes<HTMLElement> {
-  as?: ElementType;
-  gap?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16;
-  align?: 'start' | 'center' | 'end' | 'baseline' | 'stretch';
-  justify?: 'start' | 'center' | 'end' | 'between' | 'around';
-  wrap?: boolean;
-  children?: ReactNode;
-  className?: string;
-}
-
-const SPACE_VAR: Record<NonNullable<InlineProps['gap']>, string> = {
-  0: '0',
-  1: 'var(--space-1)',
-  2: 'var(--space-2)',
-  3: 'var(--space-3)',
-  4: 'var(--space-4)',
-  5: 'var(--space-5)',
-  6: 'var(--space-6)',
-  8: 'var(--space-8)',
-  10: 'var(--space-10)',
-  12: 'var(--space-12)',
-  16: 'var(--space-16)',
-};
-
-const ALIGN_MAP = {
-  start: 'flex-start',
-  center: 'center',
-  end: 'flex-end',
-  baseline: 'baseline',
-  stretch: 'stretch',
-} as const;
-const JUSTIFY_MAP = {
-  start: 'flex-start',
-  center: 'center',
-  end: 'flex-end',
-  between: 'space-between',
-  around: 'space-around',
-} as const;
-
-export const Inline = forwardRef<HTMLElement, InlineProps>(function Inline(props, ref) {
-  const {
-    as,
-    gap = 2,
-    align,
-    justify,
-    wrap,
-    children,
-    className,
-    style,
-    ...rest
-  } = props;
-
-  const Tag = (as ?? 'div') as ElementType;
-  const computedStyle: React.CSSProperties = {
-    display: 'flex',
-    flexDirection: 'row',
-    gap: SPACE_VAR[gap],
-    ...(align !== undefined && { alignItems: ALIGN_MAP[align] }),
-    ...(justify !== undefined && { justifyContent: JUSTIFY_MAP[justify] }),
-    ...(wrap && { flexWrap: 'wrap' }),
-    ...style,
-  };
-
-  return (
-    <Tag ref={ref} className={cx('v8-inline', className)} style={computedStyle} {...rest}>
-      {children}
-    </Tag>
-  );
-});

package/.claude/worktrees/kanban-overhaul/bizar-dash/src/web/v8/ui/primitives/Portal.tsx

@@ -1,33 +0,0 @@
-import { useEffect, useState, type ReactNode } from 'react';
-import { createPortal } from 'react-dom';
-
-/**
- * Portal — render children into document.body.
- *
- * The v8 app uses Radix UI for most popups, but for some app-level surfaces
- * (e.g. the live Cmd+K command palette's focus trap fallback) we still need
- * a thin portal wrapper. This is that wrapper.
- *
- * SSR-safe: returns null on the server. Re-renders the portal after mount.
- */
-export interface PortalProps {
-  children: ReactNode;
-  /** Override the container. Defaults to document.body. */
-  container?: HTMLElement | null;
-}
-
-export function Portal({ children, container }: PortalProps): JSX.Element | null {
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  if (!mounted) return null;
-  if (typeof document === 'undefined') return null;
-
-  const target = container ?? document.body;
-  if (target === null) return null;
-
-  return createPortal(children, target);
-}

package/.claude/worktrees/kanban-overhaul/bizar-dash/src/web/v8/ui/primitives/ScrollArea.tsx

@@ -1,62 +0,0 @@
-import { forwardRef, type CSSProperties, type HTMLAttributes, type ReactNode } from 'react';
-import { cx } from '../utils/cx.js';
-
-/**
- * ScrollArea — a styled scroll container.
- *
- * The browser-native scrollbar is themed via globals.css (--border-strong,
- * --bg). Use this primitive when you want scroll containment with the
- * v8 look-and-feel and a stable scroll shadow at the edges.
- *
- * For Kanban columns (which need horizontal scrolling with sticky shadows),
- * prefer the dedicated KanbanColumn surface (added in Sprint S5).
- */
-export interface ScrollAreaProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
-  /** Direction of overflow. Default 'y' (vertical scroll). */
-  direction?: 'x' | 'y' | 'both';
-  /** Show a fading shadow at the top when scrolled down. */
-  shadowTop?: boolean;
-  /** Show a fading shadow at the bottom when content overflows. */
-  shadowBottom?: boolean;
-  /** Maximum height (e.g. '400px', 'calc(100vh - 200px)'). */
-  maxHeight?: string;
-  /** Maximum width. */
-  maxWidth?: string;
-  children?: ReactNode;
-  className?: string;
-  style?: CSSProperties;
-}
-
-export const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(function ScrollArea(
-  props,
-  ref,
-) {
-  const {
-    direction = 'y',
-    shadowTop,
-    shadowBottom,
-    maxHeight,
-    maxWidth,
-    children,
-    className,
-    style,
-    ...rest
-  } = props;
-
-  const overflowX = direction === 'x' || direction === 'both' ? 'auto' : 'hidden';
-  const overflowY = direction === 'y' || direction === 'both' ? 'auto' : 'hidden';
-
-  const computedStyle: CSSProperties = {
-    overflowX,
-    overflowY,
-    ...(maxHeight !== undefined && { maxHeight }),
-    ...(maxWidth !== undefined && { maxWidth }),
-    ...style,
-  };
-
-  return (
-    <div ref={ref} className={cx('v8-scroll-area', className)} style={computedStyle} {...rest}>
-      {children}
-    </div>
-  );
-});

package/.claude/worktrees/kanban-overhaul/bizar-dash/src/web/v8/ui/primitives/Separator.tsx

@@ -1,42 +0,0 @@
-import { forwardRef, type CSSProperties, type HTMLAttributes } from 'react';
-import { cx } from '../utils/cx.js';
-
-/**
- * Separator — a 1px divider, either horizontal or vertical.
- *
- * Renders as `<div role="separator">`. Use `decorative` to suppress the
- * role for purely visual dividers (still announces for AT).
- */
-export interface SeparatorProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role'> {
-  orientation?: 'horizontal' | 'vertical';
-  /** When true, treat as decorative — sets `role="presentation"` and aria-hidden. */
-  decorative?: boolean;
-  /** Token-based color override. */
-  tone?: 'border' | 'border-strong';
-  className?: string;
-  style?: CSSProperties;
-}
-
-export const Separator = forwardRef<HTMLDivElement, SeparatorProps>(function Separator(props, ref) {
-  const { orientation = 'horizontal', decorative, tone = 'border', className, style, ...rest } = props;
-
-  const computedStyle: CSSProperties = {
-    background: `var(--${tone})`,
-    ...(orientation === 'horizontal'
-      ? { height: '1px', width: '100%' }
-      : { width: '1px', height: '100%', alignSelf: 'stretch' }),
-    ...style,
-  };
-
-  return (
-    <div
-      ref={ref}
-      role={decorative ? 'presentation' : 'separator'}
-      aria-orientation={decorative ? undefined : orientation}
-      aria-hidden={decorative ? 'true' : undefined}
-      className={cx('v8-separator', className)}
-      style={computedStyle}
-      {...rest}
-    />
-  );
-});

package/.claude/worktrees/kanban-overhaul/bizar-dash/src/web/v8/ui/primitives/Stack.tsx

@@ -1,73 +0,0 @@
-import { forwardRef, type ElementType, type HTMLAttributes, type ReactNode } from 'react';
-import { cx } from '../utils/cx.js';
-
-/**
- * Stack — vertical flexbox column with token-driven gap and align.
- *
- * Use this for the 90% case of "I need a column of stuff with space
- * between them". For horizontal use Inline/Cluster; for grid use Grid.
- */
-export interface StackProps extends HTMLAttributes<HTMLElement> {
-  as?: ElementType;
-  /** Gap — uses --space-* tokens. */
-  gap?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16;
-  align?: 'start' | 'center' | 'end' | 'stretch';
-  justify?: 'start' | 'center' | 'end' | 'between' | 'around';
-  wrap?: boolean;
-  children?: ReactNode;
-  className?: string;
-}
-
-const SPACE_VAR: Record<NonNullable<StackProps['gap']>, string> = {
-  0: '0',
-  1: 'var(--space-1)',
-  2: 'var(--space-2)',
-  3: 'var(--space-3)',
-  4: 'var(--space-4)',
-  5: 'var(--space-5)',
-  6: 'var(--space-6)',
-  8: 'var(--space-8)',
-  10: 'var(--space-10)',
-  12: 'var(--space-12)',
-  16: 'var(--space-16)',
-};
-
-const ALIGN_MAP = { start: 'flex-start', center: 'center', end: 'flex-end', stretch: 'stretch' } as const;
-const JUSTIFY_MAP = {
-  start: 'flex-start',
-  center: 'center',
-  end: 'flex-end',
-  between: 'space-between',
-  around: 'space-around',
-} as const;
-
-export const Stack = forwardRef<HTMLElement, StackProps>(function Stack(props, ref) {
-  const {
-    as,
-    gap = 3,
-    align,
-    justify,
-    wrap,
-    children,
-    className,
-    style,
-    ...rest
-  } = props;
-
-  const Tag = (as ?? 'div') as ElementType;
-  const computedStyle: React.CSSProperties = {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: SPACE_VAR[gap],
-    ...(align !== undefined && { alignItems: ALIGN_MAP[align] }),
-    ...(justify !== undefined && { justifyContent: JUSTIFY_MAP[justify] }),
-    ...(wrap && { flexWrap: 'wrap' }),
-    ...style,
-  };
-
-  return (
-    <Tag ref={ref} className={cx('v8-stack', className)} style={computedStyle} {...rest}>
-      {children}
-    </Tag>
-  );
-});

package/.claude/worktrees/kanban-overhaul/bizar-dash/src/web/v8/ui/primitives/VisuallyHidden.tsx

@@ -1,49 +0,0 @@
-import { type ElementType, type ReactNode } from 'react';
-import { cx } from '../utils/cx.js';
-
-/**
- * VisuallyHidden — hide content visually while keeping it accessible to
- * screen readers and search engines.
- *
- * Use for:
- *   - Labels on icon-only buttons (`<IconButton aria-label="…" />`)
- *   - "Skip to main content" links
- *   - Accessible names for icon groups
- */
-export interface VisuallyHiddenProps {
-  as?: ElementType;
-  children: ReactNode;
-  className?: string;
-  /** Render visibly if true (debug helper — NEVER true in production code). */
-  forceVisible?: boolean;
-}
-
-export function VisuallyHidden({
-  as,
-  children,
-  className,
-  forceVisible,
-}: VisuallyHiddenProps): JSX.Element {
-  const Tag = (as ?? 'span') as ElementType;
-  if (forceVisible === true) {
-    return <Tag className={className}>{children}</Tag>;
-  }
-  return (
-    <Tag
-      className={cx('v8-visually-hidden', className)}
-      style={{
-        position: 'absolute',
-        width: '1px',
-        height: '1px',
-        padding: 0,
-        margin: '-1px',
-        overflow: 'hidden',
-        clip: 'rect(0, 0, 0, 0)',
-        whiteSpace: 'nowrap',
-        border: 0,
-      }}
-    >
-      {children}
-    </Tag>
-  );
-}

package/.claude/worktrees/kanban-overhaul/bizar-dash/src/web/v8/ui/settings/SettingsNav.tsx

@@ -1,91 +0,0 @@
-import { type ReactNode } from 'react';
-import { cx } from '../utils/cx.js';
-
-/**
- * SettingsNav — left rail inside the Settings page.
- *
- * Lists each section so the user can jump (or scroll) to it. The active
- * section is highlighted. The nav is a vertical list with section ids
- * as the anchor target; no JS router needed.
- */
-
-export interface SettingsNavItem {
-  id: string;
-  title: string;
-  icon?: ReactNode;
-}
-
-export interface SettingsNavProps {
-  items: readonly SettingsNavItem[];
-  /** The id of the currently-visible section. */
-  activeId?: string;
-  /** Click handler — usually `() => document.getElementById(id)?.scrollIntoView()`. */
-  onSelect?: (id: string) => void;
-  className?: string;
-}
-
-export function SettingsNav(props: SettingsNavProps) {
-  const { items, activeId, onSelect, className } = props;
-  return (
-    <nav aria-label="Settings sections" className={cx('v8-settings-nav', className)}>
-      <ul
-        style={{
-          listStyle: 'none',
-          margin: 0,
-          padding: 0,
-          display: 'flex',
-          flexDirection: 'column',
-          gap: 2,
-        }}
-      >
-        {items.map((item) => {
-          const isActive = activeId === item.id;
-          return (
-            <li key={item.id}>
-              <button
-                type="button"
-                onClick={() => onSelect?.(item.id)}
-                aria-current={isActive ? 'true' : undefined}
-                style={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  gap: 'var(--space-2)',
-                  width: '100%',
-                  padding: 'var(--space-2) var(--space-3)',
-                  background: isActive ? 'var(--surface-2)' : 'transparent',
-                  border: 0,
-                  borderRadius: 'var(--radius-sm)',
-                  color: isActive ? 'var(--fg)' : 'var(--fg-muted)',
-                  font: 'inherit',
-                  fontSize: 'var(--fs-13)',
-                  fontWeight: isActive ? 500 : 400,
-                  cursor: 'pointer',
-                  textAlign: 'left',
-                }}
-              >
-                {item.icon !== undefined && (
-                  <span
-                    aria-hidden="true"
-                    style={{
-                      display: 'inline-flex',
-                      color: isActive ? 'var(--accent)' : 'var(--fg-subtle)',
-                      flexShrink: 0,
-                    }}
-                  >
-                    {item.icon}
-                  </span>
-                )}
-                <span style={{ minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                  {item.title}
-                </span>
-              </button>
-            </li>
-          );
-        })}
-      </ul>
-      <style>{`
-        .v8-settings-nav button:hover { background: var(--surface-2); color: var(--fg); }
-      `}</style>
-    </nav>
-  );
-}

package/.claude/worktrees/kanban-overhaul/bizar-dash/src/web/v8/ui/settings/SettingsRow.tsx

@@ -1,88 +0,0 @@
-import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
-import { cx } from '../utils/cx.js';
-
-/**
- * SettingsRow — one labelled option inside a SettingsSection.
- *
- * Three-column layout:
- *   ┌─ label + description ────────────  control  ─┐
- * The label column is required; the control slot
- * hosts the actual interactive (Switch, Select, Slider, custom button, etc.).
- */
-
-export interface SettingsRowProps extends HTMLAttributes<HTMLDivElement> {
-  id: string;
-  /** The control label (left column). */
-  label: ReactNode;
-  /** Optional one-line description (left column, below label). */
-  description?: ReactNode;
-  /** Right column — the interactive control. */
-  control: ReactNode;
-  /** Mark the row as disabled (visual + aria). */
-  disabled?: boolean;
-}
-
-export const SettingsRow = forwardRef<HTMLDivElement, SettingsRowProps>(function SettingsRow(
-  props,
-  ref,
-) {
-  const { id, label, description, control, disabled = false, className, ...rest } = props;
-  // The label is announced via `aria-labelledby` rather than `<label
-  // htmlFor>` because the control is generic — its DOM id is set by the
-  // consumer (Switch, Select, custom input), and we'd otherwise need to
-  // thread it through the props chain. `aria-labelledby` is the WAI-ARIA
-  // sanctioned way to label a region without owning a native `<label>`.
-  const labelId = `${id}-label`;
-  return (
-    <div
-      ref={ref}
-      data-disabled={disabled || undefined}
-      aria-disabled={disabled || undefined}
-      className={cx('v8-settings-row', className)}
-      style={{
-        display: 'flex',
-        alignItems: 'flex-start',
-        justifyContent: 'space-between',
-        gap: 'var(--space-4)',
-        padding: 'var(--space-3) 0',
-        borderBottom: '1px solid var(--border)',
-        opacity: disabled ? 0.5 : 1,
-      }}
-      {...rest}
-    >
-      <div id={labelId} style={{ flex: 1, minWidth: 0 }}>
-        <span
-          style={{
-            display: 'block',
-            fontSize: 'var(--fs-13)',
-            fontWeight: 500,
-            color: 'var(--fg)',
-            cursor: disabled ? 'not-allowed' : 'default',
-            lineHeight: 'var(--lh-snug)',
-          }}
-        >
-          {label}
-        </span>
-        {description !== undefined && (
-          <p
-            style={{
-              fontSize: 'var(--fs-12)',
-              color: 'var(--fg-muted)',
-              margin: '4px 0 0 0',
-              lineHeight: 'var(--lh-snug)',
-            }}
-          >
-            {description}
-          </p>
-        )}
-      </div>
-      <div
-        role="group"
-        aria-labelledby={labelId}
-        style={{ flexShrink: 0, alignSelf: 'center' }}
-      >
-        {control}
-      </div>
-    </div>
-  );
-});