@kb-labs/studio-app 0.6.0 → 2.8.0

package/src/pages/login-page.tsx

@@ -1,177 +0,0 @@
-/**
- * @module @kb-labs/studio-app/pages/login-page
- * Login page placeholder - mock authentication
- */
-
-import * as React from 'react';
-import { useNavigate } from 'react-router-dom';
-import {
-  UICard, UIButton, UISpace, UITitle, UITypographyText, UITypographyParagraph,
-  UISelect, UIDivider, UIMessage, UIIcon,
-} from '@kb-labs/studio-ui-kit';
-import { useAuth, type UserRole } from '@/providers/auth-provider';
-
-export function LoginPage() {
-  const navigate = useNavigate();
-  const { setRole } = useAuth();
-  const [selectedRole, setSelectedRole] = React.useState<UserRole>('operator');
-
-  const handleLogin = () => {
-    setRole(selectedRole);
-    navigate('/');
-  };
-
-  const handleSSOLogin = () => {
-    UIMessage.info('SSO аутентификация будет реализована позже');
-    // TODO: Implement SSO authentication
-  };
-
-  return (
-    <div
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        minHeight: '100vh',
-        backgroundColor: 'var(--bg-tertiary)',
-        padding: '2rem',
-      }}
-    >
-      <UICard
-        style={{
-          maxWidth: '480px',
-          width: '100%',
-          borderRadius: '16px',
-          boxShadow: '0 20px 60px rgba(0,0,0,0.3)',
-        }}
-        styles={{ body: { padding: '3rem' } }}
-      >
-        <UISpace direction="vertical" size="large" style={{ width: '100%', textAlign: 'center' }}>
-          {/* Logo */}
-          <div
-            style={{
-              width: '80px',
-              height: '80px',
-              margin: '0 auto',
-              background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-              borderRadius: '20px',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              fontSize: '40px',
-            }}
-          >
-            <UIIcon name="RocketOutlined" style={{ color: 'white' }} />
-          </div>
-
-          {/* Title */}
-          <div>
-            <UITitle level={2} style={{ marginBottom: 8 }}>
-              KB Labs Studio
-            </UITitle>
-            <UITypographyText type="secondary">Добро пожаловать в платформу</UITypographyText>
-          </div>
-
-          <UIDivider style={{ margin: '8px 0' }} />
-
-          {/* Mock Auth Notice */}
-          <div
-            style={{
-              padding: '16px',
-              backgroundColor: 'var(--bg-tertiary)',
-              borderRadius: '8px',
-              border: '1px solid var(--border-primary)',
-            }}
-          >
-            <UISpace direction="vertical" size="small" style={{ width: '100%' }}>
-              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                <UIIcon name="LockOutlined" style={{ color: '#667eea' }} />
-                <UITypographyText strong style={{ color: '#667eea' }}>
-                  Режим разработки
-                </UITypographyText>
-              </div>
-              <UITypographyParagraph
-                type="secondary"
-                style={{ margin: 0, fontSize: '0.875rem', textAlign: 'left' }}
-              >
-                Это заглушка для входа. Выберите роль и войдите без пароля.
-              </UITypographyParagraph>
-            </UISpace>
-          </div>
-
-          {/* Role Selector */}
-          <div style={{ width: '100%', textAlign: 'left' }}>
-            <UITypographyText strong style={{ display: 'block', marginBottom: 8 }}>
-              Выберите роль:
-            </UITypographyText>
-            <UISelect
-              value={selectedRole}
-              onChange={(v) => setSelectedRole(v as UserRole)}
-              style={{ width: '100%' }}
-              size="large"
-              options={[
-                {
-                  label: 'Viewer — Просмотр данных',
-                  value: 'viewer',
-                },
-                {
-                  label: 'Operator — Управление системой',
-                  value: 'operator',
-                },
-                {
-                  label: 'Admin — Полный доступ',
-                  value: 'admin',
-                },
-              ]}
-            />
-          </div>
-
-          {/* Login Buttons */}
-          <UISpace direction="vertical" size="middle" style={{ width: '100%' }}>
-            <UIButton
-              variant="primary"
-              size="large"
-              block
-              icon={<UIIcon name="RocketOutlined" />}
-              onClick={handleLogin}
-              style={{
-                height: '48px',
-                fontSize: '16px',
-                fontWeight: 500,
-              }}
-            >
-              Войти в систему
-            </UIButton>
-
-            <UIDivider style={{ margin: '8px 0' }}>
-              <UITypographyText type="secondary" style={{ fontSize: '0.75rem' }}>
-                или
-              </UITypographyText>
-            </UIDivider>
-
-            <UIButton
-              size="large"
-              block
-              icon={<UIIcon name="SafetyOutlined" />}
-              onClick={handleSSOLogin}
-              style={{
-                height: '48px',
-                fontSize: '16px',
-                fontWeight: 500,
-              }}
-            >
-              Войти через SSO
-            </UIButton>
-          </UISpace>
-
-          {/* Footer */}
-          <div style={{ marginTop: '16px' }}>
-            <UITypographyText type="secondary" style={{ fontSize: '0.75rem' }}>
-              © 2025 KB Labs Studio. Development Preview.
-            </UITypographyText>
-          </div>
-        </UISpace>
-      </UICard>
-    </div>
-  );
-}

package/src/pages/not-found-page.tsx

@@ -1,85 +0,0 @@
-import { useNavigate, useLocation } from 'react-router-dom';
-import { UIButton } from '@kb-labs/studio-ui-kit';
-import { ArrowLeft, Home } from 'lucide-react';
-
-export function NotFoundPage() {
-  const navigate = useNavigate();
-  const location = useLocation();
-
-  return (
-    <div style={{
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      minHeight: '100vh',
-      backgroundColor: 'var(--bg-primary)',
-      padding: 24,
-    }}>
-      <div style={{ textAlign: 'center', maxWidth: 400 }}>
-        <div style={{
-          fontSize: 96,
-          fontWeight: 700,
-          lineHeight: 1,
-          letterSpacing: '-4px',
-          color: 'var(--border-secondary)',
-          fontFamily: 'var(--font-heading)',
-          marginBottom: 24,
-          userSelect: 'none',
-        }}>
-          404
-        </div>
-
-        <div style={{
-          fontSize: 18,
-          fontWeight: 600,
-          color: 'var(--text-primary)',
-          marginBottom: 8,
-        }}>
-          Page not found
-        </div>
-
-        <div style={{
-          fontSize: 13,
-          color: 'var(--text-secondary)',
-          marginBottom: 4,
-          lineHeight: 1.5,
-        }}>
-          The page you're looking for doesn't exist or has been moved.
-        </div>
-
-        {location.pathname !== '/' && (
-          <div style={{
-            fontSize: 11,
-            color: 'var(--text-tertiary)',
-            marginBottom: 32,
-            fontFamily: 'var(--font-mono, monospace)',
-            background: 'var(--bg-tertiary)',
-            border: '1px solid var(--border-primary)',
-            borderRadius: 6,
-            padding: '4px 10px',
-            display: 'inline-block',
-            marginTop: 12,
-          }}>
-            {location.pathname}
-          </div>
-        )}
-
-        <div style={{ display: 'flex', gap: 8, justifyContent: 'center', marginTop: 24 }}>
-          <UIButton
-            variant="primary"
-            icon={<Home size={14} />}
-            onClick={() => navigate('/')}
-          >
-            Go home
-          </UIButton>
-          <UIButton
-            icon={<ArrowLeft size={14} />}
-            onClick={() => navigate(-1)}
-          >
-            Go back
-          </UIButton>
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/providers/auth-provider.tsx

@@ -1,40 +0,0 @@
-import { createContext, useContext, useState, useEffect, type ReactNode } from 'react';
-
-export type UserRole = 'viewer' | 'operator' | 'admin';
-
-interface AuthState {
-  role: UserRole;
-  setRole: (role: UserRole) => void;
-}
-
-const AuthContext = createContext<AuthState | null>(null);
-
-export function AuthProvider({ children }: { children: ReactNode }) {
-  const [role, setRoleState] = useState<UserRole>(
-    () => (localStorage.getItem('studio-user-role') as UserRole) || 'operator'
-  );
-
-  useEffect(() => {
-    localStorage.setItem('studio-user-role', role);
-  }, [role]);
-
-  const setRole = (newRole: UserRole) => {
-    setRoleState(newRole);
-  };
-
-  return <AuthContext.Provider value={{ role, setRole }}>{children}</AuthContext.Provider>;
-}
-
-export function useAuth() {
-  const context = useContext(AuthContext);
-  if (!context) {
-    throw new Error('useAuth must be used within AuthProvider');
-  }
-  return context;
-}
-
-export function useRole() {
-  const { role } = useAuth();
-  return role;
-}
-

package/src/providers/command-palette-provider.tsx

@@ -1,193 +0,0 @@
-/**
- * @module @kb-labs/studio-app/providers/command-palette-provider
- * Command Palette provider - manages commands and quick search
- */
-
-import * as React from 'react';
-import { useNavigate } from 'react-router-dom';
-import { UIMessage } from '@kb-labs/studio-ui-kit';
-import { useQueryClient } from '@tanstack/react-query';
-import { useDataSources } from './data-sources-provider';
-import { useSettings } from './settings-provider';
-import { getCommands, saveRecentCommand, getRecentCommands } from '@/utils/commands';
-import { KBQuickSearch, type SearchableItem } from '@/components/ui';
-
-interface CommandPaletteContextValue {
-  /** Open command palette */
-  open: () => void;
-  /** Close command palette */
-  close: () => void;
-  /** Toggle command palette */
-  toggle: () => void;
-  /** Check if palette is open */
-  isOpen: boolean;
-}
-
-const CommandPaletteContext = React.createContext<CommandPaletteContextValue | undefined>(
-  undefined
-);
-
-export function CommandPaletteProvider({ children }: { children: React.ReactNode }) {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const navigate = useNavigate();
-  const { settings, updateSettings } = useSettings();
-  const queryClient = useQueryClient();
-  const refresh = React.useCallback(
-    () => queryClient.invalidateQueries({ queryKey: ['studio-registry-v2'] }),
-    [queryClient],
-  );
-  const sources = useDataSources();
-
-  // Commands configuration
-  const allCommands = React.useMemo(
-    () =>
-      getCommands({
-        navigate,
-        toggleTheme: () => {
-          const currentTheme = settings.appearance.theme;
-          const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-          updateSettings({ appearance: { ...settings.appearance, theme: newTheme } });
-          UIMessage.success(`Switched to ${newTheme} mode`);
-        },
-        refreshRegistry: async () => {
-          try {
-            await refresh();
-            UIMessage.success('Registry refreshed successfully');
-          } catch (error) {
-            UIMessage.error(
-              `Failed to refresh registry: ${error instanceof Error ? error.message : String(error)}`
-            );
-          }
-        },
-        invalidateCache: async () => {
-          try {
-            const result = await sources.cache.invalidateCache();
-            UIMessage.success(
-              `Cache invalidated! Rev: ${result.previousRev ?? 'N/A'} → ${result.newRev}`
-            );
-            await refresh();
-          } catch (error) {
-            UIMessage.error(
-              `Failed to invalidate cache: ${error instanceof Error ? error.message : String(error)}`
-            );
-          }
-        },
-        openQuickSearch: () => {
-          setIsOpen(true);
-        },
-      }),
-    [navigate, settings, updateSettings, refresh, sources]
-  );
-
-  // Get recent commands and merge with all commands
-  const items = React.useMemo(() => {
-    const recentIds = getRecentCommands();
-    const recentCommands: SearchableItem[] = [];
-    const otherCommands: SearchableItem[] = [];
-
-    allCommands.forEach((cmd) => {
-      const item: SearchableItem = {
-        id: cmd.id,
-        title: cmd.title,
-        description: cmd.description,
-        category: cmd.category as SearchableItem['category'],
-        path: cmd.path,
-        icon: undefined, // Explicitly set to undefined - icons will be rendered based on category
-        badge: cmd.shortcut,
-      };
-
-      if (recentIds.includes(cmd.id)) {
-        recentCommands.push(item);
-      } else {
-        otherCommands.push(item);
-      }
-    });
-
-    // Sort recent by recency, others by priority
-    const sortedRecent = recentCommands.sort(
-      (a, b) => recentIds.indexOf(a.id) - recentIds.indexOf(b.id)
-    );
-
-    const sortedOthers = otherCommands.sort((a, b) => {
-      const cmdA = allCommands.find((c) => c.id === a.id);
-      const cmdB = allCommands.find((c) => c.id === b.id);
-      return (cmdB?.priority ?? 0) - (cmdA?.priority ?? 0);
-    });
-
-    return [...sortedRecent, ...sortedOthers];
-  }, [allCommands]);
-
-  // Handle command execution
-  const handleNavigate = React.useCallback(
-    (path: string) => {
-      const command = allCommands.find((cmd) => cmd.path === path);
-      if (!command) {return;}
-
-      // Save to recent
-      saveRecentCommand(command.id);
-
-      // Execute action or navigate
-      if (command.action) {
-        command.action();
-      } else if (command.path) {
-        // Handle URL params (e.g., /settings?tab=appearance)
-        if (command.path.includes('?')) {
-          const [basePath, search] = command.path.split('?');
-          navigate({ pathname: basePath, search: `?${search}` });
-        } else {
-          navigate(command.path);
-        }
-      }
-
-      setIsOpen(false);
-    },
-    [allCommands, navigate]
-  );
-
-  // Keyboard shortcut: Cmd+K / Ctrl+K
-  React.useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
-        e.preventDefault();
-        setIsOpen((prev) => !prev);
-      }
-    };
-
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, []);
-
-  const value = React.useMemo(
-    () => ({
-      open: () => setIsOpen(true),
-      close: () => setIsOpen(false),
-      toggle: () => setIsOpen((prev) => !prev),
-      isOpen,
-    }),
-    [isOpen]
-  );
-
-  return (
-    <CommandPaletteContext.Provider value={value}>
-      {children}
-      <KBQuickSearch
-        open={isOpen}
-        onClose={() => setIsOpen(false)}
-        items={items}
-        onNavigate={handleNavigate}
-        placeholder="Search pages, run commands..."
-      />
-    </CommandPaletteContext.Provider>
-  );
-}
-
-/**
- * Hook to use command palette
- */
-export function useCommandPalette() {
-  const context = React.useContext(CommandPaletteContext);
-  if (!context) {
-    throw new Error('useCommandPalette must be used within CommandPaletteProvider');
-  }
-  return context;
-}

package/src/providers/data-sources-provider.tsx

@@ -1,27 +0,0 @@
-import { createContext, useContext, useMemo, type ReactNode } from 'react';
-import { createDataSources, type DataSources } from '@kb-labs/studio-data-client';
-import { studioConfig } from '@/config/studio.config';
-
-const DataSourcesContext = createContext<DataSources | null>(null);
-
-export function DataSourcesProvider({ children }: { children: ReactNode }) {
-  const sources = useMemo(
-    () => createDataSources({
-      mode: studioConfig.dataSourceMode,
-      baseUrl: studioConfig.apiBaseUrl,
-      token: studioConfig.gatewayToken,
-    }),
-    [],
-  );
-
-  return <DataSourcesContext.Provider value={sources}>{children}</DataSourcesContext.Provider>;
-}
-
-export function useDataSources() {
-  const context = useContext(DataSourcesContext);
-  if (!context) {
-    throw new Error('useDataSources must be used within DataSourcesProvider');
-  }
-  return context;
-}
-

package/src/providers/devtools-provider.tsx

@@ -1,72 +0,0 @@
-import { useEffect, useRef, type ReactNode } from 'react';
-import { devToolsStore, GenericChannel } from '@kb-labs/studio-devtools';
-import type { DevToolsPlugin, EventBusEvent } from '@kb-labs/studio-devtools';
-import { eventBus } from '@kb-labs/studio-event-bus';
-import { useFeatureFlags } from '@/hooks/use-feature-flags';
-
-interface DevToolsProviderProps {
-  children: ReactNode;
-  /** External plugins to register alongside built-in channels */
-  plugins?: DevToolsPlugin[];
-}
-
-/**
- * Mounts all DevTools instrumentation when the 'devtools-panel' feature flag is enabled.
- * Must be placed inside SettingsProvider (for feature flags) and outside RegistryV2Provider
- * (so MF events from registry load are captured).
- */
-export function DevToolsProvider({ children, plugins = [] }: DevToolsProviderProps) {
-  const { isEnabled } = useFeatureFlags();
-  const enabled = isEnabled('devtools-panel');
-  const pluginsRef = useRef(plugins);
-  pluginsRef.current = plugins;
-
-  useEffect(() => {
-    if (!enabled) { return; }
-
-    // --- EventBus channel ---
-    const eventBusChannel = new GenericChannel<EventBusEvent>(
-      'eventbus',
-      'EventBus',
-      'NodeIndexOutlined',
-    );
-    devToolsStore.registerChannel(eventBusChannel);
-
-    // Backfill existing history
-    eventBus.getHistory().forEach((record) => {
-      eventBusChannel.push({
-        id: `eb-${record.meta.timestamp}-${Math.random().toString(36).slice(2)}`,
-        event: record.event,
-        payload: record.payload,
-        sourcePluginId: record.meta.sourcePluginId,
-        sourcePageId: record.meta.sourcePageId,
-        timestamp: record.meta.timestamp,
-      });
-    });
-
-    // Live stream
-    eventBus.setDevToolsObserver((record) => {
-      eventBusChannel.push({
-        id: `eb-${record.meta.timestamp}-${Math.random().toString(36).slice(2)}`,
-        event: record.event,
-        payload: record.payload,
-        sourcePluginId: record.meta.sourcePluginId,
-        sourcePageId: record.meta.sourcePageId,
-        timestamp: record.meta.timestamp,
-      });
-    });
-
-    // --- External plugins ---
-    pluginsRef.current.forEach((p) => { devToolsStore.registerPlugin(p); });
-
-    return () => {
-      eventBus.clearDevToolsObserver();
-      devToolsStore.unregisterChannel('eventbus');
-      pluginsRef.current.forEach((p) => {
-        devToolsStore.unregisterChannel(p.channel.id);
-      });
-    };
-  }, [enabled]);
-
-  return <>{children}</>;
-}

package/src/providers/navigation-items-provider.tsx

@@ -1,38 +0,0 @@
-/**
- * @module @kb-labs/studio-app/providers/navigation-items-provider
- * Provides the list of available sidebar navigation items to settings UI.
- * Single source of truth — no hardcoded item lists.
- */
-
-import * as React from 'react';
-
-export interface NavigationItemDescriptor {
-  key: string;
-  label: string;
-}
-
-interface NavigationItemsContextValue {
-  availableItems: NavigationItemDescriptor[];
-}
-
-const NavigationItemsContext = React.createContext<NavigationItemsContextValue>({
-  availableItems: [],
-});
-
-export interface NavigationItemsProviderProps {
-  items: NavigationItemDescriptor[];
-  children: React.ReactNode;
-}
-
-export function NavigationItemsProvider({ items, children }: NavigationItemsProviderProps) {
-  const value = React.useMemo(() => ({ availableItems: items }), [items]);
-  return (
-    <NavigationItemsContext.Provider value={value}>
-      {children}
-    </NavigationItemsContext.Provider>
-  );
-}
-
-export function useNavigationItems(): NavigationItemDescriptor[] {
-  return React.useContext(NavigationItemsContext).availableItems;
-}