uilint-react 0.2.1 → 0.2.3

package/dist/components/ui-lint/types.d.ts

@@ -0,0 +1,170 @@
+/**
+ * Types for UILint Source Visualization
+ */
+/**
+ * Source location from data-loc attribute
+ */
+export interface SourceLocation {
+    fileName: string;
+    lineNumber: number;
+    columnNumber?: number;
+}
+/**
+ * A scanned DOM element with its source information
+ * Source is always present from data-loc attribute
+ */
+export interface ScannedElement {
+    /**
+     * Unique per-instance ID derived from data-loc.
+     * Format: "loc:path:line:column#occurrence"
+     */
+    id: string;
+    element: Element;
+    tagName: string;
+    className: string;
+    /** Source location (always present from data-loc) */
+    source: SourceLocation;
+    rect: DOMRect;
+}
+/**
+ * A source file with all its associated elements
+ */
+export interface SourceFile {
+    path: string;
+    displayName: string;
+    color: string;
+    elements: ScannedElement[];
+}
+/**
+ * User-configurable settings for the overlay
+ */
+export interface UILintSettings {
+    hideNodeModules: boolean;
+    autoScanEnabled: boolean;
+}
+/**
+ * State for the auto-scan feature
+ */
+export interface AutoScanState {
+    status: "idle" | "scanning" | "paused" | "complete";
+    currentIndex: number;
+    totalElements: number;
+    elements: ScannedElement[];
+}
+/**
+ * ESLint issue from WebSocket server (uilint serve)
+ */
+export interface ESLintIssue {
+    /** Line number in source file */
+    line: number;
+    /** Column number */
+    column?: number;
+    /** Issue description */
+    message: string;
+    /** ESLint rule ID (e.g., "uilint/semantic", "uilint/no-arbitrary-tailwind") */
+    ruleId?: string;
+    /** data-loc value to match to DOM element */
+    dataLoc?: string;
+}
+/**
+ * Cached issue data for a scanned element
+ */
+export interface ElementIssue {
+    elementId: string;
+    /** ESLint rule violations from uilint-eslint (including semantic rule) */
+    issues: ESLintIssue[];
+    status: "pending" | "scanning" | "complete" | "error";
+}
+/**
+ * Element detected under the cursor during Alt-key locator mode
+ */
+export interface LocatorTarget {
+    element: Element;
+    source: SourceLocation;
+    rect: DOMRect;
+}
+/**
+ * Element being inspected in the sidebar
+ */
+export interface InspectedElement {
+    element: Element;
+    source: SourceLocation;
+    rect: DOMRect;
+    /** Optional ID from auto-scan to link to cached results */
+    scannedElementId?: string;
+}
+/**
+ * File-level issue (not mapped to a specific DOM element)
+ */
+export interface FileIssue {
+    filePath: string;
+    issues: ESLintIssue[];
+}
+/**
+ * Context value provided by UILintProvider
+ */
+export interface UILintContextValue {
+    settings: UILintSettings;
+    updateSettings: (settings: Partial<UILintSettings>) => void;
+    /** True when Alt/Option key is held down */
+    altKeyHeld: boolean;
+    /** Current element under cursor when Alt is held */
+    locatorTarget: LocatorTarget | null;
+    /** Element currently being inspected in sidebar */
+    inspectedElement: InspectedElement | null;
+    /** Set the element to inspect (opens sidebar) */
+    setInspectedElement: (element: InspectedElement | null) => void;
+    /** Whether live scanning is enabled */
+    liveScanEnabled: boolean;
+    /** Auto-scan state (for progress tracking) */
+    autoScanState: AutoScanState;
+    /** Cache of element issues from scanning */
+    elementIssuesCache: Map<string, ElementIssue>;
+    /** Enable live scanning */
+    enableLiveScan: () => void;
+    /** Disable live scanning */
+    disableLiveScan: () => void;
+}
+/**
+ * Props for the UILintProvider component
+ */
+export interface UILintProviderProps {
+    children: React.ReactNode;
+    enabled?: boolean;
+}
+/**
+ * Response from the source API
+ */
+export interface SourceApiResponse {
+    content: string;
+    relativePath: string;
+}
+/**
+ * Cached source file content
+ */
+export interface CachedSource {
+    content: string;
+    relativePath: string;
+    fetchedAt: number;
+}
+/**
+ * Color palette for source file differentiation
+ */
+export declare const FILE_COLORS: readonly ["#3B82F6", "#8B5CF6", "#EC4899", "#10B981", "#F59E0B", "#06B6D4", "#EF4444", "#84CC16", "#6366F1", "#F97316", "#14B8A6", "#A855F7"];
+/**
+ * Default settings
+ */
+export declare const DEFAULT_SETTINGS: UILintSettings;
+/**
+ * Default auto-scan state
+ */
+export declare const DEFAULT_AUTO_SCAN_STATE: AutoScanState;
+/**
+ * Data attribute used to mark scanned elements
+ */
+export declare const DATA_UILINT_ID = "data-ui-lint-id";
+/**
+ * Re-export vision types for convenience
+ */
+export type { VisionIssue, VisionAnalysisResult, ElementManifest, } from '../../scanner/vision-capture';
+//# sourceMappingURL=types.d.ts.map

package/dist/components/ui-lint/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ui-lint/types.ts"],"names":[],"mappings":"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"}

package/dist/components/ui-lint/useDOMObserver.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Hook to observe DOM changes and auto-scan new data-loc elements
+ *
+ * @param enabled - Whether observation is active
+ */
+export declare function useDOMObserver(enabled?: boolean): void;
+/**
+ * Get the current count of data-loc elements in the DOM
+ */
+export declare function getDataLocElementCount(): number;
+//# sourceMappingURL=useDOMObserver.d.ts.map

package/dist/components/ui-lint/useDOMObserver.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDOMObserver.d.ts","sourceRoot":"","sources":["../../../src/components/ui-lint/useDOMObserver.ts"],"names":[],"mappings":"AAqBA;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,OAAO,GAAE,OAAc,GAAG,IAAI,CA4J5D;AAED;;GAEG;AACH,wBAAgB,sBAAsB,IAAI,MAAM,CAG/C"}

package/dist/components/ui-lint/visibility-utils.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Visibility utilities for detecting when elements are covered by overlays
+ *
+ * Used to hide UILint badges when app modals/overlays cover the underlying elements.
+ */
+type Rect = {
+    top: number;
+    left: number;
+    right: number;
+    bottom: number;
+    width: number;
+    height: number;
+};
+/**
+ * Compute the visible portion of an element in viewport coordinates.
+ *
+ * This accounts for:
+ * - viewport bounds
+ * - ancestor overflow clipping (scroll/hidden/auto/clip)
+ *
+ * Returns null when no visible area remains.
+ */
+export declare function getElementVisibleRect(element: Element): Rect | null;
+/**
+ * Check if an element is covered by an overlay (modal, popover, etc.)
+ * at a specific point (typically the badge position).
+ *
+ * Uses elementsFromPoint() to detect all elements at the given coordinates
+ * and checks if any non-UILint overlay element is covering the target.
+ *
+ * IMPORTANT: Elements that are children/descendants of an overlay are NOT considered
+ * "covered" - they should show badges since the overlay is their container, not a cover.
+ *
+ * @param element - The target element that should be checked for coverage
+ * @param badgeX - X coordinate of the badge position (in viewport coordinates)
+ * @param badgeY - Y coordinate of the badge position (in viewport coordinates)
+ * @returns true if the element is covered by an overlay, false otherwise
+ */
+export declare function isElementCoveredByOverlay(element: Element, badgeX: number, badgeY: number): boolean;
+export {};
+//# sourceMappingURL=visibility-utils.d.ts.map

package/dist/components/ui-lint/visibility-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"visibility-utils.d.ts","sourceRoot":"","sources":["../../../src/components/ui-lint/visibility-utils.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,KAAK,IAAI,GAAG;IACV,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AA4BF;;;;;;;;GAQG;AACH,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,GAAG,IAAI,CA6BnE;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,yBAAyB,CACvC,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,GACb,OAAO,CAqCT"}

package/dist/consistency/highlights.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+import { Violation } from './types';
+interface ConsistencyHighlighterProps {
+    violations: Violation[];
+    selectedViolation: Violation | null;
+    lockedViolation: Violation | null;
+}
+/**
+ * Main consistency highlighter component
+ * Renders highlights via Portal to document.body
+ */
+export declare function ConsistencyHighlighter({ violations, selectedViolation, lockedViolation, }: ConsistencyHighlighterProps): React.ReactPortal | null;
+export {};
+//# sourceMappingURL=highlights.d.ts.map

package/dist/consistency/highlights.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlights.d.ts","sourceRoot":"","sources":["../../src/consistency/highlights.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAEhE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAiBzC,UAAU,2BAA2B;IACnC,UAAU,EAAE,SAAS,EAAE,CAAC;IACxB,iBAAiB,EAAE,SAAS,GAAG,IAAI,CAAC;IACpC,eAAe,EAAE,SAAS,GAAG,IAAI,CAAC;CACnC;AA+HD;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,UAAU,EACV,iBAAiB,EACjB,eAAe,GAChB,EAAE,2BAA2B,4BAkG7B"}

package/dist/consistency/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Consistency analysis module exports for uilint-react
+ */
+export type { StyleSnapshot, ElementRole, ElementSnapshot, GroupedSnapshot, ViolationCategory, ViolationSeverity, Violation, ConsistencyResult, } from './types';
+export { createSnapshot, cleanupDataElements, getElementBySnapshotId, } from './snapshot';
+export { ConsistencyHighlighter } from './highlights';
+//# sourceMappingURL=index.d.ts.map

package/dist/consistency/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/consistency/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,YAAY,EACV,aAAa,EACb,WAAW,EACX,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,SAAS,EACT,iBAAiB,GAClB,MAAM,SAAS,CAAC;AAEjB,OAAO,EACL,cAAc,EACd,mBAAmB,EACnB,sBAAsB,GACvB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC"}

package/dist/consistency/snapshot.d.ts

@@ -0,0 +1,14 @@
+import { GroupedSnapshot } from './types';
+/**
+ * Cleans up data-elements attributes from previous scans
+ */
+export declare function cleanupDataElements(): void;
+/**
+ * Creates a grouped snapshot of DOM elements for consistency analysis
+ */
+export declare function createSnapshot(root?: Element): GroupedSnapshot;
+/**
+ * Gets an element by its data-elements ID
+ */
+export declare function getElementBySnapshotId(id: string): Element | null;
+//# sourceMappingURL=snapshot.d.ts.map

package/dist/consistency/snapshot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"snapshot.d.ts","sourceRoot":"","sources":["../../src/consistency/snapshot.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAIV,eAAe,EAChB,MAAM,SAAS,CAAC;AA6BjB;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,IAAI,CAI1C;AAyND;;GAEG;AACH,wBAAgB,cAAc,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,eAAe,CA2D9D;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,CAEjE"}

package/dist/consistency/types.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Re-export consistency types from uilint-core for convenience
+ */
+export type { StyleSnapshot, ElementRole, ElementSnapshot, GroupedSnapshot, ViolationCategory, ViolationSeverity, Violation, ConsistencyResult, } from 'uilint-core';
+//# sourceMappingURL=types.d.ts.map

package/dist/consistency/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/consistency/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,YAAY,EACV,aAAa,EACb,WAAW,EACX,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,SAAS,EACT,iBAAiB,GAClB,MAAM,aAAa,CAAC"}

package/dist/devtools.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Web-component entrypoint.
+ *
+ * Importing this file registers the <uilint-devtools> custom element.
+ * The element mounts the React devtool UI into a .dev-tool-root container.
+ */
+export {};
+//# sourceMappingURL=devtools.d.ts.map

package/dist/devtools.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"devtools.d.ts","sourceRoot":"","sources":["../src/devtools.ts"],"names":[],"mappings":"AAAA;;;;;GAKG"}