crca 1.4.0__py3-none-any.whl

tools/bolt.diy/app/components/@settings/core/types.ts

@@ -0,0 +1,114 @@
+import type { ReactNode } from 'react';
+import { User, Folder, Wifi, Settings, Box, Sliders } from 'lucide-react';
+
+export type SettingCategory = 'profile' | 'file_sharing' | 'connectivity' | 'system' | 'services' | 'preferences';
+
+export type TabType =
+  | 'profile'
+  | 'settings'
+  | 'notifications'
+  | 'features'
+  | 'data'
+  | 'cloud-providers'
+  | 'local-providers'
+  | 'github'
+  | 'gitlab'
+  | 'netlify'
+  | 'vercel'
+  | 'supabase'
+  | 'event-logs'
+  | 'mcp';
+
+export type WindowType = 'user' | 'developer';
+
+export interface UserProfile {
+  nickname: any;
+  name: string;
+  email: string;
+  avatar?: string;
+  theme: 'light' | 'dark' | 'system';
+  notifications: boolean;
+  password?: string;
+  bio?: string;
+  language: string;
+  timezone: string;
+}
+
+export interface SettingItem {
+  id: TabType;
+  label: string;
+  icon: string;
+  category: SettingCategory;
+  description?: string;
+  component: () => ReactNode;
+  badge?: string;
+  keywords?: string[];
+}
+
+export interface TabVisibilityConfig {
+  id: TabType;
+  visible: boolean;
+  window: WindowType;
+  order: number;
+  isExtraDevTab?: boolean;
+  locked?: boolean;
+}
+
+export interface DevTabConfig extends TabVisibilityConfig {
+  window: 'developer';
+}
+
+export interface UserTabConfig extends TabVisibilityConfig {
+  window: 'user';
+}
+
+export interface TabWindowConfig {
+  userTabs: UserTabConfig[];
+}
+
+export const TAB_LABELS: Record<TabType, string> = {
+  profile: 'Profile',
+  settings: 'Settings',
+  notifications: 'Notifications',
+  features: 'Features',
+  data: 'Data Management',
+  'cloud-providers': 'Cloud Providers',
+  'local-providers': 'Local Providers',
+  github: 'GitHub',
+  gitlab: 'GitLab',
+  netlify: 'Netlify',
+  vercel: 'Vercel',
+  supabase: 'Supabase',
+  'event-logs': 'Event Logs',
+  mcp: 'MCP Servers',
+};
+
+export const categoryLabels: Record<SettingCategory, string> = {
+  profile: 'Profile & Account',
+  file_sharing: 'File Sharing',
+  connectivity: 'Connectivity',
+  system: 'System',
+  services: 'Services',
+  preferences: 'Preferences',
+};
+
+export const categoryIcons: Record<SettingCategory, React.ComponentType<{ className?: string }>> = {
+  profile: User,
+  file_sharing: Folder,
+  connectivity: Wifi,
+  system: Settings,
+  services: Box,
+  preferences: Sliders,
+};
+
+export interface Profile {
+  username?: string;
+  bio?: string;
+  avatar?: string;
+  preferences?: {
+    notifications?: boolean;
+    theme?: 'light' | 'dark' | 'system';
+    language?: string;
+    timezone?: string;
+  };
+}

tools/bolt.diy/app/components/@settings/index.ts

@@ -0,0 +1,12 @@
+// Core exports
+export { ControlPanel } from './core/ControlPanel';
+export type { TabType, TabVisibilityConfig } from './core/types';
+
+// Constants
+export { TAB_LABELS, TAB_DESCRIPTIONS, DEFAULT_TAB_CONFIG } from './core/constants';
+
+// Shared components
+export { TabTile } from './shared/components/TabTile';
+
+// Utils
+export { getVisibleTabs, reorderTabs, resetToDefaultConfig } from './utils/tab-helpers';

tools/bolt.diy/app/components/@settings/shared/components/TabTile.tsx

@@ -0,0 +1,151 @@
+import * as Tooltip from '@radix-ui/react-tooltip';
+import { classNames } from '~/utils/classNames';
+import type { TabVisibilityConfig } from '~/components/@settings/core/types';
+import { TAB_LABELS, TAB_ICONS } from '~/components/@settings/core/constants';
+import { GlowingEffect } from '~/components/ui/GlowingEffect';
+
+interface TabTileProps {
+  tab: TabVisibilityConfig;
+  onClick?: () => void;
+  isActive?: boolean;
+  hasUpdate?: boolean;
+  statusMessage?: string;
+  description?: string;
+  isLoading?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const TabTile: React.FC<TabTileProps> = ({
+  tab,
+  onClick,
+  isActive,
+  hasUpdate,
+  statusMessage,
+  description,
+  isLoading,
+  className,
+  children,
+}: TabTileProps) => {
+  return (
+    <Tooltip.Provider delayDuration={0}>
+      <Tooltip.Root>
+        <Tooltip.Trigger asChild>
+          <div className={classNames('min-h-[160px] list-none', className || '')}>
+            <div className="relative h-full rounded-xl border border-[#E5E5E5] dark:border-[#333333] p-0.5">
+              <GlowingEffect
+                blur={0}
+                borderWidth={1}
+                spread={20}
+                glow={true}
+                disabled={false}
+                proximity={40}
+                inactiveZone={0.3}
+                movementDuration={0.4}
+              />
+              <div
+                onClick={onClick}
+                className={classNames(
+                  'relative flex flex-col items-center justify-center h-full p-4 rounded-lg',
+                  'bg-white dark:bg-[#141414]',
+                  'group cursor-pointer',
+                  'hover:bg-purple-50 dark:hover:bg-[#1a1a1a]',
+                  'transition-colors duration-100 ease-out',
+                  isActive ? 'bg-purple-500/5 dark:bg-purple-500/10' : '',
+                  isLoading ? 'cursor-wait opacity-70 pointer-events-none' : '',
+                )}
+              >
+                {/* Icon */}
+                <div
+                  className={classNames(
+                    'relative',
+                    'w-14 h-14',
+                    'flex items-center justify-center',
+                    'rounded-xl',
+                    'bg-gray-100 dark:bg-gray-800',
+                    'ring-1 ring-gray-200 dark:ring-gray-700',
+                    'group-hover:bg-purple-100 dark:group-hover:bg-gray-700/80',
+                    'group-hover:ring-purple-200 dark:group-hover:ring-purple-800/30',
+                    'transition-all duration-100 ease-out',
+                    isActive ? 'bg-purple-500/10 dark:bg-purple-500/10 ring-purple-500/30 dark:ring-purple-500/20' : '',
+                  )}
+                >
+                  {(() => {
+                    const IconComponent = TAB_ICONS[tab.id];
+                    return (
+                      <IconComponent
+                        className={classNames(
+                          'w-8 h-8',
+                          'text-gray-600 dark:text-gray-300',
+                          'group-hover:text-purple-500 dark:group-hover:text-purple-400/80',
+                          'transition-colors duration-100 ease-out',
+                          isActive ? 'text-purple-500 dark:text-purple-400/90' : '',
+                        )}
+                      />
+                    );
+                  })()}
+                </div>
+
+                {/* Label and Description */}
+                <div className="flex flex-col items-center mt-4 w-full">
+                  <h3
+                    className={classNames(
+                      'text-[15px] font-medium leading-snug mb-2',
+                      'text-gray-700 dark:text-gray-200',
+                      'group-hover:text-purple-600 dark:group-hover:text-purple-300/90',
+                      'transition-colors duration-100 ease-out',
+                      isActive ? 'text-purple-500 dark:text-purple-400/90' : '',
+                    )}
+                  >
+                    {TAB_LABELS[tab.id]}
+                  </h3>
+                  {description && (
+                    <p
+                      className={classNames(
+                        'text-[13px] leading-relaxed',
+                        'text-gray-500 dark:text-gray-400',
+                        'max-w-[85%]',
+                        'text-center',
+                        'group-hover:text-purple-500 dark:group-hover:text-purple-400/70',
+                        'transition-colors duration-100 ease-out',
+                        isActive ? 'text-purple-400 dark:text-purple-400/80' : '',
+                      )}
+                    >
+                      {description}
+                    </p>
+                  )}
+                </div>
+
+                {/* Update Indicator with Tooltip */}
+                {hasUpdate && (
+                  <>
+                    <div className="absolute top-4 right-4 w-2 h-2 rounded-full bg-purple-500 dark:bg-purple-400 animate-pulse" />
+                    <Tooltip.Portal>
+                      <Tooltip.Content
+                        className={classNames(
+                          'px-3 py-1.5 rounded-lg',
+                          'bg-[#18181B] text-white',
+                          'text-sm font-medium',
+                          'select-none',
+                          'z-[100]',
+                        )}
+                        side="top"
+                        sideOffset={5}
+                      >
+                        {statusMessage}
+                        <Tooltip.Arrow className="fill-[#18181B]" />
+                      </Tooltip.Content>
+                    </Tooltip.Portal>
+                  </>
+                )}
+
+                {/* Children (e.g. Beta Label) */}
+                {children}
+              </div>
+            </div>
+          </div>
+        </Tooltip.Trigger>
+      </Tooltip.Root>
+    </Tooltip.Provider>
+  );
+};

tools/bolt.diy/app/components/@settings/shared/service-integration/ConnectionForm.tsx

@@ -0,0 +1,193 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { classNames } from '~/utils/classNames';
+
+interface TokenTypeOption {
+  value: string;
+  label: string;
+  description?: string;
+}
+
+interface ConnectionFormProps {
+  isConnected: boolean;
+  isConnecting: boolean;
+  token: string;
+  onTokenChange: (token: string) => void;
+  onConnect: (e: React.FormEvent) => void;
+  onDisconnect: () => void;
+  error?: string;
+  serviceName: string;
+  tokenLabel?: string;
+  tokenPlaceholder?: string;
+  getTokenUrl: string;
+  environmentVariable?: string;
+  tokenTypes?: TokenTypeOption[];
+  selectedTokenType?: string;
+  onTokenTypeChange?: (type: string) => void;
+  connectedMessage?: string;
+  children?: React.ReactNode; // For additional form fields
+}
+
+export function ConnectionForm({
+  isConnected,
+  isConnecting,
+  token,
+  onTokenChange,
+  onConnect,
+  onDisconnect,
+  error,
+  serviceName,
+  tokenLabel = 'Access Token',
+  tokenPlaceholder,
+  getTokenUrl,
+  environmentVariable,
+  tokenTypes,
+  selectedTokenType,
+  onTokenTypeChange,
+  connectedMessage = `Connected to ${serviceName}`,
+  children,
+}: ConnectionFormProps) {
+  return (
+    <motion.div
+      className="bg-bolt-elements-background dark:bg-bolt-elements-background border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor rounded-lg"
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ delay: 0.2 }}
+    >
+      <div className="p-6 space-y-6">
+        {!isConnected ? (
+          <div className="space-y-4">
+            {environmentVariable && (
+              <div className="text-xs text-bolt-elements-textSecondary bg-bolt-elements-background-depth-1 dark:bg-bolt-elements-background-depth-1 p-3 rounded-lg mb-4">
+                <p className="flex items-center gap-1 mb-1">
+                  <span className="i-ph:lightbulb w-3.5 h-3.5 text-bolt-elements-icon-success dark:text-bolt-elements-icon-success" />
+                  <span className="font-medium">Tip:</span> You can also set the{' '}
+                  <code className="px-1 py-0.5 bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-2 rounded">
+                    {environmentVariable}
+                  </code>{' '}
+                  environment variable to connect automatically.
+                </p>
+              </div>
+            )}
+
+            <form onSubmit={onConnect} className="space-y-4">
+              {tokenTypes && tokenTypes.length > 1 && onTokenTypeChange && (
+                <div>
+                  <label className="block text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary mb-2">
+                    Token Type
+                  </label>
+                  <select
+                    value={selectedTokenType}
+                    onChange={(e) => onTokenTypeChange(e.target.value)}
+                    disabled={isConnecting}
+                    className={classNames(
+                      'w-full px-3 py-2 rounded-lg text-sm',
+                      'bg-bolt-elements-background-depth-1 dark:bg-bolt-elements-background-depth-1',
+                      'border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor',
+                      'text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary',
+                      'focus:outline-none focus:ring-1 focus:ring-bolt-elements-item-contentAccent dark:focus:ring-bolt-elements-item-contentAccent',
+                      'disabled:opacity-50',
+                    )}
+                  >
+                    {tokenTypes.map((type) => (
+                      <option key={type.value} value={type.value}>
+                        {type.label}
+                      </option>
+                    ))}
+                  </select>
+                  {selectedTokenType && tokenTypes.find((t) => t.value === selectedTokenType)?.description && (
+                    <p className="mt-1 text-xs text-bolt-elements-textTertiary">
+                      {tokenTypes.find((t) => t.value === selectedTokenType)?.description}
+                    </p>
+                  )}
+                </div>
+              )}
+
+              <div>
+                <label className="block text-sm text-bolt-elements-textSecondary mb-2">{tokenLabel}</label>
+                <input
+                  type="password"
+                  value={token}
+                  onChange={(e) => onTokenChange(e.target.value)}
+                  disabled={isConnecting}
+                  placeholder={tokenPlaceholder || `Enter your ${serviceName} access token`}
+                  className={classNames(
+                    'w-full px-3 py-2 rounded-lg text-sm',
+                    'bg-bolt-elements-background-depth-1',
+                    'border border-bolt-elements-borderColor',
+                    'text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary',
+                    'focus:outline-none focus:ring-1 focus:ring-bolt-elements-borderColorActive',
+                    'disabled:opacity-50',
+                  )}
+                />
+                <div className="mt-2 text-sm text-bolt-elements-textSecondary">
+                  <a
+                    href={getTokenUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-bolt-elements-borderColorActive hover:underline inline-flex items-center gap-1"
+                  >
+                    Get your token
+                    <div className="i-ph:arrow-square-out w-4 h-4" />
+                  </a>
+                </div>
+              </div>
+
+              {children}
+
+              {error && (
+                <div className="p-4 rounded-lg bg-red-50 border border-red-200 dark:bg-red-900/20 dark:border-red-700">
+                  <p className="text-sm text-red-800 dark:text-red-200">{error}</p>
+                </div>
+              )}
+
+              <button
+                type="submit"
+                disabled={isConnecting || !token.trim()}
+                className={classNames(
+                  'px-4 py-2 rounded-lg text-sm flex items-center gap-2',
+                  'bg-[#303030] text-white',
+                  'hover:bg-[#5E41D0] hover:text-white',
+                  'disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200',
+                  'transform active:scale-95',
+                )}
+              >
+                {isConnecting ? (
+                  <>
+                    <div className="i-ph:spinner-gap animate-spin" />
+                    Connecting...
+                  </>
+                ) : (
+                  <>
+                    <div className="i-ph:plug-charging w-4 h-4" />
+                    Connect
+                  </>
+                )}
+              </button>
+            </form>
+          </div>
+        ) : (
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <button
+                onClick={onDisconnect}
+                className={classNames(
+                  'px-4 py-2 rounded-lg text-sm flex items-center gap-2',
+                  'bg-red-500 text-white',
+                  'hover:bg-red-600',
+                )}
+              >
+                <div className="i-ph:plug w-4 h-4" />
+                Disconnect
+              </button>
+              <span className="text-sm text-bolt-elements-textSecondary flex items-center gap-1">
+                <div className="i-ph:check-circle w-4 h-4 text-green-500" />
+                {connectedMessage}
+              </span>
+            </div>
+          </div>
+        )}
+      </div>
+    </motion.div>
+  );
+}

tools/bolt.diy/app/components/@settings/shared/service-integration/ConnectionTestIndicator.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { classNames } from '~/utils/classNames';
+
+export interface ConnectionTestResult {
+  status: 'success' | 'error' | 'testing';
+  message: string;
+  timestamp?: number;
+}
+
+interface ConnectionTestIndicatorProps {
+  testResult: ConnectionTestResult | null;
+  className?: string;
+}
+
+export function ConnectionTestIndicator({ testResult, className }: ConnectionTestIndicatorProps) {
+  if (!testResult) {
+    return null;
+  }
+
+  return (
+    <motion.div
+      className={classNames(
+        'p-4 rounded-lg border',
+        {
+          'bg-green-50 border-green-200 dark:bg-green-900/20 dark:border-green-700': testResult.status === 'success',
+          'bg-red-50 border-red-200 dark:bg-red-900/20 dark:border-red-700': testResult.status === 'error',
+          'bg-blue-50 border-blue-200 dark:bg-blue-900/20 dark:border-blue-700': testResult.status === 'testing',
+        },
+        className,
+      )}
+      initial={{ opacity: 0, y: 10 }}
+      animate={{ opacity: 1, y: 0 }}
+    >
+      <div className="flex items-center gap-2">
+        {testResult.status === 'success' && (
+          <div className="i-ph:check-circle w-5 h-5 text-green-600 dark:text-green-400" />
+        )}
+        {testResult.status === 'error' && (
+          <div className="i-ph:warning-circle w-5 h-5 text-red-600 dark:text-red-400" />
+        )}
+        {testResult.status === 'testing' && (
+          <div className="i-ph:spinner-gap w-5 h-5 animate-spin text-blue-600 dark:text-blue-400" />
+        )}
+        <span
+          className={classNames('text-sm font-medium', {
+            'text-green-800 dark:text-green-200': testResult.status === 'success',
+            'text-red-800 dark:text-red-200': testResult.status === 'error',
+            'text-blue-800 dark:text-blue-200': testResult.status === 'testing',
+          })}
+        >
+          {testResult.message}
+        </span>
+      </div>
+      {testResult.timestamp && (
+        <p className="text-xs text-gray-500 mt-1">{new Date(testResult.timestamp).toLocaleString()}</p>
+      )}
+    </motion.div>
+  );
+}

tools/bolt.diy/app/components/@settings/shared/service-integration/ErrorState.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { Button } from '~/components/ui/Button';
+import { classNames } from '~/utils/classNames';
+import type { ServiceError } from '~/lib/utils/serviceErrorHandler';
+
+interface ErrorStateProps {
+  error?: ServiceError | string;
+  title?: string;
+  onRetry?: () => void;
+  onDismiss?: () => void;
+  retryLabel?: string;
+  className?: string;
+  showDetails?: boolean;
+}
+
+export function ErrorState({
+  error,
+  title = 'Something went wrong',
+  onRetry,
+  onDismiss,
+  retryLabel = 'Try again',
+  className,
+  showDetails = false,
+}: ErrorStateProps) {
+  const errorMessage = typeof error === 'string' ? error : error?.message || 'An unknown error occurred';
+  const isServiceError = typeof error === 'object' && error !== null;
+
+  return (
+    <motion.div
+      className={classNames(
+        'p-6 rounded-lg border border-red-200 bg-red-50 dark:border-red-700 dark:bg-red-900/20',
+        className,
+      )}
+      initial={{ opacity: 0, y: 10 }}
+      animate={{ opacity: 1, y: 0 }}
+    >
+      <div className="flex items-start gap-3">
+        <div className="i-ph:warning-circle w-5 h-5 text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5" />
+        <div className="flex-1 min-w-0">
+          <h3 className="text-sm font-medium text-red-800 dark:text-red-200 mb-1">{title}</h3>
+          <p className="text-sm text-red-700 dark:text-red-300">{errorMessage}</p>
+
+          {showDetails && isServiceError && error.details && (
+            <details className="mt-3">
+              <summary className="text-xs text-red-600 dark:text-red-400 cursor-pointer hover:underline">
+                Technical details
+              </summary>
+              <pre className="mt-2 text-xs text-red-600 dark:text-red-400 bg-red-100 dark:bg-red-900/30 p-2 rounded overflow-auto">
+                {JSON.stringify(error.details, null, 2)}
+              </pre>
+            </details>
+          )}
+
+          <div className="flex items-center gap-2 mt-4">
+            {onRetry && (
+              <Button
+                onClick={onRetry}
+                variant="outline"
+                size="sm"
+                className="text-red-700 border-red-300 hover:bg-red-100 dark:text-red-300 dark:border-red-600 dark:hover:bg-red-900/30"
+              >
+                <div className="i-ph:arrows-clockwise w-4 h-4 mr-1" />
+                {retryLabel}
+              </Button>
+            )}
+            {onDismiss && (
+              <Button
+                onClick={onDismiss}
+                variant="outline"
+                size="sm"
+                className="text-red-700 border-red-300 hover:bg-red-100 dark:text-red-300 dark:border-red-600 dark:hover:bg-red-900/30"
+              >
+                Dismiss
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+    </motion.div>
+  );
+}
+
+interface ConnectionErrorProps {
+  service: string;
+  error: ServiceError | string;
+  onRetryConnection: () => void;
+  onClearError?: () => void;
+}
+
+export function ConnectionError({ service, error, onRetryConnection, onClearError }: ConnectionErrorProps) {
+  return (
+    <ErrorState
+      error={error}
+      title={`Failed to connect to ${service}`}
+      onRetry={onRetryConnection}
+      onDismiss={onClearError}
+      retryLabel="Retry connection"
+      showDetails={true}
+    />
+  );
+}