@polderlabs/bizar 7.0.4 → 8.0.0

package/bizar-dash/src/web/components/CanvasContextMenu.tsx

@@ -1,68 +0,0 @@
-// src/components/CanvasContextMenu.tsx — v3.3.2 reusable right-click context menu.
-import { useEffect, useRef } from 'react';
-import type { LucideIcon } from 'lucide-react';
-
-export type ContextMenuItem =
-  | { type?: 'item'; label: string; icon?: LucideIcon; onClick: () => void; disabled?: boolean }
-  | { type: 'separator' };
-
-export type ContextMenuState = {
-  x: number;
-  y: number;
-  items: ContextMenuItem[];
-} | null;
-
-type Props = {
-  menu: ContextMenuState;
-  onClose: () => void;
-};
-
-export function CanvasContextMenu({ menu, onClose }: Props) {
-  const ref = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (!menu) return;
-    const handler = (e: MouseEvent) => {
-      if (ref.current && !ref.current.contains(e.target as Node)) {
-        onClose();
-      }
-    };
-    document.addEventListener('mousedown', handler);
-    document.addEventListener('contextmenu', handler);
-    return () => {
-      document.removeEventListener('mousedown', handler);
-      document.removeEventListener('contextmenu', handler);
-    };
-  }, [menu, onClose]);
-
-  if (!menu) return null;
-
-  // Clamp so the menu doesn't overflow the viewport
-  const style: React.CSSProperties = {
-    left: Math.min(menu.x, window.innerWidth - 200),
-    top: Math.min(menu.y, window.innerHeight - 40),
-  };
-
-  return (
-    <div ref={ref} className="canvas-context-menu" style={style}>
-      {menu.items.map((item, i) =>
-        item.type === 'separator' ? (
-          <div key={`sep-${i}`} className="canvas-context-menu-sep" />
-        ) : (
-          <button
-            key={i}
-            className="canvas-context-menu-item"
-            disabled={item.disabled}
-            onClick={() => {
-              item.onClick();
-              onClose();
-            }}
-          >
-            {item.icon && <item.icon size={14} />}
-            {item.label}
-          </button>
-        ),
-      )}
-    </div>
-  );
-}

package/bizar-dash/src/web/components/Card.tsx

@@ -1,40 +0,0 @@
-// src/components/Card.tsx — wrapper card.
-
-import type { HTMLAttributes, ReactNode } from 'react';
-import { cn } from '../lib/utils';
-
-export type CardProps = HTMLAttributes<HTMLDivElement> & {
-  variant?: 'elevated' | 'outlined' | 'filled';
-  interactive?: boolean;
-  children?: ReactNode;
-};
-
-export function Card({
-  variant = 'elevated',
-  interactive = false,
-  className,
-  children,
-  ...rest
-}: CardProps) {
-  return (
-    <div
-      className={cn(
-        'card',
-        `card-${variant}`,
-        interactive && 'card-interactive',
-        className,
-      )}
-      {...rest}
-    >
-      {children}
-    </div>
-  );
-}
-
-export function CardTitle({ children, className }: { children: ReactNode; className?: string }) {
-  return <h3 className={cn('card-title', className)}>{children}</h3>;
-}
-
-export function CardMeta({ children, className }: { children: ReactNode; className?: string }) {
-  return <div className={cn('card-meta', className)}>{children}</div>;
-}

package/bizar-dash/src/web/components/CollapsibleSection.tsx

@@ -1,72 +0,0 @@
-// src/components/CollapsibleSection.tsx — collapsible section.
-//
-// Stores its open/closed state in local component state (no need to
-// persist across the dashboard right now — these are visual aids).
-//
-// Usage:
-//   <CollapsibleSection title="Advanced" defaultOpen={false}>
-//     <p>Hidden until expanded.</p>
-//   </CollapsibleSection>
-
-import { useState, type ReactNode } from 'react';
-import { ChevronRight } from 'lucide-react';
-import { cn } from '../lib/utils';
-
-type Props = {
-  title: ReactNode;
-  /** Optional right-aligned controls (e.g. a button) shown next to the title. */
-  actions?: ReactNode;
-  /** Initial open state. Default: false. */
-  defaultOpen?: boolean;
-  /** Controlled open state. If set, the parent owns the state. */
-  open?: boolean;
-  /** Called when the user toggles the section (only in uncontrolled mode). */
-  onOpenChange?: (open: boolean) => void;
-  children: ReactNode;
-};
-
-export function CollapsibleSection({
-  title,
-  actions,
-  defaultOpen = false,
-  open: controlledOpen,
-  onOpenChange,
-  children,
-}: Props) {
-  const [internalOpen, setInternalOpen] = useState(defaultOpen);
-  const isControlled = controlledOpen !== undefined;
-  const open = isControlled ? controlledOpen : internalOpen;
-
-  const toggle = () => {
-    if (isControlled) {
-      onOpenChange?.(!controlledOpen);
-    } else {
-      setInternalOpen((v) => !v);
-    }
-  };
-
-  return (
-    <div className="collapsible-section">
-      <div
-        className="collapsible-section-header"
-        role="button"
-        tabIndex={0}
-        aria-expanded={open}
-        onClick={toggle}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            toggle();
-          }
-        }}
-      >
-        <div style={{ display: 'flex', alignItems: 'center', gap: 8, flex: 1 }}>
-          <ChevronRight size={14} className={cn('collapsible-section-toggle', open && 'is-open')} />
-          <span className="collapsible-section-title">{title}</span>
-        </div>
-        {actions && <div onClick={(e) => e.stopPropagation()}>{actions}</div>}
-      </div>
-      {open && <div className="collapsible-section-body">{children}</div>}
-    </div>
-  );
-}

package/bizar-dash/src/web/components/CommandDialog.tsx

@@ -1,66 +0,0 @@
-// src/components/CommandDialog.tsx — Generic dialog wrapper that routes to the
-// correct specific dialog component based on the DialogDescriptor's `component` field.
-
-import { VisualPlanDialog } from './VisualPlanDialog';
-import { ArtifactCreateDialog } from './ArtifactCreateDialog';
-import { ArtifactListDialog } from './ArtifactListDialog';
-import { HelpDialog } from './HelpDialog';
-import { AuditDialog } from './AuditDialog';
-import type { DialogDescriptor } from '../lib/types';
-
-export type { DialogDescriptor };
-
-function GenericDialog({ dialog, onClose }: { dialog: DialogDescriptor; onClose: () => void }) {
-  if (!dialog.data) {
-    return (
-      <div>
-        <p style={{ marginBottom: 16, lineHeight: 1.6 }}>
-          {`Command: ${dialog.command}`}
-        </p>
-        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
-          <button type="button" className="btn" onClick={onClose}>Close</button>
-        </div>
-      </div>
-    );
-  }
-
-  const { message, detail, url } = dialog.data as { message?: string; detail?: string; url?: string };
-
-  return (
-    <div>
-      <p style={{ marginBottom: 16, lineHeight: 1.6 }}>
-        {message ?? `Command: ${dialog.command}`}
-      </p>
-      {detail && (
-        <p style={{ marginBottom: 16, color: 'var(--color-muted)', fontSize: 13 }}>
-          {detail}
-        </p>
-      )}
-      {url && (
-        <p style={{ marginBottom: 16 }}>
-          <a href={url} target="_blank" rel="noopener noreferrer">{url}</a>
-        </p>
-      )}
-      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
-        <button type="button" className="btn" onClick={onClose}>Close</button>
-      </div>
-    </div>
-  );
-}
-
-export function CommandDialog({ dialog, onClose }: { dialog: DialogDescriptor; onClose: () => void }) {
-  switch (dialog.component) {
-    case 'visual-artifact':
-      return <VisualPlanDialog data={dialog.data} onClose={onClose} />;
-    case 'artifact-create':
-      return <ArtifactCreateDialog data={dialog.data} onClose={onClose} />;
-    case 'artifact-list':
-      return <ArtifactListDialog data={dialog.data} onClose={onClose} />;
-    case 'help':
-      return <HelpDialog data={dialog.data} onClose={onClose} />;
-    case 'audit':
-      return <AuditDialog data={dialog.data} onClose={onClose} />;
-    default:
-      return <GenericDialog dialog={dialog} onClose={onClose} />;
-  }
-}

package/bizar-dash/src/web/components/DoctorPanel.tsx

@@ -1,160 +0,0 @@
-// src/components/DoctorPanel.tsx — v6.0.0 reusable Doctor panel.
-//
-// A Card-wrapped section of the Doctor page that renders a list of
-// `DoctorCheck` rows with status pills, plus an optional info list
-// (e.g. counts) below the checks. Each `category` carries a default
-// icon and title so callers only need to pass the data.
-
-import React from 'react';
-import {
-  Activity,
-  AlertOctagon,
-  CheckCircle2,
-  CircleDot,
-  type LucideIcon,
-  Server,
-  Settings2,
-  Wrench,
-  Zap,
-} from 'lucide-react';
-import { Card, CardTitle, CardMeta } from './Card';
-import { StatusBadge } from './StatusBadge';
-import { EmptyState } from './EmptyState';
-import { cn } from '../lib/utils';
-import type {
-  DoctorCategory,
-  DoctorCheck,
-  DoctorPanelProps,
-} from '../lib/types';
-
-const CATEGORY_DEFAULTS: Record<
-  DoctorCategory,
-  { title: string; icon: LucideIcon; emptyTitle: string; emptyMessage: string }
-> = {
-  system: {
-    title: 'System health',
-    icon: Server,
-    emptyTitle: 'No system checks',
-    emptyMessage: 'System checks did not return any rows.',
-  },
-  services: {
-    title: 'Services',
-    icon: Zap,
-    emptyTitle: 'No service probes',
-    emptyMessage: 'Service probes did not return any rows.',
-  },
-  counts: {
-    title: 'Counts',
-    icon: Activity,
-    emptyTitle: 'No counts',
-    emptyMessage: 'No counts reported by the dashboard stores.',
-  },
-  errors: {
-    title: 'Recent errors',
-    icon: AlertOctagon,
-    emptyTitle: 'No recent errors',
-    emptyMessage: 'No error lines in the service log within the last hour.',
-  },
-  actions: {
-    title: 'Actions',
-    icon: Wrench,
-    emptyTitle: 'No actions',
-    emptyMessage: 'No actions available.',
-  },
-};
-
-function statusIcon(status: DoctorCheck['status']) {
-  if (status === 'ok') return CheckCircle2;
-  if (status === 'warn') return CircleDot;
-  return AlertOctagon;
-}
-
-function statusLabel(status: DoctorCheck['status']) {
-  if (status === 'ok') return 'ok';
-  if (status === 'warn') return 'warn';
-  return 'fail';
-}
-
-/**
- * Reusable Doctor panel. Used by both the Doctor page and any future
- * settings sub-panels that want a consistent status-list render.
- *
- * When `children` is supplied, the default check-list render is
- * skipped — useful for the "Actions" category where the body is
- * a row of buttons, not a list of checks.
- */
-export function DoctorPanel({
-  category,
-  title,
-  icon,
-  checks,
-  info,
-  meta,
-  children,
-  className,
-}: DoctorPanelProps) {
-  const def = CATEGORY_DEFAULTS[category];
-  const Icon = icon ?? def.icon;
-  const heading = title ?? def.title;
-  const hasContent = checks.length > 0 || (info && info.length > 0) || children;
-  return (
-    <Card className={cn('doctor-panel', `doctor-panel-${category}`, className)}>
-      <CardTitle>
-        <Icon size={14} aria-hidden />
-        <span>{heading}</span>
-        {meta ? <span className="card-meta-inline muted">{meta}</span> : null}
-      </CardTitle>
-      {!hasContent ? (
-        <EmptyState
-          icon={<Icon size={28} aria-hidden />}
-          title={def.emptyTitle}
-          message={def.emptyMessage}
-        />
-      ) : (
-        <div className="doctor-panel-body">
-          {children}
-          {checks.length > 0 ? (
-            <ul className="doctor-check-list" role="list">
-              {checks.map((c) => {
-                const CheckIcon = statusIcon(c.status);
-                return (
-                  <li key={c.name} className={cn('doctor-check-row', `doctor-check-${c.status}`)}>
-                    <span className="doctor-check-icon" aria-hidden>
-                      <CheckIcon
-                        size={14}
-                        className={cn(
-                          'doctor-check-icon-svg',
-                          c.status === 'ok' && 'doctor-check-icon-ok',
-                          c.status === 'warn' && 'doctor-check-icon-warn',
-                          c.status === 'fail' && 'doctor-check-icon-fail',
-                        )}
-                      />
-                    </span>
-                    <span className="doctor-check-name mono">{c.name}</span>
-                    <span className="doctor-check-message">{c.message}</span>
-                    <StatusBadge kind={c.status} dot>
-                      {statusLabel(c.status)}
-                    </StatusBadge>
-                  </li>
-                );
-              })}
-            </ul>
-          ) : null}
-          {info && info.length > 0 ? (
-            <dl className="doctor-info-list">
-              {info.map((row) => (
-                <React.Fragment key={row.label}>
-                  <dt>{row.label}</dt>
-                  <dd className="tabular-nums">{row.value}</dd>
-                </React.Fragment>
-              ))}
-            </dl>
-          ) : null}
-        </div>
-      )}
-    </Card>
-  );
-}
-
-// Re-export the Settings icon so callers can override without an extra import.
-export { Settings2 };

package/bizar-dash/src/web/components/EmptyState.tsx

@@ -1,30 +0,0 @@
-// src/components/EmptyState.tsx — friendly empty / error placeholder.
-
-import type { ReactNode } from 'react';
-import { Inbox } from 'lucide-react';
-import { cn } from '../lib/utils';
-
-export type EmptyStateProps = {
-  icon?: ReactNode;
-  title: string;
-  message?: ReactNode;
-  action?: ReactNode;
-  className?: string;
-};
-
-export function EmptyState({
-  icon,
-  title,
-  message,
-  action,
-  className,
-}: EmptyStateProps) {
-  return (
-    <div className={cn('empty-state', className)}>
-      <div className="empty-icon">{icon ?? <Inbox size={32} />}</div>
-      <div className="empty-title">{title}</div>
-      {message && <div className="empty-message">{message}</div>}
-      {action && <div className="empty-action">{action}</div>}
-    </div>
-  );
-}