@kb-labs/studio-app 0.6.0

package/src/components/ui/icons.tsx

@@ -0,0 +1,509 @@
+/**
+ * Icon utilities for rendering Ant Design icons by name
+ *
+ * This module provides a curated set of ~100 icons for plugin developers.
+ * All icons are tree-shaken properly and only included if used.
+ */
+
+import * as React from 'react';
+
+// Import curated icon set for plugin developers
+import {
+  // Navigation & Layout
+  HomeOutlined,
+  DashboardOutlined,
+  MenuOutlined,
+  AppstoreOutlined,
+  LayoutOutlined,
+  SettingOutlined,
+  UnorderedListOutlined,
+  OrderedListOutlined,
+
+  // Actions & Controls
+  PlayCircleOutlined,
+  PauseCircleOutlined,
+  StopOutlined,
+  ReloadOutlined,
+  SyncOutlined,
+  PlusOutlined,
+  MinusOutlined,
+  CloseOutlined,
+  CheckOutlined,
+  EditOutlined,
+  DeleteOutlined,
+  SaveOutlined,
+  DownloadOutlined,
+  UploadOutlined,
+  ExportOutlined,
+  ImportOutlined,
+  CopyOutlined,
+  SearchOutlined,
+  FilterOutlined,
+  ArrowUpOutlined,
+  ArrowDownOutlined,
+  ArrowLeftOutlined,
+  ArrowRightOutlined,
+
+  // Status & Alerts
+  CheckCircleOutlined,
+  CloseCircleOutlined,
+  ExclamationCircleOutlined,
+  InfoCircleOutlined,
+  WarningOutlined,
+  QuestionCircleOutlined,
+  LoadingOutlined,
+  SyncOutlined as SpinOutlined,
+
+  // Files & Folders
+  FileOutlined,
+  FileTextOutlined,
+  FileImageOutlined,
+  FilePdfOutlined,
+  FileWordOutlined,
+  FileExcelOutlined,
+  FolderOutlined,
+  FolderOpenOutlined,
+
+  // Development & Code
+  CodeOutlined,
+  BugOutlined,
+  ApiOutlined,
+  ConsoleSqlOutlined,
+  FunctionOutlined,
+  DeploymentUnitOutlined,
+  BranchesOutlined,
+  NodeIndexOutlined,
+
+  // Git & Version Control
+  GithubOutlined,
+  GitlabOutlined,
+  PullRequestOutlined,
+  MergeCellsOutlined,
+
+  // Data & Analytics
+  DatabaseOutlined,
+  TableOutlined,
+  BarChartOutlined,
+  LineChartOutlined,
+  PieChartOutlined,
+  AreaChartOutlined,
+  DotChartOutlined,
+
+  // Communication
+  MailOutlined,
+  MessageOutlined,
+  CommentOutlined,
+  NotificationOutlined,
+  BellOutlined,
+
+  // Users & Teams
+  UserOutlined,
+  TeamOutlined,
+  UsergroupAddOutlined,
+  ContactsOutlined,
+
+  // Time & Calendar
+  ClockCircleOutlined,
+  CalendarOutlined,
+  HistoryOutlined,
+  FieldTimeOutlined,
+
+  // Media & Visual
+  PictureOutlined,
+  CameraOutlined,
+  VideoCameraOutlined,
+  EyeOutlined,
+  EyeInvisibleOutlined,
+
+  // Network & Cloud
+  CloudOutlined,
+  CloudDownloadOutlined,
+  CloudUploadOutlined,
+  GlobalOutlined,
+  WifiOutlined,
+  ApiOutlined as LinkOutlined,
+
+  // Security
+  LockOutlined,
+  UnlockOutlined,
+  SafetyOutlined,
+  SafetyCertificateOutlined,
+  KeyOutlined,
+
+  // Tools & Utilities
+  ToolOutlined,
+  BuildOutlined,
+  ExperimentOutlined,
+  RocketOutlined,
+  RobotOutlined,
+  ThunderboltOutlined,
+  FireOutlined,
+  BulbOutlined,
+
+  // Misc
+  StarOutlined,
+  HeartOutlined,
+  TrophyOutlined,
+  GiftOutlined,
+  AimOutlined,
+  FlagOutlined,
+  TagOutlined,
+  BookOutlined,
+  MoreOutlined,
+  EllipsisOutlined,
+  RightOutlined,
+  LeftOutlined,
+  UpOutlined,
+  DownOutlined,
+} from '@ant-design/icons';
+
+/**
+ * Registry of all available icons for plugin developers.
+ * This is the complete list of icons that can be used in plugin manifests.
+ */
+export const AVAILABLE_ICONS: Record<string, React.ComponentType<any>> = {
+  // Navigation & Layout
+  HomeOutlined,
+  DashboardOutlined,
+  MenuOutlined,
+  AppstoreOutlined,
+  LayoutOutlined,
+  SettingOutlined,
+  UnorderedListOutlined,
+  OrderedListOutlined,
+
+  // Actions & Controls
+  PlayCircleOutlined,
+  PauseCircleOutlined,
+  StopOutlined,
+  ReloadOutlined,
+  SyncOutlined,
+  PlusOutlined,
+  MinusOutlined,
+  CloseOutlined,
+  CheckOutlined,
+  EditOutlined,
+  DeleteOutlined,
+  SaveOutlined,
+  DownloadOutlined,
+  UploadOutlined,
+  ExportOutlined,
+  ImportOutlined,
+  CopyOutlined,
+  SearchOutlined,
+  FilterOutlined,
+  ArrowUpOutlined,
+  ArrowDownOutlined,
+  ArrowLeftOutlined,
+  ArrowRightOutlined,
+
+  // Status & Alerts
+  CheckCircleOutlined,
+  CloseCircleOutlined,
+  ExclamationCircleOutlined,
+  InfoCircleOutlined,
+  WarningOutlined,
+  QuestionCircleOutlined,
+  LoadingOutlined,
+  SpinOutlined,
+
+  // Files & Folders
+  FileOutlined,
+  FileTextOutlined,
+  FileImageOutlined,
+  FilePdfOutlined,
+  FileWordOutlined,
+  FileExcelOutlined,
+  FolderOutlined,
+  FolderOpenOutlined,
+
+  // Development & Code
+  CodeOutlined,
+  BugOutlined,
+  ApiOutlined,
+  ConsoleSqlOutlined,
+  FunctionOutlined,
+  DeploymentUnitOutlined,
+  BranchesOutlined,
+  NodeIndexOutlined,
+
+  // Git & Version Control
+  GithubOutlined,
+  GitlabOutlined,
+  PullRequestOutlined,
+  MergeCellsOutlined,
+
+  // Data & Analytics
+  DatabaseOutlined,
+  TableOutlined,
+  BarChartOutlined,
+  LineChartOutlined,
+  PieChartOutlined,
+  AreaChartOutlined,
+  DotChartOutlined,
+
+  // Communication
+  MailOutlined,
+  MessageOutlined,
+  CommentOutlined,
+  NotificationOutlined,
+  BellOutlined,
+
+  // Users & Teams
+  UserOutlined,
+  TeamOutlined,
+  UsergroupAddOutlined,
+  ContactsOutlined,
+
+  // Time & Calendar
+  ClockCircleOutlined,
+  CalendarOutlined,
+  HistoryOutlined,
+  FieldTimeOutlined,
+
+  // Media & Visual
+  PictureOutlined,
+  CameraOutlined,
+  VideoCameraOutlined,
+  EyeOutlined,
+  EyeInvisibleOutlined,
+
+  // Network & Cloud
+  CloudOutlined,
+  CloudDownloadOutlined,
+  CloudUploadOutlined,
+  GlobalOutlined,
+  WifiOutlined,
+  LinkOutlined,
+
+  // Security
+  LockOutlined,
+  UnlockOutlined,
+  SafetyOutlined,
+  SafetyCertificateOutlined,
+  KeyOutlined,
+
+  // Tools & Utilities
+  ToolOutlined,
+  BuildOutlined,
+  ExperimentOutlined,
+  RocketOutlined,
+  RobotOutlined,
+  ThunderboltOutlined,
+  FireOutlined,
+  BulbOutlined,
+
+  // Misc
+  StarOutlined,
+  HeartOutlined,
+  TrophyOutlined,
+  GiftOutlined,
+  AimOutlined,
+  FlagOutlined,
+  TagOutlined,
+  BookOutlined,
+  MoreOutlined,
+  EllipsisOutlined,
+  RightOutlined,
+  LeftOutlined,
+  UpOutlined,
+  DownOutlined,
+};
+
+/**
+ * Get icon component by name.
+ * Only icons from AVAILABLE_ICONS registry are supported.
+ *
+ * @param iconName - Icon name from the available icons list
+ * @returns Icon component or null if not found
+ *
+ * @example
+ * ```tsx
+ * const IconComponent = getIconComponent('HomeOutlined');
+ * if (IconComponent) {
+ *   return <IconComponent />;
+ * }
+ * ```
+ */
+export function getIconComponent(iconName?: string): React.ComponentType<any> | null {
+  if (!iconName) {return null;}
+
+  const icon = AVAILABLE_ICONS[iconName];
+  if (!icon) {
+    console.warn(`Icon "${iconName}" is not available. Check AVAILABLE_ICONS registry.`);
+    return null;
+  }
+
+  return icon;
+}
+
+/**
+ * Render icon by name.
+ *
+ * @param iconName - Icon name from the available icons list
+ * @param props - Icon props (style, className, etc.)
+ * @returns Rendered icon element or null if not found
+ *
+ * @example
+ * ```tsx
+ * // Simple usage
+ * {renderIcon('HomeOutlined')}
+ *
+ * // With props
+ * {renderIcon('SettingOutlined', { style: { fontSize: 20 } })}
+ * ```
+ */
+export function renderIcon(iconName?: string, props?: any): React.ReactElement | null {
+  const IconComponent = getIconComponent(iconName);
+  if (!IconComponent) {return null;}
+  return <IconComponent {...props} />;
+}
+
+/**
+ * Get list of all available icon names.
+ * Useful for documentation and validation.
+ */
+export function getAvailableIconNames(): string[] {
+  return Object.keys(AVAILABLE_ICONS).sort();
+}
+
+// Re-export all icons for direct import
+export {
+  // Navigation & Layout
+  HomeOutlined,
+  DashboardOutlined,
+  MenuOutlined,
+  AppstoreOutlined,
+  LayoutOutlined,
+  SettingOutlined,
+  UnorderedListOutlined,
+  OrderedListOutlined,
+
+  // Actions & Controls
+  PlayCircleOutlined,
+  PauseCircleOutlined,
+  StopOutlined,
+  ReloadOutlined,
+  SyncOutlined,
+  PlusOutlined,
+  MinusOutlined,
+  CloseOutlined,
+  CheckOutlined,
+  EditOutlined,
+  DeleteOutlined,
+  SaveOutlined,
+  DownloadOutlined,
+  UploadOutlined,
+  ExportOutlined,
+  ImportOutlined,
+  CopyOutlined,
+  SearchOutlined,
+  FilterOutlined,
+  ArrowUpOutlined,
+  ArrowDownOutlined,
+  ArrowLeftOutlined,
+  ArrowRightOutlined,
+
+  // Status & Alerts
+  CheckCircleOutlined,
+  CloseCircleOutlined,
+  ExclamationCircleOutlined,
+  InfoCircleOutlined,
+  WarningOutlined,
+  QuestionCircleOutlined,
+  LoadingOutlined,
+
+  // Files & Folders
+  FileOutlined,
+  FileTextOutlined,
+  FileImageOutlined,
+  FilePdfOutlined,
+  FileWordOutlined,
+  FileExcelOutlined,
+  FolderOutlined,
+  FolderOpenOutlined,
+
+  // Development & Code
+  CodeOutlined,
+  BugOutlined,
+  ApiOutlined,
+  ConsoleSqlOutlined,
+  FunctionOutlined,
+  DeploymentUnitOutlined,
+  BranchesOutlined,
+
+  // Git & Version Control
+  GithubOutlined,
+  GitlabOutlined,
+  PullRequestOutlined,
+  MergeCellsOutlined,
+
+  // Data & Analytics
+  DatabaseOutlined,
+  TableOutlined,
+  BarChartOutlined,
+  LineChartOutlined,
+  PieChartOutlined,
+  AreaChartOutlined,
+  DotChartOutlined,
+
+  // Communication
+  MailOutlined,
+  MessageOutlined,
+  CommentOutlined,
+  NotificationOutlined,
+  BellOutlined,
+
+  // Users & Teams
+  UserOutlined,
+  TeamOutlined,
+  UsergroupAddOutlined,
+  ContactsOutlined,
+
+  // Time & Calendar
+  ClockCircleOutlined,
+  CalendarOutlined,
+  HistoryOutlined,
+  FieldTimeOutlined,
+
+  // Media & Visual
+  PictureOutlined,
+  CameraOutlined,
+  VideoCameraOutlined,
+  EyeOutlined,
+  EyeInvisibleOutlined,
+
+  // Network & Cloud
+  CloudOutlined,
+  CloudDownloadOutlined,
+  CloudUploadOutlined,
+  GlobalOutlined,
+  WifiOutlined,
+
+  // Security
+  LockOutlined,
+  UnlockOutlined,
+  SafetyOutlined,
+  SafetyCertificateOutlined,
+  KeyOutlined,
+
+  // Tools & Utilities
+  ToolOutlined,
+  BuildOutlined,
+  ExperimentOutlined,
+  RocketOutlined,
+  RobotOutlined,
+  ThunderboltOutlined,
+  FireOutlined,
+  BulbOutlined,
+
+  // Misc
+  StarOutlined,
+  HeartOutlined,
+  TrophyOutlined,
+  GiftOutlined,
+  AimOutlined,
+  FlagOutlined,
+  TagOutlined,
+  BookOutlined,
+};

package/src/components/ui/index.ts

@@ -0,0 +1,25 @@
+// Theme & Config
+export { KBConfigProvider, useKBTheme, type ThemeMode, type KBConfigProviderProps } from './kb-config-provider';
+export { ThemeTransitionOverlay, type ThemeTransitionOverlayProps } from './theme-transition-overlay';
+export { KBThemeToggle } from './kb-theme-toggle';
+
+// Layout Components
+export { KBHeader, type KBHeaderProps } from './kb-header';
+export { KBSidebar, type KBSidebarProps, type NavigationItem } from './kb-sidebar';
+export { KBPageLayout, type KBPageLayoutProps } from './kb-page-layout';
+
+// Status & Notification Components
+export { KBStatusBar, StatusBarItem, StatusBarPresets, type KBStatusBarProps, type StatusBarItemProps } from './kb-status-bar';
+export { KBSystemHealthIndicator, type KBSystemHealthIndicatorProps, type SystemHealthData } from './kb-system-health-indicator';
+export { KBNotificationBell, type KBNotificationBellProps, type LogNotification } from './kb-notification-bell';
+
+// Search & UI Components
+export { KBQuickSearch, type KBQuickSearchProps, type SearchableItem } from './kb-quick-search';
+
+// Page & Section Components
+export { KBStatCard, type KBStatCardProps } from './kb-stat-card';
+export { KBStatGrid, type KBStatGridProps } from './kb-stat-grid';
+
+// Icons & Utils
+export * from './icons';
+export { cn } from './utils';

package/src/components/ui/kb-config-provider.tsx

@@ -0,0 +1,130 @@
+import * as React from 'react';
+import { ConfigProvider } from 'antd';
+import type { ConfigProviderProps, ThemeConfig } from 'antd';
+import { getAntDesignTokens, getAntDesignComponents } from '@kb-labs/studio-hooks';
+import { ThemeTransitionOverlay } from './theme-transition-overlay';
+
+export type ThemeMode = 'light' | 'dark' | 'auto';
+
+export interface KBConfigProviderProps extends Omit<ConfigProviderProps, 'theme'> {
+  defaultTheme?: ThemeMode;
+  storageKey?: string;
+  children: React.ReactNode;
+}
+
+const KBConfigProviderContext = React.createContext<{
+  theme: ThemeMode;
+  setTheme: (theme: ThemeMode) => void;
+}>({
+  theme: 'light',
+  setTheme: () => {},
+});
+
+export function KBConfigProvider({
+  defaultTheme = 'light',
+  storageKey = 'studio-ui-theme',
+  children,
+  ...configProps
+}: KBConfigProviderProps) {
+  // Get initial theme
+  const getInitialTheme = (): ThemeMode => {
+    if (typeof window === 'undefined') {return defaultTheme;}
+    const stored = localStorage.getItem(storageKey) as ThemeMode;
+    return stored || defaultTheme;
+  };
+
+  const [theme, setThemeState] = React.useState<ThemeMode>(getInitialTheme);
+  const [showOverlay, setShowOverlay] = React.useState(false);
+  const [overlayTheme, setOverlayTheme] = React.useState<ThemeMode>(theme);
+  const [isInitialMount, setIsInitialMount] = React.useState(true);
+
+  // Get actual theme for tokens (auto -> system preference)
+  const actualTheme = React.useMemo(() => {
+    if (typeof window === 'undefined') {return theme === 'auto' ? 'light' : theme;}
+    return theme === 'auto'
+      ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+      : theme;
+  }, [theme]);
+
+  // Apply theme class SYNCHRONOUSLY on mount and theme change
+  // This ensures CSS variables are correct before tokens are computed
+  React.useLayoutEffect(() => {
+    if (typeof window === 'undefined') {return;}
+    
+    const root = document.documentElement;
+    root.classList.remove('light', 'dark');
+    root.classList.add(actualTheme);
+    root.setAttribute('data-theme', actualTheme);
+  }, [actualTheme]);
+
+  // Store theme in localStorage (non-blocking)
+  React.useEffect(() => {
+    if (typeof window === 'undefined') {return;}
+    localStorage.setItem(storageKey, theme);
+  }, [theme, storageKey]);
+
+  // Mark initial mount as complete after first render
+  React.useEffect(() => {
+    setIsInitialMount(false);
+  }, []);
+
+  const setTheme = React.useCallback((newTheme: ThemeMode) => {
+    // Skip overlay on initial mount
+    if (isInitialMount) {
+      setThemeState(newTheme);
+      return;
+    }
+
+    // Show overlay with new theme label
+    setOverlayTheme(newTheme);
+    setShowOverlay(true);
+
+    // Wait for overlay to slide down (300ms)
+    setTimeout(() => {
+      // Change theme while overlay covers the screen
+      setThemeState(newTheme);
+
+      // Hold overlay to let color transition finish (150ms transition + 100ms buffer)
+      setTimeout(() => {
+        // Slide overlay back up
+        setShowOverlay(false);
+      }, 250);
+    }, 300);
+  }, [isInitialMount]);
+
+  // Tokens now use CSS variables via var() - no need to recompute
+  const tokens = React.useMemo(() => getAntDesignTokens(), []);
+  const components = React.useMemo(() => getAntDesignComponents(), []);
+  // Don't use algorithm - it would invert colors again
+  // CSS variables already handle theme switching via .light/.dark classes
+  // const algorithm = React.useMemo(() => getThemeAlgorithm(theme), [theme]);
+
+  const value = React.useMemo(() => ({ theme, setTheme }), [theme, setTheme]);
+
+  const themeConfig: ThemeConfig = React.useMemo(
+    () => ({
+      token: tokens,
+      components: components,
+      // algorithm: algorithm, // Disabled - CSS variables handle theme
+    }),
+    [tokens, components]
+  );
+
+  return (
+    <KBConfigProviderContext.Provider value={value}>
+      <ConfigProvider theme={themeConfig} {...configProps}>
+        {children}
+        <ThemeTransitionOverlay show={showOverlay} theme={overlayTheme} />
+      </ConfigProvider>
+    </KBConfigProviderContext.Provider>
+  );
+}
+
+export function useKBTheme() {
+  const context = React.useContext(KBConfigProviderContext);
+  if (context === undefined) {
+    throw new Error('useKBTheme must be used within KBConfigProvider');
+  }
+  return context;
+}
+

package/src/components/ui/kb-header.module.css

@@ -0,0 +1,51 @@
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: var(--z-header);
+  height: 64px;
+  background-color: var(--bg-secondary);
+  color: var(--text-primary);
+  border-bottom: none;
+  box-shadow: 0 1px 0 var(--border-primary), 0 2px 8px rgba(0, 0, 0, 0.04);
+  transition: padding-left 0.2s;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 18px;
+  font-weight: bold;
+  color: var(--text-primary);
+  text-decoration: none;
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.actionBtn {
+  height: 32px !important;
+  display: flex !important;
+  align-items: center !important;
+}
+
+.userBtn {
+  height: 32px !important;
+  display: flex !important;
+  align-items: center !important;
+  gap: 6px !important;
+  padding: 0 8px !important;
+}
+
+.userName {
+  font-size: 13px;
+}