@kb-labs/studio-app 0.6.0

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

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

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

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

@@ -0,0 +1,172 @@
+/**
+ * @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

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