@datarecce/ui 0.1.41 → 0.2.0

package/dist/SplitPane-B-BLxZaQ.d.ts

@@ -0,0 +1,1427 @@
+
+import { c as LineageGraphNode, i as LineageGraph } from "./types-CZre3j02.js";
+import * as react11 from "react";
+import { CSSProperties, MouseEvent, ReactNode } from "react";
+import * as react_jsx_runtime26 from "react/jsx-runtime";
+import { ColDef, GridReadyEvent } from "ag-grid-community";
+
+//#region src/components/check/CheckActions.d.ts
+/**
+ * Action types available for checks
+ */
+type CheckActionType = "run" | "approve" | "edit" | "delete" | "duplicate" | "copy" | "preset";
+/**
+ * Configuration for a check action
+ */
+interface CheckAction {
+  /** Action type identifier */
+  type: CheckActionType;
+  /** Display label */
+  label: string;
+  /** Icon element (optional) */
+  icon?: React.ReactNode;
+  /** Whether the action is disabled */
+  disabled?: boolean;
+  /** Tooltip for disabled state */
+  disabledTooltip?: string;
+  /** Whether this is a destructive action (shown in red) */
+  destructive?: boolean;
+}
+/**
+ * Props for the CheckActions component
+ */
+interface CheckActionsProps {
+  /** ID of the check these actions are for */
+  checkId: string;
+  /** List of primary actions (shown as buttons) */
+  primaryActions?: CheckAction[];
+  /** List of secondary actions (shown in dropdown menu) */
+  secondaryActions?: CheckAction[];
+  /** Callback when an action is triggered */
+  onAction?: (checkId: string, actionType: CheckActionType) => void;
+  /** Render variant */
+  variant?: "buttons" | "menu" | "combined";
+  /** Size of buttons */
+  size?: "small" | "medium";
+  /** Icon for menu trigger button */
+  menuIcon?: React.ReactNode;
+  /** Optional CSS class name */
+  className?: string;
+}
+/**
+ * CheckActions Component
+ *
+ * A pure presentation component for displaying action buttons/menu for a check.
+ * Supports primary actions as buttons and secondary actions in a dropdown menu.
+ *
+ * @example Basic usage with buttons
+ * ```tsx
+ * import { CheckActions } from '@datarecce/ui/primitives';
+ *
+ * <CheckActions
+ *   checkId={check.id}
+ *   primaryActions={[
+ *     { type: 'run', label: 'Run' },
+ *     { type: 'approve', label: 'Approve' },
+ *   ]}
+ *   onAction={(id, action) => handleAction(id, action)}
+ * />
+ * ```
+ *
+ * @example Combined buttons and menu
+ * ```tsx
+ * <CheckActions
+ *   checkId={check.id}
+ *   variant="combined"
+ *   primaryActions={[
+ *     { type: 'run', label: 'Run', icon: <PlayIcon /> },
+ *   ]}
+ *   secondaryActions={[
+ *     { type: 'duplicate', label: 'Duplicate' },
+ *     { type: 'copy', label: 'Copy Markdown' },
+ *     { type: 'delete', label: 'Delete', destructive: true },
+ *   ]}
+ *   onAction={(id, action) => handleAction(id, action)}
+ * />
+ * ```
+ *
+ * @example Menu only
+ * ```tsx
+ * <CheckActions
+ *   checkId={check.id}
+ *   variant="menu"
+ *   secondaryActions={allActions}
+ *   onAction={(id, action) => handleAction(id, action)}
+ * />
+ * ```
+ */
+declare function CheckActionsComponent({
+  checkId,
+  primaryActions,
+  secondaryActions,
+  onAction,
+  variant,
+  size,
+  menuIcon,
+  className
+}: CheckActionsProps): react_jsx_runtime26.JSX.Element;
+declare const CheckActions: react11.MemoExoticComponent<typeof CheckActionsComponent>;
+//#endregion
+//#region src/components/check/CheckCard.d.ts
+/**
+ * Check type categories for icon display
+ */
+type CheckType = "query" | "query_base" | "query_diff" | "schema_diff" | "lineage_diff" | "profile" | "profile_diff" | "row_count" | "row_count_diff" | "value_diff" | "histogram_diff" | "top_k_diff" | "simple";
+/**
+ * Status of a check run
+ */
+type CheckRunStatus = "pending" | "running" | "success" | "error";
+/**
+ * Data structure for check display
+ */
+interface CheckCardData {
+  /** Unique check identifier */
+  id: string;
+  /** Display name of the check */
+  name: string;
+  /** Type of check for icon display */
+  type: CheckType;
+  /** Whether the check is approved */
+  isApproved?: boolean;
+  /** Run status of the check */
+  runStatus?: CheckRunStatus;
+  /** Whether the check is a preset */
+  isPreset?: boolean;
+}
+/**
+ * Props for the CheckCard component
+ */
+interface CheckCardProps {
+  /** Check data to display */
+  check: CheckCardData;
+  /** Whether this card is currently selected */
+  isSelected?: boolean;
+  /** Callback when card is clicked */
+  onClick?: (checkId: string) => void;
+  /** Callback when approval checkbox is toggled */
+  onApprovalChange?: (checkId: string, isApproved: boolean) => void;
+  /** Whether approval checkbox is disabled */
+  disableApproval?: boolean;
+  /** Tooltip text for disabled approval */
+  disabledApprovalTooltip?: string;
+  /** Whether the entire card is disabled */
+  disabled?: boolean;
+  /** Optional CSS class name */
+  className?: string;
+}
+/**
+ * CheckCard Component
+ *
+ * A pure presentation component for displaying a single check in a list.
+ * Shows check type icon, name, approval status, and run status.
+ *
+ * @example Basic usage
+ * ```tsx
+ * import { CheckCard } from '@datarecce/ui/primitives';
+ *
+ * function CheckListItem({ check }) {
+ *   return (
+ *     <CheckCard
+ *       check={{
+ *         id: check.check_id,
+ *         name: check.name,
+ *         type: check.type,
+ *         isApproved: check.is_checked,
+ *       }}
+ *       isSelected={selectedId === check.check_id}
+ *       onClick={(id) => setSelectedId(id)}
+ *       onApprovalChange={(id, approved) => updateCheck(id, { is_checked: approved })}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @example Disabled state
+ * ```tsx
+ * <CheckCard
+ *   check={check}
+ *   disableApproval
+ *   disabledApprovalTooltip="Run the check first to enable approval"
+ * />
+ * ```
+ */
+declare function CheckCardComponent({
+  check,
+  isSelected,
+  onClick,
+  onApprovalChange,
+  disableApproval,
+  disabledApprovalTooltip,
+  disabled,
+  className
+}: CheckCardProps): react_jsx_runtime26.JSX.Element;
+declare const CheckCard: react11.MemoExoticComponent<typeof CheckCardComponent>;
+//#endregion
+//#region src/components/check/CheckDescription.d.ts
+/**
+ * Props for the CheckDescription component
+ */
+interface CheckDescriptionProps {
+  /** Current description value */
+  value?: string;
+  /** Callback when description is saved */
+  onChange?: (value?: string) => void;
+  /** Placeholder text when empty */
+  placeholder?: string;
+  /** Whether editing is disabled */
+  disabled?: boolean;
+  /** Optional CSS class name */
+  className?: string;
+}
+/**
+ * CheckDescription Component
+ *
+ * A pure presentation component for displaying and editing check descriptions.
+ * Supports click-to-edit with Cmd+Enter (Mac) or Ctrl+Enter (Windows) to save.
+ *
+ * @example Basic usage
+ * ```tsx
+ * import { CheckDescription } from '@datarecce/ui/primitives';
+ *
+ * function CheckDetail({ check }) {
+ *   return (
+ *     <CheckDescription
+ *       value={check.description}
+ *       onChange={(desc) => updateCheck(check.id, { description: desc })}
+ *       placeholder="Add a description..."
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @example Disabled state
+ * ```tsx
+ * <CheckDescription
+ *   value={check.description}
+ *   disabled
+ *   placeholder="Description not available"
+ * />
+ * ```
+ */
+declare function CheckDescriptionComponent({
+  value,
+  onChange,
+  placeholder,
+  disabled,
+  className
+}: CheckDescriptionProps): react_jsx_runtime26.JSX.Element;
+declare const CheckDescription: react11.MemoExoticComponent<typeof CheckDescriptionComponent>;
+//#endregion
+//#region src/components/check/CheckDetail.d.ts
+/**
+ * Tab configuration for CheckDetail
+ */
+interface CheckDetailTab {
+  /** Unique tab identifier */
+  id: string;
+  /** Tab label */
+  label: string;
+  /** Tab content */
+  content: ReactNode;
+}
+/**
+ * Props for the CheckDetail component
+ */
+interface CheckDetailProps {
+  /** Check ID */
+  checkId: string;
+  /** Check name (displayed as header) */
+  name: string;
+  /** Check type for display */
+  type: string;
+  /** Check description */
+  description?: string;
+  /** Whether the check is approved */
+  isApproved?: boolean;
+  /** Tabs to display (result, query, etc.) */
+  tabs?: CheckDetailTab[];
+  /** Default selected tab ID */
+  defaultTab?: string;
+  /** Primary actions for the check */
+  primaryActions?: CheckAction[];
+  /** Secondary actions for the check */
+  secondaryActions?: CheckAction[];
+  /** Callback when an action is triggered */
+  onAction?: (checkId: string, actionType: CheckActionType) => void;
+  /** Callback when description changes */
+  onDescriptionChange?: (description?: string) => void;
+  /** Callback when name changes */
+  onNameChange?: (name: string) => void;
+  /** Whether editing is disabled */
+  disabled?: boolean;
+  /** Optional header content (breadcrumbs, etc.) */
+  headerContent?: ReactNode;
+  /** Optional sidebar content */
+  sidebarContent?: ReactNode;
+  /** Optional CSS class name */
+  className?: string;
+}
+/**
+ * CheckDetail Component
+ *
+ * A pure presentation component for displaying detailed information
+ * about a single check with tabs, actions, and editable fields.
+ *
+ * @example Basic usage
+ * ```tsx
+ * import { CheckDetail } from '@datarecce/ui/primitives';
+ *
+ * function CheckPage({ check, run }) {
+ *   return (
+ *     <CheckDetail
+ *       checkId={check.id}
+ *       name={check.name}
+ *       type={check.type}
+ *       description={check.description}
+ *       isApproved={check.is_checked}
+ *       tabs={[
+ *         { id: 'result', label: 'Result', content: <ResultView run={run} /> },
+ *         { id: 'query', label: 'Query', content: <QueryView sql={check.params.sql} /> },
+ *       ]}
+ *       primaryActions={[
+ *         { type: 'run', label: 'Run' },
+ *         { type: 'approve', label: check.is_checked ? 'Approved' : 'Pending' },
+ *       ]}
+ *       secondaryActions={[
+ *         { type: 'delete', label: 'Delete', destructive: true },
+ *       ]}
+ *       onAction={(id, action) => handleAction(id, action)}
+ *       onDescriptionChange={(desc) => updateCheck(id, { description: desc })}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @example With sidebar
+ * ```tsx
+ * <CheckDetail
+ *   {...props}
+ *   sidebarContent={<CheckTimeline checkId={check.id} />}
+ * />
+ * ```
+ */
+declare function CheckDetailComponent({
+  checkId,
+  name,
+  type,
+  description,
+  isApproved,
+  tabs,
+  defaultTab,
+  primaryActions,
+  secondaryActions,
+  onAction,
+  onDescriptionChange,
+  onNameChange,
+  disabled,
+  headerContent,
+  sidebarContent,
+  className
+}: CheckDetailProps): react_jsx_runtime26.JSX.Element;
+declare const CheckDetail: react11.MemoExoticComponent<typeof CheckDetailComponent>;
+//#endregion
+//#region src/components/check/CheckEmptyState.d.ts
+/**
+ * Props for the CheckEmptyState component
+ */
+interface CheckEmptyStateProps {
+  /** Main title text */
+  title?: string;
+  /** Description text */
+  description?: string;
+  /** Icon element to display */
+  icon?: ReactNode;
+  /** Primary action button text */
+  actionText?: string;
+  /** Callback when primary action is clicked */
+  onAction?: () => void;
+  /** Whether the action is loading */
+  isLoading?: boolean;
+  /** Optional helper text below the action */
+  helperText?: string;
+  /** Optional CSS class name */
+  className?: string;
+}
+/**
+ * CheckEmptyState Component
+ *
+ * A pure presentation component for displaying an empty state
+ * when no checks exist in the list.
+ *
+ * @example Basic usage
+ * ```tsx
+ * import { CheckEmptyState } from '@datarecce/ui/primitives';
+ *
+ * function MyCheckList() {
+ *   if (checks.length === 0) {
+ *     return (
+ *       <CheckEmptyState
+ *         title="No checks yet"
+ *         description="Create your first check to start validating data"
+ *         actionText="Create Schema Diff Check"
+ *         onAction={() => createSchemaDiffCheck()}
+ *       />
+ *     );
+ *   }
+ *   return <CheckList checks={checks} />;
+ * }
+ * ```
+ *
+ * @example Custom icon
+ * ```tsx
+ * import { TbChecklist } from 'react-icons/tb';
+ *
+ * <CheckEmptyState
+ *   icon={<TbChecklist size={48} />}
+ *   title="No checks found"
+ *   description="Checks help you validate your data changes"
+ * />
+ * ```
+ */
+declare function CheckEmptyStateComponent({
+  title,
+  description,
+  icon,
+  actionText,
+  onAction,
+  isLoading,
+  helperText,
+  className
+}: CheckEmptyStateProps): react_jsx_runtime26.JSX.Element;
+declare const CheckEmptyState: react11.MemoExoticComponent<typeof CheckEmptyStateComponent>;
+//#endregion
+//#region src/components/check/CheckList.d.ts
+/**
+ * Props for the CheckList component
+ */
+interface CheckListProps {
+  /** Array of checks to display */
+  checks: CheckCardData[];
+  /** Currently selected check ID */
+  selectedId?: string | null;
+  /** Callback when a check is selected */
+  onCheckSelect?: (checkId: string) => void;
+  /** Callback when check approval status changes */
+  onApprovalChange?: (checkId: string, isApproved: boolean) => void;
+  /** Callback when checks are reordered (for drag-drop implementations) */
+  onReorder?: (sourceIndex: number, destinationIndex: number) => void;
+  /** Whether approval is disabled for all checks */
+  disableApproval?: boolean;
+  /** Tooltip for disabled approval */
+  disabledApprovalTooltip?: string;
+  /** Optional title for the list */
+  title?: string;
+  /** Optional CSS class name */
+  className?: string;
+  /** Whether the list is loading */
+  isLoading?: boolean;
+  /** Content to show when list is empty */
+  emptyContent?: React.ReactNode;
+}
+/**
+ * CheckList Component
+ *
+ * A pure presentation component for displaying a list of checks.
+ * This component does not include drag-and-drop functionality -
+ * implement that at the consumer level if needed.
+ *
+ * @example Basic usage
+ * ```tsx
+ * import { CheckList } from '@datarecce/ui/primitives';
+ *
+ * function MyCheckList({ checks }) {
+ *   const [selectedId, setSelectedId] = useState(null);
+ *
+ *   return (
+ *     <CheckList
+ *       checks={checks.map(c => ({
+ *         id: c.check_id,
+ *         name: c.name,
+ *         type: c.type,
+ *         isApproved: c.is_checked,
+ *       }))}
+ *       selectedId={selectedId}
+ *       onCheckSelect={setSelectedId}
+ *       onApprovalChange={(id, approved) => updateCheck(id, approved)}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @example With empty state
+ * ```tsx
+ * <CheckList
+ *   checks={[]}
+ *   emptyContent={<CheckEmptyState onCreateFirst={() => createCheck()} />}
+ * />
+ * ```
+ */
+declare function CheckListComponent({
+  checks,
+  selectedId,
+  onCheckSelect,
+  onApprovalChange,
+  disableApproval,
+  disabledApprovalTooltip,
+  title,
+  className,
+  isLoading,
+  emptyContent
+}: CheckListProps): react_jsx_runtime26.JSX.Element;
+declare const CheckList: react11.MemoExoticComponent<typeof CheckListComponent>;
+//#endregion
+//#region src/components/lineage/LineageView.d.ts
+/**
+ * Props for the LineageView component.
+ * Defines options for viewing lineage diff data.
+ */
+interface LineageViewProps {
+  /**
+   * Optional lineage graph data. If not provided, uses LineageGraphContext.
+   */
+  lineageGraph?: LineageGraph;
+  /**
+   * View options for lineage diff visualization
+   */
+  viewOptions?: {
+    view_mode?: "changed_models" | "all";
+    node_ids?: string[];
+    select?: string;
+    exclude?: string;
+    packages?: string[];
+    column_level_lineage?: {
+      node_id?: string;
+      column?: string;
+      change_analysis?: boolean;
+    };
+  };
+  /**
+   * Whether the view allows user interaction
+   * @default true
+   */
+  interactive?: boolean;
+  /**
+   * Optional height for the view
+   * @default 600
+   */
+  height?: number | string;
+  /**
+   * Optional filter function for nodes
+   */
+  filterNodes?: (key: string, node: LineageGraphNode) => boolean;
+  /**
+   * Callback when a node is selected
+   */
+  onNodeSelect?: (nodeId: string | null) => void;
+  /**
+   * Callback when a node is double-clicked
+   */
+  onNodeDoubleClick?: (nodeId: string) => void;
+  /**
+   * Optional dagre instance for layout.
+   * If not provided, nodes will be positioned at (0,0).
+   * Install @dagrejs/dagre and pass the imported module.
+   */
+  dagre?: any;
+  /**
+   * Whether to show the minimap
+   * @default true
+   */
+  showMiniMap?: boolean;
+  /**
+   * Whether to show the controls
+   * @default true
+   */
+  showControls?: boolean;
+  /**
+   * Whether to show the background grid
+   * @default true
+   */
+  showBackground?: boolean;
+}
+/**
+ * Ref interface for LineageView component.
+ * Provides methods to interact with the LineageView programmatically.
+ */
+interface LineageViewRef {
+  /**
+   * Copies the current lineage view as an image to the clipboard
+   */
+  copyToClipboard: () => Promise<void>;
+}
+/**
+ * LineageView Component
+ *
+ * A high-level component for visualizing data lineage graphs using React Flow.
+ * Shows relationships between models and their change status.
+ *
+ * Can receive data from:
+ * 1. LineageGraphContext (wrap with LineageGraphProvider)
+ * 2. Direct prop (pass lineageGraph prop)
+ *
+ * For auto-layout, provide a dagre instance:
+ *
+ * @example Using with context
+ * ```tsx
+ * import { LineageGraphProvider, LineageView } from '@datarecce/ui';
+ * import dagre from '@dagrejs/dagre';
+ *
+ * function App() {
+ *   return (
+ *     <LineageGraphProvider serverInfo={serverInfo}>
+ *       <LineageView dagre={dagre} />
+ *     </LineageGraphProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @example Using with direct data
+ * ```tsx
+ * import { buildLineageGraph, LineageView } from '@datarecce/ui';
+ * import dagre from '@dagrejs/dagre';
+ *
+ * function App({ serverInfo }) {
+ *   const lineageGraph = buildLineageGraph(
+ *     serverInfo.lineage.base,
+ *     serverInfo.lineage.current,
+ *     serverInfo.lineage.diff
+ *   );
+ *
+ *   return <LineageView lineageGraph={lineageGraph} dagre={dagre} />;
+ * }
+ * ```
+ */
+declare const LineageView: react11.ForwardRefExoticComponent<LineageViewProps & react11.RefAttributes<LineageViewRef>>;
+//#endregion
+//#region src/components/lineage/columns/LineageColumnNode.d.ts
+/**
+ * Transformation type for column-level lineage
+ */
+type ColumnTransformationType = "passthrough" | "renamed" | "derived" | "source" | "unknown";
+/**
+ * Column change status for diff views
+ */
+type ColumnChangeStatus = "added" | "removed" | "modified";
+/**
+ * Data structure for a column node
+ */
+interface LineageColumnNodeData extends Record<string, unknown> {
+  /** Column name */
+  column: string;
+  /** Column data type (e.g., "VARCHAR", "INTEGER") */
+  type?: string;
+  /** ID of the parent model/table node */
+  nodeId: string;
+  /** Transformation type for this column */
+  transformationType?: ColumnTransformationType;
+  /** Change status for diff views */
+  changeStatus?: ColumnChangeStatus;
+  /** Whether the column is highlighted */
+  isHighlighted?: boolean;
+  /** Whether the column is selected/focused */
+  isFocused?: boolean;
+}
+/**
+ * Props for the LineageColumnNode component
+ */
+interface LineageColumnNodeProps {
+  /** Unique node ID */
+  id: string;
+  /** Node data */
+  data: LineageColumnNodeData;
+  /** Whether the node is selected */
+  selected?: boolean;
+  /**
+   * Whether to show content (used for zoom-level visibility)
+   * When false, the node renders nothing (hidden at low zoom levels)
+   * @default true
+   */
+  showContent?: boolean;
+  /**
+   * Whether to show change analysis mode
+   * When true and changeStatus exists, shows change status indicator
+   * When false, shows transformation type indicator
+   * @default false
+   */
+  showChangeAnalysis?: boolean;
+  /**
+   * Whether to use dark mode styling
+   * @default false
+   */
+  isDark?: boolean;
+  /** Callback when column is clicked */
+  onColumnClick?: (columnId: string) => void;
+  /**
+   * Callback when context menu is requested (kebab menu click)
+   * When provided, shows kebab menu on hover
+   */
+  onContextMenu?: (event: MouseEvent, columnId: string) => void;
+}
+/**
+ * Default column height in pixels
+ */
+declare const COLUMN_NODE_HEIGHT = 24;
+/**
+ * Default column width in pixels
+ */
+declare const COLUMN_NODE_WIDTH = 280;
+/**
+ * LineageColumnNode Component
+ *
+ * A pure presentation component for rendering individual columns
+ * in column-level lineage visualizations using React Flow.
+ *
+ * @example Basic usage
+ * ```tsx
+ * import { LineageColumnNode } from '@datarecce/ui/primitives';
+ *
+ * // Register as a React Flow node type
+ * const nodeTypes = {
+ *   columnNode: LineageColumnNode,
+ * };
+ *
+ * function ColumnLineageGraph() {
+ *   return (
+ *     <ReactFlow nodes={columnNodes} edges={edges} nodeTypes={nodeTypes} />
+ *   );
+ * }
+ * ```
+ *
+ * @example Node data structure
+ * ```tsx
+ * const columnNode = {
+ *   id: 'users-id',
+ *   type: 'columnNode',
+ *   data: {
+ *     column: 'id',
+ *     type: 'INTEGER',
+ *     nodeId: 'users',
+ *     transformationType: 'passthrough',
+ *     changeStatus: undefined,
+ *     isHighlighted: true,
+ *   },
+ *   position: { x: 0, y: 0 },
+ * };
+ * ```
+ *
+ * @example With change analysis mode
+ * ```tsx
+ * // In change analysis mode, shows change status instead of transformation type
+ * <LineageColumnNode
+ *   showChangeAnalysis={true}
+ *   showContent={zoomLevel > 0.3}
+ *   onContextMenu={(e, columnId) => showMenu(e, columnId)}
+ * />
+ * ```
+ */
+declare function LineageColumnNodeComponent({
+  id,
+  data,
+  showContent,
+  showChangeAnalysis,
+  isDark,
+  onColumnClick,
+  onContextMenu
+}: LineageColumnNodeProps): react_jsx_runtime26.JSX.Element | null;
+declare const LineageColumnNode: react11.MemoExoticComponent<typeof LineageColumnNodeComponent>;
+//#endregion
+//#region src/components/lineage/legend/LineageLegend.d.ts
+/**
+ * Legend item for change status
+ */
+interface ChangeStatusLegendItem {
+  status: "added" | "removed" | "modified";
+  label: string;
+  description?: string;
+}
+/**
+ * Legend item for transformation type
+ */
+interface TransformationLegendItem {
+  type: "passthrough" | "renamed" | "derived" | "source" | "unknown";
+  label: string;
+  description?: string;
+}
+/**
+ * Props for the LineageLegend component
+ */
+interface LineageLegendProps {
+  /**
+   * Type of legend to display
+   */
+  variant: "changeStatus" | "transformation";
+  /**
+   * Whether to show tooltips on hover
+   * @default true
+   */
+  showTooltips?: boolean;
+  /**
+   * Optional title for the legend
+   */
+  title?: string;
+  /**
+   * CSS class name for additional styling
+   */
+  className?: string;
+}
+/**
+ * LineageLegend Component
+ *
+ * A pure presentation component for displaying legends in lineage visualizations.
+ * Supports both change status legends (added/removed/modified) and
+ * transformation type legends (passthrough/renamed/derived/source/unknown).
+ *
+ * @example Change status legend
+ * ```tsx
+ * import { LineageLegend } from '@datarecce/ui/primitives';
+ *
+ * function MyLineageGraph() {
+ *   return (
+ *     <div style={{ position: 'relative' }}>
+ *       <ReactFlow nodes={nodes} edges={edges} />
+ *       <div style={{ position: 'absolute', bottom: 10, right: 10 }}>
+ *         <LineageLegend variant="changeStatus" title="Changes" />
+ *       </div>
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example Transformation type legend
+ * ```tsx
+ * import { LineageLegend } from '@datarecce/ui/primitives';
+ *
+ * function ColumnLineageGraph() {
+ *   return (
+ *     <div>
+ *       <ReactFlow nodes={columnNodes} edges={edges} />
+ *       <LineageLegend variant="transformation" />
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function LineageLegend({
+  variant,
+  showTooltips,
+  title,
+  className
+}: LineageLegendProps): react_jsx_runtime26.JSX.Element;
+//#endregion
+//#region src/components/data/HistogramChart.d.ts
+/**
+ * Theme-aware colors for charts
+ */
+interface ChartThemeColors {
+  gridColor: string;
+  textColor: string;
+  borderColor: string;
+  tooltipBackgroundColor: string;
+  tooltipTextColor: string;
+}
+/**
+ * Bar colors for base/current comparison
+ */
+interface ChartBarColors {
+  current: string;
+  base: string;
+  currentWithAlpha: string;
+  baseWithAlpha: string;
+}
+/**
+ * Get theme-aware colors for charts
+ */
+declare function getChartThemeColors(isDark: boolean): ChartThemeColors;
+/**
+ * Get theme-aware bar colors
+ */
+declare function getChartBarColors(isDark: boolean): ChartBarColors;
+/**
+ * Histogram dataset for a single environment
+ */
+interface HistogramDataset {
+  /** Count values per bin */
+  counts: number[];
+  /** Optional dataset label */
+  label?: string;
+}
+/**
+ * Histogram data type
+ */
+type HistogramDataType = "numeric" | "datetime" | "string";
+/**
+ * Props for the HistogramChart component
+ */
+interface HistogramChartProps {
+  /** Chart title */
+  title: string;
+  /** Data type (numeric, datetime, or string) */
+  dataType?: HistogramDataType;
+  /** Total sample count */
+  samples?: number;
+  /** Minimum value (for datetime scale) */
+  min?: string | number;
+  /** Maximum value (for datetime scale) */
+  max?: string | number;
+  /** Bin edge values */
+  binEdges: number[];
+  /** Base environment dataset */
+  baseData: HistogramDataset;
+  /** Current environment dataset */
+  currentData: HistogramDataset;
+  /** Enable animation */
+  animate?: boolean;
+  /** Hide axis labels and ticks */
+  hideAxis?: boolean;
+  /** Theme mode */
+  theme?: "light" | "dark";
+  /** Chart height in pixels */
+  height?: number;
+  /** Optional CSS class */
+  className?: string;
+}
+/**
+ * HistogramChart Component
+ *
+ * A pure presentation component for displaying histogram charts comparing
+ * base and current data distributions using Chart.js.
+ *
+ * @example Basic usage
+ * ```tsx
+ * import { HistogramChart } from '@datarecce/ui/primitives';
+ *
+ * function ProfilePanel({ histogramData }) {
+ *   return (
+ *     <HistogramChart
+ *       title="Age Distribution"
+ *       dataType="numeric"
+ *       binEdges={histogramData.binEdges}
+ *       baseData={{ counts: histogramData.baseCounts }}
+ *       currentData={{ counts: histogramData.currentCounts }}
+ *       samples={1000}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @example With datetime scale
+ * ```tsx
+ * <HistogramChart
+ *   title="Events Over Time"
+ *   dataType="datetime"
+ *   binEdges={timestamps}
+ *   baseData={{ counts: baseCounts }}
+ *   currentData={{ counts: currentCounts }}
+ *   min={startDate}
+ *   max={endDate}
+ * />
+ * ```
+ */
+declare function HistogramChartComponent({
+  title,
+  dataType,
+  samples,
+  min,
+  max,
+  binEdges,
+  baseData,
+  currentData,
+  animate,
+  hideAxis,
+  theme,
+  height,
+  className
+}: HistogramChartProps): react_jsx_runtime26.JSX.Element;
+declare const HistogramChart: react11.MemoExoticComponent<typeof HistogramChartComponent>;
+//#endregion
+//#region src/components/data/TopKBarChart.d.ts
+/**
+ * Single Top-K value item
+ */
+interface TopKItem {
+  /** Value label */
+  label: string;
+  /** Count */
+  count: number;
+  /** Whether this is a special label (null, empty, others) */
+  isSpecial?: boolean;
+}
+/**
+ * Top-K dataset for a single environment
+ * Compatible with TopKResult from @datarecce/ui/api
+ */
+interface TopKDataset {
+  /** Value labels (null or undefined treated as special) */
+  values: (string | number | null | undefined)[];
+  /** Counts per value */
+  counts: number[];
+  /** Total valid count */
+  valids: number;
+}
+/**
+ * Props for the TopKBarChart component
+ */
+interface TopKBarChartProps {
+  /** Base environment dataset */
+  baseData?: TopKDataset;
+  /** Current environment dataset */
+  currentData: TopKDataset;
+  /** Maximum items to display (default 10) */
+  maxItems?: number;
+  /** Show comparison with base */
+  showComparison?: boolean;
+  /** Theme mode */
+  theme?: "light" | "dark";
+  /** Chart title */
+  title?: string;
+  /** Optional CSS class */
+  className?: string;
+}
+/**
+ * TopKBarChart Component
+ *
+ * A pure presentation component for displaying top-k value distributions
+ * with optional base/current comparison.
+ *
+ * @example Basic usage
+ * ```tsx
+ * import { TopKBarChart } from '@datarecce/ui/primitives';
+ *
+ * function ValueDistribution({ topKData }) {
+ *   return (
+ *     <TopKBarChart
+ *       currentData={topKData}
+ *       maxItems={10}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @example With comparison
+ * ```tsx
+ * <TopKBarChart
+ *   baseData={baseTopK}
+ *   currentData={currentTopK}
+ *   showComparison
+ *   maxItems={10}
+ * />
+ * ```
+ */
+declare function TopKBarChartComponent({
+  baseData,
+  currentData,
+  maxItems,
+  showComparison,
+  theme,
+  title,
+  className
+}: TopKBarChartProps): react_jsx_runtime26.JSX.Element;
+declare const TopKBarChart: react11.MemoExoticComponent<typeof TopKBarChartComponent>;
+//#endregion
+//#region src/components/schema/SchemaDiff.d.ts
+/**
+ * Schema diff row status
+ */
+type SchemaDiffStatus = "added" | "removed" | "modified" | "unchanged";
+/**
+ * Schema diff row data
+ */
+interface SchemaDiffRow {
+  /** Column name */
+  name: string;
+  /** Whether column was reordered */
+  reordered?: boolean;
+  /** Index in current environment */
+  currentIndex?: number;
+  /** Index in base environment */
+  baseIndex?: number;
+  /** Data type in current environment */
+  currentType?: string;
+  /** Data type in base environment */
+  baseType?: string;
+  /** Row status */
+  __status?: SchemaDiffStatus;
+  /** Row key */
+  __rowKey?: string;
+}
+/**
+ * Handle for accessing grid API
+ */
+interface SchemaDiffHandle {
+  /** AG Grid API */
+  api: GridReadyEvent["api"] | null;
+  /** DOM element for screenshots */
+  element: HTMLElement | null;
+}
+/**
+ * Props for the SchemaDiff component
+ */
+interface SchemaDiffProps {
+  /** Schema diff rows */
+  rows: SchemaDiffRow[];
+  /** Selected column name */
+  selectedColumn?: string | null;
+  /** Callback when a column is clicked */
+  onColumnClick?: (columnName: string) => void;
+  /** Warning message to display */
+  warningMessage?: string;
+  /** Row height in pixels */
+  rowHeight?: number;
+  /** Empty state message */
+  emptyMessage?: string;
+  /** Theme mode */
+  theme?: "light" | "dark";
+  /** Custom column definitions override */
+  columnDefs?: ColDef[];
+  /** Custom cell renderer for name column */
+  nameRenderer?: (params: {
+    value: string;
+    data: SchemaDiffRow;
+  }) => ReactNode;
+  /** Custom cell renderer for index columns */
+  indexRenderer?: (params: {
+    value: number | undefined;
+    data: SchemaDiffRow;
+  }) => ReactNode;
+  /** Custom cell renderer for type columns */
+  typeRenderer?: (params: {
+    value: string | undefined;
+    data: SchemaDiffRow;
+  }) => ReactNode;
+  /** Optional CSS class */
+  className?: string;
+}
+/**
+ * Merge base and current columns into diff rows
+ */
+declare function mergeSchemaColumns(baseColumns: Record<string, {
+  index: number;
+  type?: string;
+}>, currentColumns: Record<string, {
+  index: number;
+  type?: string;
+}>): SchemaDiffRow[];
+declare const SchemaDiff: react11.ForwardRefExoticComponent<SchemaDiffProps & react11.RefAttributes<SchemaDiffHandle>>;
+//#endregion
+//#region src/components/editor/DiffEditor.d.ts
+/**
+ * Supported languages for the diff editor
+ */
+type DiffEditorLanguage = "sql" | "yaml" | "text";
+/**
+ * Theme options for the diff editor
+ */
+type DiffEditorTheme = "light" | "dark";
+/**
+ * Props for the DiffEditor component
+ */
+interface DiffEditorProps {
+  /** Original (base) text content */
+  original: string;
+  /** Modified (current) text content */
+  modified: string;
+  /** Language for syntax highlighting */
+  language?: DiffEditorLanguage;
+  /** Whether editor is read-only */
+  readOnly?: boolean;
+  /** Show line numbers */
+  lineNumbers?: boolean;
+  /** Side-by-side view (true) or unified view (false) */
+  sideBySide?: boolean;
+  /** Editor height */
+  height?: string;
+  /** Theme mode */
+  theme?: DiffEditorTheme;
+  /** Callback when modified content changes */
+  onModifiedChange?: (value: string) => void;
+  /** Optional CSS class */
+  className?: string;
+}
+/**
+ * DiffEditor Component
+ *
+ * A pure presentation component for displaying text diffs using CodeMirror's
+ * merge view. Supports side-by-side and unified diff views.
+ *
+ * @example Basic usage
+ * ```tsx
+ * import { DiffEditor } from '@datarecce/ui/primitives';
+ *
+ * function SqlDiffPanel({ baseSql, currentSql }) {
+ *   return (
+ *     <DiffEditor
+ *       original={baseSql}
+ *       modified={currentSql}
+ *       language="sql"
+ *       sideBySide
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @example Unified view with editing
+ * ```tsx
+ * const [modifiedSql, setModifiedSql] = useState(currentSql);
+ *
+ * <DiffEditor
+ *   original={baseSql}
+ *   modified={modifiedSql}
+ *   language="sql"
+ *   sideBySide={false}
+ *   onModifiedChange={setModifiedSql}
+ * />
+ * ```
+ */
+declare function DiffEditorComponent({
+  original,
+  modified,
+  language,
+  readOnly,
+  lineNumbers: showLineNumbers,
+  sideBySide,
+  height,
+  theme,
+  onModifiedChange,
+  className
+}: DiffEditorProps): react_jsx_runtime26.JSX.Element;
+declare const DiffEditor: react11.MemoExoticComponent<typeof DiffEditorComponent>;
+//#endregion
+//#region src/components/ui/EmptyState.d.ts
+/**
+ * Props for the EmptyState component
+ */
+interface EmptyStateProps {
+  /** Main title text */
+  title: string;
+  /** Description text */
+  description?: string;
+  /** Icon to display */
+  icon?: ReactNode;
+  /** Primary action button text */
+  actionLabel?: string;
+  /** Primary action callback */
+  onAction?: () => void;
+  /** Secondary action button text */
+  secondaryActionLabel?: string;
+  /** Secondary action callback */
+  onSecondaryAction?: () => void;
+  /** Theme mode */
+  theme?: "light" | "dark";
+  /** Vertical padding */
+  paddingY?: number;
+  /** Optional CSS class */
+  className?: string;
+  /** Additional content below actions */
+  children?: ReactNode;
+}
+/**
+ * EmptyState Component
+ *
+ * A pure presentation component for displaying empty states
+ * with optional icon, actions, and custom content.
+ *
+ * @example Basic usage
+ * ```tsx
+ * import { EmptyState } from '@datarecce/ui/primitives';
+ *
+ * function ChecksPanel({ checks }) {
+ *   if (checks.length === 0) {
+ *     return (
+ *       <EmptyState
+ *         title="No checks yet"
+ *         description="Create your first check to get started"
+ *       />
+ *     );
+ *   }
+ *   // ... render checks
+ * }
+ * ```
+ *
+ * @example With action button
+ * ```tsx
+ * <EmptyState
+ *   title="No results found"
+ *   description="Try adjusting your search criteria"
+ *   actionLabel="Clear Filters"
+ *   onAction={() => clearFilters()}
+ * />
+ * ```
+ *
+ * @example With icon and multiple actions
+ * ```tsx
+ * <EmptyState
+ *   icon={<FolderIcon />}
+ *   title="No files"
+ *   description="Upload files to get started"
+ *   actionLabel="Upload File"
+ *   onAction={handleUpload}
+ *   secondaryActionLabel="Learn More"
+ *   onSecondaryAction={() => window.open(docsUrl)}
+ * />
+ * ```
+ */
+declare function EmptyStateComponent({
+  title,
+  description,
+  icon,
+  actionLabel,
+  onAction,
+  secondaryActionLabel,
+  onSecondaryAction,
+  theme,
+  paddingY,
+  className,
+  children
+}: EmptyStateProps): react_jsx_runtime26.JSX.Element;
+declare const EmptyState: react11.MemoExoticComponent<typeof EmptyStateComponent>;
+//#endregion
+//#region src/components/ui/SplitPane.d.ts
+/**
+ * Split direction
+ */
+type SplitDirection = "horizontal" | "vertical";
+/**
+ * Props for the SplitPane component
+ */
+interface SplitPaneProps {
+  /** Child elements to split */
+  children: ReactNode;
+  /** Split direction */
+  direction?: SplitDirection;
+  /** Initial sizes as percentages (should sum to 100) */
+  sizes?: number[];
+  /** Minimum sizes in pixels */
+  minSizes?: number | number[];
+  /** Maximum sizes in pixels */
+  maxSizes?: number | number[];
+  /** Gutter (drag handle) size in pixels */
+  gutterSize?: number;
+  /** Snap to closed at this threshold (pixels) */
+  snapOffset?: number;
+  /** Allow dragging past minSize to collapse */
+  dragInterval?: number;
+  /** Callback when sizes change */
+  onDragEnd?: (sizes: number[]) => void;
+  /** Callback during drag */
+  onDrag?: (sizes: number[]) => void;
+  /** Theme mode */
+  theme?: "light" | "dark";
+  /** Container style */
+  style?: CSSProperties;
+  /** Optional CSS class */
+  className?: string;
+}
+/**
+ * SplitPane Component
+ *
+ * A pure presentation component for creating resizable split panes
+ * using react-split. Supports horizontal and vertical layouts.
+ *
+ * @example Horizontal split
+ * ```tsx
+ * import { SplitPane } from '@datarecce/ui/primitives';
+ *
+ * function TwoColumnLayout() {
+ *   return (
+ *     <SplitPane direction="horizontal" sizes={[30, 70]}>
+ *       <div>Left Panel</div>
+ *       <div>Right Panel</div>
+ *     </SplitPane>
+ *   );
+ * }
+ * ```
+ *
+ * @example Vertical split with min sizes
+ * ```tsx
+ * <SplitPane
+ *   direction="vertical"
+ *   sizes={[50, 50]}
+ *   minSizes={[100, 100]}
+ * >
+ *   <div>Top Panel</div>
+ *   <div>Bottom Panel</div>
+ * </SplitPane>
+ * ```
+ *
+ * @example Three-way split with callbacks
+ * ```tsx
+ * <SplitPane
+ *   direction="horizontal"
+ *   sizes={[25, 50, 25]}
+ *   onDragEnd={(sizes) => saveSizes(sizes)}
+ * >
+ *   <div>Navigation</div>
+ *   <div>Content</div>
+ *   <div>Details</div>
+ * </SplitPane>
+ * ```
+ */
+declare function SplitPaneComponent({
+  children,
+  direction,
+  sizes,
+  minSizes,
+  maxSizes,
+  gutterSize,
+  snapOffset,
+  dragInterval,
+  onDragEnd,
+  onDrag,
+  theme,
+  style,
+  className
+}: SplitPaneProps): react_jsx_runtime26.JSX.Element;
+declare const SplitPane: react11.MemoExoticComponent<typeof SplitPaneComponent>;
+//#endregion
+export { CheckRunStatus as $, LineageLegendProps as A, LineageViewRef as B, HistogramChartProps as C, getChartThemeColors as D, getChartBarColors as E, LineageColumnNode as F, CheckDetail as G, CheckListProps as H, LineageColumnNodeData as I, CheckDescription as J, CheckDetailProps as K, LineageColumnNodeProps as L, COLUMN_NODE_HEIGHT as M, COLUMN_NODE_WIDTH as N, ChangeStatusLegendItem as O, ColumnTransformationType as P, CheckCardProps as Q, LineageView as R, HistogramChart as S, HistogramDataset as T, CheckEmptyState as U, CheckList as V, CheckEmptyStateProps as W, CheckCard as X, CheckDescriptionProps as Y, CheckCardData as Z, TopKBarChartProps as _, EmptyStateProps as a, ChartBarColors as b, DiffEditorProps as c, SchemaDiffHandle as d, CheckType as et, SchemaDiffProps as f, TopKBarChart as g, mergeSchemaColumns as h, EmptyState as i, CheckActionsProps as it, TransformationLegendItem as j, LineageLegend as k, DiffEditorTheme as l, SchemaDiffStatus as m, SplitPane as n, CheckActionType as nt, DiffEditor as o, SchemaDiffRow as p, CheckDetailTab as q, SplitPaneProps as r, CheckActions as rt, DiffEditorLanguage as s, SplitDirection as t, CheckAction as tt, SchemaDiff as u, TopKDataset as v, HistogramDataType as w, ChartThemeColors as x, TopKItem as y, LineageViewProps as z };
+//# sourceMappingURL=SplitPane-B-BLxZaQ.d.ts.map