@leanspec/ui-components 0.2.10

package/README.md

@@ -0,0 +1,244 @@
+# @leanspec/ui-components
+
+Framework-agnostic, tree-shakeable UI components for LeanSpec.
+
+## Installation
+
+```bash
+npm install @leanspec/ui-components
+# or
+pnpm add @leanspec/ui-components
+```
+
+## Usage
+
+```tsx
+import { StatusBadge, PriorityBadge, SpecCard, EmptyState, SearchInput } from '@leanspec/ui-components';
+import '@leanspec/ui-components/styles.css';
+
+function MyComponent() {
+  return (
+    <div>
+      <SearchInput placeholder="Search specs..." onSearch={(q) => console.log(q)} />
+      <StatusBadge status="in-progress" />
+      <PriorityBadge priority="high" />
+      <SpecCard 
+        spec={{ 
+          specNumber: 185, 
+          specName: 'ui-components', 
+          title: 'UI Components',
+          status: 'in-progress',
+          priority: 'high',
+          tags: ['ui', 'components'],
+          updatedAt: new Date().toISOString(),
+        }} 
+      />
+    </div>
+  );
+}
+```
+
+## Components
+
+### Spec Components
+
+- `StatusBadge` - Display spec status with icon
+- `PriorityBadge` - Display spec priority with icon
+- `SpecCard` - Compact spec card for lists
+- `SpecMetadata` - Metadata display card with all spec details
+- `TagBadge` - Display a single tag
+- `TagList` - Display multiple tags with truncation
+
+### Project Components
+
+- `ProjectAvatar` - Avatar with initials and color from project name
+- `ProjectCard` - Project card with avatar, description, stats, and tags
+- `ProjectSwitcher` - Project switcher dropdown (framework-agnostic with callbacks)
+- `ProjectDialog` - Project creation/edit dialog (framework-agnostic with callbacks)
+
+### Stats Components
+
+- `StatsCard` - Single stat card with icon and trend indicator
+- `StatsOverview` - Grid of stats cards for project overview
+- `ProgressBar` - Horizontal progress bar with variants
+
+### Search & Filter Components
+
+- `SearchInput` - Search input with keyboard shortcut hint
+- `FilterSelect` - Dropdown filter component
+- `SearchResults` - Search results grid display
+
+### Graph Components
+
+- `SpecDependencyGraph` - Interactive dependency graph using ReactFlow (framework-agnostic with callbacks)
+
+### Navigation Components
+
+- `ThemeToggle` - Light/dark theme toggle button
+- `BackToTop` - Floating scroll-to-top button
+
+### UI Components
+
+- `Avatar` - Avatar with image and fallback
+- `Badge` - Base badge component with variants
+- `Button` - Button with variants (default, destructive, outline, secondary, ghost, link)
+- `Card` - Card container with header, content, footer
+- `Input` - Form input field
+- `Separator` - Horizontal or vertical divider
+- `Skeleton` - Loading placeholder
+
+### Layout Components
+
+- `EmptyState` - Empty state placeholder with icon, title, description, action
+- `SpecListSkeleton` - Loading skeleton for spec list
+- `SpecDetailSkeleton` - Loading skeleton for spec detail
+- `StatsCardSkeleton` - Loading skeleton for stats card
+- `KanbanBoardSkeleton` - Loading skeleton for kanban board
+- `ProjectCardSkeleton` - Loading skeleton for project card
+- `SidebarSkeleton` - Loading skeleton for sidebar
+- `ContentSkeleton` - Generic content skeleton
+
+## Hooks
+
+- `useLocalStorage` - Persist state in localStorage
+- `useDebounce` - Debounce a value
+- `useDebouncedCallback` - Debounce a callback function
+- `useTheme` - Theme state management with localStorage persistence
+
+## Utilities
+
+- `cn` - Merge Tailwind CSS classes
+- `formatDate` - Format date in readable format
+- `formatDateTime` - Format date with time
+- `formatRelativeTime` - Format relative time (e.g., "2 days ago")
+- `formatDuration` - Format duration between dates
+- `getColorFromString` - Generate consistent color from string
+- `getContrastColor` - Get contrasting text color for background
+- `getInitials` - Get initials from name string
+- `PROJECT_COLORS` - Predefined color palette
+
+## Types
+
+All spec-related TypeScript types are exported:
+
+- `Spec`, `LightweightSpec`, `SidebarSpec`
+- `SpecStatus`, `SpecPriority`
+- `StatsResult`, `DependencyGraph`, etc.
+
+## Advanced Usage Examples
+
+### Using SpecDependencyGraph
+
+```tsx
+import { SpecDependencyGraph } from '@leanspec/ui-components';
+
+function MyDependencyView({ relationships, specNumber, specTitle }) {
+  return (
+    <div style={{ height: '600px' }}>
+      <SpecDependencyGraph
+        relationships={relationships}
+        specNumber={specNumber}
+        specTitle={specTitle}
+        onNodeClick={(specId) => {
+          // Handle navigation to spec
+          router.push(`/specs/${specId}`);
+        }}
+        labels={{
+          title: 'Dependencies',
+          subtitle: 'Click to navigate',
+        }}
+      />
+    </div>
+  );
+}
+```
+
+### Using ProjectSwitcher
+
+```tsx
+import { ProjectSwitcher } from '@leanspec/ui-components';
+
+function MyProjectSwitcher({ currentProject, projects }) {
+  return (
+    <ProjectSwitcher
+      currentProject={currentProject}
+      projects={projects}
+      onProjectSelect={(projectId) => {
+        // Handle project switching
+        router.push(`/projects/${projectId}`);
+      }}
+      onAddProject={() => {
+        // Open project creation dialog
+        setShowDialog(true);
+      }}
+      onManageProjects={() => {
+        // Navigate to project management
+        router.push('/projects');
+      }}
+    />
+  );
+}
+```
+
+### Using ProjectDialog
+
+```tsx
+import { ProjectDialog } from '@leanspec/ui-components';
+
+function MyProjectDialog({ open, onOpenChange }) {
+  return (
+    <ProjectDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      onSubmit={async (path) => {
+        // Handle project creation
+        await createProject(path);
+        onOpenChange(false);
+      }}
+      onBrowseFolder={async () => {
+        // Show native file picker (Tauri/Electron)
+        const result = await window.__TAURI__.dialog.open({
+          directory: true,
+        });
+        return result;
+      }}
+    />
+  );
+}
+```
+
+### Using SearchResults
+
+```tsx
+import { SearchResults } from '@leanspec/ui-components';
+
+function MySearch({ query, results, isSearching }) {
+  return (
+    <SearchResults
+      query={query}
+      results={results}
+      isSearching={isSearching}
+      onSpecClick={(specId) => {
+        router.push(`/specs/${specId}`);
+      }}
+    />
+  );
+}
+```
+
+## Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Build the library
+pnpm build
+
+# Run tests
+pnpm test
+```
+
+## License
+
+MIT

package/dist/components/graph/dependency-graph.d.ts

@@ -0,0 +1,28 @@
+import 'reactflow/dist/style.css';
+import type { CompleteSpecRelationships } from '../../types/specs';
+export interface DependencyGraphProps {
+    relationships: CompleteSpecRelationships;
+    specNumber?: number | null;
+    specTitle: string;
+    onNodeClick?: (specId: string) => void;
+    labels?: {
+        title?: string;
+        subtitle?: string;
+        badge?: string;
+        currentBadge?: string;
+        currentSubtitle?: string;
+        dependsOnBadge?: string;
+        dependsOnSubtitle?: string;
+        requiredByBadge?: string;
+        requiredBySubtitle?: string;
+        completedSubtitle?: string;
+        inProgressSubtitle?: string;
+        plannedBlockingSubtitle?: string;
+        plannedCanProceedSubtitle?: string;
+        archivedSubtitle?: string;
+    };
+    statusLabels?: Record<string, string>;
+    priorityLabels?: Record<string, string>;
+}
+export declare function SpecDependencyGraph(props: DependencyGraphProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=dependency-graph.d.ts.map

package/dist/components/graph/dependency-graph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dependency-graph.d.ts","sourceRoot":"","sources":["../../../src/components/graph/dependency-graph.tsx"],"names":[],"mappings":"AAcA,OAAO,0BAA0B,CAAC;AAElC,OAAO,KAAK,EAAE,yBAAyB,EAAwB,MAAM,mBAAmB,CAAC;AAyUzF,MAAM,WAAW,oBAAoB;IACnC,aAAa,EAAE,yBAAyB,CAAC;IACzC,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,MAAM,CAAC,EAAE;QACP,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,uBAAuB,CAAC,EAAE,MAAM,CAAC;QACjC,yBAAyB,CAAC,EAAE,MAAM,CAAC;QACnC,gBAAgB,CAAC,EAAE,MAAM,CAAC;KAC3B,CAAC;IACF,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACzC;AA0GD,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,oBAAoB,2CAM9D"}

package/dist/components/graph/index.d.ts

@@ -0,0 +1,3 @@
+export { SpecDependencyGraph } from './dependency-graph';
+export type { DependencyGraphProps } from './dependency-graph';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/graph/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/graph/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AACzD,YAAY,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/index.d.ts

@@ -0,0 +1,9 @@
+export * from './ui';
+export * from './spec';
+export * from './layout';
+export * from './project';
+export * from './navigation';
+export * from './search';
+export * from './stats';
+export * from './graph';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,MAAM,CAAC;AACrB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

package/dist/components/layout/empty-state.d.ts

@@ -0,0 +1,23 @@
+/**
+ * EmptyState component for displaying placeholder content when no data is available
+ */
+import { type LucideIcon } from 'lucide-react';
+export interface EmptyStateAction {
+    label: string;
+    onClick?: () => void;
+    href?: string;
+}
+export interface EmptyStateProps {
+    /** Icon to display */
+    icon: LucideIcon;
+    /** Title text */
+    title: string;
+    /** Description text */
+    description: string;
+    /** Optional action button */
+    action?: EmptyStateAction;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function EmptyState({ icon: Icon, title, description, action, className }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=empty-state.d.ts.map

package/dist/components/layout/empty-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state.d.ts","sourceRoot":"","sources":["../../../src/components/layout/empty-state.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAI/C,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,sBAAsB;IACtB,IAAI,EAAE,UAAU,CAAC;IACjB,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,uBAAuB;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,6BAA6B;IAC7B,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAmBD,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,eAAe,2CA4BhG"}

package/dist/components/layout/index.d.ts

@@ -0,0 +1,3 @@
+export { EmptyState, type EmptyStateProps, type EmptyStateAction } from './empty-state';
+export { SpecListSkeleton, SpecDetailSkeleton, StatsCardSkeleton, KanbanBoardSkeleton, ProjectCardSkeleton, SidebarSkeleton, ContentSkeleton, type ContentSkeletonProps, } from './loading-skeletons';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/layout/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACxF,OAAO,EACL,gBAAgB,EAChB,kBAAkB,EAClB,iBAAiB,EACjB,mBAAmB,EACnB,mBAAmB,EACnB,eAAe,EACf,eAAe,EACf,KAAK,oBAAoB,GAC1B,MAAM,qBAAqB,CAAC"}

package/dist/components/layout/loading-skeletons.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Loading skeleton components for various UI states
+ */
+/**
+ * Skeleton for spec list loading state
+ */
+export declare function SpecListSkeleton(): import("react/jsx-runtime").JSX.Element;
+/**
+ * Skeleton for spec detail loading state
+ */
+export declare function SpecDetailSkeleton(): import("react/jsx-runtime").JSX.Element;
+/**
+ * Skeleton for stats card loading state
+ */
+export declare function StatsCardSkeleton(): import("react/jsx-runtime").JSX.Element;
+/**
+ * Skeleton for kanban board loading state
+ */
+export declare function KanbanBoardSkeleton(): import("react/jsx-runtime").JSX.Element;
+/**
+ * Skeleton for project card loading state
+ */
+export declare function ProjectCardSkeleton(): import("react/jsx-runtime").JSX.Element;
+/**
+ * Skeleton for sidebar loading state
+ */
+export declare function SidebarSkeleton(): import("react/jsx-runtime").JSX.Element;
+/**
+ * Generic content skeleton with configurable lines
+ */
+export interface ContentSkeletonProps {
+    /** Number of lines to display */
+    lines?: number;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function ContentSkeleton({ lines, className }: ContentSkeletonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=loading-skeletons.d.ts.map

package/dist/components/layout/loading-skeletons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading-skeletons.d.ts","sourceRoot":"","sources":["../../../src/components/layout/loading-skeletons.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAKH;;GAEG;AACH,wBAAgB,gBAAgB,4CAyB/B;AAED;;GAEG;AACH,wBAAgB,kBAAkB,4CA0CjC;AAED;;GAEG;AACH,wBAAgB,iBAAiB,4CAehC;AAED;;GAEG;AACH,wBAAgB,mBAAmB,4CA2BlC;AAED;;GAEG;AACH,wBAAgB,mBAAmB,4CAkBlC;AAED;;GAEG;AACH,wBAAgB,eAAe,4CAW9B;AAED;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,eAAe,CAAC,EAAE,KAAS,EAAE,SAAS,EAAE,EAAE,oBAAoB,2CAc7E"}

package/dist/components/navigation/back-to-top.d.ts

@@ -0,0 +1,16 @@
+/**
+ * BackToTop component
+ * Floating button that scrolls to the top of the page
+ */
+export interface BackToTopProps {
+    /** Scroll threshold before showing button (in pixels) */
+    threshold?: number;
+    /** Additional CSS classes */
+    className?: string;
+    /** Position from bottom (in pixels or CSS value) */
+    bottom?: string | number;
+    /** Position from right (in pixels or CSS value) */
+    right?: string | number;
+}
+export declare function BackToTop({ threshold, className, bottom, right, }: BackToTopProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=back-to-top.d.ts.map

package/dist/components/navigation/back-to-top.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"back-to-top.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/back-to-top.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAOH,MAAM,WAAW,cAAc;IAC7B,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,wBAAgB,SAAS,CAAC,EACxB,SAAe,EACf,SAAS,EACT,MAAW,EACX,KAAU,GACX,EAAE,cAAc,kDA0ChB"}

package/dist/components/navigation/index.d.ts

@@ -0,0 +1,3 @@
+export { ThemeToggle, useTheme, type ThemeToggleProps, type Theme } from './theme-toggle';
+export { BackToTop, type BackToTopProps } from './back-to-top';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/navigation/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,KAAK,gBAAgB,EAAE,KAAK,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAC1F,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,eAAe,CAAC"}

package/dist/components/navigation/theme-toggle.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Theme Toggle component
+ * Switches between light and dark themes
+ * Framework-agnostic - no dependency on next-themes
+ */
+export type Theme = 'light' | 'dark' | 'system';
+export interface ThemeToggleProps {
+    /** Current theme */
+    theme?: Theme;
+    /** Callback when theme changes */
+    onThemeChange?: (theme: Theme) => void;
+    /** Additional CSS classes */
+    className?: string;
+    /** Size variant */
+    size?: 'default' | 'sm' | 'lg' | 'icon';
+}
+export declare function ThemeToggle({ theme, onThemeChange, className, size, }: ThemeToggleProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook for managing theme state with localStorage persistence
+ */
+export declare function useTheme(defaultTheme?: Theme): {
+    theme: Theme;
+    setTheme: (newTheme: Theme) => void;
+    mounted: boolean;
+};
+//# sourceMappingURL=theme-toggle.d.ts.map

package/dist/components/navigation/theme-toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-toggle.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/theme-toggle.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAOH,MAAM,MAAM,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEhD,MAAM,WAAW,gBAAgB;IAC/B,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,kCAAkC;IAClC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACvC,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB;IACnB,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;CACzC;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAe,EACf,aAAa,EACb,SAAS,EACT,IAAa,GACd,EAAE,gBAAgB,2CA8BlB;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,YAAY,GAAE,KAAgB;;yBAiDP,KAAK;;EAKpD"}

package/dist/components/project/index.d.ts

@@ -0,0 +1,5 @@
+export { ProjectAvatar, type ProjectAvatarProps } from './project-avatar';
+export { ProjectCard, type ProjectCardProps, type ProjectCardData } from './project-card';
+export { ProjectSwitcher, type ProjectSwitcherProps, type Project } from './project-switcher';
+export { ProjectDialog, type ProjectDialogProps } from './project-dialog';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/project/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/project/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC1E,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAC1F,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,KAAK,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC9F,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/components/project/project-avatar.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Project Avatar Component
+ * Displays a project avatar with initials and custom color
+ */
+export interface ProjectAvatarProps {
+    /** Project name (used for initials) */
+    name: string;
+    /** Custom color (hex) - if not provided, will be generated from name */
+    color?: string;
+    /** Optional icon URL/path */
+    icon?: string;
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function ProjectAvatar({ name, color, icon, size, className, }: ProjectAvatarProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=project-avatar.d.ts.map

package/dist/components/project/project-avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"project-avatar.d.ts","sourceRoot":"","sources":["../../../src/components/project/project-avatar.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAKH,MAAM,WAAW,kBAAkB;IACjC,uCAAuC;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,wEAAwE;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6BAA6B;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,IAAW,EACX,SAAS,GACV,EAAE,kBAAkB,2CAmBpB"}

package/dist/components/project/project-card.d.ts

@@ -0,0 +1,42 @@
+/**
+ * ProjectCard component
+ * Displays a project card with avatar, name, description, and stats
+ */
+export interface ProjectCardData {
+    id: string;
+    name: string;
+    description?: string | null;
+    color?: string | null;
+    icon?: string | null;
+    favorite?: boolean;
+    specsCount?: number;
+    updatedAt?: string | Date | null;
+    tags?: string[];
+}
+export interface ProjectCardProps {
+    /** Project data to display */
+    project: ProjectCardData;
+    /** Click handler for the card */
+    onClick?: () => void;
+    /** Handler for favorite toggle */
+    onFavoriteToggle?: (favorite: boolean) => void;
+    /** Handler for more options */
+    onMoreOptions?: () => void;
+    /** Whether the card is currently selected */
+    selected?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** Locale for date formatting */
+    locale?: string;
+    /** Labels for localization */
+    labels?: {
+        specs?: string;
+        spec?: string;
+        updated?: string;
+        noDescription?: string;
+        toggleFavorite?: string;
+        moreOptions?: string;
+    };
+}
+export declare function ProjectCard({ project, onClick, onFavoriteToggle, onMoreOptions, selected, className, locale, labels, }: ProjectCardProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=project-card.d.ts.map

package/dist/components/project/project-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"project-card.d.ts","sourceRoot":"","sources":["../../../src/components/project/project-card.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAUH,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;CACjB;AAED,MAAM,WAAW,gBAAgB;IAC/B,8BAA8B;IAC9B,OAAO,EAAE,eAAe,CAAC;IACzB,iCAAiC;IACjC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,kCAAkC;IAClC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C,+BAA+B;IAC/B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iCAAiC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8BAA8B;IAC9B,MAAM,CAAC,EAAE;QACP,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,WAAW,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC;CACH;AAWD,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,OAAO,EACP,gBAAgB,EAChB,aAAa,EACb,QAAgB,EAChB,SAAS,EACT,MAAM,EACN,MAAW,GACZ,EAAE,gBAAgB,2CAyHlB"}

package/dist/components/project/project-dialog.d.ts

@@ -0,0 +1,22 @@
+export interface ProjectDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onSubmit: (path: string) => Promise<void> | void;
+    onBrowseFolder?: () => Promise<string | null>;
+    isLoading?: boolean;
+    labels?: {
+        title?: string;
+        descriptionPicker?: string;
+        descriptionManual?: string;
+        pathLabel?: string;
+        pathPlaceholder?: string;
+        pathHelp?: string;
+        action?: string;
+        adding?: string;
+        cancel?: string;
+        browseFolders?: string;
+        enterManually?: string;
+    };
+}
+export declare function ProjectDialog({ open, onOpenChange, onSubmit, onBrowseFolder, isLoading, labels, }: ProjectDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=project-dialog.d.ts.map

package/dist/components/project/project-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"project-dialog.d.ts","sourceRoot":"","sources":["../../../src/components/project/project-dialog.tsx"],"names":[],"mappings":"AAaA,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IACjD,cAAc,CAAC,EAAE,MAAM,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC9C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE;QACP,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,aAAa,CAAC,EAAE,MAAM,CAAC;KACxB,CAAC;CACH;AAED,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,YAAY,EACZ,QAAQ,EACR,cAAc,EACd,SAAiB,EACjB,MAAM,GACP,EAAE,kBAAkB,2CAkHpB"}

package/dist/components/project/project-switcher.d.ts

@@ -0,0 +1,28 @@
+export interface Project {
+    id: string;
+    name: string;
+    path?: string;
+    color?: string;
+    favorite?: boolean;
+}
+export interface ProjectSwitcherProps {
+    currentProject?: Project | null;
+    projects: Project[];
+    isLoading?: boolean;
+    collapsed?: boolean;
+    isSwitching?: boolean;
+    onProjectSelect?: (projectId: string) => void;
+    onAddProject?: () => void;
+    onManageProjects?: () => void;
+    labels?: {
+        switching?: string;
+        placeholder?: string;
+        searchPlaceholder?: string;
+        noProject?: string;
+        projects?: string;
+        createProject?: string;
+        manageProjects?: string;
+    };
+}
+export declare function ProjectSwitcher({ currentProject, projects, isLoading, collapsed, isSwitching, onProjectSelect, onAddProject, onManageProjects, labels, }: ProjectSwitcherProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=project-switcher.d.ts.map

package/dist/components/project/project-switcher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"project-switcher.d.ts","sourceRoot":"","sources":["../../../src/components/project/project-switcher.tsx"],"names":[],"mappings":"AAqBA,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,oBAAoB;IACnC,cAAc,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAChC,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,MAAM,CAAC,EAAE;QACP,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,cAAc,CAAC,EAAE,MAAM,CAAC;KACzB,CAAC;CACH;AAED,wBAAgB,eAAe,CAAC,EAC9B,cAAc,EACd,QAAQ,EACR,SAAiB,EACjB,SAAiB,EACjB,WAAmB,EACnB,eAAe,EACf,YAAY,EACZ,gBAAgB,EAChB,MAAM,GACP,EAAE,oBAAoB,2CAgJtB"}

package/dist/components/search/filter-select.d.ts

@@ -0,0 +1,28 @@
+/**
+ * FilterSelect component
+ * Simple dropdown for filtering
+ */
+import * as React from 'react';
+export interface FilterOption {
+    value: string;
+    label: string;
+    icon?: React.ReactNode;
+}
+export interface FilterSelectProps {
+    /** Current selected value */
+    value?: string;
+    /** Available options */
+    options: FilterOption[];
+    /** Callback when selection changes */
+    onChange?: (value: string) => void;
+    /** Placeholder when no value selected */
+    placeholder?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Allow clearing selection */
+    clearable?: boolean;
+    /** Label for clear option */
+    clearLabel?: string;
+}
+export declare function FilterSelect({ value, options, onChange, placeholder, className, clearable, clearLabel, }: FilterSelectProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=filter-select.d.ts.map

package/dist/components/search/filter-select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-select.d.ts","sourceRoot":"","sources":["../../../src/components/search/filter-select.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,MAAM,WAAW,iBAAiB;IAChC,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,yCAAyC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6BAA6B;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,OAAO,EACP,QAAQ,EACR,WAAyB,EACzB,SAAS,EACT,SAAgB,EAChB,UAAkB,GACnB,EAAE,iBAAiB,2CAiFnB"}

package/dist/components/search/index.d.ts

@@ -0,0 +1,4 @@
+export { SearchInput, type SearchInputProps } from './search-input';
+export { FilterSelect, type FilterSelectProps, type FilterOption } from './filter-select';
+export { SearchResults, type SearchResultsProps } from './search-results';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/search/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/search/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC1F,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/components/search/search-input.d.ts

@@ -0,0 +1,23 @@
+/**
+ * SearchInput component
+ * Input field with search icon and keyboard shortcut hint
+ */
+import * as React from 'react';
+export interface SearchInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+    /** Current search value */
+    value?: string;
+    /** Callback when value changes */
+    onChange?: (value: string) => void;
+    /** Callback when search is submitted (Enter key) */
+    onSearch?: (value: string) => void;
+    /** Show keyboard shortcut hint */
+    showShortcut?: boolean;
+    /** Keyboard shortcut key (displayed in hint) */
+    shortcutKey?: string;
+    /** Show clear button when there's a value */
+    clearable?: boolean;
+    /** Additional CSS classes for the container */
+    containerClassName?: string;
+}
+export declare function SearchInput({ value, onChange, onSearch, showShortcut, shortcutKey, clearable, className, containerClassName, placeholder, ...props }: SearchInputProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=search-input.d.ts.map