uilint-react 0.1.18 → 0.1.19

package/dist/index.d.ts

@@ -1,16 +1,16 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React from 'react';
+import React$1 from 'react';
 import { Violation, GroupedSnapshot, DOMSnapshot, ExtractedStyles, AnalysisResult } from 'uilint-core';
 export { AnalysisResult, ConsistencyResult, DOMSnapshot, ElementRole, ElementSnapshot, ExtractedStyles, GroupedSnapshot, SerializedStyles, StyleGuide, StyleSnapshot, UILintIssue, Violation, ViolationCategory, ViolationSeverity, createEmptyStyleGuide, createStyleSummary, extractStylesFromDOM, generateStyleGuideFromStyles as generateStyleGuide, mergeStyleGuides, parseStyleGuide, serializeStyles } from 'uilint-core';
 
 interface UILintProps {
-    children: React.ReactNode;
+    children: React$1.ReactNode;
     enabled?: boolean;
     position?: "bottom-left" | "bottom-right" | "top-left" | "top-right";
     autoScan?: boolean;
     apiEndpoint?: string;
 }
-interface UILintContextValue {
+interface UILintContextValue$1 {
     violations: Violation[];
     isScanning: boolean;
     elementCount: number;
@@ -21,9 +21,287 @@ interface UILintContextValue {
     lockedViolation: Violation | null;
     setLockedViolation: (violation: Violation | null) => void;
 }
-declare function useUILint(): UILintContextValue;
+declare function useUILint(): UILintContextValue$1;
 declare function UILint({ children, enabled, position, autoScan, apiEndpoint, }: UILintProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * Types for UILint Source Visualization
+ */
+/**
+ * Source location from React Fiber _debugSource
+ */
+interface SourceLocation {
+    fileName: string;
+    lineNumber: number;
+    columnNumber?: number;
+}
+/**
+ * Component information extracted from React Fiber
+ */
+interface ComponentInfo {
+    name: string;
+    source: SourceLocation | null;
+}
+/**
+ * A scanned DOM element with its React source information
+ */
+interface ScannedElement {
+    id: string;
+    element: Element;
+    tagName: string;
+    className: string;
+    source: SourceLocation | null;
+    componentStack: ComponentInfo[];
+    rect: DOMRect;
+}
+/**
+ * A source file with all its associated elements
+ */
+interface SourceFile {
+    path: string;
+    displayName: string;
+    color: string;
+    elements: ScannedElement[];
+}
+/**
+ * User-configurable settings for the overlay
+ */
+interface UILintSettings {
+    showLabels: boolean;
+    hideNodeModules: boolean;
+    overlayOpacity: number;
+    labelPosition: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+}
+/**
+ * Operating modes for the UILint overlay
+ */
+type UILintMode = "off" | "sources" | "inspect";
+/**
+ * Element detected under the cursor during Alt-key locator mode
+ */
+interface LocatorTarget {
+    element: Element;
+    source: SourceLocation | null;
+    componentStack: ComponentInfo[];
+    rect: DOMRect;
+    /** Index in the component stack (0 = current element, higher = parent) */
+    stackIndex: number;
+}
+/**
+ * Context value provided by UILintProvider
+ */
+interface UILintContextValue {
+    mode: UILintMode;
+    setMode: (mode: UILintMode) => void;
+    scannedElements: ScannedElement[];
+    sourceFiles: SourceFile[];
+    selectedElement: ScannedElement | null;
+    setSelectedElement: (element: ScannedElement | null) => void;
+    hoveredElement: ScannedElement | null;
+    setHoveredElement: (element: ScannedElement | null) => void;
+    settings: UILintSettings;
+    updateSettings: (settings: Partial<UILintSettings>) => void;
+    rescan: () => void;
+    isScanning: boolean;
+    /** True when Alt/Option key is held down */
+    altKeyHeld: boolean;
+    /** Current element under cursor when Alt is held */
+    locatorTarget: LocatorTarget | null;
+    /** Navigate to parent component in locator mode */
+    locatorGoUp: () => void;
+    /** Navigate to child component in locator mode */
+    locatorGoDown: () => void;
+}
+/**
+ * Props for the UILintProvider component
+ */
+interface UILintProviderProps {
+    children: React.ReactNode;
+    enabled?: boolean;
+    defaultMode?: UILintMode;
+}
+/**
+ * Response from the source API
+ */
+interface SourceApiResponse {
+    content: string;
+    relativePath: string;
+}
+/**
+ * Cached source file content
+ */
+interface CachedSource {
+    content: string;
+    relativePath: string;
+    fetchedAt: number;
+}
+/**
+ * Color palette for source file differentiation
+ */
+declare const FILE_COLORS: readonly ["#3B82F6", "#8B5CF6", "#EC4899", "#10B981", "#F59E0B", "#06B6D4", "#EF4444", "#84CC16", "#6366F1", "#F97316", "#14B8A6", "#A855F7"];
+/**
+ * Default settings
+ */
+declare const DEFAULT_SETTINGS: UILintSettings;
+/**
+ * Data attribute used to mark scanned elements
+ */
+declare const DATA_UILINT_ID = "data-ui-lint-id";
+
+/**
+ * Hook to access UILint context
+ */
+declare function useUILintContext(): UILintContextValue;
+/**
+ * UILint Provider Component
+ */
+declare function UILintProvider({ children, enabled, defaultMode, }: UILintProviderProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * UILint Toolbar - Floating pill-shaped toolbar with mode toggles and settings
+ */
+
+/**
+ * Main Toolbar Component
+ */
+declare function UILintToolbar(): React$1.ReactPortal | null;
+
+/**
+ * Source Overlays - Colored rectangles over components with file labels
+ */
+
+/**
+ * Main Source Overlays Component
+ */
+declare function SourceOverlays(): React$1.ReactPortal | null;
+
+/**
+ * Inspection Panel - Slide-out panel showing element details and source preview
+ */
+
+/**
+ * Main Inspection Panel Component
+ */
+declare function InspectionPanel(): React$1.ReactPortal | null;
+
+/**
+ * React Fiber inspection utilities for source file visualization
+ *
+ * In development mode, React attaches debug information to Fiber nodes:
+ * - _debugSource: { fileName, lineNumber, columnNumber }
+ * - _debugOwner: The component that rendered this element
+ * - return: Parent fiber in the tree
+ */
+
+/** React Fiber type (simplified) */
+interface Fiber {
+    tag: number;
+    type: string | Function | null;
+    stateNode: Element | null;
+    return: Fiber | null;
+    _debugSource?: {
+        fileName: string;
+        lineNumber: number;
+        columnNumber?: number;
+    } | null;
+    _debugOwner?: Fiber | null;
+}
+/**
+ * Get React Fiber from a DOM element
+ * React attaches fiber via __reactFiber$xxx key
+ */
+declare function getFiberFromElement(element: Element): Fiber | null;
+/**
+ * Extract source location from a fiber's _debugSource
+ */
+declare function getDebugSource(fiber: Fiber): SourceLocation | null;
+/**
+ * Get the debug owner fiber (component that rendered this element)
+ */
+declare function getDebugOwner(fiber: Fiber): Fiber | null;
+/**
+ * Build a component stack by walking up the fiber tree
+ * Returns an array from innermost to outermost component
+ */
+declare function getComponentStack(fiber: Fiber): ComponentInfo[];
+/**
+ * Check if a file path is from node_modules
+ */
+declare function isNodeModulesPath(path: string): boolean;
+/**
+ * Get display name from a file path (just the filename)
+ */
+declare function getDisplayName(path: string): string;
+/**
+ * Scan the DOM tree and extract React source information
+ */
+declare function scanDOMForSources(root?: Element, hideNodeModules?: boolean): ScannedElement[];
+/**
+ * Group scanned elements by their source file
+ */
+declare function groupBySourceFile(elements: ScannedElement[]): SourceFile[];
+/**
+ * Clean up data attributes from previous scans
+ */
+declare function cleanupDataAttributes(): void;
+/**
+ * Get an element by its UILint ID
+ */
+declare function getElementById(id: string): Element | null;
+/**
+ * Update element rects (for scroll/resize handling)
+ */
+declare function updateElementRects(elements: ScannedElement[]): ScannedElement[];
+/**
+ * Build an "Open in Editor" URL
+ */
+declare function buildEditorUrl(source: SourceLocation, editor?: "cursor" | "vscode"): string;
+
+/**
+ * Client for fetching source code from the dev API
+ */
+
+/**
+ * Fetch source code for a file
+ */
+declare function fetchSource(filePath: string): Promise<SourceApiResponse | null>;
+/**
+ * Fetch source and extract lines around a specific location
+ */
+declare function fetchSourceWithContext(source: SourceLocation, contextLines?: number): Promise<{
+    lines: string[];
+    startLine: number;
+    highlightLine: number;
+    relativePath: string;
+} | null>;
+/**
+ * Clear the source cache
+ */
+declare function clearSourceCache(): void;
+/**
+ * Get cached source without fetching
+ */
+declare function getCachedSource(filePath: string): SourceApiResponse | null;
+/**
+ * Prefetch source files for a list of paths
+ */
+declare function prefetchSources(filePaths: string[]): Promise<void>;
+
+interface UseElementScanOptions {
+    enabled: boolean;
+    settings: UILintSettings;
+}
+interface UseElementScanResult {
+    elements: ScannedElement[];
+    sourceFiles: SourceFile[];
+    isScanning: boolean;
+    rescan: () => void;
+}
+/**
+ * Hook for managing element scanning
+ */
+declare function useElementScan({ enabled, settings, }: UseElementScanOptions): UseElementScanResult;
+
 /**
  * DOM snapshotting for consistency analysis
  */
@@ -50,7 +328,7 @@ interface ConsistencyHighlighterProps {
  * Main consistency highlighter component
  * Renders highlights via Portal to document.body
  */
-declare function ConsistencyHighlighter({ violations, selectedViolation, lockedViolation, }: ConsistencyHighlighterProps): React.ReactPortal | null;
+declare function ConsistencyHighlighter({ violations, selectedViolation, lockedViolation, }: ConsistencyHighlighterProps): React$1.ReactPortal | null;
 
 /**
  * DOM scanner for browser environment
@@ -104,4 +382,4 @@ declare class LLMClient {
     generateStyleGuide(styles: ExtractedStyles): Promise<string | null>;
 }
 
-export { ConsistencyHighlighter, LLMClient, UILint, type UILintProps, cleanupDataElements, createSnapshot, getElementBySnapshotId, isBrowser, isJSDOM, isNode, scanDOM, useUILint };
+export { type CachedSource, type ComponentInfo, ConsistencyHighlighter, DATA_UILINT_ID, DEFAULT_SETTINGS, FILE_COLORS, InspectionPanel, LLMClient, type ScannedElement, type SourceApiResponse, type SourceFile, type SourceLocation, SourceOverlays, UILint, type UILintContextValue, type UILintMode, type UILintProps, UILintProvider, type UILintProviderProps, type UILintSettings, UILintToolbar, buildEditorUrl, cleanupDataAttributes, cleanupDataElements, clearSourceCache, createSnapshot, fetchSource, fetchSourceWithContext, getCachedSource, getComponentStack, getDebugOwner, getDebugSource, getDisplayName, getElementById, getElementBySnapshotId, getFiberFromElement, groupBySourceFile, isBrowser, isJSDOM, isNode, isNodeModulesPath, prefetchSources, scanDOM, scanDOMForSources, updateElementRects, useElementScan, useUILint, useUILintContext };

package/dist/index.js

@@ -1,4 +1,39 @@
 "use client";
+import {
+  UILintToolbar
+} from "./chunk-OWX36QE3.js";
+import {
+  SourceOverlays
+} from "./chunk-MEP7WO7U.js";
+import {
+  InspectionPanel,
+  clearSourceCache,
+  fetchSource,
+  fetchSourceWithContext,
+  getCachedSource,
+  prefetchSources
+} from "./chunk-3TA6OKS6.js";
+import "./chunk-KUFV22FO.js";
+import {
+  DATA_UILINT_ID,
+  DEFAULT_SETTINGS,
+  FILE_COLORS,
+  UILintProvider,
+  buildEditorUrl,
+  cleanupDataAttributes,
+  getComponentStack,
+  getDebugOwner,
+  getDebugSource,
+  getDisplayName,
+  getElementById,
+  getFiberFromElement,
+  groupBySourceFile,
+  isNodeModulesPath,
+  scanDOMForSources,
+  updateElementRects,
+  useElementScan,
+  useUILintContext
+} from "./chunk-7WYVWDRU.js";
 
 // src/components/UILint.tsx
 import {
@@ -1549,21 +1584,47 @@ import { generateStyleGuideFromStyles } from "uilint-core";
 import { createEmptyStyleGuide, mergeStyleGuides } from "uilint-core";
 export {
   ConsistencyHighlighter,
+  DATA_UILINT_ID,
+  DEFAULT_SETTINGS,
+  FILE_COLORS,
+  InspectionPanel,
   LLMClient,
+  SourceOverlays,
   UILint,
+  UILintProvider,
+  UILintToolbar,
+  buildEditorUrl,
+  cleanupDataAttributes,
   cleanupDataElements,
+  clearSourceCache,
   createEmptyStyleGuide,
   createSnapshot,
   createStyleSummary3 as createStyleSummary,
   extractStylesFromDOM2 as extractStylesFromDOM,
+  fetchSource,
+  fetchSourceWithContext,
   generateStyleGuideFromStyles as generateStyleGuide,
+  getCachedSource,
+  getComponentStack,
+  getDebugOwner,
+  getDebugSource,
+  getDisplayName,
+  getElementById,
   getElementBySnapshotId,
+  getFiberFromElement,
+  groupBySourceFile,
   isBrowser,
   isJSDOM,
   isNode,
+  isNodeModulesPath,
   mergeStyleGuides,
   parseStyleGuide,
+  prefetchSources,
   scanDOM,
+  scanDOMForSources,
   serializeStyles2 as serializeStyles,
-  useUILint
+  updateElementRects,
+  useElementScan,
+  useUILint,
+  useUILintContext
 };

package/dist/node.js

@@ -1,8 +1,5 @@
 // src/scanner/jsdom-adapter.ts
-import {
-  OllamaClient,
-  createStyleSummary as createStyleSummary2
-} from "uilint-core";
+import { OllamaClient, createStyleSummary as createStyleSummary2 } from "uilint-core";
 
 // src/scanner/dom-scanner.ts
 import {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uilint-react",
-  "version": "0.1.18",
+  "version": "0.1.19",
   "description": "React component for AI-powered UI consistency checking",
   "author": "Peter Suggate",
   "repository": {
@@ -34,7 +34,7 @@
     "node": ">=20.0.0"
   },
   "dependencies": {
-    "uilint-core": "^0.1.18"
+    "uilint-core": "^0.1.19"
   },
   "peerDependencies": {
     "react": "^19.0.0",