crca 1.4.0__py3-none-any.whl

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

@@ -0,0 +1,146 @@
+import { useState } from 'react';
+
+interface ElementInfo {
+  tagName: string;
+  className: string;
+  id: string;
+  textContent: string;
+  styles: Record<string, string>; // Changed from CSSStyleDeclaration
+  rect: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    top: number;
+    left: number;
+  };
+}
+
+interface InspectorPanelProps {
+  selectedElement: ElementInfo | null;
+  isVisible: boolean;
+  onClose: () => void;
+}
+
+export const InspectorPanel = ({ selectedElement, isVisible, onClose }: InspectorPanelProps) => {
+  const [activeTab, setActiveTab] = useState<'styles' | 'computed' | 'box'>('styles');
+
+  if (!isVisible || !selectedElement) {
+    return null;
+  }
+
+  const getRelevantStyles = (styles: Record<string, string>) => {
+    const relevantProps = [
+      'display',
+      'position',
+      'width',
+      'height',
+      'margin',
+      'padding',
+      'border',
+      'background',
+      'color',
+      'font-size',
+      'font-family',
+      'text-align',
+      'flex-direction',
+      'justify-content',
+      'align-items',
+    ];
+
+    return relevantProps.reduce(
+      (acc, prop) => {
+        const value = styles[prop];
+
+        if (value) {
+          acc[prop] = value;
+        }
+
+        return acc;
+      },
+      {} as Record<string, string>,
+    );
+  };
+
+  return (
+    <div className="fixed right-4 top-20 w-80 bg-bolt-elements-bg-depth-1 border border-bolt-elements-borderColor rounded-lg shadow-lg z-40 max-h-[calc(100vh-6rem)] overflow-hidden">
+      {/* Header */}
+      <div className="flex items-center justify-between p-3 border-b border-bolt-elements-borderColor">
+        <h3 className="font-medium text-bolt-elements-textPrimary">Element Inspector</h3>
+        <button onClick={onClose} className="text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary">
+          ✕
+        </button>
+      </div>
+
+      {/* Element Info */}
+      <div className="p-3 border-b border-bolt-elements-borderColor">
+        <div className="text-sm">
+          <div className="font-mono text-blue-500">
+            {selectedElement.tagName.toLowerCase()}
+            {selectedElement.id && <span className="text-green-500">#{selectedElement.id}</span>}
+            {selectedElement.className && (
+              <span className="text-yellow-500">.{selectedElement.className.split(' ')[0]}</span>
+            )}
+          </div>
+          {selectedElement.textContent && (
+            <div className="mt-1 text-bolt-elements-textSecondary text-xs truncate">
+              "{selectedElement.textContent}"
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Tabs */}
+      <div className="flex border-b border-bolt-elements-borderColor">
+        {(['styles', 'computed', 'box'] as const).map((tab) => (
+          <button
+            key={tab}
+            onClick={() => setActiveTab(tab)}
+            className={`px-3 py-2 text-sm capitalize ${
+              activeTab === tab
+                ? 'border-b-2 border-blue-500 text-blue-500'
+                : 'text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary'
+            }`}
+          >
+            {tab}
+          </button>
+        ))}
+      </div>
+
+      {/* Content */}
+      <div className="p-3 overflow-y-auto max-h-96">
+        {activeTab === 'styles' && (
+          <div className="space-y-2">
+            {Object.entries(getRelevantStyles(selectedElement.styles)).map(([prop, value]) => (
+              <div key={prop} className="flex justify-between text-sm">
+                <span className="text-bolt-elements-textSecondary">{prop}:</span>
+                <span className="text-bolt-elements-textPrimary font-mono">{value}</span>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {activeTab === 'box' && (
+          <div className="space-y-2 text-sm">
+            <div className="flex justify-between">
+              <span className="text-bolt-elements-textSecondary">Width:</span>
+              <span className="text-bolt-elements-textPrimary">{Math.round(selectedElement.rect.width)}px</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-bolt-elements-textSecondary">Height:</span>
+              <span className="text-bolt-elements-textPrimary">{Math.round(selectedElement.rect.height)}px</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-bolt-elements-textSecondary">Top:</span>
+              <span className="text-bolt-elements-textPrimary">{Math.round(selectedElement.rect.top)}px</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-bolt-elements-textSecondary">Left:</span>
+              <span className="text-bolt-elements-textPrimary">{Math.round(selectedElement.rect.left)}px</span>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,262 @@
+import { useState, useEffect } from 'react';
+import { workbenchStore } from '~/lib/stores/workbench';
+import { classNames } from '~/utils/classNames';
+import { Checkbox } from '~/components/ui/Checkbox';
+import { toast } from '~/components/ui/use-toast';
+
+interface LockedItem {
+  path: string;
+  type: 'file' | 'folder';
+}
+
+export function LockManager() {
+  const [lockedItems, setLockedItems] = useState<LockedItem[]>([]);
+  const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set());
+  const [filter, setFilter] = useState<'all' | 'files' | 'folders'>('all');
+  const [searchTerm, setSearchTerm] = useState('');
+
+  // Load locked items
+  useEffect(() => {
+    const loadLockedItems = () => {
+      // We don't need to filter by chat ID here as we want to show all locked files
+      const items: LockedItem[] = [];
+
+      // Get all files and folders from the workbench store
+      const allFiles = workbenchStore.files.get();
+
+      // Check each file/folder for locks
+      Object.entries(allFiles).forEach(([path, item]) => {
+        if (!item) {
+          return;
+        }
+
+        if (item.type === 'file' && item.isLocked) {
+          items.push({
+            path,
+            type: 'file',
+          });
+        } else if (item.type === 'folder' && item.isLocked) {
+          items.push({
+            path,
+            type: 'folder',
+          });
+        }
+      });
+
+      setLockedItems(items);
+    };
+
+    loadLockedItems();
+
+    // Set up an interval to refresh the list periodically
+    const intervalId = setInterval(loadLockedItems, 5000);
+
+    return () => clearInterval(intervalId);
+  }, []);
+
+  // Filter and sort the locked items
+  const filteredAndSortedItems = lockedItems
+    .filter((item) => {
+      // Apply type filter
+      if (filter === 'files' && item.type !== 'file') {
+        return false;
+      }
+
+      if (filter === 'folders' && item.type !== 'folder') {
+        return false;
+      }
+
+      // Apply search filter
+      if (searchTerm && !item.path.toLowerCase().includes(searchTerm.toLowerCase())) {
+        return false;
+      }
+
+      return true;
+    })
+    .sort((a, b) => {
+      return a.path.localeCompare(b.path);
+    });
+
+  // Handle selecting/deselecting a single item
+  const handleSelectItem = (path: string) => {
+    const newSelectedItems = new Set(selectedItems);
+
+    if (newSelectedItems.has(path)) {
+      newSelectedItems.delete(path);
+    } else {
+      newSelectedItems.add(path);
+    }
+
+    setSelectedItems(newSelectedItems);
+  };
+
+  // Handle selecting/deselecting all visible items
+  const handleSelectAll = (checked: boolean | 'indeterminate') => {
+    if (checked === true) {
+      // Select all filtered items
+      const allVisiblePaths = new Set(filteredAndSortedItems.map((item) => item.path));
+      setSelectedItems(allVisiblePaths);
+    } else {
+      // Deselect all (clear selection)
+      setSelectedItems(new Set());
+    }
+  };
+
+  // Handle unlocking selected items
+  const handleUnlockSelected = () => {
+    if (selectedItems.size === 0) {
+      toast.error('No items selected to unlock.');
+      return;
+    }
+
+    let unlockedCount = 0;
+    selectedItems.forEach((path) => {
+      const item = lockedItems.find((i) => i.path === path);
+
+      if (item) {
+        if (item.type === 'file') {
+          workbenchStore.unlockFile(path);
+        } else {
+          workbenchStore.unlockFolder(path);
+        }
+
+        unlockedCount++;
+      }
+    });
+
+    if (unlockedCount > 0) {
+      toast.success(`Unlocked ${unlockedCount} selected item(s).`);
+      setSelectedItems(new Set()); // Clear selection after unlocking
+    }
+  };
+
+  // Determine the state of the "Select All" checkbox
+  const isAllSelected = filteredAndSortedItems.length > 0 && selectedItems.size === filteredAndSortedItems.length;
+  const isSomeSelected = selectedItems.size > 0 && selectedItems.size < filteredAndSortedItems.length;
+  const selectAllCheckedState: boolean | 'indeterminate' = isAllSelected
+    ? true
+    : isSomeSelected
+      ? 'indeterminate'
+      : false;
+
+  return (
+    <div className="flex flex-col h-full overflow-hidden">
+      {/* Controls */}
+      <div className="flex items-center gap-1 px-2 py-1 border-b border-bolt-elements-borderColor">
+        {/* Search Input */}
+        <div className="relative flex-1">
+          <span className="absolute left-2 top-1/2 -translate-y-1/2 text-bolt-elements-textTertiary i-ph:magnifying-glass text-xs pointer-events-none" />
+          <input
+            type="text"
+            placeholder="Search..."
+            className="w-full text-xs pl-6 pr-2 py-0.5 h-6 bg-bolt-elements-background-depth-2 text-bolt-elements-textPrimary rounded border border-bolt-elements-borderColor focus:outline-none"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            style={{ minWidth: 0 }}
+          />
+        </div>
+        {/* Filter Select */}
+        <select
+          className="text-xs px-1 py-0.5 h-6 bg-bolt-elements-background-depth-2 text-bolt-elements-textPrimary rounded border border-bolt-elements-borderColor focus:outline-none"
+          value={filter}
+          onChange={(e) => setFilter(e.target.value as any)}
+        >
+          <option value="all">All</option>
+          <option value="files">Files</option>
+          <option value="folders">Folders</option>
+        </select>
+      </div>
+
+      {/* Header Row with Select All */}
+      <div className="flex items-center justify-between px-2 py-1 text-xs text-bolt-elements-textSecondary">
+        <div>
+          <Checkbox
+            checked={selectAllCheckedState}
+            onCheckedChange={handleSelectAll}
+            className="w-3 h-3 rounded border-bolt-elements-borderColor mr-2"
+            aria-label="Select all items"
+            disabled={filteredAndSortedItems.length === 0} // Disable if no items to select
+          />
+          <span>All</span>
+        </div>
+        {selectedItems.size > 0 && (
+          <button
+            className="ml-auto px-2 py-0.5 rounded bg-bolt-elements-button-secondary-background hover:bg-bolt-elements-button-secondary-backgroundHover text-bolt-elements-button-secondary-text text-xs flex items-center gap-1"
+            onClick={handleUnlockSelected}
+            title="Unlock all selected items"
+          >
+            Unlock all
+          </button>
+        )}
+        <div></div>
+      </div>
+
+      {/* List of locked items */}
+      <div className="flex-1 overflow-auto modern-scrollbar px-1 py-1">
+        {filteredAndSortedItems.length === 0 ? (
+          <div className="flex flex-col items-center justify-center h-full text-bolt-elements-textTertiary text-xs gap-2">
+            <span className="i-ph:lock-open-duotone text-lg opacity-50" />
+            <span>No locked items found</span>
+          </div>
+        ) : (
+          <ul className="space-y-1">
+            {filteredAndSortedItems.map((item) => (
+              <li
+                key={item.path}
+                className={classNames(
+                  'text-bolt-elements-textTertiary flex items-center gap-2 px-2 py-1 rounded hover:bg-bolt-elements-background-depth-2 transition-colors group',
+                  selectedItems.has(item.path) ? 'bg-bolt-elements-background-depth-2' : '',
+                )}
+              >
+                <Checkbox
+                  checked={selectedItems.has(item.path)}
+                  onCheckedChange={() => handleSelectItem(item.path)}
+                  className="w-3 h-3 rounded border-bolt-elements-borderColor"
+                  aria-labelledby={`item-label-${item.path}`} // For accessibility
+                />
+                <span
+                  className={classNames(
+                    'shrink-0 text-bolt-elements-textTertiary text-xs',
+                    item.type === 'file' ? 'i-ph:file-text-duotone' : 'i-ph:folder-duotone',
+                  )}
+                />
+                <span id={`item-label-${item.path}`} className="truncate flex-1 text-xs" title={item.path}>
+                  {item.path.replace('/home/project/', '')}
+                </span>
+                {/* ... rest of the item details and buttons ... */}
+                <span
+                  className={classNames(
+                    'inline-flex items-center px-1 rounded-sm text-xs',
+                    'bg-red-500/10 text-red-500',
+                  )}
+                ></span>
+                <button
+                  className="flex items-center px-1 py-0.5 text-xs rounded bg-transparent hover:bg-bolt-elements-background-depth-3"
+                  onClick={() => {
+                    if (item.type === 'file') {
+                      workbenchStore.unlockFile(item.path);
+                    } else {
+                      workbenchStore.unlockFolder(item.path);
+                    }
+
+                    toast.success(`${item.path.replace('/home/project/', '')} unlocked`);
+                  }}
+                  title="Unlock"
+                >
+                  <span className="i-ph:lock-open text-xs" />
+                </button>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+
+      {/* Footer */}
+      <div className="px-2 py-1 border-t border-bolt-elements-borderColor bg-bolt-elements-background-depth-2 text-xs text-bolt-elements-textTertiary flex justify-between items-center">
+        <div>
+          {filteredAndSortedItems.length} item(s) • {selectedItems.size} selected
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,91 @@
+import { memo, useEffect, useRef } from 'react';
+import type { PreviewInfo } from '~/lib/stores/previews';
+
+interface PortDropdownProps {
+  activePreviewIndex: number;
+  setActivePreviewIndex: (index: number) => void;
+  isDropdownOpen: boolean;
+  setIsDropdownOpen: (value: boolean) => void;
+  setHasSelectedPreview: (value: boolean) => void;
+  previews: PreviewInfo[];
+}
+
+export const PortDropdown = memo(
+  ({
+    activePreviewIndex,
+    setActivePreviewIndex,
+    isDropdownOpen,
+    setIsDropdownOpen,
+    setHasSelectedPreview,
+    previews,
+  }: PortDropdownProps) => {
+    const dropdownRef = useRef<HTMLDivElement>(null);
+
+    // sort previews, preserving original index
+    const sortedPreviews = previews
+      .map((previewInfo, index) => ({ ...previewInfo, index }))
+      .sort((a, b) => a.port - b.port);
+
+    // close dropdown if user clicks outside
+    useEffect(() => {
+      const handleClickOutside = (event: MouseEvent) => {
+        if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+          setIsDropdownOpen(false);
+        }
+      };
+
+      if (isDropdownOpen) {
+        window.addEventListener('mousedown', handleClickOutside);
+      } else {
+        window.removeEventListener('mousedown', handleClickOutside);
+      }
+
+      return () => {
+        window.removeEventListener('mousedown', handleClickOutside);
+      };
+    }, [isDropdownOpen]);
+
+    return (
+      <div className="relative z-port-dropdown" ref={dropdownRef}>
+        {/* Display the active port if available, otherwise show the plug icon */}
+        <button
+          className="flex items-center group-focus-within:text-bolt-elements-preview-addressBar-text bg-white group-focus-within:bg-bolt-elements-preview-addressBar-background dark:bg-bolt-elements-preview-addressBar-backgroundHover rounded-full px-2 py-1 gap-1.5"
+          onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+        >
+          <span className="i-ph:plug text-base"></span>
+          {previews.length > 0 && activePreviewIndex >= 0 && activePreviewIndex < previews.length ? (
+            <span className="text-xs font-medium">{previews[activePreviewIndex].port}</span>
+          ) : null}
+        </button>
+        {isDropdownOpen && (
+          <div className="absolute left-0 mt-2 bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor rounded shadow-sm min-w-[140px] dropdown-animation">
+            <div className="px-4 py-2 border-b border-bolt-elements-borderColor text-sm font-semibold text-bolt-elements-textPrimary">
+              Ports
+            </div>
+            {sortedPreviews.map((preview) => (
+              <div
+                key={preview.port}
+                className="flex items-center px-4 py-2 cursor-pointer hover:bg-bolt-elements-item-backgroundActive"
+                onClick={() => {
+                  setActivePreviewIndex(preview.index);
+                  setIsDropdownOpen(false);
+                  setHasSelectedPreview(true);
+                }}
+              >
+                <span
+                  className={
+                    activePreviewIndex === preview.index
+                      ? 'text-bolt-elements-item-contentAccent'
+                      : 'text-bolt-elements-item-contentDefault group-hover:text-bolt-elements-item-contentActive'
+                  }
+                >
+                  {preview.port}
+                </span>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  },
+);