@birhaus/tools
Version:
BIRHAUS v3.0 Radical Minimalist Developer Tools - Glass morphism cognitive load meter, v3 linting rules, and radical spacing validation tools
325 lines (317 loc) • 13.5 kB
TypeScript
import * as react_jsx_runtime from 'react/jsx-runtime';
import { CognitiveLoadMetrics as CognitiveLoadMetrics$1 } from '@birhaus/types';
import * as class_variance_authority_types from 'class-variance-authority/types';
import { VariantProps } from 'class-variance-authority';
import React from 'react';
import { Rule } from 'eslint';
interface CognitiveLoadMetrics extends CognitiveLoadMetrics$1 {
navigationItems: number;
choiceOptions: number;
colorCount: number;
fontVariations: number;
visualLayers: number;
textDensity: number;
actionDensity: number;
interactionComplexity: number;
contrastIssues: number;
missingAltText: number;
keyboardNavigation: boolean;
spanishLabelCoverage: number;
bilingualSupport: boolean;
undoPatternUsage: number;
confirmationDialogs: number;
progressiveDisclosure: number;
}
interface CognitiveLoadAnalysis {
score: number;
level: 'low' | 'medium' | 'high' | 'critical';
violations: CognitiveViolation[];
suggestions: CognitiveSuggestion[];
metrics: CognitiveLoadMetrics;
}
interface CognitiveViolation {
id: string;
type: 'miller-law' | 'visual-complexity' | 'accessibility' | 'birhaus-principle';
severity: 'low' | 'medium' | 'high' | 'critical';
messageEs: string;
messageEn?: string;
element?: Element;
birhausPrinciple?: number;
}
interface CognitiveSuggestion {
id: string;
priority: 'low' | 'medium' | 'high';
actionEs: string;
actionEn?: string;
estimatedImpact: number;
birhausPrinciple?: number;
}
interface CognitiveLoadMeterProps {
_targetSelector?: string;
targetElement?: Element;
enableRealTimeAnalysis?: boolean;
analysisInterval?: number;
position?: 'top-right' | 'bottom-right' | 'bottom-left' | 'top-left' | 'floating';
minimized?: boolean;
showDetails?: boolean;
showOnlyViolations?: boolean;
minSeverity?: 'low' | 'medium' | 'high' | 'critical';
onAnalysisComplete?: (analysis: CognitiveLoadAnalysis) => void;
onViolationDetected?: (violation: CognitiveViolation) => void;
className?: string;
}
declare function CognitiveLoadMeter({ _targetSelector, // Not used in current implementation
targetElement, enableRealTimeAnalysis, analysisInterval, position, minimized: initialMinimized, showDetails, showOnlyViolations, minSeverity, onAnalysisComplete, onViolationDetected, className }: CognitiveLoadMeterProps): react_jsx_runtime.JSX.Element;
declare function useCognitiveLoadAnalysis(_targetSelector?: string): {
analysis: CognitiveLoadAnalysis | null;
isAnalyzing: boolean;
runAnalysis: () => void;
};
declare const cognitiveLoadMeterV3Variants: (props?: ({
variant?: "floating" | "inline" | "minimal" | "card" | null | undefined;
size?: "medium" | "small" | "fullWidth" | "large" | null | undefined;
loadLevel?: "high" | "critical" | "moderate" | "optimal" | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string;
type CognitiveLoadLevel = 'optimal' | 'moderate' | 'high' | 'critical';
interface CognitiveLoadData {
navigationItems: number;
formFields: number;
visibleElements: number;
activeModals: number;
notifications: number;
interactiveElements: number;
}
interface BirhausCognitiveLoadMeterV3Props extends VariantProps<typeof cognitiveLoadMeterV3Variants> {
loadData: CognitiveLoadData;
maxOptimalLoad?: number;
maxModerateLoad?: number;
maxHighLoad?: number;
showDetails?: boolean;
showRecommendations?: boolean;
showMillersLawCompliance?: boolean;
animated?: boolean;
enableGlass?: boolean;
reducedMotion?: boolean;
title?: string;
titleEs?: string;
titleEn?: string;
description?: string;
descriptionEs?: string;
descriptionEn?: string;
onLoadChange?: (level: CognitiveLoadLevel, score: number) => void;
onRecommendationClick?: (recommendation: string) => void;
themeName?: 'financial' | 'healthcare' | 'education';
className?: string;
contentClassName?: string;
}
/**
* BirhausCognitiveLoadMeterV3 - Glass morphism cognitive load meter for BIRHAUS v3.0
*
* Features:
* - Glass morphism effects with backdrop blur and saturation
* - Real-time cognitive load calculation based on Miller's Law
* - Visual load level indication with color-coded progress
* - Spanish-first labels and recommendations
* - Detailed breakdown of UI complexity factors
* - BIRHAUS compliance recommendations
* - Generous spacing and radical border radius
* - Performance-optimized animations
* - Accessibility-compliant visual indicators
*/
declare function BirhausCognitiveLoadMeterV3({ loadData, variant, size, maxOptimalLoad, maxModerateLoad, maxHighLoad, showDetails, showRecommendations, showMillersLawCompliance, animated, enableGlass, reducedMotion, title, titleEs, titleEn, description, descriptionEs, descriptionEn, onLoadChange, onRecommendationClick, themeName, className, contentClassName, ...props }: BirhausCognitiveLoadMeterV3Props): react_jsx_runtime.JSX.Element;
declare const devToolsPanelV3Variants: (props?: ({
position?: "floating" | "topRight" | "topLeft" | "bottomRight" | "bottomLeft" | null | undefined;
size?: "expanded" | "compact" | "standard" | "fullPanel" | null | undefined;
variant?: "floating" | "minimal" | "panel" | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string;
interface DevicePreview {
name: string;
width: number;
height: number;
icon: React.ComponentType<any>;
}
interface BirhausDevToolsV3Props extends VariantProps<typeof devToolsPanelV3Variants> {
open?: boolean;
onToggle?: () => void;
enableCognitiveLoad?: boolean;
enableSpacingGuides?: boolean;
enableColorPalette?: boolean;
enablePerformanceMonitor?: boolean;
enableDevicePreview?: boolean;
enableAccessibilityCheck?: boolean;
enableGlass?: boolean;
reducedMotion?: boolean;
title?: string;
titleEs?: string;
titleEn?: string;
devices?: DevicePreview[];
currentDevice?: string;
onDeviceChange?: (device: DevicePreview) => void;
onCognitiveLoadToggle?: (enabled: boolean) => void;
onSpacingGuidesToggle?: (enabled: boolean) => void;
onColorPaletteToggle?: (enabled: boolean) => void;
onPerformanceToggle?: (enabled: boolean) => void;
onAccessibilityToggle?: (enabled: boolean) => void;
onRefreshPage?: () => void;
themeName?: 'financial' | 'healthcare' | 'education';
className?: string;
contentClassName?: string;
}
/**
* BirhausDevToolsV3 - Glass morphism developer tools panel for BIRHAUS v3.0
*
* Features:
* - Glass morphism floating developer panel
* - Cognitive load meter integration
* - Spacing and layout guides overlay
* - Color palette and theme inspector
* - Performance monitoring dashboard
* - Device preview and responsive testing
* - Accessibility compliance checker
* - Spanish-first developer interface
* - Generous spacing and radical border radius
* - Collapsible tool sections with smooth animations
*/
declare function BirhausDevToolsV3({ open, onToggle, position, size, variant, enableCognitiveLoad, enableSpacingGuides, enableColorPalette, enablePerformanceMonitor, enableDevicePreview, enableAccessibilityCheck, enableGlass, reducedMotion, title, titleEs, titleEn, devices, currentDevice, onDeviceChange, onCognitiveLoadToggle, onSpacingGuidesToggle, onColorPaletteToggle, onPerformanceToggle, onAccessibilityToggle, onRefreshPage, themeName, className, contentClassName, ...props }: BirhausDevToolsV3Props): react_jsx_runtime.JSX.Element;
declare const performanceMonitorV3Variants: (props?: ({
variant?: "minimal" | "compact" | "card" | "dashboard" | null | undefined;
size?: "medium" | "small" | "fullWidth" | "large" | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string;
interface PerformanceMetrics {
lcp: number;
fid: number;
cls: number;
fcp: number;
ttfb: number;
domNodes: number;
jsHeapSize: number;
imageCount: number;
connectionType: string;
effectiveType: string;
cognitiveElements: number;
glassEffectsCount: number;
v3ComponentsCount: number;
}
interface BirhausPerformanceMonitorV3Props extends VariantProps<typeof performanceMonitorV3Variants> {
metrics?: PerformanceMetrics;
autoUpdate?: boolean;
updateInterval?: number;
showWebVitals?: boolean;
showResourceMetrics?: boolean;
showNetworkInfo?: boolean;
showBirhausMetrics?: boolean;
showTrends?: boolean;
enableGlass?: boolean;
reducedMotion?: boolean;
title?: string;
titleEs?: string;
titleEn?: string;
description?: string;
descriptionEs?: string;
descriptionEn?: string;
onMetricsUpdate?: (metrics: PerformanceMetrics) => void;
onThresholdExceeded?: (metric: string, value: number, threshold: number) => void;
thresholds?: {
lcp?: {
good: number;
warning: number;
};
fid?: {
good: number;
warning: number;
};
fcp?: {
good: number;
warning: number;
};
ttfb?: {
good: number;
warning: number;
};
};
themeName?: 'financial' | 'healthcare' | 'education';
className?: string;
contentClassName?: string;
}
/**
* BirhausPerformanceMonitorV3 - Glass morphism performance monitor for BIRHAUS v3.0
*
* Features:
* - Glass morphism effects with backdrop blur and saturation
* - Real-time Core Web Vitals monitoring (LCP, FID, CLS, FCP, TTFB)
* - BIRHAUS-specific metrics (cognitive load, v3 components, glass effects)
* - Resource usage tracking (DOM nodes, JS heap, images)
* - Network connection monitoring
* - Performance trends and alerts
* - Spanish-first performance labels
* - Generous spacing and radical border radius
* - Auto-updating metrics with configurable intervals
*/
declare function BirhausPerformanceMonitorV3({ metrics, variant, size, autoUpdate, updateInterval, showWebVitals, showResourceMetrics, showNetworkInfo, showBirhausMetrics, showTrends, enableGlass, reducedMotion, title, titleEs, titleEn, description, descriptionEs, descriptionEn, onMetricsUpdate, onThresholdExceeded, thresholds, themeName, className, contentClassName, ...props }: BirhausPerformanceMonitorV3Props): react_jsx_runtime.JSX.Element;
/**
* BIRHAUS ESLint Plugin
*
* ESLint rules to enforce BIRHAUS design principles in React/TypeScript code:
* - Miller's Law compliance (max 7 navigation items, form fields)
* - Spanish-first labeling requirements
* - Undo-over-confirm pattern enforcement
* - Accessibility compliance checks
* - Cognitive load reduction
*/
interface BirhausLinterOptions {
maxNavigationItems?: number;
maxFormFields?: number;
maxSelectOptions?: number;
requireSpanishLabels?: boolean;
spanishLabelSuffix?: string;
forbidConfirmationDialogs?: boolean;
requireUndoPattern?: boolean;
requireAltText?: boolean;
requireAriaLabels?: boolean;
maxActionsPerView?: number;
maxColorsPerComponent?: number;
}
declare const millerLawNavigationRule: Rule.RuleModule;
declare const spanishFirstLabelsRule: Rule.RuleModule;
declare const forbidConfirmationDialogsRule: Rule.RuleModule;
declare const formFieldLimitsRule: Rule.RuleModule;
declare const accessibilityRequirementsRule: Rule.RuleModule;
declare const birhausRules: {
'miller-law-navigation': Rule.RuleModule;
'spanish-first-labels': Rule.RuleModule;
'forbid-confirmation-dialogs': Rule.RuleModule;
'form-field-limits': Rule.RuleModule;
'accessibility-requirements': Rule.RuleModule;
};
declare const birhausPlugin: {
rules: {
'miller-law-navigation': Rule.RuleModule;
'spanish-first-labels': Rule.RuleModule;
'forbid-confirmation-dialogs': Rule.RuleModule;
'form-field-limits': Rule.RuleModule;
'accessibility-requirements': Rule.RuleModule;
};
configs: {
recommended: {
plugins: string[];
rules: {
'@birhaus/miller-law-navigation': string;
'@birhaus/spanish-first-labels': string;
'@birhaus/forbid-confirmation-dialogs': string;
'@birhaus/form-field-limits': string;
'@birhaus/accessibility-requirements': string;
};
};
strict: {
plugins: string[];
rules: {
'@birhaus/miller-law-navigation': string;
'@birhaus/spanish-first-labels': string;
'@birhaus/forbid-confirmation-dialogs': string;
'@birhaus/form-field-limits': string;
'@birhaus/accessibility-requirements': string;
};
};
};
};
export { BirhausCognitiveLoadMeterV3, type BirhausCognitiveLoadMeterV3Props, BirhausDevToolsV3, type BirhausDevToolsV3Props, type BirhausLinterOptions, BirhausPerformanceMonitorV3, type BirhausPerformanceMonitorV3Props, type CognitiveLoadAnalysis, type CognitiveLoadData, type CognitiveLoadLevel, CognitiveLoadMeter, type CognitiveLoadMeterProps, type CognitiveLoadMetrics, type CognitiveSuggestion, type CognitiveViolation, type DevicePreview, type PerformanceMetrics, accessibilityRequirementsRule, birhausPlugin, birhausRules, forbidConfirmationDialogsRule, formFieldLimitsRule, millerLawNavigationRule, spanishFirstLabelsRule, useCognitiveLoadAnalysis };