elixir-data-viewer 0.1.0

package/dist/inspect.d.ts

@@ -0,0 +1,33 @@
+import type { Tree } from "@lezer/common";
+/**
+ * The semantic type of an inspected node.
+ */
+export type InspectType = "String" | "Atom" | "Alias" | "Integer" | "Float" | "Boolean" | "Nil" | "Char" | "Charlist" | "Sigil" | "Keyword" | "Pair" | "Map" | "List" | "Tuple" | "Bitstring" | "Range" | "InspectLiteral";
+/**
+ * Represents a resolved inspect target — the range to highlight and copy.
+ */
+export interface InspectTarget {
+    /** Absolute character offset — start in source code */
+    from: number;
+    /** Absolute character offset — end in source code */
+    to: number;
+    /** The text to copy when clicked */
+    copyText: string;
+    /** Whether this is a structural node that may span multiple lines */
+    isStructure: boolean;
+    /** The semantic type of the inspected node */
+    type: InspectType;
+}
+/**
+ * Resolve what should be inspected (highlighted + copyable) at a given offset.
+ *
+ * Logic:
+ * 1. Bracket tokens (`{`, `}`, `[`, `]`, `<<`, `>>`) whose parent is a
+ *    structural node → inspect the whole structure
+ * 2. Direct structural nodes (e.g. `%` resolves to `Map`) → inspect whole structure
+ * 3. Leaf values (`String`, `Atom`, `Integer`, etc.) → inspect the leaf
+ * 4. Inner content nodes (`QuotedContent`) → bubble up to parent leaf
+ * 5. `Keyword` nodes (pair keys like `name:`) → inspect the keyword
+ * 6. Otherwise → null (no inspection target)
+ */
+export declare function resolveInspectTarget(tree: Tree, code: string, offset: number): InspectTarget | null;

package/dist/parser.d.ts

@@ -0,0 +1,5 @@
+import type { Tree } from "@lezer/common";
+/**
+ * Parse an Elixir data string into a Lezer syntax tree.
+ */
+export declare function parseElixir(code: string): Tree;

package/dist/preprocess.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Pre-processing for Elixir inspect literals that would be misinterpreted
+ * by the lezer-elixir parser as comments.
+ *
+ * Elixir's `Kernel.inspect/2` renders opaque data types as `#Type<...>`,
+ * e.g. `#Reference<0.123.456.789>`, `#PID<0.100.0>`, `#Port<0.6>`.
+ * Since `#` starts a line comment in Elixir, the parser consumes
+ * everything from `#` to end-of-line as a Comment node, breaking
+ * highlighting, structure detection, and inspect.
+ *
+ * Solution: replace each inspect literal with a same-length Elixir atom
+ * (`:___...`) before parsing, so offsets remain 1:1 with the original.
+ */
+/**
+ * A detected Elixir inspect literal in the original source.
+ */
+export interface InspectLiteral {
+    /** Absolute character offset — start */
+    from: number;
+    /** Absolute character offset — end */
+    to: number;
+    /** The original text, e.g. `#Reference<0.2930644178.2773483521.184681>` */
+    originalText: string;
+}
+/**
+ * Result of pre-processing: the modified code and the list of literals found.
+ */
+export interface PreprocessResult {
+    /** Code with inspect literals replaced by same-length atoms */
+    modifiedCode: string;
+    /** All inspect literals detected, with their original positions and text */
+    inspectLiterals: InspectLiteral[];
+}
+/**
+ * Pre-process Elixir data code to replace inspect literals with same-length
+ * atom placeholders. This ensures the lezer-elixir parser doesn't treat
+ * `#Type<...>` patterns as line comments.
+ *
+ * The replacement atom is `:` followed by underscores to match the original
+ * length exactly, preserving all character offsets for highlighting and
+ * inspect resolution.
+ */
+export declare function preprocessInspectLiterals(code: string): PreprocessResult;

package/dist/renderer.d.ts

@@ -0,0 +1,408 @@
+import { SearchState } from "./search";
+import { FilterState } from "./filter";
+import { type InspectTarget, type InspectType } from "./inspect";
+/**
+ * Toolbar button visibility options.
+ * All buttons default to `true` (visible).
+ */
+export interface ToolbarOptions {
+    /** Show "Fold All" button. Default: true */
+    foldAll?: boolean;
+    /** Show "Unfold All" button. Default: true */
+    unfoldAll?: boolean;
+    /** Show "Word Wrap" toggle button. Default: true */
+    wordWrap?: boolean;
+    /** Show "Copy" button. Default: true */
+    copy?: boolean;
+    /** Show "Search" button. Default: true */
+    search?: boolean;
+    /** Show "Filter" button. Default: true */
+    filter?: boolean;
+}
+/**
+ * Event object passed to the onInspect callback when the user clicks
+ * an inspectable value (string, atom, number, structure, etc.).
+ */
+export interface InspectEvent {
+    /** The semantic type of the inspected node (e.g. "String", "Atom", "Map") */
+    type: InspectType;
+    /** The text that would be copied to clipboard */
+    copyText: string;
+    /** The full InspectTarget with offset information */
+    target: InspectTarget;
+    /** The DOM element that was clicked */
+    element: HTMLElement;
+    /** The original MouseEvent from the click */
+    mouseEvent: MouseEvent;
+    /** Call this to prevent the default copy-to-clipboard + toast behavior */
+    preventDefault(): void;
+}
+/**
+ * Configuration options for ElixirDataViewer.
+ */
+export interface ElixirDataViewerOptions {
+    /** Toolbar button visibility. All default to true. */
+    toolbar?: ToolbarOptions;
+    /**
+     * Default fold level. Regions deeper than this level are automatically
+     * folded when setContent() is called.
+     * E.g. 3 = show first 3 levels expanded, fold level 4+.
+     * 0 or undefined = no auto-folding (all expanded).
+     */
+    defaultFoldLevel?: number;
+    /** Whether word wrap is enabled by default. Default: false */
+    defaultWordWrap?: boolean;
+    /** Keys to filter out by default when setContent() is called */
+    defaultFilterKeys?: string[];
+}
+/**
+ * ElixirDataViewer — A read-only Elixir data viewer with syntax highlighting,
+ * line numbers, code folding, search, and a floating toolbar.
+ */
+export declare class ElixirDataViewer {
+    private container;
+    private innerEl;
+    private scrollEl;
+    private toolbarEl;
+    private wrapBtn;
+    private copyBtn;
+    private searchBtn;
+    private filterBtn;
+    private copyResetTimer;
+    private code;
+    private lines;
+    private lineOffsets;
+    private tokens;
+    private tree;
+    private foldState;
+    private filterState;
+    private defaultFoldLevel;
+    private defaultFilterKeys;
+    private searchState;
+    private onRenderCallback;
+    private wordWrap;
+    private toolbarConfig;
+    private searchBarEl;
+    private searchInputEl;
+    private searchInfoEl;
+    private searchCaseBtn;
+    private searchVisible;
+    private filterBarEl;
+    private filterInputEl;
+    private filterTagsEl;
+    private filterInfoEl;
+    private filterDropdownEl;
+    private filterCopyBtn;
+    private filterCopyResetTimer;
+    private filterVisible;
+    private filterDropdownIndex;
+    private filterDropdownItems;
+    private currentInspect;
+    private inspectCallback;
+    private inspectLiterals;
+    constructor(container: HTMLElement, options?: ElixirDataViewerOptions);
+    /**
+     * Build the floating toolbar DOM and append to the container.
+     */
+    private buildToolbar;
+    /**
+     * Build the search bar DOM (hidden by default).
+     */
+    private buildSearchBar;
+    /**
+     * Handle keyboard shortcuts on the container.
+     */
+    private handleKeyDown;
+    /**
+     * Handle keyboard events inside the search input.
+     */
+    private handleSearchKeyDown;
+    /**
+     * Create a toolbar button element.
+     */
+    private createToolbarButton;
+    /**
+     * Toggle word wrap mode for long lines.
+     */
+    toggleWordWrap(): void;
+    /**
+     * Get current word wrap state.
+     */
+    isWordWrap(): boolean;
+    /**
+     * Fold all foldable regions.
+     */
+    foldAll(): void;
+    /**
+     * Unfold all folded regions.
+     */
+    unfoldAll(): void;
+    /**
+     * Fold all regions deeper than the given level.
+     * Level 1 = top-level structures. foldToLevel(3) expands levels 1–3, folds 4+.
+     * foldToLevel(0) unfolds all.
+     */
+    foldToLevel(level: number): void;
+    /**
+     * Get the raw Elixir data content.
+     */
+    getContent(): string;
+    /**
+     * Copy the raw Elixir data content to the clipboard.
+     * Shows a "✓" feedback on the copy button for 2 seconds.
+     * Returns a promise that resolves when copying is complete.
+     */
+    copyContent(): Promise<void>;
+    /**
+     * Show a brief "copied" feedback on the copy button.
+     */
+    private showCopyFeedback;
+    /**
+     * Open the search bar and focus the input.
+     */
+    openSearch(): void;
+    /**
+     * Close the search bar and clear highlights.
+     */
+    closeSearch(): void;
+    /**
+     * Toggle search bar visibility.
+     */
+    toggleSearch(): void;
+    /**
+     * Navigate to the next search match.
+     */
+    searchNext(): void;
+    /**
+     * Navigate to the previous search match.
+     */
+    searchPrev(): void;
+    /**
+     * Get the search state (for programmatic access / testing).
+     */
+    getSearchState(): SearchState;
+    /**
+     * Programmatically search for a keyword.
+     * Highlights all matches and scrolls to the first one, but does NOT
+     * open/show the search bar UI. The search input is always kept in sync.
+     *
+     * @param query - The keyword to search for. Pass an empty string to clear.
+     * @param options - Optional settings. `caseSensitive` defaults to the
+     *                  current case-sensitivity state.
+     */
+    search(query: string, options?: {
+        caseSensitive?: boolean;
+    }): void;
+    /**
+     * Clear the current search state and remove all highlights.
+     * The search input is cleared but the search bar visibility is unchanged.
+     */
+    clearSearch(): void;
+    /**
+     * Handle input in the search field.
+     */
+    private onSearchInput;
+    /**
+     * Toggle case sensitivity and re-search.
+     */
+    private toggleCaseSensitive;
+    /**
+     * Update the search info label (e.g. "3 of 12" or "No results").
+     */
+    private updateSearchInfo;
+    /**
+     * Ensure the line containing a match is visible (unfold if needed)
+     * and scroll to it.
+     */
+    private revealAndScrollToMatch;
+    /**
+     * After render, scroll to the current search match element.
+     */
+    private scrollToCurrentMatch;
+    /**
+     * Open the filter bar and focus the input.
+     */
+    openFilter(): void;
+    /**
+     * Close the filter bar (filters remain active).
+     */
+    closeFilter(): void;
+    /**
+     * Toggle filter bar visibility.
+     */
+    toggleFilter(): void;
+    /**
+     * Set keys to filter out (replaces existing filters). Re-renders.
+     */
+    setFilterKeys(keys: string[]): void;
+    /**
+     * Add a single key to the filter. Re-renders.
+     */
+    addFilterKey(key: string): void;
+    /**
+     * Remove a single key from the filter. Re-renders.
+     */
+    removeFilterKey(key: string): void;
+    /**
+     * Get currently filtered keys.
+     */
+    getFilterKeys(): string[];
+    /**
+     * Get all keys detected in the current content.
+     */
+    getAvailableKeys(): string[];
+    /**
+     * Clear all key filters. Re-renders.
+     */
+    clearFilter(): void;
+    /**
+     * Get the filter state (for programmatic access / testing).
+     */
+    getFilterState(): FilterState;
+    /**
+     * Get the content with filtered lines removed.
+     * Returns lines that are not hidden by the current key filter.
+     */
+    getFilteredContent(): string;
+    /**
+     * Copy the filtered content (lines with filtered keys removed) to clipboard.
+     * Shows "✓" feedback on the filter copy button for 2 seconds.
+     */
+    copyFilteredContent(): Promise<void>;
+    /**
+     * Show a brief "copied" feedback on the filter copy button.
+     */
+    private showFilterCopyFeedback;
+    /**
+     * Build the filter bar DOM (hidden by default).
+     */
+    private buildFilterBar;
+    /**
+     * Handle input in the filter field — show autocomplete dropdown.
+     */
+    private onFilterInput;
+    /**
+     * Handle keyboard events in the filter input.
+     */
+    private handleFilterKeyDown;
+    /**
+     * Update the visual highlight on the dropdown items.
+     */
+    private updateFilterDropdownHighlight;
+    /**
+     * Show the autocomplete dropdown with suggestions.
+     */
+    private showFilterDropdown;
+    /**
+     * Hide the autocomplete dropdown.
+     */
+    private hideFilterDropdown;
+    /**
+     * Rebuild the filter tag chips in the filter bar.
+     */
+    private updateFilterTags;
+    /**
+     * Update the filter info label.
+     */
+    private updateFilterInfo;
+    /**
+     * Update filter toolbar button active state.
+     */
+    private updateFilterBtnState;
+    /**
+     * Set the Elixir data content and render it.
+     */
+    setContent(code: string): void;
+    /**
+     * Set a callback to be called after each render (for testing/animation).
+     */
+    onRender(callback: () => void): void;
+    /**
+     * Post-process highlight tokens: replace CSS classes for spans that fall
+     * within pre-processed inspect literal ranges (e.g. #Reference<...>)
+     * so they render with the inspect-literal style instead of atom style.
+     */
+    private fixInspectLiteralTokenClasses;
+    /**
+     * Check if an offset falls within a pre-processed inspect literal and
+     * return the literal if so, or null.
+     */
+    private findInspectLiteral;
+    /**
+     * Build line offset table for mapping offsets to line-relative positions.
+     */
+    private buildLineOffsets;
+    /**
+     * Full re-render of the viewer.
+     */
+    private render;
+    /**
+     * Create a single line element with gutter and code content.
+     */
+    private createLineElement;
+    /**
+     * Render a normal highlighted line, with search match highlighting.
+     */
+    private renderHighlightedLine;
+    /**
+     * Render tokenized text without search highlights.
+     */
+    private renderTokenizedText;
+    /**
+     * Render a line with both syntax tokens and search highlight overlays.
+     * Search highlights take precedence visually (wrapping around tokens).
+     */
+    private renderWithSearchHighlights;
+    /**
+     * Render a folded line: shows the opening line content followed by … and closing bracket.
+     */
+    private renderFoldedLine;
+    /**
+     * Handle mouseover on spans to resolve inspect target and apply highlight.
+     */
+    private handleInspectHover;
+    /**
+     * Handle mouseout — clear highlight when leaving the scroll area.
+     */
+    private handleInspectOut;
+    /**
+     * Register a callback invoked when the user clicks an inspectable value.
+     * The callback receives an InspectEvent with type, copyText, DOM element,
+     * and a preventDefault() method to suppress the default copy behavior.
+     *
+     * Pass `null` to unregister the callback and restore default behavior.
+     */
+    onInspect(callback: ((event: InspectEvent) => void) | null): void;
+    /**
+     * Handle click on an inspected token — copy to clipboard (unless prevented by callback).
+     */
+    private handleInspectClick;
+    /**
+     * Apply highlight CSS classes to all spans within the inspect target range.
+     */
+    private applyInspectHighlight;
+    /**
+     * Add a CSS class to all spans whose data-from/data-to overlap the given range.
+     */
+    private highlightSpansInRange;
+    /**
+     * Clear all inspect highlight classes.
+     */
+    private clearInspectHighlight;
+    /**
+     * Flash animation on currently highlighted elements.
+     */
+    private flashInspectHighlight;
+    /**
+     * Show a small floating "Copied!" toast near the mouse click position.
+     */
+    private showInspectToast;
+    /**
+     * Copy text to clipboard with fallback.
+     */
+    private copyToClipboard;
+    /**
+     * Convert an absolute character offset to a 0-indexed line number.
+     */
+    private offsetToLine;
+}

package/dist/search.d.ts

@@ -0,0 +1,82 @@
+/**
+ * Search functionality for ElixirDataViewer.
+ * Manages text search, match tracking, and navigation.
+ */
+/**
+ * Represents a single search match in the code.
+ */
+export interface SearchMatch {
+    /** 0-indexed line number */
+    line: number;
+    /** Column offset within the line (0-based) */
+    from: number;
+    /** Column end offset within the line (0-based, exclusive) */
+    to: number;
+}
+/**
+ * Manages search state: query, matches, current index.
+ */
+export declare class SearchState {
+    private query;
+    private caseSensitive;
+    private matches;
+    private currentIndex;
+    /**
+     * Perform a search across all lines.
+     * Returns true if matches changed.
+     */
+    search(lines: string[], query: string, caseSensitive: boolean): boolean;
+    /**
+     * Clear search state.
+     */
+    clear(): void;
+    /**
+     * Get the current search query.
+     */
+    getQuery(): string;
+    /**
+     * Get whether case-sensitive mode is active.
+     */
+    isCaseSensitive(): boolean;
+    /**
+     * Get all matches.
+     */
+    getMatches(): readonly SearchMatch[];
+    /**
+     * Get matches for a specific line.
+     */
+    getLineMatches(lineIdx: number): SearchMatch[];
+    /**
+     * Get the current match index (0-based), or -1 if no matches.
+     */
+    getCurrentIndex(): number;
+    /**
+     * Get the current match, or undefined if none.
+     */
+    getCurrentMatch(): SearchMatch | undefined;
+    /**
+     * Get total number of matches.
+     */
+    getMatchCount(): number;
+    /**
+     * Move to the next match. Wraps around.
+     */
+    next(): SearchMatch | undefined;
+    /**
+     * Move to the previous match. Wraps around.
+     */
+    prev(): SearchMatch | undefined;
+    /**
+     * Set the current match to the nearest one at or after the given line.
+     * Used when opening search to start from the visible area.
+     */
+    setCurrentToLine(lineIdx: number): void;
+    /**
+     * Check if a match at the given line/from is the current match.
+     */
+    isCurrentMatch(lineIdx: number, from: number): boolean;
+    /**
+     * Has active search query.
+     */
+    isActive(): boolean;
+}

package/dist/standalone.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Standalone entry point for Phoenix / vendor usage.
+ *
+ * Produces an ESM module with a default export of ElixirDataViewer,
+ * plus all named exports from the library.  CSS is injected
+ * automatically via the vite-plugin-css-injected-by-js plugin.
+ *
+ * Usage in Phoenix app.js:
+ *   import ElixirDataViewer from "../vendor/elixir-data-viewer"
+ */
+import "./styles/theme.css";
+export * from "./index";
+export { ElixirDataViewer as default } from "./renderer";

package/dist/state.d.ts

@@ -0,0 +1,61 @@
+import type { FoldRegion } from "./fold";
+/**
+ * Manages the fold state for the viewer — which lines are folded.
+ */
+export declare class FoldState {
+    /** Set of startLine indices that are currently folded */
+    private foldedLines;
+    /** Map from startLine to FoldRegion */
+    private regionMap;
+    /** All fold regions sorted by startLine */
+    private regions;
+    /**
+     * Update the fold regions (called when content changes).
+     * Clears all fold state.
+     */
+    setRegions(regions: FoldRegion[], regionMap: Map<number, FoldRegion>): void;
+    /**
+     * Toggle a fold at the given startLine.
+     */
+    toggle(startLine: number): void;
+    /**
+     * Check if a given startLine is folded.
+     */
+    isFolded(startLine: number): boolean;
+    /**
+     * Get the FoldRegion for a startLine, if any.
+     */
+    getRegion(startLine: number): FoldRegion | undefined;
+    /**
+     * Check if a given line is hidden due to being inside a folded region.
+     * Returns the folded parent region if hidden, or undefined.
+     */
+    isLineHidden(line: number): FoldRegion | undefined;
+    /**
+     * Check if a line has a fold indicator (is the start of a foldable region).
+     */
+    isFoldable(line: number): boolean;
+    /**
+     * Get all regions.
+     */
+    getRegions(): FoldRegion[];
+    /**
+     * Fold all regions.
+     */
+    foldAll(): void;
+    /**
+     * Unfold all regions.
+     */
+    unfoldAll(): void;
+    /**
+     * Fold all regions whose nesting depth exceeds maxLevel.
+     * Level 1 = outermost structures. foldToLevel(3) shows levels 1–3 expanded,
+     * level 4+ folded. foldToLevel(0) or negative values unfold all.
+     */
+    foldToLevel(maxLevel: number): void;
+    /**
+     * Reveal a specific line by unfolding any region that hides it.
+     * This ensures the line becomes visible in the rendered output.
+     */
+    revealLine(line: number): void;
+}

package/dist/style.css

@@ -0,0 +1 @@
+.edv-container{position:relative;background:#1a1b26;color:#c0caf5;font-family:Cascadia Code,Fira Code,Consolas,Courier New,monospace;font-size:14px;line-height:20px;height:100%;overflow:hidden;display:flex;flex-direction:column;tab-size:2;-moz-tab-size:2}.edv-inner{flex:1;min-height:0;overflow:auto}.edv-scroll{min-width:fit-content;padding-bottom:20px}.edv-line{display:flex;min-height:20px}.edv-line:hover{background:#292e42;outline:1px dashed #3b4261}.edv-gutter{display:flex;align-items:center;flex-shrink:0;padding-right:8px;padding-left:4px;user-select:none;-webkit-user-select:none;gap:2px}.edv-line-number{color:#3b4261;text-align:right;min-width:2.5em;padding-right:4px;font-variant-numeric:tabular-nums}.edv-line:hover .edv-line-number{color:#737aa2}.edv-fold-indicator{width:16px;height:20px;display:inline-flex;align-items:center;justify-content:center;font-size:10px;color:transparent;flex-shrink:0}.edv-fold-indicator.edv-foldable{cursor:pointer;color:#565f89;opacity:0;transition:opacity .15s ease}.edv-line:hover .edv-fold-indicator.edv-foldable,.edv-fold-indicator.edv-foldable[data-folded=true]{opacity:1}.edv-code{flex:1;white-space:pre;padding-left:8px;min-height:20px;border-left:1px solid #292e42}.edv-word-wrap .edv-scroll{min-width:unset}.edv-word-wrap .edv-code{white-space:pre-wrap;word-break:break-all;overflow-wrap:anywhere}.edv-word-wrap .edv-line{align-items:flex-start}.edv-fold-ellipsis{display:inline-block;background:#292e42;color:#7aa2f7;padding:0 5px;margin:0 2px;border-radius:3px;font-size:11px;cursor:pointer;border:1px solid #3b4261;line-height:16px;vertical-align:middle;white-space:nowrap}.edv-fold-ellipsis:hover{background:#33394e;color:#7aa2f7;border-color:#7aa2f7}.tok-atom{color:#2ac3de}.tok-namespace{color:#7dcfff}.tok-bool{color:#ff9e64}.tok-null{color:#2ac3de}.tok-number{color:#ff9e64}.tok-character{color:#9ece6a}.tok-variableName{color:#c0caf5}.tok-function,.tok-definition{color:#7aa2f7}.tok-special{color:#f7768e}.tok-string{color:#9ece6a}.tok-escape,.tok-keyword{color:#bb9af7}.tok-operator{color:#89ddff}.tok-comment{color:#565f89;font-style:italic}.tok-inspect-literal{color:#bb9af7}.tok-underscore{color:#565f89;font-style:italic}.tok-punctuation{color:#a9b1d6}.tok-separator,.tok-angleBracket{color:#89ddff}.tok-attributeName{color:#7dcfff}.tok-docString{color:#e0af68}.edv-inner::-webkit-scrollbar{width:10px;height:10px}.edv-inner::-webkit-scrollbar-track{background:#1a1b26}.edv-inner::-webkit-scrollbar-thumb{background:#3b4261;border-radius:5px}.edv-inner::-webkit-scrollbar-thumb:hover{background:#565f89}.edv-inner::-webkit-scrollbar-corner{background:#1a1b26}.edv-toolbar{position:absolute;top:4px;right:14px;z-index:10;display:flex;gap:2px;background:#1a1b26;border:1px solid #3b4261;border-radius:4px;padding:2px;opacity:0;transition:opacity .2s ease;pointer-events:none}.edv-container:hover .edv-toolbar{opacity:1;pointer-events:auto}.edv-toolbar-btn{background:transparent;border:1px solid transparent;color:#a9b1d6;width:26px;height:24px;border-radius:3px;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;font-family:inherit;padding:0;line-height:1}.edv-toolbar-btn:hover{background:#292e42;border-color:#565f89;color:#c0caf5}.edv-toolbar-btn.edv-toolbar-btn--active{background:#292e42;border-color:#7aa2f7;color:#7aa2f7}.edv-search-bar{flex-shrink:0;z-index:20;display:none;align-items:center;gap:6px;padding:4px 8px;background:#1a1b26;border-bottom:1px solid #3b4261;font-size:13px}.edv-search-bar--visible{display:flex}.edv-search-input-wrapper{display:flex;align-items:center;background:#1a1b26;border:1px solid #3b4261;border-radius:3px;overflow:hidden}.edv-search-input-wrapper:focus-within{border-color:#7aa2f7}.edv-search-input{background:transparent;border:none;outline:none;color:#c0caf5;font-family:inherit;font-size:13px;padding:3px 6px;width:180px}.edv-search-input::placeholder{color:#565f89}.edv-search-case-btn{background:transparent;border:1px solid transparent;color:#565f89;cursor:pointer;font-size:12px;font-family:inherit;padding:2px 6px;border-radius:2px;margin-right:2px;line-height:1}.edv-search-case-btn:hover{color:#c0caf5;background:#292e42;border-color:#565f89}.edv-search-case-btn--active{color:#7aa2f7;background:#292e42;border-color:#7aa2f7}.edv-search-case-btn--active:hover{border-color:#c0caf5}.edv-search-info{color:#c0caf5;font-size:12px;min-width:70px;text-align:center;white-space:nowrap}.edv-search-info--no-results{color:#f7768e}.edv-search-nav-btn{background:transparent;border:1px solid transparent;color:#a9b1d6;cursor:pointer;width:24px;height:24px;border-radius:3px;font-size:14px;display:flex;align-items:center;justify-content:center;font-family:inherit;padding:0;line-height:1}.edv-search-nav-btn:hover{background:#292e42;border-color:#565f89}.edv-search-match{background:#e0af6866;border-radius:2px;color:inherit}.edv-search-current{background:#e0af68cc;border-radius:2px;color:#1a1b26}.edv-line--has-match .edv-line-number{color:#e0af68}.edv-code [data-from]{cursor:pointer}.edv-inspect-token{background:#7aa2f733;border-radius:2px;outline:1px solid rgba(122,162,247,.4)}.edv-line.edv-inspect-line{background:#7aa2f70f}.edv-inspect-bracket{background:#7aa2f733;border-radius:2px;outline:1px solid rgba(122,162,247,.35)}@keyframes edv-inspect-flash{0%{background-color:#7aa2f773}to{background-color:#7aa2f733}}.edv-inspect-copied{animation:edv-inspect-flash .4s ease-out}.edv-copied-toast{position:fixed;background:#292e42;color:#7aa2f7;border:1px solid #7aa2f7;border-radius:4px;padding:2px 8px;font-size:12px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;pointer-events:none;z-index:100;animation:edv-toast-fade 1.2s ease-out forwards}@keyframes edv-toast-fade{0%{opacity:1;transform:translateY(0)}70%{opacity:1}to{opacity:0;transform:translateY(-10px)}}.edv-filter-bar{flex-shrink:0;z-index:20;display:none;align-items:center;gap:6px;padding:4px 8px;background:#1a1b26;border-bottom:1px solid #3b4261;font-size:13px;flex-wrap:wrap}.edv-filter-bar--visible{display:flex}.edv-filter-input-wrapper{position:relative;display:flex;align-items:center;background:#1a1b26;border:1px solid #3b4261;border-radius:3px;overflow:visible}.edv-filter-input-wrapper:focus-within{border-color:#7aa2f7}.edv-filter-input{background:transparent;border:none;outline:none;color:#c0caf5;font-family:inherit;font-size:13px;padding:3px 6px;width:140px}.edv-filter-input::placeholder{color:#565f89}.edv-filter-tags{display:flex;gap:4px;flex-wrap:wrap;align-items:center}.edv-filter-tag{display:inline-flex;align-items:center;gap:2px;background:#292e42;border:1px solid #3b4261;border-radius:3px;padding:1px 4px 1px 6px;font-size:12px;color:#7aa2f7;white-space:nowrap;line-height:18px}.edv-filter-tag-label{color:#7aa2f7}.edv-filter-tag-remove{background:transparent;border:none;color:#565f89;cursor:pointer;font-size:10px;padding:0 2px;line-height:1;display:flex;align-items:center;justify-content:center;border-radius:2px}.edv-filter-tag-remove:hover{color:#f7768e;background:#f7768e26}.edv-filter-info{color:#c0caf5;font-size:12px;white-space:nowrap;margin-left:auto}.edv-filter-dropdown{display:none;position:absolute;top:100%;left:-1px;right:-1px;background:#1a1b26;border:1px solid #3b4261;border-top:none;border-radius:0 0 3px 3px;max-height:160px;overflow-y:auto;z-index:30}.edv-filter-dropdown--visible{display:block}.edv-filter-dropdown-item{padding:4px 8px;cursor:pointer;font-size:13px;color:#c0caf5;white-space:nowrap}.edv-filter-dropdown-item:hover,.edv-filter-dropdown-item--active{background:#292e42;color:#7aa2f7}.edv-filter-dropdown::-webkit-scrollbar{width:6px}.edv-filter-dropdown::-webkit-scrollbar-track{background:#1a1b26}.edv-filter-dropdown::-webkit-scrollbar-thumb{background:#3b4261;border-radius:3px}