@polderlabs/bizar 7.0.4 → 8.0.0

package/bizar-dash/src/web/ui/layout/Sidebar.tsx

@@ -1,131 +0,0 @@
-/*
- * Sidebar.tsx — Vertical nav rail for the Bizar design system (Wave 2C).
- *
- * Renders grouped vertical navigation: each group is an optional label +
- * a stack of items. Items are simple links/buttons; click an item to fire
- * `onItemSelect(id)` and toggle the `activeId` highlight. Footer slot is
- * pinned to the bottom of the rail and typically holds a settings link or
- * user avatar. Self-contained — does not depend on ui/navigation primitives
- * from sibling Wave 2 subagents, so this works regardless of dispatch order.
- */
-
-import type { ReactNode } from 'react';
-import { cx } from '../utils/cx';
-
-export type NavItemIcon = React.ComponentType<{ size?: number | string }>;
-
-export type NavLinkProps = {
-  id: string;
-  label: string;
-  icon?: NavItemIcon;
-  badge?: string | number;
-  disabled?: boolean;
-  href?: string;
-  onClick?: (id: string) => void;
-};
-
-export type SidebarGroup = {
-  label?: string;
-  items: NavLinkProps[];
-};
-
-export type SidebarProps = {
-  groups: SidebarGroup[];
-  activeId?: string;
-  onItemSelect?: (id: string) => void;
-  footer?: ReactNode;
-  width?: number;
-  className?: string;
-};
-
-export function Sidebar({
-  groups,
-  activeId,
-  onItemSelect,
-  footer,
-  width,
-  className,
-}: SidebarProps): React.JSX.Element {
-  return (
-    <nav
-      className={cx('bizar-sidebar', className)}
-      style={width ? { width } : undefined}
-      aria-label="Primary"
-    >
-      <div style={{ flex: 1, minHeight: 0 }}>
-        {groups.map((group, gIdx) => (
-          <div key={gIdx} className="bizar-sidebar__group">
-            {group.label && (
-              <div className="bizar-sidebar__label">{group.label}</div>
-            )}
-            <div className="bizar-sidebar__items" role="list">
-              {group.items.map((item) => {
-                const Icon = item.icon;
-                const active = activeId === item.id;
-                const className = cx(
-                  'bizar-sidebar__item',
-                  active && 'bizar-sidebar__item--active',
-                );
-                const ariaCurrent = active ? 'page' : undefined;
-                const onClick = () => {
-                  if (item.disabled) return;
-                  item.onClick?.(item.id);
-                  onItemSelect?.(item.id);
-                };
-                if (item.href) {
-                  return (
-                    <a
-                      key={item.id}
-                      href={item.href}
-                      className={className}
-                      aria-current={ariaCurrent}
-                      aria-disabled={item.disabled || undefined}
-                      onClick={(e) => {
-                        if (item.disabled) {
-                          e.preventDefault();
-                          return;
-                        }
-                        onClick();
-                      }}
-                    >
-                      {Icon && <Icon size={16} />}
-                      <span className="bizar-sidebar__item-label">
-                        {item.label}
-                      </span>
-                      {item.badge !== undefined && (
-                        <span className="bizar-sidebar__item-badge">
-                          {item.badge}
-                        </span>
-                      )}
-                    </a>
-                  );
-                }
-                return (
-                  <button
-                    key={item.id}
-                    type="button"
-                    className={className}
-                    aria-current={ariaCurrent}
-                    disabled={item.disabled}
-                    onClick={onClick}
-                  >
-                    {Icon && <Icon size={16} />}
-                    <span className="bizar-sidebar__item-label">
-                      {item.label}
-                    </span>
-                    {item.badge !== undefined && (
-                      <span className="bizar-sidebar__item-badge">
-                        {item.badge}
-                      </span>
-                    )}
-                  </button>
-                );
-              })}
-            </div>
-          </div>
-        ))}
-      </div>
-      {footer && <div className="bizar-sidebar__footer">{footer}</div>}
-    </nav>
-  );
-}

package/bizar-dash/src/web/ui/layout/Tabs.tsx

@@ -1,133 +0,0 @@
-/*
- * Tabs.tsx — Horizontal tab strip for the Bizar design system (Wave 2C).
- *
- * Two visual variants:
- *   - `underline` (default): the active tab carries a 2px accent border
- *     on the bottom edge, no background fill. Used in page-level
- *     navigation where space is tight and the active state should be
- *     unmistakable but quiet.
- *   - `pill`: the active tab has a filled surface-3 background. Used for
- *     tool palettes and switchers where every tab should feel clickable.
- *
- * Keyboard support: Left/Right arrows move the active id across non-disabled
- * tabs (matches the WAI-ARIA Authoring Practices for the tabs pattern).
- * Tabs use `role="tab"` + `aria-selected`; the strip carries
- * `role="tablist"`. Disabled tabs receive the `disabled` attribute on the
- * underlying <button> and are skipped during keyboard navigation.
- *
- * `aria-controls` is intentionally NOT set here — the Tabs primitive owns
- * only the strip, not the tabpanels, so we cannot point to a real id. The
- * component that owns both the strip and its panels should set
- * `aria-controls` itself (or wrap this Tabs and add the attribute on the
- * rendered buttons).
- */
-
-import { useCallback, type KeyboardEvent } from 'react';
-import type { LucideIcon } from 'lucide-react';
-import { cx } from '../utils/cx';
-
-export type TabDef = {
-  id: string;
-  label: string;
-  icon?: LucideIcon;
-  badge?: string | number;
-  disabled?: boolean;
-};
-
-export type TabsProps = {
-  tabs: TabDef[];
-  activeId: string;
-  onChange: (id: string) => void;
-  variant?: 'underline' | 'pill';
-  size?: 'sm' | 'md';
-  className?: string;
-};
-
-export function Tabs({
-  tabs,
-  activeId,
-  onChange,
-  variant = 'underline',
-  size = 'md',
-  className,
-}: TabsProps): React.JSX.Element {
-  const enabledIds = tabs.filter((t) => !t.disabled).map((t) => t.id);
-
-  const moveActive = useCallback(
-    (dir: 1 | -1) => {
-      if (enabledIds.length === 0) return;
-      const idx = enabledIds.indexOf(activeId);
-      // If current is not enabled, treat the "right" neighbor as the next
-      // enabled tab after the (missing) current.
-      const startIdx = idx === -1 ? -1 : idx;
-      let nextIdx = startIdx + dir;
-      if (nextIdx < 0) nextIdx = enabledIds.length - 1;
-      if (nextIdx >= enabledIds.length) nextIdx = 0;
-      const next = enabledIds[nextIdx];
-      if (next && next !== activeId) onChange(next);
-    },
-    [activeId, enabledIds, onChange],
-  );
-
-  const onKeyDown = (e: KeyboardEvent<HTMLElement>): void => {
-    if (e.key === 'ArrowRight') {
-      e.preventDefault();
-      moveActive(1);
-    } else if (e.key === 'ArrowLeft') {
-      e.preventDefault();
-      moveActive(-1);
-    } else if (e.key === 'Home') {
-      e.preventDefault();
-      if (enabledIds[0]) onChange(enabledIds[0]);
-    } else if (e.key === 'End') {
-      e.preventDefault();
-      const last = enabledIds[enabledIds.length - 1];
-      if (last) onChange(last);
-    }
-  };
-
-  return (
-    <div
-      className={cx(
-        'bizar-tabs',
-        `bizar-tabs--${variant}`,
-        size === 'sm' && 'bizar-tabs--sm',
-        className,
-      )}
-      role="tablist"
-    >
-      {tabs.map((tab) => {
-        const Icon = tab.icon;
-        const active = tab.id === activeId;
-        const selectedRef = active;
-        return (
-          <button
-            key={tab.id}
-            type="button"
-            role="tab"
-            aria-selected={selectedRef}
-            tabIndex={selectedRef ? 0 : -1}
-            disabled={tab.disabled}
-            className={cx(
-              'bizar-tab',
-              active && 'bizar-tab--active',
-            )}
-            onClick={() => {
-              if (tab.disabled) return;
-              onChange(tab.id);
-            }}
-            onKeyDown={(e) => {
-              if (active && !tab.disabled) onKeyDown(e);
-            }}
-          >
-            {Icon && <Icon size={14} className="bizar-tab__icon" />}
-            <span>{tab.label}</span>
-            {tab.badge !== undefined && (
-              <span className="bizar-tab__badge">{tab.badge}</span>
-            )}
-          </button>
-        );
-      })}
-    </div>
-  );
-}

package/bizar-dash/src/web/ui/layout/Topbar.tsx

@@ -1,42 +0,0 @@
-/*
- * Topbar.tsx — Header bar for the Bizar design system (Wave 2C).
- *
- * Three horizontal slots: brand (left), center (typically a search input),
- * right (actions / notifications). Height comes from `--layout-topbar-height`
- * (default 48px) and `sticky=true` (default) pins the bar to the top of
- * the viewport via `position: sticky` and `--z-sticky`. Visual chrome is
- * minimal: a single hairline border-bottom in `--border-subtle`.
- */
-
-import type { ReactNode } from 'react';
-import { cx } from '../utils/cx';
-
-export type TopbarProps = {
-  brand?: ReactNode;
-  center?: ReactNode;
-  right?: ReactNode;
-  height?: number;
-  sticky?: boolean;
-  className?: string;
-};
-
-export function Topbar({
-  brand,
-  center,
-  right,
-  height,
-  sticky = true,
-  className,
-}: TopbarProps): React.JSX.Element {
-  return (
-    <header
-      className={cx('bizar-topbar', sticky && 'bizar-topbar--sticky', className)}
-      style={height ? { height } : undefined}
-      role="banner"
-    >
-      <div className="bizar-topbar__brand">{brand}</div>
-      {center && <div className="bizar-topbar__center">{center}</div>}
-      {right && <div className="bizar-topbar__right">{right}</div>}
-    </header>
-  );
-}

package/bizar-dash/src/web/ui/layout/ViewHeader.tsx

@@ -1,48 +0,0 @@
-/*
- * ViewHeader.tsx — top-of-view title row (F-041).
- *
- * Distinct from PanelHeader (which lives inside a Panel). Sits above the
- * view's content as the page-level header: a single row with the title on
- * the left, an optional subtitle, and a right-aligned actions slot. Used
- * at the top of every top-level view (Overview, Tasks, Agents, Chat,
- * Settings, MobileOverview, MobileTasks, etc.) so the dashboard reads as
- * one system instead of five bespoke title bars.
- *
- * Visual contract (see DESIGN.md §9.22):
- *   - Title: --fs-h3 (16px) weight 600, --text-primary
- *   - Subtitle: --text-sm (12px), --text-secondary
- *   - Actions: right-aligned via Inline; typically IconButton + Button
- *   - Padding: --space-3 from top, --space-4 horizontal
- *   - No bottom border (the first child panel provides the visual divider)
- */
-
-import type { ReactNode } from 'react';
-import { cx } from '../utils/cx';
-
-export type ViewHeaderProps = {
-  title?: ReactNode;
-  subtitle?: ReactNode;
-  actions?: ReactNode;
-  /** Optional eyebrow row above the title (e.g. breadcrumbs, view label). */
-  eyebrow?: ReactNode;
-  className?: string;
-};
-
-export function ViewHeader({
-  title,
-  subtitle,
-  actions,
-  eyebrow,
-  className,
-}: ViewHeaderProps): React.JSX.Element {
-  return (
-    <header className={cx('bizar-view-header', className)}>
-      <div className="bizar-view-header__text">
-        {eyebrow && <div className="bizar-view-header__eyebrow">{eyebrow}</div>}
-        {title && <h1 className="bizar-view-header__title">{title}</h1>}
-        {subtitle && <p className="bizar-view-header__subtitle">{subtitle}</p>}
-      </div>
-      {actions && <div className="bizar-view-header__actions">{actions}</div>}
-    </header>
-  );
-}

package/bizar-dash/src/web/ui/layout/index.ts

@@ -1,34 +0,0 @@
-/*
- * layout/index.ts — Barrel export for the Bizar layout primitives (Wave 2C).
- *
- * Side-effect imports ship `layout.css` alongside the JS so consumers
- * only need `import { Topbar, Sidebar } from '../ui/layout'` to mount
- * the visual surface. Exports are deliberately focused — no re-export
- * of legacy components, no prefix collisions.
- */
-
-import './layout.css';
-
-export { AppShell, type AppShellProps } from './AppShell';
-export {
-  Sidebar,
-  type SidebarProps,
-  type SidebarGroup,
-  type NavLinkProps,
-  type NavItemIcon,
-} from './Sidebar';
-export { Topbar, type TopbarProps } from './Topbar';
-export {
-  Panel,
-  type PanelProps,
-  type PanelPadding,
-  type PanelVariant,
-} from './Panel';
-export { PanelHeader, type PanelHeaderProps } from './PanelHeader';
-export { ViewHeader, type ViewHeaderProps } from './ViewHeader';
-export { Tabs, type TabsProps, type TabDef } from './Tabs';
-export {
-  Breadcrumbs,
-  type BreadcrumbsProps,
-  type BreadcrumbItem,
-} from './Breadcrumbs';