@kb-labs/studio-app 0.6.0

package/src/components/ui/kb-quick-search.tsx

@@ -0,0 +1,196 @@
+import * as React from 'react';
+import { Modal, Input, List, Empty, Badge } from 'antd';
+import { Search, FileText, Box, Settings, BarChart, Activity, Navigation, Zap } from 'lucide-react';
+import styles from './kb-quick-search.module.css';
+
+export interface SearchableItem {
+  id: string;
+  title: string;
+  description?: string;
+  category: 'page' | 'plugin' | 'widget' | 'workflow' | 'setting' | 'navigation' | 'action';
+  path: string;
+  icon?: React.ReactNode;
+  badge?: string;
+}
+
+export interface KBQuickSearchProps {
+  open: boolean;
+  onClose: () => void;
+  items: SearchableItem[];
+  onNavigate: (path: string) => void;
+  placeholder?: string;
+}
+
+const CATEGORY_CONFIG = {
+  page:       { icon: FileText,   color: '#1890ff', label: 'Page' },
+  navigation: { icon: Navigation, color: '#13c2c2', label: 'Navigation' },
+  action:     { icon: Zap,        color: '#fa8c16', label: 'Action' },
+  plugin:     { icon: Box,        color: '#52c41a', label: 'Plugin' },
+  widget:     { icon: Activity,   color: '#722ed1', label: 'Widget' },
+  workflow:   { icon: BarChart,   color: '#faad14', label: 'Workflow' },
+  setting:    { icon: Settings,   color: '#8c8c8c', label: 'Setting' },
+} as const;
+
+export function KBQuickSearch({
+  open,
+  onClose,
+  items,
+  onNavigate,
+  placeholder = 'Search pages, plugins, widgets...',
+}: KBQuickSearchProps) {
+  const [searchQuery, setSearchQuery] = React.useState('');
+  const [selectedIndex, setSelectedIndex] = React.useState(0);
+  const inputRef = React.useRef<any>(null);
+
+  const filteredItems = React.useMemo(() => {
+    if (!searchQuery.trim()) { return items.slice(0, 10); }
+    const query = searchQuery.toLowerCase();
+    return items
+      .filter((item) => {
+        return (item.title?.toLowerCase().includes(query) ?? false)
+          || (item.description?.toLowerCase().includes(query) ?? false)
+          || (item.path?.toLowerCase().includes(query) ?? false);
+      })
+      .slice(0, 10);
+  }, [items, searchQuery]);
+
+  React.useEffect(() => { setSelectedIndex(0); }, [filteredItems]);
+
+  React.useEffect(() => {
+    if (open) {
+      setTimeout(() => { inputRef.current?.focus(); }, 100);
+    } else {
+      setSearchQuery('');
+      setSelectedIndex(0);
+    }
+  }, [open]);
+
+  const handleKeyDown = React.useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        setSelectedIndex((prev) => Math.min(prev + 1, filteredItems.length - 1));
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        setSelectedIndex((prev) => Math.max(prev - 1, 0));
+      } else if (e.key === 'Enter') {
+        e.preventDefault();
+        const item = filteredItems[selectedIndex];
+        if (item) { onNavigate(item.path); onClose(); }
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        onClose();
+      }
+    },
+    [filteredItems, selectedIndex, onNavigate, onClose]
+  );
+
+  const handleItemClick = (item: SearchableItem) => {
+    onNavigate(item.path);
+    onClose();
+  };
+
+  return (
+    <Modal
+      open={open}
+      onCancel={onClose}
+      footer={null}
+      width={600}
+      centered
+      closable={false}
+      styles={{ body: { padding: 0 } }}
+    >
+      <div className={styles.searchWrap}>
+        <Input
+          ref={inputRef}
+          size="large"
+          placeholder={placeholder}
+          prefix={<Search size={18} style={{ color: '#8c8c8c' }} />}
+          suffix={
+            <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+              <kbd>ESC</kbd>
+            </div>
+          }
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          onKeyDown={handleKeyDown}
+          className={styles.searchInput}
+        />
+      </div>
+
+      <div className={styles.list}>
+        {filteredItems.length === 0 ? (
+          <Empty
+            image={Empty.PRESENTED_IMAGE_SIMPLE}
+            description="No results found"
+            className={styles.emptyState}
+          />
+        ) : (
+          <List
+            dataSource={filteredItems}
+            renderItem={(item, index) => {
+              const config = CATEGORY_CONFIG[item.category];
+              const Icon = config.icon;
+              const isSelected = index === selectedIndex;
+
+              return (
+                <List.Item
+                  key={item.id}
+                  onClick={() => handleItemClick(item)}
+                  className={`${styles.resultItem} ${isSelected ? styles.selected : ''}`}
+                  onMouseEnter={() => setSelectedIndex(index)}
+                >
+                  <List.Item.Meta
+                    avatar={
+                      <div
+                        className={styles.categoryIcon}
+                        style={{ backgroundColor: `${config.color}15` }}
+                      >
+                        {item.icon || <Icon size={16} color={config.color} />}
+                      </div>
+                    }
+                    title={
+                      <div className={styles.itemTitle}>
+                        <span>{item.title}</span>
+                        {item.badge && (
+                          <Badge
+                            count={item.badge}
+                            style={{ backgroundColor: config.color, fontSize: 11, height: 18, lineHeight: '18px' }}
+                          />
+                        )}
+                      </div>
+                    }
+                    description={
+                      <div className={styles.itemDesc}>
+                        <span style={{ fontSize: 11, color: config.color }}>{config.label}</span>
+                        {item.description && (
+                          <>
+                            <span style={{ color: 'var(--text-tertiary)' }}>•</span>
+                            <span style={{ fontSize: 12 }}>{item.description}</span>
+                          </>
+                        )}
+                      </div>
+                    }
+                  />
+                  {isSelected && (
+                    <div className={styles.enterHint}>
+                      <kbd>↵</kbd>
+                    </div>
+                  )}
+                </List.Item>
+              );
+            }}
+          />
+        )}
+      </div>
+
+      <div className={styles.footer}>
+        <div className={styles.footerLeft}>
+          <div className={styles.footerHint}><kbd>↑↓</kbd> Navigate</div>
+          <div className={styles.footerHint}><kbd>↵</kbd> Select</div>
+        </div>
+        <div>{filteredItems.length} result{filteredItems.length !== 1 ? 's' : ''}</div>
+      </div>
+    </Modal>
+  );
+}

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

@@ -0,0 +1,47 @@
+.sider {
+  overflow: hidden;
+  height: calc(100vh - 28px);
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 28px;
+  background-color: var(--bg-sidebar);
+  border-right: none;
+  box-shadow: 1px 0 0 var(--border-primary), 2px 0 8px rgba(0, 0, 0, 0.03);
+  z-index: var(--z-sidebar);
+  display: flex;
+  flex-direction: column;
+}
+
+.header {
+  height: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-bottom: 1px solid var(--border-primary);
+  flex-shrink: 0;
+}
+
+.scrollArea {
+  position: absolute;
+  top: 64px;
+  left: 0;
+  right: 0;
+  bottom: 48px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.menu {
+  border-right: 0 !important;
+  padding: 4px 8px;
+}
+
+.settingsArea {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border-top: 1px solid var(--border-primary);
+  background-color: var(--bg-sidebar);
+}

package/src/components/ui/kb-sidebar.tsx

@@ -0,0 +1,196 @@
+import * as React from 'react';
+import { Layout, Menu } from 'antd';
+import type { MenuProps } from 'antd';
+import { PanelLeftClose, PanelLeftOpen } from 'lucide-react';
+import { UIButton } from '@kb-labs/studio-ui-kit';
+import styles from './kb-sidebar.module.css';
+
+const { Sider: AntSider } = Layout;
+
+export interface NavigationItem {
+  key: string;
+  label: string;
+  icon?: React.ReactNode;
+  path?: string;
+  children?: NavigationItem[];
+  type?: 'group' | 'divider';
+}
+
+export interface KBSidebarProps {
+  items: NavigationItem[];
+  collapsed?: boolean;
+  onCollapse?: (collapsed: boolean) => void;
+  width?: number;
+  collapsedWidth?: number;
+  currentPath?: string;
+  onNavigate?: (path: string) => void;
+}
+
+export function KBSidebar({
+  items,
+  collapsed: controlledCollapsed,
+  onCollapse,
+  width = 220,
+  collapsedWidth = 64,
+  currentPath,
+  onNavigate,
+}: KBSidebarProps) {
+  const [internalCollapsed, setInternalCollapsed] = React.useState(false);
+
+  const collapsed = controlledCollapsed !== undefined ? controlledCollapsed : internalCollapsed;
+  const setCollapsed = React.useCallback(
+    (newCollapsed: boolean) => {
+      if (controlledCollapsed === undefined) {
+        setInternalCollapsed(newCollapsed);
+      }
+      onCollapse?.(newCollapsed);
+    },
+    [controlledCollapsed, onCollapse]
+  );
+
+  const keyToPathMap = React.useMemo(() => {
+    const map = new Map<string, string>();
+    const buildMap = (navItems: NavigationItem[]) => {
+      for (const item of navItems) {
+        if (item.path && item.key) {
+          map.set(item.key, item.path);
+        }
+        if (item.children) {
+          buildMap(item.children);
+        }
+      }
+    };
+    buildMap(items);
+    return map;
+  }, [items]);
+
+  const menuItems: MenuProps['items'] = React.useMemo(() => {
+    const convertItems = (navItems: NavigationItem[]): MenuProps['items'] => {
+      return navItems.map((item) => {
+        const hasChildren = item.children && item.children.length > 0;
+
+        if (item.type === 'divider') {
+          return { type: 'divider' as const, key: item.key };
+        }
+
+        if (item.type === 'group' && hasChildren) {
+          return {
+            type: 'group' as const,
+            key: item.key,
+            label: item.label,
+            children: convertItems(item.children!),
+          };
+        }
+
+        const menuItem: any = {
+          key: item.key,
+          icon: item.icon,
+          label: item.label,
+        };
+
+        if (hasChildren && item.children) {
+          menuItem.children = convertItems(item.children);
+        }
+
+        return menuItem;
+      });
+    };
+
+    return convertItems(items);
+  }, [items]);
+
+  const selectedKeys = React.useMemo(() => {
+    if (!currentPath) { return []; }
+
+    const findKeys = (path: string, navItems: NavigationItem[]): string[] => {
+      for (const item of navItems) {
+        if (item.path === path) {
+          return [item.key || item.path || `item-${Math.random()}`];
+        }
+        if (item.children?.length) {
+          const childKeys = findKeys(path, item.children);
+          if (childKeys.length > 0) {return childKeys;}
+        }
+      }
+      for (const item of navItems) {
+        if (item.path && !item.children?.length && path.startsWith(item.path + '/')) {
+          return [item.key || item.path || `item-${Math.random()}`];
+        }
+      }
+      return [];
+    };
+
+    return findKeys(currentPath, items);
+  }, [currentPath, items]);
+
+  const openKeys = React.useMemo(() => {
+    if (!currentPath) { return []; }
+
+    const findOpenKeys = (path: string, navItems: NavigationItem[]): string[] => {
+      for (const item of navItems) {
+        if (item.children) {
+          const childKeys = findOpenKeys(path, item.children);
+          if (childKeys.length > 0) {
+            return [item.key || item.path || `item-${Math.random()}`, ...childKeys];
+          }
+        }
+      }
+      return [];
+    };
+
+    return findOpenKeys(currentPath, items);
+  }, [currentPath, items]);
+
+  const handleMenuClick = (e: { key: string }) => {
+    const path = keyToPathMap.get(e.key);
+    if (path && onNavigate) {
+      onNavigate(path);
+    }
+  };
+
+  const mainItems = (menuItems ?? []).filter((item: any) => item?.key !== 'settings');
+  const settingsItems = (menuItems ?? []).filter((item: any) => item?.key === 'settings');
+
+  return (
+    <AntSider
+      collapsible
+      collapsed={collapsed}
+      width={width}
+      collapsedWidth={collapsedWidth}
+      trigger={null}
+      className={styles.sider}
+      theme="light"
+    >
+      <div className={styles.header}>
+        <UIButton
+          variant="text"
+          icon={collapsed ? <PanelLeftOpen size={16} /> : <PanelLeftClose size={16} />}
+          onClick={() => setCollapsed(!collapsed)}
+        />
+      </div>
+
+      <div className={styles.scrollArea}>
+        <Menu
+          mode="inline"
+          selectedKeys={selectedKeys}
+          defaultOpenKeys={openKeys}
+          items={mainItems}
+          onClick={handleMenuClick}
+          className={styles.menu}
+        />
+      </div>
+
+      {settingsItems.length > 0 && (
+        <div className={styles.settingsArea}>
+          <Menu
+            mode="inline"
+            selectedKeys={selectedKeys}
+            items={settingsItems}
+            onClick={handleMenuClick}
+            className={styles.menu}
+          />
+        </div>
+      )}
+    </AntSider>
+  );
+}

package/src/components/ui/kb-stat-card.module.css

@@ -0,0 +1,21 @@
+.label {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  margin-bottom: 10px;
+}
+
+.value {
+  font-size: 28px;
+  font-weight: 700;
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+  font-family: var(--font-heading);
+  color: var(--text-primary);
+}
+
+.value.positive { color: #52c41a; }
+.value.negative { color: #ff4d4f; }
+.value.warning  { color: #faad14; }

package/src/components/ui/kb-stat-card.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { UICard } from '@kb-labs/studio-ui-kit';
+import styles from './kb-stat-card.module.css';
+
+export interface KBStatCardProps {
+  label: string;
+  value: React.ReactNode;
+  variant?: 'positive' | 'negative' | 'warning' | 'default';
+}
+
+export function KBStatCard({ label, value, variant = 'default' }: KBStatCardProps) {
+  return (
+    <UICard>
+      <div>
+        <div className={styles.label}>{label}</div>
+        <div className={`${styles.value} ${variant !== 'default' ? styles[variant] : ''}`}>
+          {value}
+        </div>
+      </div>
+    </UICard>
+  );
+}

package/src/components/ui/kb-stat-grid.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { UIRow, UICol } from '@kb-labs/studio-ui-kit';
+
+export interface KBStatGridProps {
+  columns?: number;
+  children: React.ReactNode;
+}
+
+export function KBStatGrid({ columns = 4, children }: KBStatGridProps) {
+  const span = 24 / columns;
+
+  return (
+    <UIRow gutter={[16, 16]}>
+      {React.Children.map(children, (child, index) => (
+        <UICol span={span} key={index}>
+          {child}
+        </UICol>
+      ))}
+    </UIRow>
+  );
+}
+

package/src/components/ui/kb-status-bar.module.css

@@ -0,0 +1,49 @@
+.bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 28px;
+  background-color: var(--bg-secondary);
+  border-top: 1px solid var(--border-primary);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 8px;
+  z-index: var(--z-sticky);
+  font-size: 12px;
+  transition: background-color 150ms ease-in-out, border-color 150ms ease-in-out;
+}
+
+.side {
+  display: flex;
+  align-items: center;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 12px;
+  height: 28px;
+  font-size: 12px;
+  cursor: default;
+  color: var(--text-secondary);
+  transition: background-color 150ms ease-in-out, color 150ms ease-in-out;
+  border-radius: 4px;
+  user-select: none;
+}
+
+.item.clickable {
+  cursor: pointer;
+}
+
+.item.clickable:hover {
+  background-color: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.itemIcon {
+  display: flex;
+  align-items: center;
+}

package/src/components/ui/kb-status-bar.tsx

@@ -0,0 +1,145 @@
+import * as React from 'react';
+import { Space, Tooltip, Badge } from 'antd';
+import {
+  ApiOutlined,
+  CloudOutlined,
+  UserOutlined,
+  SettingOutlined,
+  QuestionCircleOutlined,
+  ThunderboltOutlined,
+} from '@ant-design/icons';
+import styles from './kb-status-bar.module.css';
+
+export interface StatusBarItemProps {
+  icon?: React.ReactNode;
+  label: string;
+  tooltip?: string;
+  status?: 'success' | 'error' | 'warning' | 'processing' | 'default';
+  onClick?: () => void;
+  clickable?: boolean;
+}
+
+export function StatusBarItem({
+  icon,
+  label,
+  tooltip,
+  status,
+  onClick,
+  clickable = !!onClick,
+}: StatusBarItemProps) {
+  const content = (
+    <div
+      onClick={onClick}
+      className={`${styles.item} ${clickable ? styles.clickable : ''}`}
+    >
+      {status && <Badge status={status} />}
+      {icon && <span className={styles.itemIcon}>{icon}</span>}
+      <span>{label}</span>
+    </div>
+  );
+
+  if (tooltip) {
+    return <Tooltip title={tooltip}>{content}</Tooltip>;
+  }
+
+  return content;
+}
+
+export interface KBStatusBarProps {
+  leftItems?: React.ReactNode;
+  rightItems?: React.ReactNode;
+  children?: React.ReactNode;
+}
+
+export function KBStatusBar({ leftItems, rightItems, children }: KBStatusBarProps) {
+  return (
+    <div className={styles.bar}>
+      {children ? (
+        children
+      ) : (
+        <>
+          <div className={styles.side}>
+            <Space size={0}>{leftItems}</Space>
+          </div>
+          <div className={styles.side}>
+            <Space size={0}>{rightItems}</Space>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+export const StatusBarPresets = {
+  ApiConnection: ({ connected, onClick }: { connected: boolean; onClick?: () => void }) => (
+    <StatusBarItem
+      icon={<ApiOutlined />}
+      label={connected ? 'Connected' : 'Disconnected'}
+      status={connected ? 'success' : 'error'}
+      tooltip={connected ? 'API connection active' : 'API connection lost'}
+      onClick={onClick}
+      clickable={!!onClick}
+    />
+  ),
+
+  CloudStatus: ({ synced, onClick }: { synced: boolean; onClick?: () => void }) => (
+    <StatusBarItem
+      icon={<CloudOutlined />}
+      label={synced ? 'Synced' : 'Syncing...'}
+      status={synced ? 'success' : 'processing'}
+      tooltip={synced ? 'All changes synced' : 'Syncing changes...'}
+      onClick={onClick}
+      clickable={!!onClick}
+    />
+  ),
+
+  User: ({ email, onClick }: { email: string; onClick?: () => void }) => (
+    <StatusBarItem
+      icon={<UserOutlined />}
+      label={email}
+      tooltip="Current user"
+      onClick={onClick}
+      clickable={!!onClick}
+    />
+  ),
+
+  Version: ({ version, onClick }: { version: string; onClick?: () => void }) => (
+    <StatusBarItem
+      label={`v${version}`}
+      tooltip={`Platform version ${version}`}
+      onClick={onClick}
+      clickable={!!onClick}
+    />
+  ),
+
+  Settings: ({ onClick }: { onClick: () => void }) => (
+    <StatusBarItem
+      icon={<SettingOutlined />}
+      label="Settings"
+      tooltip="Open settings"
+      onClick={onClick}
+      clickable
+    />
+  ),
+
+  Help: ({ onClick }: { onClick: () => void }) => (
+    <StatusBarItem
+      icon={<QuestionCircleOutlined />}
+      label="Help"
+      tooltip="Get help"
+      onClick={onClick}
+      clickable
+    />
+  ),
+
+  BackgroundJobs: ({ count, onClick }: { count: number; onClick?: () => void }) => (
+    <StatusBarItem
+      icon={<ThunderboltOutlined />}
+      label={count === 1 ? '1 job running' : `${count} jobs running`}
+      status="processing"
+      tooltip="View background jobs"
+      onClick={onClick}
+      clickable={!!onClick}
+    />
+  ),
+};