@kb-labs/studio-app 0.6.0 → 2.8.0

package/src/components/ui/kb-quick-search.module.css

@@ -1,86 +0,0 @@
-.searchWrap {
-  padding: 16px 16px 0;
-}
-
-.searchInput {
-  margin-bottom: 12px;
-}
-
-.list {
-  max-height: 400px;
-  overflow-y: auto;
-}
-
-.emptyState {
-  padding: 40px 16px;
-}
-
-.resultItem {
-  padding: 12px 16px;
-  cursor: pointer;
-  border-left: 3px solid transparent;
-  transition: background-color 0.15s, border-color 0.15s;
-}
-
-.resultItem.selected {
-  background-color: var(--bg-tertiary);
-  border-left-color: var(--primary-color, #1890ff);
-}
-
-.categoryIcon {
-  width: 32px;
-  height: 32px;
-  border-radius: 6px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.itemTitle {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.itemDesc {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.enterHint {
-  font-size: 11px;
-  color: var(--text-tertiary);
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.footer {
-  padding: 12px 16px;
-  border-top: 1px solid var(--border-primary);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-size: 12px;
-  color: var(--text-tertiary);
-}
-
-.footerLeft {
-  display: flex;
-  gap: 12px;
-}
-
-.footerHint {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-kbd {
-  padding: 2px 4px;
-  background: var(--bg-tertiary);
-  border: 1px solid var(--border-primary);
-  border-radius: 2px;
-  font-size: 11px;
-}

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

@@ -1,196 +0,0 @@
-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

@@ -1,47 +0,0 @@
-.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

@@ -1,196 +0,0 @@
-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

@@ -1,21 +0,0 @@
-.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

@@ -1,22 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,49 +0,0 @@
-.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;
-}