@polderlabs/bizar 7.0.4 → 8.0.0

package/bizar-dash/src/web/ui/layout/layout.css

@@ -1,464 +0,0 @@
-/*
- * layout.css — Styles for Bizar layout components (Wave 2C).
- *
- * Ships the visual surface for AppShell, Sidebar, Topbar, Panel,
- * PanelHeader, Tabs, and Breadcrumbs. Every value references a token —
- * no literals — so the design-system lights up both light and dark by
- * inheriting tokens.css. Side-effect import from `ui/layout/index.ts`.
- *
- * Layout primitives here are additive: the legacy main.css / topbar
- * styles in styles/ keep working unchanged. Class names are scoped
- * under `.bizar-` so they never collide with legacy `.sidebar` etc.
- */
-
-/* ─────────────────────────────────────────────────────────────────────
- * AppShell — topbar + sidebar + content
- * ──────────────────────────────────────────────────────────────────── */
-
-.bizar-app-shell {
-  display: grid;
-  grid-template-areas:
-    'topbar topbar'
-    'sidebar main';
-  grid-template-rows: var(--layout-topbar-height) 1fr;
-  grid-template-columns: auto 1fr;
-  min-height: 100vh;
-  background: var(--surface-0);
-  color: var(--text-primary);
-}
-
-.bizar-app-shell__topbar {
-  grid-area: topbar;
-  position: sticky;
-  top: 0;
-  z-index: var(--z-sticky);
-  background: var(--surface-0);
-  border-bottom: 1px solid var(--border-subtle);
-}
-
-.bizar-app-shell__sidebar {
-  grid-area: sidebar;
-  width: var(--layout-sidebar-width);
-  border-right: 1px solid var(--border-subtle);
-  background: var(--surface-1);
-  overflow-y: auto;
-}
-
-.bizar-app-shell__sidebar--collapsed {
-  width: 0;
-  border-right: 0;
-  overflow: hidden;
-}
-
-.bizar-app-shell__main {
-  grid-area: main;
-  min-width: 0;
-  overflow-y: auto;
-  background: var(--surface-0);
-}
-
-.bizar-app-shell__main-inner {
-  max-width: var(--layout-content-max);
-  margin: 0 auto;
-  padding: var(--space-6) var(--space-7);
-}
-
-/* ─────────────────────────────────────────────────────────────────────
- * Sidebar — left vertical nav rail
- * ──────────────────────────────────────────────────────────────────── */
-
-.bizar-sidebar {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  padding: var(--space-4) var(--space-3);
-  font-size: var(--text-base);
-}
-
-.bizar-sidebar__group + .bizar-sidebar__group {
-  margin-top: var(--space-5);
-}
-
-.bizar-sidebar__label {
-  padding: 0 var(--space-3);
-  margin-bottom: var(--space-2);
-  font-size: var(--text-xs);
-  font-weight: var(--weight-semibold);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  color: var(--text-tertiary);
-}
-
-.bizar-sidebar__items {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-1);
-}
-
-.bizar-sidebar__footer {
-  margin-top: auto;
-  padding-top: var(--space-4);
-  border-top: 1px solid var(--border-subtle);
-}
-
-.bizar-sidebar__item {
-  display: flex;
-  align-items: center;
-  gap: var(--space-3);
-  padding: var(--space-2) var(--space-3);
-  font-size: var(--text-base);
-  font-family: inherit;
-  color: var(--text-secondary);
-  background: transparent;
-  border: 0;
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  text-align: left;
-  width: 100%;
-  transition: background var(--duration-fast) var(--ease-out),
-    color var(--duration-fast) var(--ease-out);
-  line-height: var(--leading-snug);
-}
-
-.bizar-sidebar__item:hover:not([disabled]):not([aria-disabled='true']) {
-  background: var(--surface-overlay);
-  color: var(--text-primary);
-}
-
-.bizar-sidebar__item--active {
-  background: var(--accent-subtle);
-  color: var(--text-primary);
-  font-weight: var(--weight-medium);
-}
-
-.bizar-sidebar__item[disabled],
-.bizar-sidebar__item[aria-disabled='true'] {
-  opacity: 0.5;
-  cursor: not-allowed;
-  color: var(--text-tertiary);
-}
-
-.bizar-sidebar__item-label {
-  flex: 1 1 auto;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.bizar-sidebar__item-badge {
-  font-size: var(--text-xs);
-  padding: 0 var(--space-2);
-  background: var(--surface-overlay);
-  color: var(--text-secondary);
-  border-radius: var(--radius-full);
-  font-weight: var(--weight-medium);
-  line-height: var(--leading-tight);
-}
-
-/* ─────────────────────────────────────────────────────────────────────
- * Topbar — header bar
- * ──────────────────────────────────────────────────────────────────── */
-
-.bizar-topbar {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  height: var(--layout-topbar-height);
-  padding: 0 var(--space-5);
-  gap: var(--space-4);
-  background: var(--surface-0);
-  border-bottom: 1px solid var(--border-subtle);
-}
-
-.bizar-topbar--sticky {
-  position: sticky;
-  top: 0;
-  z-index: var(--z-sticky);
-}
-
-.bizar-topbar__brand {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-}
-
-.bizar-topbar__center {
-  flex: 1;
-  display: flex;
-  justify-content: center;
-  min-width: 0;
-}
-
-.bizar-topbar__right {
-  display: flex;
-  align-items: center;
-  gap: var(--space-3);
-  flex-shrink: 0;
-  margin-left: auto;
-}
-
-/* ─────────────────────────────────────────────────────────────────────
- * Panel — bordered card
- * ──────────────────────────────────────────────────────────────────── */
-
-.bizar-panel {
-  background: var(--surface-1);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-md);
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.bizar-panel--filled {
-  background: var(--surface-2);
-  border-color: var(--border-default);
-}
-
-.bizar-panel__header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: var(--space-4);
-  padding: var(--space-4) var(--space-5);
-  border-bottom: 1px solid var(--border-subtle);
-}
-
-.bizar-panel__header-text {
-  flex: 1 1 auto;
-  min-width: 0;
-}
-
-.bizar-panel__title {
-  margin: 0;
-  font-size: var(--text-md);
-  font-weight: var(--weight-semibold);
-  color: var(--text-primary);
-  line-height: var(--leading-tight);
-}
-
-.bizar-panel__description {
-  margin: var(--space-1) 0 0;
-  font-size: var(--text-sm);
-  color: var(--text-secondary);
-  line-height: var(--leading-snug);
-}
-
-.bizar-panel__actions {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  flex-shrink: 0;
-}
-
-.bizar-panel__body {
-  flex: 1 1 auto;
-}
-
-.bizar-panel__padding--0 { padding: 0; }
-.bizar-panel__padding--1 { padding: var(--space-1); }
-.bizar-panel__padding--2 { padding: var(--space-2); }
-.bizar-panel__padding--3 { padding: var(--space-3); }
-.bizar-panel__padding--4 { padding: var(--space-4); }
-.bizar-panel__padding--5 { padding: var(--space-5); }
-
-/* ─────────────────────────────────────────────────────────────────────
- * ViewHeader — top-of-view title row (F-041)
- *
- * Sibling of PanelHeader, distinct because it lives at the page level
- * (above the first Panel) rather than inside one. One header per top-
- * level view so the dashboard reads as one system.
- * ──────────────────────────────────────────────────────────────────── */
-
-.bizar-view-header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: var(--space-4);
-  padding: var(--space-3) 0 var(--space-4);
-  flex-wrap: wrap;
-}
-.bizar-view-header__text {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-1);
-  min-width: 0;
-  flex: 1 1 auto;
-}
-.bizar-view-header__eyebrow {
-  font-size: var(--text-xs);
-  font-weight: var(--weight-medium);
-  color: var(--text-tertiary);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-.bizar-view-header__title {
-  margin: 0;
-  font-size: var(--text-xl);
-  font-weight: var(--weight-semibold);
-  color: var(--text-primary);
-  line-height: var(--leading-tight);
-}
-.bizar-view-header__subtitle {
-  margin: 0;
-  font-size: var(--text-sm);
-  color: var(--text-secondary);
-  line-height: var(--leading-snug);
-}
-.bizar-view-header__actions {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  flex-wrap: wrap;
-  flex: 0 0 auto;
-}
-
-/* ─────────────────────────────────────────────────────────────────────
- * Tabs — horizontal tab strip
- * ──────────────────────────────────────────────────────────────────── */
-
-.bizar-tabs {
-  display: flex;
-  align-items: center;
-  gap: 0;
-}
-
-.bizar-tabs--sm .bizar-tab {
-  font-size: var(--text-sm);
-  padding-top: var(--space-2);
-  padding-bottom: var(--space-2);
-}
-
-/* Underline variant */
-.bizar-tabs--underline {
-  border-bottom: 1px solid var(--border-subtle);
-  gap: var(--space-2);
-}
-
-.bizar-tabs--underline .bizar-tab {
-  padding: var(--space-3) var(--space-4);
-  border-bottom: 2px solid transparent;
-  margin-bottom: -1px;
-  border-radius: 0;
-  font-size: var(--text-base);
-  color: var(--text-secondary);
-  background: transparent;
-  transition: color var(--duration-fast) var(--ease-out),
-    border-color var(--duration-fast) var(--ease-out);
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-2);
-}
-
-.bizar-tabs--underline .bizar-tab:hover:not([disabled]) {
-  color: var(--text-primary);
-}
-
-.bizar-tabs--underline .bizar-tab--active {
-  color: var(--text-primary);
-  border-bottom-color: var(--accent);
-}
-
-.bizar-tabs--underline .bizar-tab[disabled] {
-  color: var(--text-tertiary);
-  cursor: not-allowed;
-}
-
-/* Pill variant */
-.bizar-tabs--pill {
-  gap: var(--space-2);
-  padding: var(--space-1);
-}
-
-.bizar-tabs--pill .bizar-tab {
-  padding: var(--space-2) var(--space-4);
-  font-size: var(--text-base);
-  color: var(--text-secondary);
-  background: transparent;
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-2);
-  transition: background var(--duration-fast) var(--ease-out),
-    color var(--duration-fast) var(--ease-out);
-}
-
-.bizar-tabs--pill .bizar-tab:hover:not([disabled]) {
-  background: var(--surface-2);
-  color: var(--text-primary);
-}
-
-.bizar-tabs--pill .bizar-tab--active {
-  background: var(--surface-3);
-  color: var(--text-primary);
-  font-weight: var(--weight-medium);
-}
-
-.bizar-tabs--pill .bizar-tab[disabled] {
-  color: var(--text-tertiary);
-  cursor: not-allowed;
-}
-
-.bizar-tab__badge {
-  background: var(--surface-overlay);
-  color: var(--text-secondary);
-  font-size: var(--text-xs);
-  padding: 0 var(--space-2);
-  border-radius: var(--radius-full);
-  font-weight: var(--weight-medium);
-  line-height: var(--leading-tight);
-}
-
-.bizar-tab__icon {
-  flex-shrink: 0;
-}
-
-/* ─────────────────────────────────────────────────────────────────────
- * Breadcrumbs
- * ──────────────────────────────────────────────────────────────────── */
-
-.bizar-breadcrumbs {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  font-size: var(--text-sm);
-  color: var(--text-secondary);
-  gap: var(--space-2);
-}
-
-.bizar-breadcrumbs__item {
-  color: var(--text-secondary);
-  background: transparent;
-  border: 0;
-  padding: 0;
-  font-size: inherit;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  border-radius: var(--radius-sm);
-}
-
-.bizar-breadcrumbs__item:hover:not([disabled]) {
-  color: var(--text-primary);
-}
-
-.bizar-breadcrumbs__item[disabled] {
-  color: var(--text-tertiary);
-  cursor: default;
-}
-
-.bizar-breadcrumbs__item--current {
-  color: var(--text-primary);
-  font-weight: var(--weight-medium);
-  cursor: default;
-}
-
-.bizar-breadcrumbs__separator {
-  color: var(--text-tertiary);
-  display: inline-flex;
-  align-items: center;
-  flex-shrink: 0;
-}

package/bizar-dash/src/web/ui/navigation/CommandPalette.tsx

@@ -1,199 +0,0 @@
-/*
- * CommandPalette.tsx — Cmd+K command palette (Wave 2B).
- *
- * Self-contained palette: provides its own overlay, input, results list
- * and keyboard handling. The next Wave 2C Dialog component will replace
- * the overlay/modal wrapper, but the search/filter/keyboard guts stay here
- * because the search UX (fuzzy match, grouping, arrow nav) is intrinsic to
- * the palette rather than the modal primitive.
- *
- * Filter pipeline: input change → fuse.js (weighted across label +
- * description, threshold loose so typos still hit) → group-by-type →
- * flatten into a flat list for arrow-key navigation.
- */
-
-import {
-  useCallback, useEffect, useMemo, useRef, useState, type ReactNode,
-} from 'react';
-import { Search } from 'lucide-react';
-import Fuse from 'fuse.js';
-import { cx } from '../utils/cx';
-
-export type CommandPaletteItemType =
-  | 'agent' | 'task' | 'mod' | 'schedule' | 'project' | 'command' | 'setting';
-
-export type CommandPaletteItem = {
-  id: string;
-  type: CommandPaletteItemType;
-  label: string;
-  description?: string;
-  icon?: ReactNode;
-  shortcut?: string[];
-  onSelect: () => void;
-};
-
-export type CommandPaletteProps = {
-  open: boolean;
-  onClose: () => void;
-  items: CommandPaletteItem[];
-  placeholder?: string;
-  className?: string;
-};
-
-const TYPE_LABELS: Record<CommandPaletteItemType, string> = {
-  agent: 'Agents', task: 'Tasks', mod: 'Mods', schedule: 'Schedules',
-  project: 'Projects', command: 'Commands', setting: 'Settings',
-};
-const TYPE_ORDER = Object.keys(TYPE_LABELS) as CommandPaletteItemType[];
-
-type Grouped = Array<readonly [CommandPaletteItemType, CommandPaletteItem[]]>;
-type FlatRow = { index: number; item: CommandPaletteItem };
-
-function groupByType(items: CommandPaletteItem[]): Grouped {
-  const byType = new Map<CommandPaletteItemType, CommandPaletteItem[]>();
-  for (const it of items) {
-    const arr = byType.get(it.type) ?? [];
-    arr.push(it);
-    byType.set(it.type, arr);
-  }
-  return TYPE_ORDER.flatMap((t) => {
-    const arr = byType.get(t);
-    return arr && arr.length > 0 ? ([[t, arr]] as const) : [];
-  });
-}
-
-function flatten(rows: Grouped): FlatRow[] {
-  const flat: FlatRow[] = [];
-  let i = 0;
-  for (const [, items] of rows) for (const it of items) flat.push({ index: i++, item: it });
-  return flat;
-}
-
-export function CommandPalette({
-  open, onClose, items, placeholder = 'Search anything…', className,
-}: CommandPaletteProps): React.JSX.Element | null {
-  const [query, setQuery] = useState('');
-  const [activeIndex, setActiveIndex] = useState(0);
-  const inputRef = useRef<HTMLInputElement | null>(null);
-  const listRef = useRef<HTMLDivElement | null>(null);
-
-  const fuse = useMemo(
-    () => new Fuse(items, {
-      keys: [{ name: 'label', weight: 2 }, { name: 'description', weight: 1 }],
-      threshold: 0.4, ignoreLocation: true,
-    }),
-    [items],
-  );
-
-  const grouped = useMemo<Grouped>(() => {
-    const base = query.trim() === '' ? items : fuse.search(query).map((r) => r.item);
-    return groupByType(base);
-  }, [query, items, fuse]);
-  const flat = useMemo(() => flatten(grouped), [grouped]);
-
-  // Side-effects: reset on open, clamp activeIndex, focus input, scroll into
-  // view, lock body scroll. jsdom lacks scrollIntoView so we guard the call.
-  useEffect(() => { if (open) { setQuery(''); setActiveIndex(0); } }, [open]);
-  useEffect(() => {
-    if (activeIndex >= flat.length) setActiveIndex(Math.max(0, flat.length - 1));
-  }, [flat.length, activeIndex]);
-  useEffect(() => {
-    if (!open) return;
-    const t = setTimeout(() => inputRef.current?.focus(), 0);
-    return () => clearTimeout(t);
-  }, [open]);
-  useEffect(() => {
-    const el = listRef.current?.querySelector<HTMLElement>(
-      `[data-cmdk-index="${activeIndex}"]`,
-    );
-    if (el && typeof el.scrollIntoView === 'function') el.scrollIntoView({ block: 'nearest' });
-  }, [activeIndex]);
-  useEffect(() => {
-    if (!open) return;
-    const prev = document.body.style.overflow;
-    document.body.style.overflow = 'hidden';
-    return () => { document.body.style.overflow = prev; };
-  }, [open]);
-
-  const selectIndex = useCallback(
-    (i: number) => { const row = flat[i]; if (!row) return; row.item.onSelect(); onClose(); },
-    [flat, onClose],
-  );
-  const onKeyDown = useCallback((e: React.KeyboardEvent<HTMLDivElement>) => {
-    if (e.key === 'Escape') { e.preventDefault(); onClose(); return; }
-    if (flat.length === 0) return;
-    if (e.key === 'ArrowDown') { e.preventDefault(); setActiveIndex((i) => (i + 1) % flat.length); return; }
-    if (e.key === 'ArrowUp') { e.preventDefault(); setActiveIndex((i) => (i - 1 + flat.length) % flat.length); return; }
-    if (e.key === 'Enter') { e.preventDefault(); selectIndex(activeIndex); }
-  }, [flat.length, activeIndex, onClose, selectIndex]);
-
-  if (!open) return null;
-
-  return (
-    <div
-      className="bd-cmdk-overlay" role="dialog" aria-modal="true" aria-label="Command palette"
-      onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}
-    >
-      <div className={cx('bd-cmdk', className)} onKeyDown={onKeyDown}>
-        <div className="bd-cmdk__input-wrap">
-          <Search size={16} aria-hidden="true" />
-          <input
-            ref={inputRef} className="bd-cmdk__input" value={query}
-            onChange={(e) => { setQuery(e.target.value); setActiveIndex(0); }}
-            placeholder={placeholder} autoComplete="off" spellCheck={false}
-          />
-          <kbd className="bd-cmdk__kbd-hint">esc</kbd>
-        </div>
-        <div className="bd-cmdk__results" ref={listRef}>
-          {flat.length === 0 ? <div className="bd-cmdk__empty">No results</div> : (
-            grouped.map(([type, list]) => (
-              <div key={type} className="bd-cmdk__group">
-                <div className="bd-cmdk__group-header">{TYPE_LABELS[type]}</div>
-                {list.map((item) => {
-                  const rowIndex = flat.find((r) => r.item === item)!.index;
-                  return <PaletteRow
-                    key={item.id}
-                    item={item}
-                    rowIndex={rowIndex}
-                    active={rowIndex === activeIndex}
-                    onHover={setActiveIndex}
-                    onSelect={selectIndex}
-                  />;
-                })}
-              </div>
-            ))
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-type PaletteRowProps = {
-  item: CommandPaletteItem;
-  rowIndex: number;
-  active: boolean;
-  onHover: (i: number) => void;
-  onSelect: (i: number) => void;
-};
-function PaletteRow({ item, rowIndex, active, onHover, onSelect }: PaletteRowProps): React.JSX.Element {
-  return (
-    <button
-      type="button" data-cmdk-index={rowIndex}
-      className={cx('bd-cmdk__item', active && 'bd-cmdk__item--active')}
-      onMouseEnter={() => onHover(rowIndex)}
-      onClick={() => onSelect(rowIndex)}
-    >
-      {item.icon && <span className="bd-cmdk__item-icon" aria-hidden="true">{item.icon}</span>}
-      <span className="bd-cmdk__item-body">
-        <span className="bd-cmdk__item-label">{item.label}</span>
-        {item.description && <span className="bd-cmdk__item-description">{item.description}</span>}
-      </span>
-      {item.shortcut && item.shortcut.length > 0 && (
-        <span className="bd-cmdk__item-shortcut">
-          {item.shortcut.map((k, i) => <kbd key={`${k}-${i}`}>{k}</kbd>)}
-        </span>
-      )}
-    </button>
-  );
-}