crca 1.4.0__py3-none-any.whl

tools/bolt.diy/app/components/workbench/EditorPanel.tsx

@@ -0,0 +1,174 @@
+import { useStore } from '@nanostores/react';
+import { memo, useMemo } from 'react';
+import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
+import * as Tabs from '@radix-ui/react-tabs';
+import {
+  CodeMirrorEditor,
+  type EditorDocument,
+  type EditorSettings,
+  type OnChangeCallback as OnEditorChange,
+  type OnSaveCallback as OnEditorSave,
+  type OnScrollCallback as OnEditorScroll,
+} from '~/components/editor/codemirror/CodeMirrorEditor';
+import { PanelHeader } from '~/components/ui/PanelHeader';
+import { PanelHeaderButton } from '~/components/ui/PanelHeaderButton';
+import type { FileMap } from '~/lib/stores/files';
+import type { FileHistory } from '~/types/actions';
+import { themeStore } from '~/lib/stores/theme';
+import { WORK_DIR } from '~/utils/constants';
+import { renderLogger } from '~/utils/logger';
+import { isMobile } from '~/utils/mobile';
+import { FileBreadcrumb } from './FileBreadcrumb';
+import { FileTree } from './FileTree';
+import { DEFAULT_TERMINAL_SIZE, TerminalTabs } from './terminal/TerminalTabs';
+import { workbenchStore } from '~/lib/stores/workbench';
+import { Search } from './Search'; // <-- Ensure Search is imported
+import { classNames } from '~/utils/classNames'; // <-- Import classNames if not already present
+import { LockManager } from './LockManager'; // <-- Import LockManager
+
+interface EditorPanelProps {
+  files?: FileMap;
+  unsavedFiles?: Set<string>;
+  editorDocument?: EditorDocument;
+  selectedFile?: string | undefined;
+  isStreaming?: boolean;
+  fileHistory?: Record<string, FileHistory>;
+  onEditorChange?: OnEditorChange;
+  onEditorScroll?: OnEditorScroll;
+  onFileSelect?: (value?: string) => void;
+  onFileSave?: OnEditorSave;
+  onFileReset?: () => void;
+}
+
+const DEFAULT_EDITOR_SIZE = 100 - DEFAULT_TERMINAL_SIZE;
+
+const editorSettings: EditorSettings = { tabSize: 2 };
+
+export const EditorPanel = memo(
+  ({
+    files,
+    unsavedFiles,
+    editorDocument,
+    selectedFile,
+    isStreaming,
+    fileHistory,
+    onFileSelect,
+    onEditorChange,
+    onEditorScroll,
+    onFileSave,
+    onFileReset,
+  }: EditorPanelProps) => {
+    renderLogger.trace('EditorPanel');
+
+    const theme = useStore(themeStore);
+    const showTerminal = useStore(workbenchStore.showTerminal);
+
+    const activeFileSegments = useMemo(() => {
+      if (!editorDocument) {
+        return undefined;
+      }
+
+      return editorDocument.filePath.split('/');
+    }, [editorDocument]);
+
+    const activeFileUnsaved = useMemo(() => {
+      if (!editorDocument || !unsavedFiles) {
+        return false;
+      }
+
+      // Make sure unsavedFiles is a Set before calling has()
+      return unsavedFiles instanceof Set && unsavedFiles.has(editorDocument.filePath);
+    }, [editorDocument, unsavedFiles]);
+
+    return (
+      <PanelGroup direction="vertical">
+        <Panel defaultSize={showTerminal ? DEFAULT_EDITOR_SIZE : 100} minSize={20}>
+          <PanelGroup direction="horizontal">
+            <Panel defaultSize={20} minSize={15} collapsible className="border-r border-bolt-elements-borderColor">
+              <div className="h-full">
+                <Tabs.Root defaultValue="files" className="flex flex-col h-full">
+                  <PanelHeader className="w-full text-sm font-medium text-bolt-elements-textSecondary px-1">
+                    <div className="h-full flex-shrink-0 flex items-center justify-between w-full">
+                      <Tabs.List className="h-full flex-shrink-0 flex items-center">
+                        <Tabs.Trigger
+                          value="files"
+                          className={classNames(
+                            'h-full bg-transparent hover:bg-bolt-elements-background-depth-3 py-0.5 px-2 rounded-lg text-sm font-medium text-bolt-elements-textTertiary hover:text-bolt-elements-textPrimary data-[state=active]:text-bolt-elements-textPrimary',
+                          )}
+                        >
+                          Files
+                        </Tabs.Trigger>
+                        <Tabs.Trigger
+                          value="search"
+                          className={classNames(
+                            'h-full bg-transparent hover:bg-bolt-elements-background-depth-3 py-0.5 px-2 rounded-lg text-sm font-medium text-bolt-elements-textTertiary hover:text-bolt-elements-textPrimary data-[state=active]:text-bolt-elements-textPrimary',
+                          )}
+                        >
+                          Search
+                        </Tabs.Trigger>
+                        <Tabs.Trigger
+                          value="locks"
+                          className={classNames(
+                            'h-full bg-transparent hover:bg-bolt-elements-background-depth-3 py-0.5 px-2 rounded-lg text-sm font-medium text-bolt-elements-textTertiary hover:text-bolt-elements-textPrimary data-[state=active]:text-bolt-elements-textPrimary',
+                          )}
+                        >
+                          Locks
+                        </Tabs.Trigger>
+                      </Tabs.List>
+                    </div>
+                  </PanelHeader>
+
+                  <Tabs.Content value="files" className="flex-grow overflow-auto focus-visible:outline-none">
+                    <FileTree
+                      className="h-full"
+                      files={files}
+                      hideRoot
+                      unsavedFiles={unsavedFiles}
+                      fileHistory={fileHistory}
+                      rootFolder={WORK_DIR}
+                      selectedFile={selectedFile}
+                      onFileSelect={onFileSelect}
+                    />
+                  </Tabs.Content>
+
+                  <Tabs.Content value="search" className="flex-grow overflow-auto focus-visible:outline-none">
+                    <Search />
+                  </Tabs.Content>
+
+                  <Tabs.Content value="locks" className="flex-grow overflow-auto focus-visible:outline-none">
+                    <LockManager />
+                  </Tabs.Content>
+                </Tabs.Root>
+              </div>
+            </Panel>
+
+            <PanelResizeHandle />
+            <Panel className="flex flex-col" defaultSize={80} minSize={20}>
+              <PanelHeader className="overflow-x-auto">
+                {activeFileSegments?.length && (
+                  <div className="flex items-center flex-1 text-sm">
+                    <FileBreadcrumb pathSegments={activeFileSegments} files={files} onFileSelect={onFileSelect} />
+                    {/* Read-only mode: Save/Reset buttons removed for LLM-native execution */}
+                  </div>
+                )}
+              </PanelHeader>
+              <div className="h-full flex-1 overflow-hidden modern-scrollbar">
+                <CodeMirrorEditor
+                  theme={theme}
+                  editable={false}
+                  settings={editorSettings}
+                  doc={editorDocument}
+                  autoFocusOnDocumentChange={!isMobile()}
+                  onScroll={onEditorScroll}
+                  // Read-only mode: onChange and onSave removed
+                />
+              </div>
+            </Panel>
+          </PanelGroup>
+        </Panel>
+        <PanelResizeHandle />
+        <TerminalTabs />
+      </PanelGroup>
+    );
+  },
+);

tools/bolt.diy/app/components/workbench/ExpoQrModal.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Dialog, DialogTitle, DialogDescription, DialogRoot } from '~/components/ui/Dialog';
+import { useStore } from '@nanostores/react';
+import { expoUrlAtom } from '~/lib/stores/qrCodeStore';
+import { QRCode } from 'react-qrcode-logo';
+
+interface ExpoQrModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export const ExpoQrModal: React.FC<ExpoQrModalProps> = ({ open, onClose }) => {
+  const expoUrl = useStore(expoUrlAtom);
+
+  return (
+    <DialogRoot open={open} onOpenChange={(v) => !v && onClose()}>
+      <Dialog
+        className="text-center !flex-col !mx-auto !text-center !max-w-md"
+        showCloseButton={true}
+        onClose={onClose}
+      >
+        <div className="border !border-bolt-elements-borderColor flex flex-col gap-5 justify-center items-center p-6 bg-bolt-elements-background-depth-2 rounded-md">
+          <div className="i-bolt:expo-brand h-10 w-full invert dark:invert-none"></div>
+          <DialogTitle className="text-bolt-elements-textTertiary text-lg font-semibold leading-6">
+            Preview on your own mobile device
+          </DialogTitle>
+          <DialogDescription className="bg-bolt-elements-background-depth-3 max-w-sm rounded-md p-1 border border-bolt-elements-borderColor">
+            Scan this QR code with the Expo Go app on your mobile device to open your project.
+          </DialogDescription>
+          <div className="my-6 flex flex-col items-center">
+            {expoUrl ? (
+              <QRCode
+                logoImage="/favicon.svg"
+                removeQrCodeBehindLogo={true}
+                logoPadding={3}
+                logoHeight={50}
+                logoWidth={50}
+                logoPaddingStyle="square"
+                style={{
+                  borderRadius: 16,
+                  padding: 2,
+                  backgroundColor: '#8a5fff',
+                }}
+                value={expoUrl}
+                size={200}
+              />
+            ) : (
+              <div className="text-gray-500 text-center">No Expo URL detected.</div>
+            )}
+          </div>
+        </div>
+      </Dialog>
+    </DialogRoot>
+  );
+};

tools/bolt.diy/app/components/workbench/FileBreadcrumb.tsx

@@ -0,0 +1,150 @@
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import { AnimatePresence, motion, type Variants } from 'framer-motion';
+import { memo, useEffect, useRef, useState } from 'react';
+import type { FileMap } from '~/lib/stores/files';
+import { classNames } from '~/utils/classNames';
+import { WORK_DIR } from '~/utils/constants';
+import { cubicEasingFn } from '~/utils/easings';
+import { renderLogger } from '~/utils/logger';
+import FileTree from './FileTree';
+
+const WORK_DIR_REGEX = new RegExp(`^${WORK_DIR.split('/').slice(0, -1).join('/').replaceAll('/', '\\/')}/`);
+
+interface FileBreadcrumbProps {
+  files?: FileMap;
+  pathSegments?: string[];
+  onFileSelect?: (filePath: string) => void;
+}
+
+const contextMenuVariants = {
+  open: {
+    y: 0,
+    opacity: 1,
+    transition: {
+      duration: 0.15,
+      ease: cubicEasingFn,
+    },
+  },
+  close: {
+    y: 6,
+    opacity: 0,
+    transition: {
+      duration: 0.15,
+      ease: cubicEasingFn,
+    },
+  },
+} satisfies Variants;
+
+export const FileBreadcrumb = memo<FileBreadcrumbProps>(({ files, pathSegments = [], onFileSelect }) => {
+  renderLogger.trace('FileBreadcrumb');
+
+  const [activeIndex, setActiveIndex] = useState<number | null>(null);
+
+  const contextMenuRef = useRef<HTMLDivElement | null>(null);
+  const segmentRefs = useRef<(HTMLSpanElement | null)[]>([]);
+
+  const handleSegmentClick = (index: number) => {
+    setActiveIndex((prevIndex) => (prevIndex === index ? null : index));
+  };
+
+  useEffect(() => {
+    const handleOutsideClick = (event: MouseEvent) => {
+      if (
+        activeIndex !== null &&
+        !contextMenuRef.current?.contains(event.target as Node) &&
+        !segmentRefs.current.some((ref) => ref?.contains(event.target as Node))
+      ) {
+        setActiveIndex(null);
+      }
+    };
+
+    document.addEventListener('mousedown', handleOutsideClick);
+
+    return () => {
+      document.removeEventListener('mousedown', handleOutsideClick);
+    };
+  }, [activeIndex]);
+
+  if (files === undefined || pathSegments.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="flex">
+      {pathSegments.map((segment, index) => {
+        const isLast = index === pathSegments.length - 1;
+
+        const path = pathSegments.slice(0, index).join('/');
+
+        if (!WORK_DIR_REGEX.test(path)) {
+          return null;
+        }
+
+        const isActive = activeIndex === index;
+
+        return (
+          <div key={index} className="relative flex items-center">
+            <DropdownMenu.Root open={isActive} modal={false}>
+              <DropdownMenu.Trigger asChild>
+                <span
+                  ref={(ref) => {
+                    segmentRefs.current[index] = ref;
+                  }}
+                  className={classNames('flex items-center gap-1.5 cursor-pointer shrink-0', {
+                    'text-bolt-elements-textTertiary hover:text-bolt-elements-textPrimary': !isActive,
+                    'text-bolt-elements-textPrimary underline': isActive,
+                    'pr-4': isLast,
+                  })}
+                  onClick={() => handleSegmentClick(index)}
+                >
+                  {isLast && <div className="i-ph:file-duotone" />}
+                  {segment}
+                </span>
+              </DropdownMenu.Trigger>
+              {index > 0 && !isLast && <span className="i-ph:caret-right inline-block mx-1" />}
+              <AnimatePresence>
+                {isActive && (
+                  <DropdownMenu.Portal>
+                    <DropdownMenu.Content
+                      className="z-file-tree-breadcrumb"
+                      asChild
+                      align="start"
+                      side="bottom"
+                      avoidCollisions={false}
+                    >
+                      <motion.div
+                        ref={contextMenuRef}
+                        initial="close"
+                        animate="open"
+                        exit="close"
+                        variants={contextMenuVariants}
+                      >
+                        <div className="rounded-lg overflow-hidden">
+                          <div className="max-h-[50vh] min-w-[300px] overflow-scroll bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor shadow-sm rounded-lg">
+                            <FileTree
+                              files={files}
+                              hideRoot
+                              rootFolder={path}
+                              collapsed
+                              allowFolderSelection
+                              selectedFile={`${path}/${segment}`}
+                              onFileSelect={(filePath) => {
+                                setActiveIndex(null);
+                                onFileSelect?.(filePath);
+                              }}
+                            />
+                          </div>
+                        </div>
+                        <DropdownMenu.Arrow className="fill-bolt-elements-borderColor" />
+                      </motion.div>
+                    </DropdownMenu.Content>
+                  </DropdownMenu.Portal>
+                )}
+              </AnimatePresence>
+            </DropdownMenu.Root>
+          </div>
+        );
+      })}
+    </div>
+  );
+});