@industry-theme/file-city-panel 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Your Name
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,265 @@
+# File City Panel Extension
+
+A 3D code visualization panel extension for `@principal-ade/panel-framework-core` that displays repository structure using the File City metaphor. Files are represented as buildings and directories as city blocks, providing an intuitive and visually engaging way to explore codebases.
+
+## Features
+
+- **3D Visualization**: Interactive 3D rendering of repository structure
+- **File City Metaphor**: Files as buildings, directories as districts
+- **Interactive Exploration**: Hover for details, click to open files
+- **Highlight Layers**: Support for multiple highlight layers (git changes, file types, etc.)
+- **Responsive Design**: Adapts to different panel sizes
+- **Theme Integration**: Full support for industry theme system
+- **Performance**: Efficient rendering for large codebases
+
+## Installation
+
+```bash
+npm install @principal-ade/industry-themed-file-city-panel
+# or
+bun install @principal-ade/industry-themed-file-city-panel
+```
+
+## Usage
+
+The panel will be automatically discovered by the host application when installed. No additional configuration is required.
+
+### Panel ID
+
+```
+principal-ade.file-city-panel
+```
+
+### Required Data Slices
+
+- `fileTree`: File tree structure of the repository
+
+## Development
+
+### Setup
+
+```bash
+# Clone the repository
+git clone https://github.com/principal-ade/industry-themed-file-city-panel.git
+cd industry-themed-file-city-panel
+
+# Install dependencies
+bun install
+```
+
+### Development Workflow
+
+```bash
+# Start Storybook for interactive development
+bun run storybook
+
+# Build for production
+bun run build
+
+# Type checking
+bun run typecheck
+
+# Linting
+bun run lint
+bun run lint:fix
+
+# Format code
+bun run format
+bun run format:check
+```
+
+### Project Structure
+
+```
+industry-themed-file-city-panel/
+├── src/
+│   ├── panels/
+│   │   ├── CodeCityPanel.tsx          # Main panel component
+│   │   └── CodeCityPanel.stories.tsx  # Storybook stories
+│   ├── types/
+│   │   └── index.ts                   # TypeScript type definitions
+│   ├── mocks/
+│   │   └── panelContext.tsx           # Mock providers for Storybook
+│   └── index.tsx                      # Main entry - exports panels array
+├── .storybook/                        # Storybook configuration
+├── dist/                              # Built output (generated)
+├── package.json                       # Package configuration
+├── tsconfig.json                      # TypeScript config
+├── vite.config.ts                     # Build configuration
+└── README.md                          # This file
+```
+
+## Component API
+
+### CodeCityPanel Props
+
+The panel receives standard `PanelComponentProps`:
+
+```typescript
+interface PanelComponentProps {
+  context: PanelContextValue;  // Access to repository data
+  actions: PanelActions;        // Actions for host interaction
+  events: PanelEventEmitter;    // Event system
+}
+```
+
+### Context Usage
+
+```typescript
+// Access file tree data
+const fileTreeSlice = context.getSlice('fileTree');
+
+// Check repository information
+const repoPath = context.currentScope.repository?.path;
+const repoName = context.currentScope.repository?.name;
+
+// Refresh data
+await context.refresh('repository', 'fileTree');
+```
+
+### Available Actions
+
+```typescript
+// Open a file in the editor
+actions.openFile?.('src/index.ts');
+
+// Navigate to another panel
+actions.navigateToPanel?.('panel-id');
+```
+
+## Features in Detail
+
+### City Visualization
+
+The panel uses the `@principal-ai/file-city-react` library to render an interactive 3D code city:
+
+- **Buildings**: Each file is represented as a building
+  - Height: Based on file size or line count
+  - Color: Based on file type or highlight layers
+  - Position: Organized within parent directory districts
+
+- **Districts**: Directories are represented as city blocks
+  - Contains buildings (files) and sub-districts (subdirectories)
+  - Labeled with directory name
+  - Interactive hover shows file count
+
+### Highlight Layers
+
+The panel supports multiple highlight layers that can be toggled on/off:
+
+- **File Type Layers**: Automatically generated based on file extensions
+- **Git Layers**: Can highlight changed files, staged files, etc.
+- **Custom Layers**: Support for additional custom highlight layers
+
+### Hover Information
+
+When hovering over elements in the city:
+- File name and full path displayed in footer
+- Directory file count shown
+- Building/district highlighted
+
+### Responsive Design
+
+The panel automatically adapts to different sizes:
+- Toolbar collapses on smaller screens
+- Stats badges adjust layout
+- City view scales appropriately
+
+## Building and Publishing
+
+### Build
+
+```bash
+bun run build
+```
+
+This creates:
+- `dist/panels.bundle.js` - Main bundle
+- `dist/index.d.ts` - TypeScript declarations
+- Source maps for debugging
+
+### Local Testing
+
+```bash
+# In this directory
+bun run build
+bun link
+
+# In host application
+bun link @principal-ade/industry-themed-file-city-panel
+```
+
+### Publishing
+
+```bash
+# Ensure everything is built
+bun run build
+
+# Publish to NPM
+npm publish --access public
+```
+
+## Dependencies
+
+### Peer Dependencies
+
+- `react` >= 19.0.0
+- `react-dom` >= 19.0.0
+
+### Main Dependencies
+
+- `@principal-ai/file-city-react` - Code city visualization library
+- `@principal-ade/industry-theme` - Theme system
+- `@principal-ade/panel-framework-core` - Panel framework
+- `lucide-react` - Icon library
+
+## Troubleshooting
+
+### Panel Not Loading
+
+Ensure:
+1. Panel is installed in the host application
+2. Panel ID matches registration: `principal-ade.file-city-panel`
+3. Required data slice `fileTree` is available
+
+### Build Errors
+
+```bash
+# Clean and rebuild
+bun run clean
+bun run build
+```
+
+### Type Errors
+
+```bash
+# Run type checking
+bun run typecheck
+```
+
+## Contributing
+
+Contributions are welcome! Please:
+
+1. Fork the repository
+2. Create a feature branch
+3. Make your changes
+4. Add tests if applicable
+5. Run linting and type checking
+6. Submit a pull request
+
+## License
+
+MIT © Principal AI
+
+## Support
+
+For issues and questions:
+- [GitHub Issues](https://github.com/principal-ade/industry-themed-file-city-panel/issues)
+- [Documentation](https://github.com/principal-ade/panel-framework)
+
+## Related Projects
+
+- [@principal-ade/panel-framework-core](https://github.com/principal-ade/panel-framework-core)
+- [@principal-ai/file-city-react](https://github.com/principal-ai/file-city-react)
+- [@principal-ade/industry-theme](https://github.com/principal-ade/industry-theme)

package/dist/index.d.ts

@@ -0,0 +1,30 @@
+import type { PanelDefinition } from './types';
+/**
+ * Export array of panel definitions.
+ * This is the required export for panel extensions.
+ */
+export declare const panels: PanelDefinition[];
+/**
+ * Optional: Called once when the entire package is loaded.
+ * Use this for package-level initialization.
+ */
+export declare const onPackageLoad: () => Promise<void>;
+/**
+ * Optional: Called once when the package is unloaded.
+ * Use this for package-level cleanup.
+ */
+export declare const onPackageUnload: () => Promise<void>;
+/**
+ * Export tools for server-safe imports.
+ * Use '@industry-theme/file-city-panel/tools' to import without React dependencies.
+ */
+export { codeCityPanelTools, codeCityPanelToolsMetadata, focusBuildingTool, selectDistrictTool, resetViewTool, } from './tools';
+/**
+ * Export types for host applications to create the fileCityColorModes slice.
+ */
+export type { FileCityColorModesSliceData, QualitySliceData, ColorMode, ColorModeConfig, FileMetricData, HighlightLayer, } from './types';
+/**
+ * Export color mode constants for host applications.
+ */
+export { COLOR_MODES, DEFAULT_COLOR_MODES, QUALITY_COLOR_MODES, } from './panels/utils/qualityLayers';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAqB,MAAM,SAAS,CAAC;AAGlE;;;GAGG;AACH,eAAO,MAAM,MAAM,EAAE,eAAe,EAwCnC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa,qBAGzB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,eAAe,qBAG3B,CAAC;AAEF;;;GAGG;AACH,OAAO,EACL,kBAAkB,EAClB,0BAA0B,EAC1B,iBAAiB,EACjB,kBAAkB,EAClB,aAAa,GACd,MAAM,SAAS,CAAC;AAEjB;;GAEG;AACH,YAAY,EACV,2BAA2B,EAC3B,gBAAgB,EAChB,SAAS,EACT,eAAe,EACf,cAAc,EACd,cAAc,GACf,MAAM,SAAS,CAAC;AAEjB;;GAEG;AACH,OAAO,EACL,WAAW,EACX,mBAAmB,EACnB,mBAAmB,GACpB,MAAM,8BAA8B,CAAC"}

package/dist/mocks/panelContext.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import type { PanelContextValue, PanelActions, PanelEventEmitter } from '../types';
+/**
+ * Mock Panel Context for Storybook
+ */
+export declare const createMockContext: (overrides?: Partial<PanelContextValue>) => PanelContextValue;
+/**
+ * Mock Panel Actions for Storybook
+ */
+export declare const createMockActions: (overrides?: Partial<PanelActions>) => PanelActions;
+/**
+ * Mock Event Emitter for Storybook
+ */
+export declare const createMockEvents: () => PanelEventEmitter;
+/**
+ * Mock Panel Props Provider
+ * Wraps components with mock context for Storybook
+ */
+interface MockPanelProviderProps {
+    children: React.ReactElement;
+    repository?: {
+        path: string;
+        name: string;
+    } | null;
+    slices?: Record<string, {
+        data: unknown;
+        loading: boolean;
+        error: Error | null;
+    }>;
+    contextOverrides?: Partial<PanelContextValue>;
+    actionsOverrides?: Partial<PanelActions>;
+}
+export declare const MockPanelProvider: React.FC<MockPanelProviderProps>;
+export {};
+//# sourceMappingURL=panelContext.d.ts.map

package/dist/mocks/panelContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panelContext.d.ts","sourceRoot":"","sources":["../../src/mocks/panelContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EACV,iBAAiB,EACjB,YAAY,EACZ,iBAAiB,EAIlB,MAAM,UAAU,CAAC;AA+BlB;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAC5B,YAAY,OAAO,CAAC,iBAAiB,CAAC,KACrC,iBAiHF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAC5B,YAAY,OAAO,CAAC,YAAY,CAAC,KAChC,YAkBD,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,gBAAgB,QAAO,iBAwCnC,CAAC;AAEF;;;GAGG;AACH,UAAU,sBAAsB;IAC9B,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B,UAAU,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,IAAI,EAAE,OAAO,CAAC;QAAC,OAAO,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAA;KAAE,CAAC,CAAC;IAClF,gBAAgB,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAC9C,gBAAgB,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;CAC1C;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAyD9D,CAAC"}

package/dist/panels/CodeCityPanel.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import type { PanelComponentProps } from '../types';
+/**
+ * Git status data - categorized file paths
+ */
+export interface GitStatus {
+    staged: string[];
+    unstaged: string[];
+    untracked: string[];
+    deleted: string[];
+}
+/**
+ * CodeCityPanel - A file visualization panel using the File City map.
+ *
+ * This panel shows:
+ * - 3D visualization of repository structure
+ * - File and directory hierarchy as a city metaphor
+ * - Interactive hover and click functionality
+ * - Highlight layers for different file types
+ *
+ * Note: This component expects to be rendered within a ThemeProvider from the host.
+ */
+export declare const CodeCityPanel: React.FC<PanelComponentProps>;
+/**
+ * Preview component for panel selection
+ */
+export declare const CodeCityPanelPreview: React.FC;
+//# sourceMappingURL=CodeCityPanel.d.ts.map

package/dist/panels/CodeCityPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeCityPanel.d.ts","sourceRoot":"","sources":["../../src/panels/CodeCityPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAuBjF,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAYpD;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,OAAO,EAAE,MAAM,EAAE,CAAC;CACnB;AA+rCD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAEvD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EA4BxC,CAAC"}

package/dist/panels/CodeCityPanel.stories.d.ts

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { CodeCityPanel } from './CodeCityPanel';
+/**
+ * CodeCityPanel provides a 3D visualization of repository structure
+ * using the Code City metaphor. Files are represented as buildings
+ * and directories as city blocks.
+ */
+declare const meta: Meta<typeof CodeCityPanel>;
+export default meta;
+type Story = StoryObj<typeof CodeCityPanel>;
+/**
+ * Default story showing the panel with a repository loaded
+ */
+export declare const Default: Story;
+/**
+ * Loading state story
+ */
+export declare const Loading: Story;
+/**
+ * No repository loaded story
+ */
+export declare const NoRepository: Story;
+/**
+ * Large repository story
+ */
+export declare const LargeRepository: Story;
+/**
+ * With Git Changes - demonstrates git status highlighting
+ */
+export declare const WithGitChanges: Story;
+/**
+ * With Test Coverage - demonstrates coverage color mode
+ * Use the dropdown to select "Test Coverage" to see files colored by coverage %
+ */
+export declare const WithTestCoverage: Story;
+/**
+ * With Linting Issues - demonstrates ESLint color mode
+ * Use the dropdown to select "Linting" to see files colored by lint score
+ */
+export declare const WithLintingIssues: Story;
+/**
+ * With All Quality Metrics - demonstrates all available quality data
+ * Use the dropdown to switch between different quality visualizations
+ */
+export declare const WithAllQualityMetrics: Story;
+//# sourceMappingURL=CodeCityPanel.stories.d.ts.map

package/dist/panels/CodeCityPanel.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeCityPanel.stories.d.ts","sourceRoot":"","sources":["../../src/panels/CodeCityPanel.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGhD;;;;GAIG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,aAAa,CAoBpC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,aAAa,CAAC,CAAC;AAE5C;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KA6BrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KAkBrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,KAwC7B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,KAyC5B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAiD9B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,KA+C/B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,qBAAqB,EAAE,KA0FnC,CAAC"}

package/dist/panels/components/Legend.d.ts

@@ -0,0 +1,53 @@
+import React from 'react';
+import type { ColorMode } from '../utils/qualityLayers';
+export interface LegendFileType {
+    id: string;
+    name: string;
+    fillColor: string;
+    borderColor?: string;
+    count: number;
+    enabled: boolean;
+}
+export interface LegendGitStatus {
+    id: string;
+    name: string;
+    color: string;
+    count: number;
+    enabled: boolean;
+}
+export interface LegendAgentLayer {
+    id: string;
+    name: string;
+    color: string;
+    count: number;
+    enabled: boolean;
+}
+export interface LegendQualityMetric {
+    id: string;
+    name: string;
+    color: string;
+    count: number;
+    enabled: boolean;
+}
+interface LegendProps {
+    fileTypes: LegendFileType[];
+    gitStatus?: LegendGitStatus[];
+    agentLayers?: LegendAgentLayer[];
+    qualityMetrics?: LegendQualityMetric[];
+    colorMode?: ColorMode;
+    onItemClick?: (id: string) => void;
+    onGitStatusClick?: (id: string) => void;
+    onAgentLayerClick?: (id: string) => void;
+    onQualityMetricClick?: (id: string) => void;
+    onClearAgentLayers?: () => void;
+    position?: 'bottom' | 'right';
+    maxSize?: number;
+}
+/**
+ * Legend component that displays file type colors and layer information.
+ * Shows styled rectangles that mimic the actual building rendering.
+ * Supports both bottom and right positioning with responsive layout.
+ */
+export declare const Legend: React.FC<LegendProps>;
+export {};
+//# sourceMappingURL=Legend.d.ts.map

package/dist/panels/components/Legend.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Legend.d.ts","sourceRoot":"","sources":["../../../src/panels/components/Legend.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,mBAAmB;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,UAAU,WAAW;IACnB,SAAS,EAAE,cAAc,EAAE,CAAC;IAC5B,SAAS,CAAC,EAAE,eAAe,EAAE,CAAC;IAC9B,WAAW,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACjC,cAAc,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACvC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,gBAAgB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,iBAAiB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,oBAAoB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,QAAQ,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;;GAIG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA8axC,CAAC"}

package/dist/panels/utils/qualityLayers.d.ts

@@ -0,0 +1,144 @@
+/**
+ * Quality highlight layer generators for File City visualization
+ *
+ * Creates highlight layers from quality metrics data (coverage, linting, etc.)
+ */
+import type { CityBuilding, LayerItem } from '@principal-ai/file-city-react';
+/**
+ * Per-file metric data from quality lenses
+ */
+export interface FileMetricData {
+    file: string;
+    score: number;
+    issueCount: number;
+    errorCount: number;
+    warningCount: number;
+    infoCount: number;
+    hintCount: number;
+    fixableCount?: number;
+    categories?: Record<string, number>;
+}
+/**
+ * Quality data slice structure
+ */
+export interface QualitySliceData {
+    fileCoverage?: Record<string, number>;
+    fileMetrics?: {
+        eslint?: FileMetricData[];
+        typescript?: FileMetricData[];
+        prettier?: FileMetricData[];
+        knip?: FileMetricData[];
+        alexandria?: FileMetricData[];
+    };
+}
+/**
+ * Highlight layer structure
+ */
+export interface HighlightLayer {
+    id: string;
+    name: string;
+    enabled: boolean;
+    color: string;
+    priority: number;
+    items: LayerItem[];
+    opacity?: number;
+    borderWidth?: number;
+}
+/**
+ * Color mode options for the visualization
+ */
+export type ColorMode = 'fileTypes' | 'git' | 'coverage' | 'eslint' | 'typescript' | 'prettier' | 'knip' | 'alexandria';
+/**
+ * Color mode configuration
+ */
+export interface ColorModeConfig {
+    id: ColorMode;
+    name: string;
+    description: string;
+    icon?: string;
+}
+/**
+ * Available color modes
+ */
+export declare const COLOR_MODES: ColorModeConfig[];
+/**
+ * Default color modes (always available without quality data)
+ */
+export declare const DEFAULT_COLOR_MODES: ColorModeConfig[];
+/**
+ * Quality-based color modes (require quality data)
+ */
+export declare const QUALITY_COLOR_MODES: ColorModeConfig[];
+/**
+ * File City color modes slice data structure.
+ * Hosts populate this slice to control which color modes are available.
+ * If not populated, only default modes (fileTypes, git) are available.
+ */
+export interface FileCityColorModesSliceData {
+    /** Additional color modes to enable (beyond fileTypes and git) */
+    enabledModes?: ColorMode[];
+    /** Quality data for quality-based color modes */
+    qualityData?: QualitySliceData;
+}
+/**
+ * Convert a score (0-100) to a color on the red-yellow-green gradient
+ * Higher scores = greener (better)
+ */
+export declare function scoreToColor(score: number): string;
+/**
+ * Convert coverage percentage to color
+ * High coverage = green, low coverage = red
+ */
+export declare function coverageToColor(coverage: number): string;
+/**
+ * Convert issue count to color (inverse - fewer issues = greener)
+ * Uses a log scale for better distribution
+ */
+export declare function issueCountToColor(issueCount: number, maxIssues?: number): string;
+/**
+ * Color thresholds for gradient legend
+ */
+export declare const SCORE_THRESHOLDS: {
+    min: number;
+    max: number;
+    color: string;
+    label: string;
+}[];
+/**
+ * Create highlight layers for test coverage visualization
+ */
+export declare function createCoverageHighlightLayers(buildings: CityBuilding[], fileCoverage: Record<string, number>): HighlightLayer[];
+/**
+ * Create highlight layers for file metrics (ESLint, TypeScript, etc.)
+ * Uses issue-count-based categories for clarity
+ */
+export declare function createMetricHighlightLayers(buildings: CityBuilding[], metrics: FileMetricData[], metricId: string, _metricName: string): HighlightLayer[];
+/**
+ * Create ESLint highlight layers
+ */
+export declare function createEslintHighlightLayers(buildings: CityBuilding[], eslintMetrics: FileMetricData[]): HighlightLayer[];
+/**
+ * Create TypeScript highlight layers
+ */
+export declare function createTypescriptHighlightLayers(buildings: CityBuilding[], typescriptMetrics: FileMetricData[]): HighlightLayer[];
+/**
+ * Create Prettier highlight layers
+ */
+export declare function createPrettierHighlightLayers(buildings: CityBuilding[], prettierMetrics: FileMetricData[]): HighlightLayer[];
+/**
+ * Create Knip highlight layers
+ */
+export declare function createKnipHighlightLayers(buildings: CityBuilding[], knipMetrics: FileMetricData[]): HighlightLayer[];
+/**
+ * Create Alexandria highlight layers
+ */
+export declare function createAlexandriaHighlightLayers(buildings: CityBuilding[], alexandriaMetrics: FileMetricData[]): HighlightLayer[];
+/**
+ * Check if quality data is available for a given color mode
+ */
+export declare function isColorModeAvailable(mode: ColorMode, qualityData: QualitySliceData | null | undefined, hasGitData: boolean): boolean;
+/**
+ * Get highlight layers for a given color mode
+ */
+export declare function getLayersForColorMode(mode: ColorMode, buildings: CityBuilding[], qualityData: QualitySliceData | null | undefined, fileColorLayers: HighlightLayer[], gitLayers: HighlightLayer[]): HighlightLayer[];
+//# sourceMappingURL=qualityLayers.d.ts.map

package/dist/panels/utils/qualityLayers.d.ts.map

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