@bendyline/docblocks-react 2.0.0 → 2.1.0

package/src/Git/useGitStatus.ts

@@ -1,78 +0,0 @@
-/**
- * useGitStatus — subscribes to the host's owner-scoped repository stream.
- *
- * Dedupes identical payloads so a permanently-dirty working tree (normal
- * under the manual-commit model) doesn't repaint the tree on every push
- * from the main process.
- */
-
-import { useCallback, useEffect, useRef, useState } from 'react';
-import type { DocBlocksHostGitAPI, GitStatus } from '@bendyline/docblocks/host';
-
-const SCHEDULE_REFRESH_MS = 1500;
-
-function statusKey(status: GitStatus): string {
-  return JSON.stringify(status);
-}
-
-export interface UseGitStatusResult {
-  status: GitStatus | null;
-  /** Fetch a fresh status immediately (after a renderer-initiated git op). */
-  refresh: () => void;
-  /** Trailing-debounced refresh (after autosave writes). */
-  scheduleRefresh: () => void;
-}
-
-export function useGitStatus(
-  gitApi: DocBlocksHostGitAPI | null,
-  repositoryId: string | null,
-  enabled: boolean,
-): UseGitStatusResult {
-  const [status, setStatus] = useState<GitStatus | null>(null);
-  const lastKeyRef = useRef<string | null>(null);
-  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  const apply = useCallback((next: GitStatus) => {
-    const key = statusKey(next);
-    if (key === lastKeyRef.current) return;
-    lastKeyRef.current = key;
-    setStatus(next);
-  }, []);
-
-  useEffect(() => {
-    lastKeyRef.current = null;
-    setStatus(null);
-    if (!gitApi || !repositoryId || !enabled) return;
-    let cancelled = false;
-    const unsubscribe = gitApi.onStatusChanged(repositoryId, (next) => {
-      if (!cancelled) apply(next);
-    });
-    return () => {
-      cancelled = true;
-      unsubscribe();
-    };
-  }, [gitApi, repositoryId, enabled, apply]);
-
-  const refresh = useCallback(() => {
-    if (!gitApi || !repositoryId || !enabled) return;
-    void gitApi.status(repositoryId).then((result) => {
-      if (result.ok) apply(result.value);
-    });
-  }, [gitApi, repositoryId, enabled, apply]);
-
-  const scheduleRefresh = useCallback(() => {
-    if (timerRef.current) clearTimeout(timerRef.current);
-    timerRef.current = setTimeout(() => {
-      timerRef.current = null;
-      refresh();
-    }, SCHEDULE_REFRESH_MS);
-  }, [refresh]);
-
-  useEffect(() => {
-    return () => {
-      if (timerRef.current) clearTimeout(timerRef.current);
-    };
-  }, []);
-
-  return { status, refresh, scheduleRefresh };
-}

package/src/Settings/Settings.tsx

@@ -1,118 +0,0 @@
-/** Shared controls used by the app and host-specific DocBlocks settings dialogs. */
-
-import type { ReactNode } from 'react';
-import { Dialog } from '../components/Dialog.js';
-import { ACCENT_COLORS, type AccentColor, type ThemePreference } from '../preferences/theme.js';
-
-export type { AccentColor, ThemePreference } from '../preferences/theme.js';
-
-const ACCENT_LABELS: Record<AccentColor, string> = {
-  brown: 'Brown',
-  green: 'Green',
-  blue: 'Blue',
-  purple: 'Purple',
-  maroon: 'Maroon',
-  orange: 'Orange',
-  gray: 'Gray',
-};
-
-export interface SettingsDialogProps {
-  title?: string;
-  onClose: () => void;
-  children: ReactNode;
-}
-
-export function SettingsDialog({ title = 'Settings', onClose, children }: SettingsDialogProps) {
-  return (
-    <Dialog title={title} onClose={onClose}>
-      {children}
-    </Dialog>
-  );
-}
-
-export interface ThemeSettingsProps {
-  value: ThemePreference;
-  onChange: (theme: ThemePreference) => void;
-  name?: string;
-}
-
-export function ThemeSettings({ value, onChange, name = 'theme' }: ThemeSettingsProps) {
-  return (
-    <fieldset className="db-settings-fieldset">
-      <legend className="db-settings-legend">Theme</legend>
-      <label className="db-settings-radio">
-        <input
-          type="radio"
-          name={name}
-          value="auto"
-          checked={value === 'auto'}
-          onChange={() => onChange('auto')}
-        />
-        System default
-      </label>
-      <label className="db-settings-radio">
-        <input
-          type="radio"
-          name={name}
-          value="light"
-          checked={value === 'light'}
-          onChange={() => onChange('light')}
-        />
-        Light
-      </label>
-      <label className="db-settings-radio">
-        <input
-          type="radio"
-          name={name}
-          value="dark"
-          checked={value === 'dark'}
-          onChange={() => onChange('dark')}
-        />
-        Dark
-      </label>
-    </fieldset>
-  );
-}
-
-export interface AccentColorSettingsProps {
-  value: AccentColor;
-  onChange: (color: AccentColor) => void;
-  name?: string;
-}
-
-export function AccentColorSettings({
-  value,
-  onChange,
-  name = 'accent-color',
-}: AccentColorSettingsProps) {
-  return (
-    <fieldset className="db-settings-fieldset">
-      <legend className="db-settings-legend">Accent color</legend>
-      <p className="db-settings-hint">Used in both light and dark appearances.</p>
-      <div className="db-settings-accent-grid">
-        {ACCENT_COLORS.map((color) => (
-          <label
-            className={`db-settings-accent${
-              value === color ? ' db-settings-accent--selected' : ''
-            }`}
-            key={color}
-          >
-            <input
-              className="db-settings-accent-input"
-              type="radio"
-              name={name}
-              value={color}
-              checked={value === color}
-              onChange={() => onChange(color)}
-            />
-            <span
-              className={`db-settings-accent-swatch db-settings-accent-swatch--${color}`}
-              aria-hidden="true"
-            />
-            <span>{ACCENT_LABELS[color]}</span>
-          </label>
-        ))}
-      </div>
-    </fieldset>
-  );
-}

package/src/Settings/public-api.ts

@@ -1,8 +0,0 @@
-export { AccentColorSettings, SettingsDialog, ThemeSettings } from './Settings.js';
-export type {
-  AccentColor,
-  AccentColorSettingsProps,
-  SettingsDialogProps,
-  ThemePreference,
-  ThemeSettingsProps,
-} from './Settings.js';

package/src/WorkspacePicker/WorkspacePicker.tsx

@@ -1,191 +0,0 @@
-/**
- * WorkspacePicker — dropdown for switching between workspaces
- * (IndexedDB-based or native folder via File System Access API).
- */
-
-import { Fragment, useState, useEffect, useCallback, useRef } from 'react';
-import type { WorkspaceDescriptor } from '@bendyline/docblocks/workspace';
-import { listWorkspaces, saveWorkspace, touchWorkspace } from '@bendyline/docblocks/workspace';
-import { isElectronHost } from '@bendyline/docblocks/host';
-import { FolderIcon, NewFolderIcon } from '../icons.js';
-
-function isNativeFileSystemSupported(): boolean {
-  return (
-    typeof globalThis !== 'undefined' &&
-    typeof (globalThis as { showDirectoryPicker?: unknown }).showDirectoryPicker === 'function'
-  );
-}
-
-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;
-  /**
-   * Called when the user chooses "Clone Git repository". Only provided on
-   * the desktop when git is available — omitted, the item is hidden.
-   */
-  onCloneRepository?: () => void;
-  /** Optional className. */
-  className?: string;
-}
-
-function WorkspacePath({ path }: { path: string }) {
-  return path.split(/([\\/])/).map((segment, index) => (
-    <Fragment key={index}>
-      {segment}
-      {(segment === '\\' || segment === '/') && <wbr />}
-    </Fragment>
-  ));
-}
-
-export function WorkspacePicker({
-  activeWorkspaceId,
-  onSelect,
-  onOpenFolder,
-  onCloneRepository,
-  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 electron = isElectronHost();
-
-  const refresh = useCallback(async () => {
-    const list = await listWorkspaces();
-    // On desktop, hide web-only workspaces (indexeddb/native).
-    const filtered = electron
-      ? list.filter((w) => w.type === 'electron-native')
-      : list.filter((w) => w.type !== 'electron-native');
-    setWorkspaces(filtered);
-  }, [electron]);
-
-  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);
-  const activeWorkspaceName = activeWs?.name ?? 'No workspace';
-
-  return (
-    <div ref={pickerRef} className={`db-workspace-picker ${className ?? ''}`}>
-      <button
-        className="db-workspace-picker-btn"
-        onClick={() => setIsOpen(!isOpen)}
-        title="Switch workspace"
-        aria-label={`Switch workspace, current: ${activeWorkspaceName}`}
-      >
-        <span className="db-workspace-picker-label">{activeWorkspaceName}</span>
-        <span className="db-workspace-picker-compact-icon">
-          <FolderIcon />
-        </span>
-        <span
-          className={`db-workspace-picker-caret${isOpen ? ' db-workspace-picker-caret--open' : ''}`}
-          aria-hidden="true"
-        />
-      </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)}
-            >
-              <span className="db-workspace-details">
-                <span className="db-workspace-heading">
-                  <span>{ws.name}</span>
-                  {(ws.type === 'native' || ws.type === 'electron-native') && (
-                    <span className="db-workspace-type">(folder)</span>
-                  )}
-                </span>
-                {ws.rootPath && (
-                  <span className="db-workspace-path" title={ws.rootPath}>
-                    <WorkspacePath path={ws.rootPath} />
-                  </span>
-                )}
-              </span>
-            </button>
-          ))}
-
-          <div className="db-workspace-dropdown-divider" />
-
-          {!electron && (
-            <button className="db-workspace-dropdown-item" onClick={handleCreateNew}>
-              <span className="db-workspace-dropdown-action-label">
-                <NewFolderIcon />
-                <span>New Workspace</span>
-              </span>
-            </button>
-          )}
-
-          {(electron || isNativeFileSystemSupported()) && (
-            <button
-              className="db-workspace-dropdown-item"
-              onClick={() => {
-                setIsOpen(false);
-                onOpenFolder();
-              }}
-            >
-              Open Folder...
-            </button>
-          )}
-
-          {onCloneRepository && (
-            <button
-              className="db-workspace-dropdown-item"
-              onClick={() => {
-                setIsOpen(false);
-                onCloneRepository();
-              }}
-            >
-              Clone Git Repository...
-            </button>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}

package/src/WorkspacePicker/WorkspaceSettingsButton.tsx

@@ -1,88 +0,0 @@
-/**
- * WorkspaceSettingsButton — gear icon dropdown for workspace actions.
- */
-
-import { useState, useCallback, useRef, useEffect } from 'react';
-import { WorkspaceIcon } from '../icons.js';
-
-export interface WorkspaceSettingsButtonProps {
-  onSettings: () => void;
-  onRename: () => void;
-  onDownload: () => void;
-  onRemove: () => void;
-}
-
-export function WorkspaceSettingsButton({
-  onSettings,
-  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(onSettings)}
-          >
-            Workspace settings…
-          </button>
-          <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/WorkspaceSettingsDialog.tsx

@@ -1,121 +0,0 @@
-/**
- * WorkspaceSettingsDialog — per-workspace settings modal.
- *
- * Lets the user override the global versioning preference for a single
- * workspace (or fall back to inheriting it). The override is stored on
- * the WorkspaceDescriptor and persisted via `saveWorkspace`.
- */
-
-import { useCallback, useEffect } from 'react';
-import type { WorkspaceDescriptor } from '@bendyline/docblocks/workspace';
-import {
-  isLocalWorkspaceType,
-  resolveVersioningEnabled,
-  type VersioningPreference,
-} from '../preferences/versioning.js';
-
-export type WorkspaceVersioningOverride = NonNullable<WorkspaceDescriptor['versioningOverride']>;
-
-export interface WorkspaceSettingsDialogProps {
-  workspace: WorkspaceDescriptor;
-  /** Current global versioning preference — used to label "Inherit". */
-  globalVersioningPreference: VersioningPreference;
-  /** Apply a new override and close the dialog. */
-  onChange: (override: WorkspaceVersioningOverride) => void;
-  onClose: () => void;
-}
-
-const VERSIONING_LABELS: Record<VersioningPreference, string> = {
-  on: 'on',
-  'browser-only': 'on for browser workspaces, off for local folders',
-  off: 'off',
-};
-
-export function WorkspaceSettingsDialog({
-  workspace,
-  globalVersioningPreference,
-  onChange,
-  onClose,
-}: WorkspaceSettingsDialogProps) {
-  // Treat absent/undefined as 'inherit' for the radio state.
-  const current: WorkspaceVersioningOverride = workspace.versioningOverride ?? 'inherit';
-
-  useEffect(() => {
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') onClose();
-    };
-    window.addEventListener('keydown', onKey);
-    return () => window.removeEventListener('keydown', onKey);
-  }, [onClose]);
-
-  const handleBackdropClick = useCallback(
-    (e: React.MouseEvent) => {
-      if (e.target === e.currentTarget) onClose();
-    },
-    [onClose],
-  );
-
-  const isLocal = isLocalWorkspaceType(workspace.type);
-  const inheritedEnabled = resolveVersioningEnabled(
-    { ...workspace, versioningOverride: 'inherit' },
-    globalVersioningPreference,
-  );
-  const inheritLabel = `Inherit default — currently ${VERSIONING_LABELS[globalVersioningPreference]} (${inheritedEnabled ? 'on' : 'off'} for this workspace)`;
-
-  return (
-    <div className="db-dialog-overlay" onClick={handleBackdropClick}>
-      <div className="db-dialog" role="dialog" aria-label="Workspace settings">
-        <div className="db-dialog-header">
-          <h2 className="db-dialog-title">Workspace settings</h2>
-          <button type="button" className="db-dialog-close" onClick={onClose} aria-label="Close">
-            &times;
-          </button>
-        </div>
-        <div className="db-dialog-body">
-          <p className="db-settings-hint">
-            <strong>{workspace.name}</strong> &middot;{' '}
-            {isLocal ? 'Local folder workspace' : 'Browser workspace'}
-          </p>
-
-          <fieldset className="db-settings-fieldset">
-            <legend className="db-settings-legend">Version history</legend>
-            <p className="db-settings-hint">
-              Controls whether DocBlocks keeps prior revisions in{' '}
-              <code>&lt;name&gt;_files/.versions/</code> for documents in this workspace.
-            </p>
-            <label className="db-settings-radio">
-              <input
-                type="radio"
-                name="ws-versioning"
-                value="inherit"
-                checked={current === 'inherit'}
-                onChange={() => onChange('inherit')}
-              />
-              {inheritLabel}
-            </label>
-            <label className="db-settings-radio">
-              <input
-                type="radio"
-                name="ws-versioning"
-                value="on"
-                checked={current === 'on'}
-                onChange={() => onChange('on')}
-              />
-              On for this workspace
-            </label>
-            <label className="db-settings-radio">
-              <input
-                type="radio"
-                name="ws-versioning"
-                value="off"
-                checked={current === 'off'}
-                onChange={() => onChange('off')}
-              />
-              Off for this workspace
-            </label>
-          </fieldset>
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/WorkspacePicker/index.ts

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

package/src/components/Dialog.tsx

@@ -1,81 +0,0 @@
-/**
- * Dialog — shared modal primitive.
- *
- * Promotes the `db-dialog-overlay` / `db-dialog` pattern used by the
- * settings dialogs into a reusable component, adding aria-modal and
- * initial focus. Escape and (by default) backdrop clicks close it.
- */
-
-import { useCallback, useEffect, useRef } from 'react';
-
-export interface DialogProps {
-  title: string;
-  onClose: () => void;
-  /** default 380px / wide 560px / full min(1100px, 94vw) column. */
-  size?: 'default' | 'wide' | 'full';
-  children: React.ReactNode;
-  /** Right-aligned action row below the body. */
-  footer?: React.ReactNode;
-  /** Element to focus on open; defaults to the close button. */
-  initialFocusRef?: React.RefObject<HTMLElement | null>;
-  /** Set false when a stray backdrop click would lose user input. */
-  closeOnBackdrop?: boolean;
-}
-
-export function Dialog({
-  title,
-  onClose,
-  size = 'default',
-  children,
-  footer,
-  initialFocusRef,
-  closeOnBackdrop = true,
-}: DialogProps) {
-  const closeButtonRef = useRef<HTMLButtonElement>(null);
-
-  useEffect(() => {
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') onClose();
-    };
-    window.addEventListener('keydown', onKey);
-    return () => window.removeEventListener('keydown', onKey);
-  }, [onClose]);
-
-  useEffect(() => {
-    const target = initialFocusRef?.current ?? closeButtonRef.current;
-    target?.focus();
-    // Focus only on mount — refocusing on every re-render would fight the user.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const handleBackdropClick = useCallback(
-    (e: React.MouseEvent) => {
-      if (closeOnBackdrop && e.target === e.currentTarget) onClose();
-    },
-    [closeOnBackdrop, onClose],
-  );
-
-  const sizeClass =
-    size === 'wide' ? ' db-dialog--wide' : size === 'full' ? ' db-dialog--full' : '';
-
-  return (
-    <div className="db-dialog-overlay" onClick={handleBackdropClick}>
-      <div className={`db-dialog${sizeClass}`} role="dialog" aria-modal="true" aria-label={title}>
-        <div className="db-dialog-header">
-          <h2 className="db-dialog-title">{title}</h2>
-          <button
-            ref={closeButtonRef}
-            type="button"
-            className="db-dialog-close"
-            onClick={onClose}
-            aria-label="Close"
-          >
-            &times;
-          </button>
-        </div>
-        <div className="db-dialog-body">{children}</div>
-        {footer && <div className="db-dialog-footer">{footer}</div>}
-      </div>
-    </div>
-  );
-}