@polderlabs/bizar 6.3.0 → 7.0.1

package/bizar-dash/src/web/ui/styles/tokens.css

@@ -0,0 +1,208 @@
+/*
+ * tokens.css — Design tokens for the Bizar design system (Wave 1).
+ *
+ * Exposes every visual constant as a CSS custom property so Wave 2/3
+ * components reference `var(--token)` rather than literal hex/px values.
+ * Light is the default on `:root`; dark overrides below on
+ * `:root[data-theme="dark"]`. `:root[data-theme="light"]` is explicit so
+ * a theme toggle from dark can always return to "light" predictably.
+ *
+ * Aesthetic: Supabase-style simple + data-focused — flat surfaces, hairline
+ * borders, no gradients, no glassmorphism, no decorative shadows.
+ */
+
+:root {
+  /* COLOR — surfaces (light default) */
+  --surface-0: #ffffff;
+  --surface-1: #fafafa;
+  --surface-2: #f4f4f5;
+  --surface-3: #e4e4e7;
+  --surface-overlay: rgba(0, 0, 0, 0.04);
+
+  /* COLOR — text */
+  --text-primary: #18181b;
+  --text-secondary: #52525b;
+  --text-tertiary: #a1a1aa;
+  --text-inverse: #fafafa;
+  --text-disabled: #d4d4d8;
+
+  /* COLOR — borders */
+  --border-subtle: rgba(0, 0, 0, 0.06);
+  --border-default: rgba(0, 0, 0, 0.10);
+  --border-strong: rgba(0, 0, 0, 0.16);
+  --border-focus: var(--accent);
+
+  /* COLOR — accent (single green) */
+  --accent: #3ecf8e;
+  --accent-hover: #34b87b;
+  --accent-active: #2da46a;
+  --accent-fg: #ffffff;
+  --accent-subtle: rgba(62, 207, 142, 0.10);
+
+  /* COLOR — semantic */
+  --success: #16a34a;
+  --warning: #d97706;
+  --danger: #dc2626;
+  --info: #2563eb;
+  --success-subtle: rgba(22, 163, 74, 0.10);
+  --warning-subtle: rgba(217, 119, 6, 0.10);
+  --danger-subtle: rgba(220, 38, 38, 0.10);
+  --info-subtle: rgba(37, 99, 235, 0.10);
+
+  /* COLOR — chart series (10-step categorical) */
+  --chart-1: #3ecf8e;
+  --chart-2: #60a5fa;
+  --chart-3: #fbbf24;
+  --chart-4: #f87171;
+  --chart-5: #a78bfa;
+  --chart-6: #fb7185;
+  --chart-7: #34d399;
+  --chart-8: #fb923c;
+  --chart-9: #22d3ee;
+  --chart-10: #c084fc;
+
+  /* TYPOGRAPHY */
+  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --font-mono: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Monaco,
+    Consolas, 'Liberation Mono', 'Courier New', monospace;
+
+  --text-xs: 11px;
+  --text-sm: 12px;
+  --text-base: 13px;
+  --text-md: 14px;
+  --text-lg: 16px;
+  --text-xl: 18px;
+  --text-2xl: 22px;
+  --text-3xl: 28px;
+
+  --leading-tight: 1.2;
+  --leading-snug: 1.35;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.65;
+
+  --weight-regular: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+  --weight-bold: 700;
+
+  /* SPACING — 8px grid + half-steps */
+  --space-0: 0;
+  --space-1: 2px;
+  --space-2: 4px;
+  --space-3: 8px;
+  --space-4: 12px;
+  --space-5: 16px;
+  --space-6: 20px;
+  --space-7: 24px;
+  --space-8: 32px;
+  --space-9: 40px;
+  --space-10: 48px;
+  --space-11: 64px;
+  --space-12: 80px;
+
+  /* RADII */
+  --radius-none: 0;
+  --radius-sm: 2px;
+  --radius-md: 4px;
+  --radius-lg: 6px;
+  --radius-full: 9999px;
+
+  /* SHADOWS — hairline only, no big shadows */
+  --shadow-none: none;
+  --shadow-hairline: 0 0 0 1px var(--border-subtle);
+  --shadow-overlay: 0 0 0 1px var(--border-default),
+    0 8px 24px rgba(0, 0, 0, 0.08);
+  --shadow-tooltip: 0 0 0 1px var(--border-default),
+    0 4px 12px rgba(0, 0, 0, 0.12);
+
+  /* Z-INDEX */
+  --z-base: 0;
+  --z-dropdown: 100;
+  --z-sticky: 200;
+  --z-overlay: 300;
+  --z-modal: 400;
+  --z-popover: 500;
+  --z-tooltip: 600;
+  --z-toast: 700;
+
+  /* ANIMATION */
+  --duration-instant: 50ms;
+  --duration-fast: 120ms;
+  --duration-normal: 180ms;
+  --duration-slow: 280ms;
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+
+  /* LAYOUT */
+  --layout-sidebar-width: 220px;
+  --layout-topbar-height: 48px;
+  --layout-content-max: 1440px;
+}
+
+:root[data-theme='dark'] {
+  /* COLOR — surfaces (dark overrides) */
+  --surface-0: #0a0a0a;
+  --surface-1: #111111;
+  --surface-2: #1a1a1a;
+  --surface-3: #262626;
+  --surface-overlay: rgba(255, 255, 255, 0.04);
+
+  /* COLOR — text */
+  --text-primary: #fafafa;
+  --text-secondary: #a1a1aa;
+  --text-tertiary: #71717a;
+  --text-inverse: #18181b;
+  --text-disabled: #52525b;
+
+  /* COLOR — borders */
+  --border-subtle: rgba(255, 255, 255, 0.06);
+  --border-default: rgba(255, 255, 255, 0.10);
+  --border-strong: rgba(255, 255, 255, 0.16);
+
+  /* Accent stays the same hue */
+  --accent-subtle: rgba(62, 207, 142, 0.15);
+
+  /* Semantic subtle */
+  --success-subtle: rgba(22, 163, 74, 0.15);
+  --warning-subtle: rgba(217, 119, 6, 0.15);
+  --danger-subtle: rgba(220, 38, 38, 0.15);
+  --info-subtle: rgba(37, 99, 235, 0.15);
+
+  /* Shadows stronger in dark for visibility */
+  --shadow-overlay: 0 0 0 1px var(--border-default),
+    0 8px 24px rgba(0, 0, 0, 0.40);
+  --shadow-tooltip: 0 0 0 1px var(--border-default),
+    0 4px 12px rgba(0, 0, 0, 0.50);
+
+  /* Agent swatch (F-041) — used as the placeholder when an agent has
+     no configured color; falls back to the brand accent so empty swatches
+     still read as "this is the brand". */
+  --default-agent-swatch: var(--accent);
+
+  /* Safe-area insets (F-041) — wire to env(safe-area-inset-*) so the
+     mobile shell clears the iOS notch + home indicator on phones and
+     the macOS notch on laptops without per-component media queries. */
+  --safe-top: env(safe-area-inset-top, 0px);
+  --safe-bottom: env(safe-area-inset-bottom, 0px);
+  --safe-left: env(safe-area-inset-left, 0px);
+  --safe-right: env(safe-area-inset-right, 0px);
+}
+
+:root[data-theme='light'] {
+  /* Same as :root default — explicit override for "always go back to light" */
+  --surface-0: #ffffff;
+  --surface-1: #fafafa;
+  --surface-2: #f4f4f5;
+  --surface-3: #e4e4e7;
+  --text-primary: #18181b;
+  --text-secondary: #52525b;
+  --text-tertiary: #a1a1aa;
+  --border-subtle: rgba(0, 0, 0, 0.06);
+  --border-default: rgba(0, 0, 0, 0.10);
+  --border-strong: rgba(0, 0, 0, 0.16);
+  --shadow-overlay: 0 0 0 1px var(--border-default),
+    0 8px 24px rgba(0, 0, 0, 0.08);
+  --shadow-tooltip: 0 0 0 1px var(--border-default),
+    0 4px 12px rgba(0, 0, 0, 0.12);
+}

package/bizar-dash/src/web/ui/theme/ThemeProvider.tsx

@@ -0,0 +1,142 @@
+/*
+ * ThemeProvider.tsx — Theme context for the Bizar design system (Wave 1).
+ *
+ * Owns three values: the user-selected `theme` preference ('light' | 'dark'
+ * | 'system'), the resolved `resolvedTheme` actually applied to <html>, and
+ * the actions `setTheme` / `toggle`. The 'system' preference follows the
+ * OS preference-color-scheme via a MediaQueryList subscription that is only
+ * attached while the preference is 'system' (no listener leak when the user
+ * has pinned 'light' or 'dark').
+ *
+ * Persists `theme` (not resolvedTheme) to localStorage under the key
+ * 'bizar-theme' so the OS-mode subscription can still re-evaluate each
+ * session. Renders no DOM — it is a pure context provider.
+ */
+
+import {
+  createContext,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from 'react';
+
+export type Theme = 'light' | 'dark' | 'system';
+
+export type ThemeContextValue = {
+  theme: Theme;
+  resolvedTheme: 'light' | 'dark';
+  setTheme: (t: Theme) => void;
+  toggle: () => void;
+};
+
+export const ThemeContext = createContext<ThemeContextValue | null>(null);
+
+const STORAGE_KEY = 'bizar-theme';
+
+function getInitialTheme(): Theme {
+  if (typeof window === 'undefined') return 'system';
+  try {
+    const stored = window.localStorage.getItem(STORAGE_KEY);
+    if (stored === 'light' || stored === 'dark' || stored === 'system') {
+      return stored;
+    }
+  } catch {
+    // ignore quota / privacy errors and fall back to OS preference
+  }
+  return 'system';
+}
+
+function resolveSystemTheme(): 'light' | 'dark' {
+  if (typeof window === 'undefined') return 'light';
+  return window.matchMedia('(prefers-color-scheme: dark)').matches
+    ? 'dark'
+    : 'light';
+}
+
+function applyResolvedTheme(resolved: 'light' | 'dark'): void {
+  if (typeof document === 'undefined') return;
+  document.documentElement.setAttribute('data-theme', resolved);
+  document.documentElement.setAttribute('data-bizar-theme', resolved);
+}
+
+export type ThemeProviderProps = {
+  children: ReactNode;
+  /** Override the localStorage lookup. Used by tests / Storybook. */
+  defaultTheme?: Theme;
+};
+
+export function ThemeProvider({
+  children,
+  defaultTheme,
+}: ThemeProviderProps): React.JSX.Element {
+  const [theme, setThemeState] = useState<Theme>(
+    defaultTheme ?? getInitialTheme,
+  );
+  const [systemTheme, setSystemTheme] = useState<'light' | 'dark'>(
+    resolveSystemTheme,
+  );
+
+  const resolvedTheme: 'light' | 'dark' =
+    theme === 'system' ? systemTheme : theme;
+
+  useEffect(() => {
+    applyResolvedTheme(resolvedTheme);
+  }, [resolvedTheme]);
+
+  useEffect(() => {
+    if (theme !== 'system') return;
+    if (typeof window === 'undefined') return;
+
+    const mql = window.matchMedia('(prefers-color-scheme: dark)');
+    const handler = (e: MediaQueryListEvent) => {
+      setSystemTheme(e.matches ? 'dark' : 'light');
+    };
+
+    // Sync once on mount in case the OS preference changed while
+    // the provider was unmounted.
+    setSystemTheme(mql.matches ? 'dark' : 'light');
+
+    mql.addEventListener('change', handler);
+    return () => mql.removeEventListener('change', handler);
+  }, [theme]);
+
+  const setTheme = useCallback((t: Theme) => {
+    setThemeState(t);
+    try {
+      if (typeof window !== 'undefined') {
+        window.localStorage.setItem(STORAGE_KEY, t);
+      }
+    } catch {
+      // ignore storage failures (privacy mode, quota)
+    }
+  }, []);
+
+  const toggle = useCallback(() => {
+    setThemeState((prev) => {
+      // 'system' is set explicitly — only toggle between resolved modes
+      // when the user invokes toggle(). This matches Supabase's pattern.
+      const current: 'light' | 'dark' =
+        prev === 'system' ? systemTheme : prev;
+      const next: Theme = current === 'light' ? 'dark' : 'light';
+      try {
+        if (typeof window !== 'undefined') {
+          window.localStorage.setItem(STORAGE_KEY, next);
+        }
+      } catch {
+        // ignore
+      }
+      return next;
+    });
+  }, [systemTheme]);
+
+  const value = useMemo<ThemeContextValue>(
+    () => ({ theme, resolvedTheme, setTheme, toggle }),
+    [theme, resolvedTheme, setTheme, toggle],
+  );
+
+  return (
+    <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
+  );
+}

package/bizar-dash/src/web/ui/theme/tokens.ts

@@ -0,0 +1,131 @@
+/*
+ * tokens.ts — TypeScript mirror of the CSS variables in tokens.css.
+ *
+ * Each constant is a `var(--…)` reference so React code (chart configs,
+ * inline style props, dynamic SVG fills, etc.) can stay typed end-to-end
+ * without duplicating hex strings. Naming matches the CSS var name with
+ * dashes replaced by camelCase (e.g. `--surface-0` → `surface0`).
+ *
+ * Synchronisation rule: when adding or renaming a token, update BOTH this
+ * file and `tokens.css` in the same commit. The `as const` assertion
+ * generates the union types below so consumers get autocompletion.
+ */
+
+export const colorTokens = {
+  // surfaces
+  surface0: 'var(--surface-0)',
+  surface1: 'var(--surface-1)',
+  surface2: 'var(--surface-2)',
+  surface3: 'var(--surface-3)',
+  surfaceOverlay: 'var(--surface-overlay)',
+  // text
+  textPrimary: 'var(--text-primary)',
+  textSecondary: 'var(--text-secondary)',
+  textTertiary: 'var(--text-tertiary)',
+  textInverse: 'var(--text-inverse)',
+  textDisabled: 'var(--text-disabled)',
+  // borders
+  borderSubtle: 'var(--border-subtle)',
+  borderDefault: 'var(--border-default)',
+  borderStrong: 'var(--border-strong)',
+  borderFocus: 'var(--border-focus)',
+  // accent
+  accent: 'var(--accent)',
+  accentHover: 'var(--accent-hover)',
+  accentActive: 'var(--accent-active)',
+  accentFg: 'var(--accent-fg)',
+  accentSubtle: 'var(--accent-subtle)',
+  // semantic
+  success: 'var(--success)',
+  warning: 'var(--warning)',
+  danger: 'var(--danger)',
+  info: 'var(--info)',
+  successSubtle: 'var(--success-subtle)',
+  warningSubtle: 'var(--warning-subtle)',
+  dangerSubtle: 'var(--danger-subtle)',
+  infoSubtle: 'var(--info-subtle)',
+  // chart series
+  chart1: 'var(--chart-1)',
+  chart2: 'var(--chart-2)',
+  chart3: 'var(--chart-3)',
+  chart4: 'var(--chart-4)',
+  chart5: 'var(--chart-5)',
+  chart6: 'var(--chart-6)',
+  chart7: 'var(--chart-7)',
+  chart8: 'var(--chart-8)',
+  chart9: 'var(--chart-9)',
+  chart10: 'var(--chart-10)',
+} as const;
+
+export const spaceTokens = {
+  space0: 'var(--space-0)',
+  space1: 'var(--space-1)',
+  space2: 'var(--space-2)',
+  space3: 'var(--space-3)',
+  space4: 'var(--space-4)',
+  space5: 'var(--space-5)',
+  space6: 'var(--space-6)',
+  space7: 'var(--space-7)',
+  space8: 'var(--space-8)',
+  space9: 'var(--space-9)',
+  space10: 'var(--space-10)',
+  space11: 'var(--space-11)',
+  space12: 'var(--space-12)',
+} as const;
+
+export const radiusTokens = {
+  radiusNone: 'var(--radius-none)',
+  radiusSm: 'var(--radius-sm)',
+  radiusMd: 'var(--radius-md)',
+  radiusLg: 'var(--radius-lg)',
+  radiusFull: 'var(--radius-full)',
+} as const;
+
+export const fontSizeTokens = {
+  textXs: 'var(--text-xs)',
+  textSm: 'var(--text-sm)',
+  textBase: 'var(--text-base)',
+  textMd: 'var(--text-md)',
+  textLg: 'var(--text-lg)',
+  textXl: 'var(--text-xl)',
+  text2xl: 'var(--text-2xl)',
+  text3xl: 'var(--text-3xl)',
+} as const;
+
+export const fontFamilyTokens = {
+  fontSans: 'var(--font-sans)',
+  fontMono: 'var(--font-mono)',
+} as const;
+
+export const shadowTokens = {
+  shadowNone: 'var(--shadow-none)',
+  shadowHairline: 'var(--shadow-hairline)',
+  shadowOverlay: 'var(--shadow-overlay)',
+  shadowTooltip: 'var(--shadow-tooltip)',
+} as const;
+
+export const zIndexTokens = {
+  zBase: 'var(--z-base)',
+  zDropdown: 'var(--z-dropdown)',
+  zSticky: 'var(--z-sticky)',
+  zOverlay: 'var(--z-overlay)',
+  zModal: 'var(--z-modal)',
+  zPopover: 'var(--z-popover)',
+  zTooltip: 'var(--z-tooltip)',
+  zToast: 'var(--z-toast)',
+} as const;
+
+export const layoutTokens = {
+  layoutSidebarWidth: 'var(--layout-sidebar-width)',
+  layoutTopbarHeight: 'var(--layout-topbar-height)',
+  layoutContentMax: 'var(--layout-content-max)',
+} as const;
+
+export type ColorToken = keyof typeof colorTokens;
+export type SpaceToken = keyof typeof spaceTokens;
+export type RadiusToken = keyof typeof radiusTokens;
+export type FontSizeToken = keyof typeof fontSizeTokens;
+export type FontFamilyToken = keyof typeof fontFamilyTokens;
+export type ShadowToken = keyof typeof shadowTokens;
+export type ZIndexToken = keyof typeof zIndexTokens;
+export type LayoutToken = keyof typeof layoutTokens;

package/bizar-dash/src/web/ui/theme/useTheme.ts

@@ -0,0 +1,22 @@
+/*
+ * useTheme.ts — Hook accessor for the ThemeContext.
+ *
+ * Throws if consumed outside a <ThemeProvider>. This is intentional: a
+ * missing provider is a developer error rather than a runtime fallback,
+ * so the consumer fails fast during development instead of silently
+ * returning the wrong theme.
+ */
+
+import { useContext } from 'react';
+import { ThemeContext, type ThemeContextValue } from './ThemeProvider';
+
+export function useTheme(): ThemeContextValue {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) {
+    throw new Error(
+      'useTheme must be used inside a <ThemeProvider>. ' +
+        'Wrap your app root in <ThemeProvider> before calling useTheme().',
+    );
+  }
+  return ctx;
+}

package/bizar-dash/src/web/ui/utils/cx.ts

@@ -0,0 +1,42 @@
+/*
+ * cx.ts — Tiny className combiner.
+ *
+ * Filters out falsy values (false, null, undefined, 0, '') and joins the
+ * surviving truthy strings with a single space. Accepts nested arrays
+ * (recursively flattened) and object syntax ({ active: true, disabled:
+ * false }) so callers can pass conditional flags without concatenation.
+ *
+ * Zero runtime dependencies — preferred over `clsx`/`classnames` to keep
+ * the design-system package free of vendored utilities.
+ */
+
+export type ClassValue =
+  | string
+  | number
+  | null
+  | false
+  | undefined
+  | ClassValue[]
+  | { [key: string]: boolean | null | undefined };
+
+export function cx(...inputs: ClassValue[]): string {
+  const out: string[] = [];
+  const walk = (value: ClassValue): void => {
+    if (!value) return;
+    if (typeof value === 'string' || typeof value === 'number') {
+      out.push(String(value));
+      return;
+    }
+    if (Array.isArray(value)) {
+      for (const v of value) walk(v);
+      return;
+    }
+    if (typeof value === 'object') {
+      for (const key in value) {
+        if (value[key]) out.push(key);
+      }
+    }
+  };
+  for (const input of inputs) walk(input);
+  return out.join(' ');
+}