@fragments-sdk/cli 0.10.1 → 0.12.1

package/src/viewer/styles/globals.css

@@ -1,278 +0,0 @@
-/* ============================================
- * Fragments Viewer Shell Styles
- * ============================================
- * Viewer-specific token aliases and utility classes.
- * Base resets (box-sizing, body, scrollbars) come from
- * @fragments/ui globals imported via entry.tsx.
- * ============================================ */
-
-/* ============================================
- * Token Aliases
- * ============================================
- * Shorthand aliases mapping to --fui-* tokens so the viewer
- * shell CSS can use shorter variable names.
- */
-
-:root {
-  --bg-primary: var(--fui-bg-primary, #ffffff);
-  --bg-secondary: var(--fui-bg-secondary, #f7f7f8);
-  --bg-tertiary: var(--fui-bg-tertiary, #f2f2f2);
-  --bg-elevated: var(--fui-bg-elevated, #ffffff);
-  --bg-hover: var(--fui-bg-hover, rgba(0, 0, 0, 0.06));
-  --bg-active: var(--fui-bg-active, rgba(0, 0, 0, 0.1));
-
-  --text-primary: var(--fui-text-primary, #171717);
-  --text-secondary: var(--fui-text-secondary, #525252);
-  --text-tertiary: var(--fui-text-tertiary, #8a8a8a);
-  --text-muted: var(--fui-text-tertiary, #8a8a8a);
-
-  --border: var(--fui-border, rgba(0, 0, 0, 0.1));
-  --border-subtle: var(--fui-border, rgba(0, 0, 0, 0.1));
-  --border-strong: var(--fui-border-strong, rgba(0, 0, 0, 0.16));
-
-  --color-accent: var(--fui-color-accent, #10a37f);
-  --color-accent-hover: var(--fui-color-accent-hover, #0d8a6a);
-  --color-accent-subtle: var(--fui-color-success-bg, rgba(16, 163, 127, 0.1));
-
-  --color-success: var(--fui-color-success, #10a37f);
-  --color-success-bg: var(--fui-color-success-bg, rgba(16, 163, 127, 0.1));
-  --color-warning: var(--fui-color-warning, #f59e0b);
-  --color-warning-bg: var(--fui-color-warning-bg, rgba(245, 158, 11, 0.1));
-  --color-danger: var(--fui-color-danger, #ef4444);
-  --color-danger-bg: var(--fui-color-danger-bg, rgba(239, 68, 68, 0.1));
-  --color-info: var(--fui-color-info, #3b82f6);
-  --color-info-bg: var(--fui-color-info-bg, rgba(59, 130, 246, 0.1));
-
-  --shadow-sm: var(--fui-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
-  --shadow-md: var(--fui-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.08));
-  --shadow-lg: var(--fui-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.12));
-
-  --radius-sm: var(--fui-radius-sm, 6px);
-  --radius-md: var(--fui-radius-md, 8px);
-  --radius-lg: var(--fui-radius-lg, 12px);
-
-  --transition-fast: var(--fui-transition-fast, 150ms ease);
-  --transition-normal: var(--fui-transition-normal, 200ms ease);
-}
-
-/* ============================================
- * Viewer-specific overrides
- * ============================================ */
-
-* {
-  border-color: var(--border);
-}
-
-/* ============================================
- * Theme-aware Utility Classes
- * ============================================ */
-
-.bg-primary { background-color: var(--bg-primary); }
-.bg-secondary { background-color: var(--bg-secondary); }
-.bg-tertiary { background-color: var(--bg-tertiary); }
-.bg-elevated { background-color: var(--bg-elevated); }
-
-.text-primary { color: var(--text-primary); }
-.text-secondary { color: var(--text-secondary); }
-.text-tertiary { color: var(--text-tertiary); }
-.text-accent { color: var(--color-accent); }
-
-.border-subtle { border-color: var(--border-subtle); }
-.border-strong { border-color: var(--border-strong); }
-
-/* ============================================
- * Surface Styles
- * ============================================ */
-
-.surface {
-  background-color: var(--bg-elevated);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-lg);
-}
-
-.surface-interactive {
-  background-color: var(--bg-elevated);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-lg);
-  transition: all var(--transition-fast);
-}
-
-.surface-interactive:hover {
-  border-color: var(--border-strong);
-  box-shadow: var(--shadow-sm);
-}
-
-/* ============================================
- * Badge Styles
- * ============================================ */
-
-.badge {
-  display: inline-flex;
-  align-items: center;
-  padding: 3px 8px;
-  border-radius: var(--radius-sm);
-  font-size: 11px;
-  font-weight: 500;
-  letter-spacing: 0.01em;
-  transition: all var(--transition-fast);
-}
-
-.badge-default {
-  background-color: var(--bg-tertiary);
-  color: var(--text-secondary);
-  border: 1px solid var(--border-subtle);
-}
-
-.badge-success {
-  background-color: var(--color-success-bg);
-  color: var(--color-success);
-}
-
-.badge-warning {
-  background-color: var(--color-warning-bg);
-  color: var(--color-warning);
-}
-
-.badge-danger {
-  background-color: var(--color-danger-bg);
-  color: var(--color-danger);
-}
-
-/* ============================================
- * Focus Ring
- * ============================================ */
-
-.focus-ring:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--color-accent);
-}
-
-/* ============================================
- * Transition Utilities
- * ============================================ */
-
-.transition-colors {
-  transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
-}
-
-.transition-all {
-  transition: all var(--transition-fast);
-}
-
-/* ============================================
- * Code Styling
- * ============================================ */
-
-code {
-  font-family: 'JetBrains Mono', 'Fira Code', monospace;
-  font-size: 0.875em;
-  background-color: var(--bg-tertiary);
-  padding: 2px 6px;
-  border-radius: var(--radius-sm);
-  border: 1px solid var(--border-subtle);
-}
-
-pre code {
-  background: none;
-  padding: 0;
-  border: none;
-}
-
-/* ============================================
- * Table Base Styles
- * ============================================ */
-
-table {
-  width: 100%;
-  border-collapse: separate;
-  border-spacing: 0;
-}
-
-th {
-  text-align: left;
-  font-weight: 500;
-  font-size: 12px;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--text-tertiary);
-}
-
-td {
-  border-top: 1px solid var(--border-subtle);
-}
-
-/* ============================================
- * Utility Classes
- * ============================================ */
-
-.divider {
-  height: 1px;
-  background-color: var(--border);
-}
-
-.text-balance {
-  text-wrap: balance;
-}
-
-/* Scroll utilities */
-.scroll-smooth {
-  scroll-behavior: smooth;
-}
-
-.scrollbar-hide {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-
-.scrollbar-hide::-webkit-scrollbar {
-  display: none;
-}
-
-/* ============================================
- * Gradient Utilities
- * ============================================ */
-
-.gradient-fade-b {
-  background: linear-gradient(to bottom, transparent, var(--bg-primary));
-}
-
-.gradient-fade-t {
-  background: linear-gradient(to top, transparent, var(--bg-primary));
-}
-
-/* Subtle glow effect for interactive elements */
-.glow-accent:hover {
-  box-shadow: 0 0 20px rgba(16, 163, 127, 0.15);
-}
-
-/* ============================================
- * Animations
- * ============================================ */
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-@keyframes slideIn {
-  from {
-    opacity: 0;
-    transform: translateY(4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.animate-fadeIn {
-  animation: fadeIn var(--transition-normal) ease-out;
-}
-
-.animate-slideIn {
-  animation: slideIn var(--transition-normal) ease-out;
-}

package/src/viewer/types/a11y.ts

@@ -1,197 +0,0 @@
-/**
- * Accessibility Types
- *
- * TypeScript interfaces for the accessibility checking system.
- */
-
-import type { ImpactValue } from 'axe-core';
-
-/**
- * Serialized violation node for storage
- */
-export interface SerializedNode {
-  /** HTML snippet of the affected element */
-  html: string;
-  /** CSS selector path to the element */
-  target: string[];
-  /** Failure summary explaining the issue */
-  failureSummary?: string;
-  /** Any data collected during the check */
-  any?: Array<{
-    id: string;
-    data?: unknown;
-    relatedNodes?: Array<{ html: string; target: string[] }>;
-    impact?: string;
-    message: string;
-  }>;
-  /** All data required for the check to pass */
-  all?: Array<{
-    id: string;
-    data?: unknown;
-    relatedNodes?: Array<{ html: string; target: string[] }>;
-    impact?: string;
-    message: string;
-  }>;
-  /** None data that should not be present */
-  none?: Array<{
-    id: string;
-    data?: unknown;
-    relatedNodes?: Array<{ html: string; target: string[] }>;
-    impact?: string;
-    message: string;
-  }>;
-}
-
-/**
- * Serialized violation for storage and display
- */
-export interface SerializedViolation {
-  /** Unique rule identifier (e.g., 'color-contrast') */
-  id: string;
-  /** Impact level of the violation */
-  impact: ImpactValue | null;
-  /** Brief description of the rule */
-  description: string;
-  /** Longer help text explaining how to fix */
-  help: string;
-  /** URL to detailed documentation */
-  helpUrl: string;
-  /** WCAG tags (e.g., 'wcag2a', 'wcag143') */
-  tags: string[];
-  /** Affected elements */
-  nodes: SerializedNode[];
-}
-
-/**
- * Cached accessibility result for a component
- */
-export interface CachedA11yResult {
-  /** Component name */
-  componentName: string;
-  /** Variant that was scanned (optional) */
-  variant?: string;
-  /** Full violation details for display */
-  violations: SerializedViolation[];
-  /** Number of passing checks */
-  passes: number;
-  /** Number of incomplete checks */
-  incomplete: number;
-  /** When the scan was performed */
-  scannedAt: number;
-  /** Counts by severity */
-  counts: {
-    critical: number;
-    serious: number;
-    moderate: number;
-    minor: number;
-  };
-}
-
-/**
- * Summary data derived from cache
- */
-export interface A11ySummary {
-  /** Components with no critical/serious violations */
-  accessibleComponents: number;
-  /** Total components scanned */
-  totalComponents: number;
-  /** Violations aggregated by impact */
-  violationsByImpact: {
-    critical: number;
-    serious: number;
-    moderate: number;
-    minor: number;
-  };
-  /** Top violations across all components */
-  topViolations: Array<{
-    ruleId: string;
-    description: string;
-    affectedComponents: string[];
-    impact: ImpactValue | null;
-  }>;
-}
-
-/**
- * Event data for a11y cache invalidation
- */
-export interface A11yInvalidateEvent {
-  /** Component names to invalidate */
-  components: string[];
-  /** File that changed */
-  file: string;
-  /** Timestamp of the change */
-  timestamp: number;
-}
-
-/**
- * A11y service configuration
- */
-export interface A11yServiceConfig {
-  /** Debounce delay after HMR file change (ms) */
-  hmrDebounceMs: number;
-  /** Debounce delay after navigation (ms) */
-  navigationDebounceMs: number;
-  /** Minimum time between same component scans (ms) */
-  scanCooldownMs: number;
-  /** Maximum concurrent scans */
-  maxConcurrentScans: number;
-}
-
-/**
- * Default configuration values
- */
-export const DEFAULT_A11Y_CONFIG: A11yServiceConfig = {
-  hmrDebounceMs: 500,
-  navigationDebounceMs: 200,
-  scanCooldownMs: 1000,
-  maxConcurrentScans: 2,
-};
-
-/**
- * Static fix suggestion for a violation
- */
-export interface StaticFixSuggestion {
-  /** Why this issue matters for users */
-  whyItMatters: string;
-  /** Generic fix description */
-  howToFix: string;
-  /** Example of bad code */
-  badExample?: string;
-  /** Example of good code */
-  goodExample?: string;
-  /** WCAG criterion reference */
-  wcagCriterion?: {
-    id: string;
-    name: string;
-    level: 'A' | 'AA' | 'AAA';
-    url: string;
-  };
-}
-
-/**
- * Specific fix for an element
- */
-export interface ElementFix {
-  /** The original HTML */
-  originalHtml: string;
-  /** The suggested fix HTML */
-  fixedHtml: string;
-  /** Explanation of the change */
-  explanation: string;
-  /** Whether this is an auto-fixable change */
-  autoFixable: boolean;
-}
-
-/**
- * Scan status for tracking progress
- */
-export type ScanStatus = 'idle' | 'pending' | 'scanning' | 'completed' | 'error';
-
-/**
- * Component scan state
- */
-export interface ComponentScanState {
-  status: ScanStatus;
-  lastScanAt?: number;
-  error?: string;
-}