@polderlabs/bizar 7.0.2 → 8.0.0

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

@@ -1,208 +0,0 @@
-/*
- * 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

@@ -1,142 +0,0 @@
-/*
- * 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

@@ -1,131 +0,0 @@
-/*
- * 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

@@ -1,22 +0,0 @@
-/*
- * 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

@@ -1,42 +0,0 @@
-/*
- * 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(' ');
-}