@bendyline/docblocks-react 0.1.0

package/src/WorkspacePicker/WorkspacePicker.tsx

@@ -0,0 +1,126 @@
+/**
+ * WorkspacePicker — dropdown for switching between workspaces
+ * (IndexedDB-based or native folder via File System Access API).
+ */
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+import type { WorkspaceDescriptor } from '@bendyline/docblocks/workspace';
+import { listWorkspaces, saveWorkspace, touchWorkspace } from '@bendyline/docblocks/workspace';
+import { isNativeFileSystemSupported } from '@bendyline/docblocks/filesystem';
+
+export interface WorkspacePickerProps {
+  /** Currently active workspace id. */
+  activeWorkspaceId: string | null;
+  /** Called when the user picks a different workspace. */
+  onSelect: (descriptor: WorkspaceDescriptor) => void;
+  /** Called when the user chooses "Open Folder" (native FS). */
+  onOpenFolder: () => void;
+  /** Optional className. */
+  className?: string;
+}
+
+export function WorkspacePicker({
+  activeWorkspaceId,
+  onSelect,
+  onOpenFolder,
+  className,
+}: WorkspacePickerProps) {
+  const [workspaces, setWorkspaces] = useState<WorkspaceDescriptor[]>([]);
+  const [isOpen, setIsOpen] = useState(false);
+  const pickerRef = useRef<HTMLDivElement>(null);
+
+  // Close dropdown on outside click
+  useEffect(() => {
+    if (!isOpen) return;
+    function handleOutsideClick(e: MouseEvent) {
+      if (pickerRef.current && !pickerRef.current.contains(e.target as Node)) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener('mousedown', handleOutsideClick);
+    return () => document.removeEventListener('mousedown', handleOutsideClick);
+  }, [isOpen]);
+
+  const refresh = useCallback(async () => {
+    const list = await listWorkspaces();
+    setWorkspaces(list);
+  }, []);
+
+  useEffect(() => {
+    refresh();
+  }, [refresh, activeWorkspaceId]);
+
+  const handleSelect = useCallback(
+    async (ws: WorkspaceDescriptor) => {
+      await touchWorkspace(ws.id);
+      onSelect(ws);
+      setIsOpen(false);
+    },
+    [onSelect],
+  );
+
+  const handleCreateNew = useCallback(async () => {
+    const name = `Workspace ${workspaces.length + 1}`;
+    const id = `ws-${Date.now()}`;
+    const descriptor: WorkspaceDescriptor = {
+      id,
+      name,
+      type: 'indexeddb',
+      lastOpened: new Date().toISOString(),
+    };
+    await saveWorkspace(descriptor);
+    await refresh();
+    onSelect(descriptor);
+    setIsOpen(false);
+  }, [workspaces.length, onSelect, refresh]);
+
+  const activeWs = workspaces.find((w) => w.id === activeWorkspaceId);
+
+  return (
+    <div ref={pickerRef} className={`db-workspace-picker ${className ?? ''}`}>
+      <button
+        className="db-workspace-picker-btn"
+        onClick={() => setIsOpen(!isOpen)}
+        title="Switch workspace"
+      >
+        {activeWs?.name ?? 'No workspace'}
+        <span className="db-workspace-picker-caret">{isOpen ? '\u25B4' : '\u25BE'}</span>
+      </button>
+
+      {isOpen && (
+        <div className="db-workspace-dropdown">
+          {workspaces.map((ws) => (
+            <button
+              key={ws.id}
+              className={`db-workspace-dropdown-item ${
+                ws.id === activeWorkspaceId ? 'db-workspace-dropdown-item--active' : ''
+              }`}
+              onClick={() => handleSelect(ws)}
+            >
+              {ws.name}
+              <span className="db-workspace-type">{ws.type === 'native' ? '(folder)' : ''}</span>
+            </button>
+          ))}
+
+          <div className="db-workspace-dropdown-divider" />
+
+          <button className="db-workspace-dropdown-item" onClick={handleCreateNew}>
+            + New Workspace
+          </button>
+
+          {isNativeFileSystemSupported() && (
+            <button
+              className="db-workspace-dropdown-item"
+              onClick={() => {
+                setIsOpen(false);
+                onOpenFolder();
+              }}
+            >
+              Open Folder...
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/WorkspacePicker/WorkspaceSettingsButton.tsx

@@ -0,0 +1,79 @@
+/**
+ * WorkspaceSettingsButton — gear icon dropdown for workspace actions.
+ */
+
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { WorkspaceIcon } from '../icons.js';
+
+export interface WorkspaceSettingsButtonProps {
+  onRename: () => void;
+  onDownload: () => void;
+  onRemove: () => void;
+}
+
+export function WorkspaceSettingsButton({
+  onRename,
+  onDownload,
+  onRemove,
+}: WorkspaceSettingsButtonProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    function handleOutsideClick(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener('mousedown', handleOutsideClick);
+    return () => document.removeEventListener('mousedown', handleOutsideClick);
+  }, [isOpen]);
+
+  const handleAction = useCallback((action: () => void) => {
+    setIsOpen(false);
+    action();
+  }, []);
+
+  return (
+    <div ref={ref} className="db-ws-settings">
+      <button
+        className="db-ws-settings-btn"
+        onClick={() => setIsOpen(!isOpen)}
+        aria-expanded={isOpen}
+        aria-haspopup="true"
+        aria-label="Workspace settings"
+        title="Workspace settings"
+      >
+        <WorkspaceIcon />
+      </button>
+
+      {isOpen && (
+        <div className="db-ws-settings-dropdown" role="menu">
+          <button
+            className="db-ws-settings-item"
+            role="menuitem"
+            onClick={() => handleAction(onRename)}
+          >
+            Rename workspace
+          </button>
+          <button
+            className="db-ws-settings-item"
+            role="menuitem"
+            onClick={() => handleAction(onDownload)}
+          >
+            Download workspace
+          </button>
+          <div className="db-ws-settings-divider" />
+          <button
+            className="db-ws-settings-item db-ws-settings-item--danger"
+            role="menuitem"
+            onClick={() => handleAction(onRemove)}
+          >
+            Remove workspace
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/WorkspacePicker/index.ts

@@ -0,0 +1,2 @@
+export { WorkspacePicker } from './WorkspacePicker.js';
+export type { WorkspacePickerProps } from './WorkspacePicker.js';

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export { useAutoSave } from './useAutoSave.js';

package/src/hooks/useAutoSave.ts

@@ -0,0 +1,58 @@
+/**
+ * useAutoSave — debounced auto-save hook.
+ *
+ * Writes content to the FileSystemProvider after a delay
+ * whenever the content changes.
+ */
+
+import { useEffect, useRef, useCallback } from 'react';
+import type { FileSystemProvider } from '@bendyline/docblocks/filesystem';
+
+export function useAutoSave(
+  provider: FileSystemProvider | null,
+  filePath: string | null,
+  content: string,
+  delayMs = 500,
+): void {
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const lastSavedRef = useRef<string>(content);
+
+  const save = useCallback(async () => {
+    if (!provider || !filePath) return;
+    if (content === lastSavedRef.current) return;
+    lastSavedRef.current = content;
+    await provider.writeFile(filePath, content);
+  }, [provider, filePath, content]);
+
+  useEffect(() => {
+    if (!provider || !filePath) return;
+
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+
+    timerRef.current = setTimeout(() => {
+      save();
+    }, delayMs);
+
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, [content, delayMs, save, provider, filePath]);
+
+  // Flush on unmount
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+      // Sync save on unmount is best-effort
+      if (provider && filePath && content !== lastSavedRef.current) {
+        provider.writeFile(filePath, content);
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+}

package/src/icons.tsx

@@ -0,0 +1,60 @@
+import type { SVGProps } from 'react';
+
+const defaults: SVGProps<SVGSVGElement> = {
+  width: 16,
+  height: 16,
+  viewBox: '0 0 16 16',
+  fill: 'none',
+  stroke: 'currentColor',
+  strokeWidth: 1.5,
+  strokeLinecap: 'round' as const,
+  strokeLinejoin: 'round' as const,
+};
+
+export function NewFileIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg {...defaults} {...props}>
+      {/* Page outline */}
+      <path d="M9.5 1.5H4a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V5l-3.5-3.5Z" />
+      {/* Fold */}
+      <path d="M9.5 1.5V5H13" />
+      {/* Plus sign */}
+      <line x1="6.5" y1="10" x2="9.5" y2="10" />
+      <line x1="8" y1="8.5" x2="8" y2="11.5" />
+    </svg>
+  );
+}
+
+export function NewFolderIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg {...defaults} {...props}>
+      {/* Folder outline */}
+      <path d="M2 3.5a1 1 0 0 1 1-1h3l1.5 1.5H13a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5Z" />
+      {/* Plus sign */}
+      <line x1="6" y1="8.5" x2="10" y2="8.5" />
+      <line x1="8" y1="6.5" x2="8" y2="10.5" />
+    </svg>
+  );
+}
+
+export function RefreshIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg {...defaults} {...props}>
+      <path d="M13.5 8A5.5 5.5 0 1 1 8 2.5" />
+      <polyline points="13.5 3 13.5 6.5 10 6.5" />
+    </svg>
+  );
+}
+
+export function WorkspaceIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg {...defaults} {...props}>
+      {/* Desk surface (top-down rectangle) */}
+      <rect x="1.5" y="2.5" width="13" height="11" rx="1" />
+      {/* Blotter/pad with two vertical lines */}
+      <rect x="4" y="4.5" width="8" height="7" rx="0.5" />
+      <line x1="6.5" y1="5.5" x2="6.5" y2="10.5" strokeWidth="1" />
+      <line x1="9.5" y1="5.5" x2="9.5" y2="10.5" strokeWidth="1" />
+    </svg>
+  );
+}

package/src/index.ts

@@ -0,0 +1,31 @@
+/**
+ * @bendyline/docblocks-react — React components for DocBlocks
+ */
+
+// FileExplorer
+export { FileExplorer } from './FileExplorer/index.js';
+export type { FileExplorerProps } from './FileExplorer/index.js';
+export { FileTreeNode } from './FileExplorer/index.js';
+export type { FileTreeNodeProps } from './FileExplorer/index.js';
+export { useFileTree } from './FileExplorer/index.js';
+
+// WorkspacePicker
+export { WorkspacePicker } from './WorkspacePicker/index.js';
+export type { WorkspacePickerProps } from './WorkspacePicker/index.js';
+
+// DocBlocksShell
+export { DocBlocksShell } from './DocBlocksShell/index.js';
+export type { DocBlocksShellProps } from './DocBlocksShell/index.js';
+
+// AppMenu
+export { AppMenu } from './AppMenu/index.js';
+export type { AppMenuProps } from './AppMenu/index.js';
+
+// Export
+export { ExportToolbarControls } from './Export/index.js';
+export type { ExportToolbarControlsProps, ExportFormat, ExportOptions } from './Export/index.js';
+export { ExportDialog } from './Export/index.js';
+export type { ExportDialogProps } from './Export/index.js';
+
+// Hooks
+export { useAutoSave } from './hooks/index.js';