@kb-labs/studio-app 0.6.0 → 2.8.0

package/src/components/ui/theme-transition-overlay.tsx

@@ -1,70 +0,0 @@
-import * as React from 'react';
-import { Sun, Moon, Monitor } from 'lucide-react';
-import type { ThemeMode } from './kb-config-provider';
-
-export interface ThemeTransitionOverlayProps {
-  show: boolean;
-  theme: ThemeMode;
-}
-
-const themeConfig = {
-  light: { icon: Sun, label: 'Light Mode' },
-  dark: { icon: Moon, label: 'Dark Mode' },
-  auto: { icon: Monitor, label: 'Auto Mode' },
-};
-
-export function ThemeTransitionOverlay({ show, theme }: ThemeTransitionOverlayProps) {
-  const { icon: Icon, label } = themeConfig[theme];
-
-  return (
-    <div
-      className="theme-transition-overlay"
-      style={{
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        width: '100vw',
-        height: '100vh',
-        backgroundColor: 'var(--bg-primary)',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        zIndex: 9999,
-        transform: show ? 'translateY(0)' : 'translateY(-100%)',
-        transition: 'transform 300ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms ease-in-out, color 150ms ease-in-out',
-        pointerEvents: show ? 'auto' : 'none',
-      }}
-    >
-      <div
-        style={{
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          gap: 16,
-          opacity: show ? 1 : 0,
-          transition: 'opacity 200ms ease-in-out',
-          transitionDelay: show ? '100ms' : '0ms',
-        }}
-      >
-        <Icon
-          size={48}
-          strokeWidth={1.5}
-          style={{
-            color: 'var(--text-primary)',
-            transition: 'color 150ms ease-in-out',
-          }}
-        />
-        <div
-          style={{
-            fontSize: '18px',
-            fontWeight: 500,
-            color: 'var(--text-primary)',
-            transition: 'color 150ms ease-in-out',
-          }}
-        >
-          Switching to {label}...
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/components/ui/utils.ts

@@ -1,6 +0,0 @@
-import { clsx, type ClassValue } from 'clsx';
-
-export function cn(...inputs: ClassValue[]) {
-  return clsx(inputs);
-}
-

package/src/components/widget-error-boundary.tsx

@@ -1,172 +0,0 @@
-/**
- * @module @kb-labs/studio-app/components/widget-error-boundary
- * Error Boundary for widget isolation — keeps one widget crash from affecting the rest of the page.
- */
-
-import * as React from 'react';
-import { UIButton, UITypographyText, UITag } from '@kb-labs/studio-ui-kit';
-import { AlertTriangle, ChevronDown, ChevronUp, RotateCcw } from 'lucide-react';
-import { trackWidgetEvent } from '../utils/analytics';
-
-export interface WidgetErrorBoundaryProps {
-  widgetId?: string;
-  pluginId?: string;
-  children: React.ReactNode;
-  fallback?: React.ComponentType<{ error: Error; resetError: () => void }>;
-}
-
-interface State {
-  hasError: boolean;
-  error: Error | null;
-  detailsOpen: boolean;
-}
-
-export class WidgetErrorBoundary extends React.Component<WidgetErrorBoundaryProps, State> {
-  constructor(props: WidgetErrorBoundaryProps) {
-    super(props);
-    this.state = { hasError: false, error: null, detailsOpen: false };
-  }
-
-  static getDerivedStateFromError(error: Error): Partial<State> {
-    return { hasError: true, error };
-  }
-
-  override componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
-    if (this.props.widgetId && this.props.pluginId) {
-      trackWidgetEvent('error', {
-        widgetId: this.props.widgetId,
-        pluginId: this.props.pluginId,
-        code: error.message,
-      });
-    }
-    console.error('[WidgetErrorBoundary]', error, errorInfo);
-  }
-
-  resetError = (): void => {
-    this.setState({ hasError: false, error: null, detailsOpen: false });
-  };
-
-  toggleDetails = (): void => {
-    this.setState((s) => ({ detailsOpen: !s.detailsOpen }));
-  };
-
-  override render(): React.ReactNode {
-    if (!this.state.hasError || !this.state.error) {
-      return this.props.children;
-    }
-
-    if (this.props.fallback) {
-      const Fallback = this.props.fallback;
-      return <Fallback error={this.state.error} resetError={this.resetError} />;
-    }
-
-    const { error, detailsOpen } = this.state;
-    const { widgetId, pluginId } = this.props;
-
-    return (
-      <div style={{
-        height: '100%',
-        minHeight: 120,
-        border: '1px solid var(--border-primary)',
-        borderRadius: 8,
-        display: 'flex',
-        flexDirection: 'column',
-        padding: '12px 14px',
-        gap: 6,
-        backgroundColor: 'var(--bg-secondary)',
-        overflow: 'hidden',
-      }}>
-        {/* Header row */}
-        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-          <AlertTriangle size={14} style={{ color: 'var(--error)', flexShrink: 0 }} />
-          <UITypographyText strong style={{ fontSize: 13 }}>Widget error</UITypographyText>
-        </div>
-
-        {/* Context */}
-        {(pluginId || widgetId) && (
-          <UITypographyText type="secondary" style={{ fontSize: 11, fontFamily: 'monospace' }}>
-            {[pluginId, widgetId].filter(Boolean).join(' › ')}
-          </UITypographyText>
-        )}
-
-        {/* Message — truncated */}
-        <UITypographyText
-          type="secondary"
-          style={{
-            fontSize: 12,
-            display: '-webkit-box',
-            WebkitLineClamp: 2,
-            WebkitBoxOrient: 'vertical',
-            overflow: 'hidden',
-          }}
-        >
-          {error.message || 'Unknown error'}
-        </UITypographyText>
-
-        {/* Actions */}
-        <div style={{ display: 'flex', gap: 6, marginTop: 2 }}>
-          <UIButton size="small" icon={<RotateCcw size={11} />} onClick={this.resetError}>
-            Retry
-          </UIButton>
-          <button
-            onClick={this.toggleDetails}
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              gap: 3,
-              background: 'none',
-              border: 'none',
-              padding: 0,
-              cursor: 'pointer',
-              color: 'var(--text-tertiary)',
-              fontSize: 11,
-            }}
-          >
-            {detailsOpen ? <ChevronUp size={11} /> : <ChevronDown size={11} />}
-            Details
-          </button>
-        </div>
-
-        {/* Expandable details */}
-        {detailsOpen && (
-          <div style={{
-            marginTop: 4,
-            border: '1px solid var(--border-primary)',
-            borderRadius: 4,
-            overflow: 'hidden',
-          }}>
-            <div style={{
-              padding: '6px 8px',
-              borderBottom: error.stack ? '1px solid var(--border-primary)' : undefined,
-              display: 'flex',
-              alignItems: 'center',
-              gap: 6,
-            }}>
-              <UITag variant="error" style={{ margin: 0, fontSize: 10 }}>{error.name}</UITag>
-            </div>
-            {error.stack && (
-              <div style={{
-                padding: '6px 8px',
-                maxHeight: 120,
-                overflowY: 'auto',
-                background: 'var(--bg-tertiary)',
-              }}>
-                <pre style={{
-                  margin: 0,
-                  fontFamily: 'monospace',
-                  fontSize: 10,
-                  lineHeight: 1.5,
-                  color: 'var(--text-secondary)',
-                  whiteSpace: 'pre-wrap',
-                  wordBreak: 'break-word',
-                }}>
-                  {error.stack}
-                </pre>
-              </div>
-            )}
-          </div>
-        )}
-      </div>
-    );
-  }
-}

package/src/config/env.ts

@@ -1,5 +0,0 @@
-type StudioEnv = Record<string, string | undefined>;
-
-export function getStudioEnv(): StudioEnv {
-  return ((import.meta as ImportMeta & { env?: StudioEnv }).env) ?? {};
-}