@deckbuilderkit/view-explorer 0.0.0-stage → 0.1.1

package/src/explorer/PropertiesDialog.tsx

@@ -0,0 +1,144 @@
+import { useEffect, useRef, useState, type ReactNode } from 'react';
+import { copyText, errorMessage, errorOf, formatBytes, Modal, useToast } from '@deckbuilderkit/ui';
+import { explorerApi as api, type FsDuProgress, type FsInfo } from '../client';
+import { t } from '../i18n';
+
+const GRID = { display: 'grid', gridTemplateColumns: 'max-content 1fr', gap: '6px 16px', alignItems: 'center', margin: 0 } as const;
+const WRAP = { overflowWrap: 'anywhere', margin: 0 } as const;
+const ROW = { display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' } as const;
+
+const when = (ms: number | null) => (ms === null ? '—' : new Date(ms).toLocaleString());
+const sized = (bytes: number) => t('explorer.props.bytes', { size: formatBytes(bytes), bytes: bytes.toLocaleString() });
+
+/** Properties of one Explorer entry; a folder can count its size, a file can show its SHA-256. */
+export function PropertiesDialog({ root, path, onClose }: { root: string; path: string; onClose: () => void }) {
+  const toast = useToast();
+  const [info, setInfo] = useState<FsInfo>();
+  const [error, setError] = useState<string>();
+  const [du, setDu] = useState<FsDuProgress>();
+  const [counting, setCounting] = useState(false);
+  const [hash, setHash] = useState<string>();
+  const [hashing, setHashing] = useState(false);
+  const abort = useRef<AbortController | undefined>(undefined);
+
+  useEffect(() => {
+    let live = true;
+    api.fsInfo(root, path).then(
+      (i) => live && setInfo(i),
+      (err) => live && setError(errorMessage(errorOf(err))),
+    );
+    return () => {
+      live = false;
+      abort.current?.abort();
+    };
+  }, [root, path]);
+
+  const copy = (text: string) =>
+    void copyText(text).then((ok) => toast(ok ? { message: t('explorer.props.copied') } : { message: t('explorer.copyFailed'), kind: 'error' }));
+
+  const count = () => {
+    const ac = new AbortController();
+    abort.current = ac;
+    setCounting(true);
+    setDu(undefined);
+    api
+      .fsDu(root, path, setDu, ac.signal)
+      .catch((err) => !ac.signal.aborted && setError(errorMessage(errorOf(err))))
+      .finally(() => {
+        if (abort.current === ac) setCounting(false);
+      });
+  };
+  const cancel = () => {
+    abort.current?.abort();
+    abort.current = undefined;
+    setCounting(false);
+  };
+
+  const hashIt = () => {
+    setHashing(true);
+    api
+      .fsHash(root, path)
+      .then((h) => setHash(h.sha256), (err) => setError(errorMessage(errorOf(err))))
+      .finally(() => setHashing(false));
+  };
+
+  const row = (label: string, value: ReactNode) => (
+    <>
+      <dt>{label}</dt>
+      <dd style={WRAP}>{value}</dd>
+    </>
+  );
+
+  return (
+    <Modal
+      title={t('explorer.properties')}
+      onClose={onClose}
+      footer={
+        <button className="btn" onClick={onClose}>
+          {t('explorer.props.close')}
+        </button>
+      }
+    >
+      {error && <p className="error">{error}</p>}
+      {info && (
+        <dl style={GRID}>
+          {row(t('explorer.props.name'), info.name)}
+          {row(
+            t('explorer.props.path'),
+            <span style={ROW}>
+              <span style={WRAP}>{info.fullPath}</span>
+              <button className="btn btn-sm" onClick={() => copy(info.fullPath)}>
+                {t('explorer.props.copy')}
+              </button>
+            </span>,
+          )}
+          {row(t('explorer.props.type'), t(`explorer.props.${info.type}`))}
+          {info.type === 'dir'
+            ? row(
+                t('explorer.props.size'),
+                <span style={ROW}>
+                  {du && (
+                    <span>
+                      {sized(du.bytes)} · {t('explorer.props.contains', { files: du.files.toLocaleString(), dirs: du.dirs.toLocaleString() })}
+                      {counting && ` · ${t('explorer.props.counting')}`}
+                    </span>
+                  )}
+                  {counting ? (
+                    <button className="btn btn-sm" onClick={cancel}>
+                      {t('explorer.props.cancel')}
+                    </button>
+                  ) : (
+                    <button className="btn btn-sm" onClick={count}>
+                      {t('explorer.props.calcSize')}
+                    </button>
+                  )}
+                </span>,
+              )
+            : row(t('explorer.props.size'), sized(info.size))}
+          {row(t('explorer.props.created'), when(info.created))}
+          {row(t('explorer.props.modified'), when(info.modified))}
+          {row(t('explorer.props.accessed'), when(info.accessed))}
+          {row(t('explorer.props.readOnly'), t(info.readOnly ? 'explorer.props.yes' : 'explorer.props.no'))}
+          {info.type === 'file' &&
+            row(
+              t('explorer.props.sha256'),
+              <span style={ROW}>
+                {hash ? (
+                  <>
+                    <code style={WRAP}>{hash}</code>
+                    <button className="btn btn-sm" onClick={() => copy(hash)}>
+                      {t('explorer.props.copy')}
+                    </button>
+                  </>
+                ) : (
+                  <button className="btn btn-sm" disabled={hashing} onClick={hashIt}>
+                    {hashing ? t('explorer.props.hashing') : t('explorer.props.sha256')}
+                  </button>
+                )}
+              </span>,
+            )}
+        </dl>
+      )}
+    </Modal>
+  );
+}

package/src/explorer/SqlPanel.tsx

@@ -0,0 +1,221 @@
+import { type ReactNode, useMemo, useRef, useState } from 'react';
+import { type CodeEditorHandle, type CodeEditorProps, langOfFile, resolveMarkers, type RunMode, sqlMarkers, sqlParams, type SqlParam } from '@deckbuilderkit/editor';
+import { Badge, ErrorBanner, Icon, Modal, SplitView, type TabAction, useAsync, useCommand, useViewLink } from '@deckbuilderkit/ui';
+import { DEFAULT_RESULTS, SqlResults, useSqlRunner, useSqlSchema } from '@deckbuilderkit/sql-ui';
+import { type ExplorerWorkbench, sqlRunnerSettings, withWorkbenchDefaults } from '../settings';
+import { explorerCommandById as commandById } from '../commands';
+import { t } from '../i18n';
+import { sqlClient } from '../client';
+import { useChordOf } from './tab-actions';
+
+const DEFAULT_SPLIT: [number, number] = [0.6, 0.4];
+const MANAGE = '::manage';
+
+/** What the Explorer passes a file tab so `.sql` files of allowed projects can run SQL. */
+export interface ExplorerSqlProps {
+  /** The stored workbench settings: allowed projects, last connection per project, result format. */
+  workbench?: Partial<ExplorerWorkbench>;
+  onWorkbenchChange(workbench: Partial<ExplorerWorkbench>): void;
+  /** Last connection id per project id. */
+  connections?: Record<string, string>;
+  onConnectionsChange(connections: Record<string, string>): void;
+  /** Fractions of the editor and the results panel. */
+  sizes?: [number, number];
+  onSizesChange(sizes: [number, number]): void;
+  /** Active REST environment id ('' = none); `.curl` runs substitute its variables. */
+  restEnvironment?: string;
+}
+
+interface Options {
+  project: string;
+  name: string;
+  /** Treat the file as SQL whatever its extension (SQL view of a query XML). */
+  asSql?: boolean;
+  /** The text editor shows (not a preview). */
+  active: boolean;
+  focused: boolean;
+  draft: string;
+  sql?: ExplorerSqlProps;
+  confirm: (opts: { title: string; body?: string; okLabel?: string; danger?: boolean }) => Promise<boolean>;
+  /** Called when a run opens the results, so another bottom panel can give way. */
+  onRunStart?: () => void;
+}
+
+function ParamsDialog({ params, initial, onSubmit, onClose }: { params: SqlParam[]; initial: Record<number, string>; onSubmit: (values: Record<number, string>) => void; onClose: () => void }) {
+  const [values, setValues] = useState<Record<number, string>>(initial);
+  const submit = () => onSubmit(values);
+  return (
+    <Modal
+      title={t('explorer.sql.params')}
+      onClose={onClose}
+      footer={(
+        <>
+          <button className="btn" onClick={onClose}>{t('explorer.shared.cancel')}</button>
+          <button className="btn btn-primary" onClick={submit}>{t('explorer.sql.paramsRun')}</button>
+        </>
+      )}
+    >
+      <form onSubmit={(e) => { e.preventDefault(); submit(); }} style={{ display: 'grid', gap: 10 }}>
+        <p className="muted">{t('explorer.sql.paramsHint')}</p>
+        {params.map((p, i) => (
+          <label key={p.n} style={{ display: 'grid', gap: 4 }}>
+            <span><code>{`{${p.n}}`}</code> <span className="muted">{t(p.unguarded === 0 ? 'explorer.sql.paramOptional' : 'explorer.sql.paramRequired')}</span></span>
+            <input className="input" autoFocus={i === 0} onFocus={i === 0 ? (e) => e.target.select() : undefined} value={values[p.n] ?? ''} onChange={(e) => setValues({ ...values, [p.n]: e.target.value })} />
+          </label>
+        ))}
+        <button type="submit" hidden />
+      </form>
+    </Modal>
+  );
+}
+
+/**
+ * SQL of an Explorer file: connection dropdown and Run / Run all / Format tab actions, the editor's run keys and completions, and a results panel
+ * below the editor. Only `.sql` files of projects in `workbench.explorerProjects`; the rest get nothing.
+ * The connection's DB session is the Workbench's.
+ */
+export function useExplorerSql({ project, name, asSql, active, focused, draft, sql, confirm, onRunStart }: Options) {
+  const settings = useMemo(() => withWorkbenchDefaults(sql?.workbench), [sql?.workbench]);
+  const enabled = !!sql && active && (asSql || langOfFile(name) === 'sql') && settings.explorerProjects.includes(project);
+  const connections = useAsync(() => (enabled ? sqlClient.connections() : Promise.resolve([])), [enabled]);
+  const connection = connections.data?.find((c) => c.id === sql?.connections?.[project]);
+  const db = enabled ? connection?.id : undefined;
+  const runner = useSqlRunner(sqlClient, db, sqlRunnerSettings(settings), confirm);
+  const { sqlSchema } = useSqlSchema(sqlClient, db);
+  const editor = useRef<CodeEditorHandle>(null);
+  const [open, setOpen] = useState(false);
+  const [resultSizes, setResultSizes] = useState<[number, number]>(DEFAULT_RESULTS);
+  const chordOf = useChordOf();
+
+  const fileKey = `${project}/${name}`;
+  const [remembered, setRemembered] = useState<Record<string, Record<number, string>>>({});
+  const [dialog, setDialog] = useState<{ text: string; mode: RunMode } | 'edit' | null>(null);
+  const [paramError, setParamError] = useState<string>();
+
+  const execute = (text: string, mode: RunMode, values: Record<number, string>) => {
+    if (!db) return;
+    let sqlText = text;
+    if (sqlParams(text).length > 0 || sqlMarkers(text).length > 0) {
+      const r = resolveMarkers(text, values);
+      if (r.error) {
+        setParamError(r.error);
+        setOpen(true);
+        return;
+      }
+      sqlText = r.sql;
+    }
+    setParamError(undefined);
+    setOpen(true);
+    onRunStart?.();
+    runner.run(sqlText, mode);
+  };
+  const run = (text: string, mode: RunMode) => {
+    if (!db) return;
+    if (sqlParams(text).length > 0) {
+      setDialog({ text, mode });
+      return;
+    }
+    execute(text, mode, remembered[fileKey] ?? {});
+  };
+  const editParams = () => setDialog('edit');
+  const submitParams = (values: Record<number, string>) => {
+    const pending = dialog;
+    setRemembered((r) => ({ ...r, [fileKey]: values }));
+    setDialog(null);
+    if (pending && pending !== 'edit') execute(pending.text, pending.mode, values);
+  };
+  const format = () => editor.current?.format(settings.format);
+  useCommand(commandById('explorer.sql.format'), format, { enabled: focused && enabled && !asSql });
+
+  const toWorkbench = useViewLink('workbench');
+  const changeConnection = (value: string) => {
+    if (!sql) return;
+    if (value === MANAGE) {
+      toWorkbench?.();
+      return;
+    }
+    runner.reset();
+    const byProject = { ...sql.connections };
+    if (value) byProject[project] = value;
+    else delete byProject[project];
+    sql.onConnectionsChange(byProject);
+  };
+
+  const noConnection = db ? undefined : t('explorer.sql.noConnection');
+  const connectionOptions = [
+    { value: '', label: t('explorer.sql.pickConnection') },
+    ...(connections.data ?? []).map((c) => ({ value: c.id, label: c.name })),
+    ...(toWorkbench ? [{ value: MANAGE, label: t('explorer.shared.sourceManage') }] : []),
+  ];
+  const actions: TabAction[] = enabled ? [
+    { id: 'sql.connection', group: 'primary', label: t('explorer.shared.source'), options: connectionOptions, value: connection?.id ?? '', run: (value) => changeConnection(value ?? '') },
+    { id: 'sql.run', group: 'primary', icon: 'play', label: t('explorer.shared.run'), hint: noConnection ?? 'Ctrl+Enter', disabled: !db || runner.busy, run: () => run(editor.current?.getRunText() ?? draft, 'statement') },
+    { id: 'sql.runAll', group: 'primary', icon: 'forward', label: t('explorer.shared.runAll'), hint: noConnection ?? 'Ctrl+Shift+Enter', disabled: !db || runner.busy, run: () => run(draft, 'all') },
+    ...(sqlParams(draft).length > 0 ? [{ id: 'sql.params', group: 'primary' as const, icon: 'code' as const, label: t('explorer.sql.params'), run: editParams }] : []),
+    ...(asSql ? [] : [{ id: 'sql.format', group: 'primary' as const, icon: 'braces' as const, label: t('explorer.shared.format'), hint: chordOf('explorer.sql.format'), run: format }]),
+  ] : [];
+
+  const editorProps: Pick<CodeEditorProps, 'onRun' | 'sqlDialect' | 'sqlSchema'> = enabled ? { onRun: run, sqlDialect: 'plsql', sqlSchema } : {};
+
+  const { status, starting } = runner;
+  /** `editorNode` alone, or with a bottom panel: `steps` when given, else the results of a SQL file. They compete for the same slot. */
+  const layout = (editorNode: ReactNode, steps?: ReactNode): ReactNode => (
+    <>
+      {baseLayout(editorNode, steps)}
+      {dialog && (
+        <ParamsDialog
+          params={sqlParams(dialog === 'edit' ? draft : dialog.text)}
+          initial={remembered[fileKey] ?? {}}
+          onSubmit={submitParams}
+          onClose={() => setDialog(null)}
+        />
+      )}
+    </>
+  );
+  const baseLayout = (editorNode: ReactNode, steps?: ReactNode): ReactNode => {
+    const showResults = enabled && !!sql && open && !steps;
+    if (!steps && !(enabled && sql)) return editorNode;
+    const bottom = !!steps || showResults;
+    const sizes = bottom ? (sql?.sizes ?? DEFAULT_SPLIT) : [1];
+    return (
+      <SplitView
+        direction="column"
+        sizes={sizes}
+        defaultSizes={bottom ? DEFAULT_SPLIT : undefined}
+        onResize={(s) => s.length === 2 && sql?.onSizesChange([s[0], s[1]])}
+      >
+        <div key="editor" className="ex-pane">
+          <div className="xp-sql-editor">{editorNode}</div>
+        </div>
+        {steps && <div key="steps" className="ex-pane">{steps}</div>}
+        {showResults && (
+          <div key="results" className="ex-pane">
+            <div className="xp-bar">
+              <Icon name="database" size={12} />
+              <span>{connection?.name}</span>
+              {status?.pending && <Badge tone="warn">{t('explorer.shared.txPending')}</Badge>}
+              <span className="spacer" />
+              {runner.running && <button className="btn btn-sm" onClick={runner.cancel}>{t('explorer.shared.cancel')}</button>}
+              <button className="btn btn-sm" onClick={runner.copy} disabled={runner.tableRows.length === 0}>{t(runner.selection.length > 0 ? 'explorer.shared.copySelected' : 'explorer.shared.copy')}</button>
+              <button className="btn btn-sm" onClick={runner.commit} disabled={!status?.connected || starting}>{t('explorer.shared.txCommit')}</button>
+              <button className="btn btn-sm" onClick={runner.rollback} disabled={!status?.connected || starting}>{t('explorer.shared.txRollback')}</button>
+              <button className="btn btn-ghost btn-sm btn-icon" onClick={() => setOpen(false)} title={t('explorer.sql.close')} aria-label={t('explorer.sql.close')}>
+                <Icon name="close" />
+              </button>
+            </div>
+            {paramError && <ErrorBanner error={{ kind: 'client', code: 'raw', message: paramError }} compact />}
+            {runner.actionError && <ErrorBanner error={runner.actionError} compact />}
+            <SqlResults runner={runner} sizes={resultSizes} onSizes={setResultSizes} />
+          </div>
+        )}
+      </SplitView>
+    );
+  };
+
+  const closeResults = () => setOpen(false);
+
+  const paramValues = remembered[fileKey] ?? {};
+  const setParamValue = (n: number, value: string) => setRemembered((r) => ({ ...r, [fileKey]: { ...r[fileKey], [n]: value } }));
+
+  return { enabled, editor, editorProps, actions, layout, closeResults, paramValues, setParamValue };
+}

package/src/explorer/TreePane.tsx

@@ -0,0 +1,216 @@
+import { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { Icon, ProjectPicker, type ProjectPickerProps, useCommand } from '@deckbuilderkit/ui';
+import type { Project, SearchHit } from '../client';
+import { explorerCommandById as commandById } from '../commands';
+import { nodeId } from '../explorer-paths';
+import { t } from '../i18n';
+import { ProjectSearch } from './ProjectSearch';
+import { ProjectTree, type ProjectTreeApi, type ProjectTreeProps } from './ProjectTree';
+import { findInTree } from './tree-find';
+
+export interface TreePaneProps extends ProjectTreeProps, Omit<ProjectPickerProps, 'current' | 'actions'> {
+  project: Project;
+  /** This pane is the one the user last clicked; Ctrl+Shift+F searches its project. */
+  focused: boolean;
+  /** Start with the excluded entries shown. */
+  showHidden?: boolean;
+  onFocus(): void;
+  /** The Explorer settings that decide what the tree lists. */
+  exclude: string[];
+  sort: string;
+  /** Every path of the project, for find in the tree; `ensureNames` loads or refreshes it. */
+  names?: SearchHit[];
+  ensureNames?(): void;
+  /** Show a second tree below; listed in the header's more menu. */
+  onSplit?(): void;
+  /** Close this tree; listed in the header's more menu. */
+  onCloseTree?(): void;
+  /** Reveal the active file in the tree, switching project if needed; undefined while no file is open. */
+  onGoToFile?(): void;
+}
+
+/** One sidebar tree: the project picker, and the project's tree or, while searching, its search panel. */
+export function TreePane({ focused, showHidden = false, onFocus, exclude, sort, names, ensureNames, onSplit, onCloseTree, onGoToFile, apiRef, projects, onPick, onAdd, onEdit, onRemove, ...tree }: TreePaneProps) {
+  const { project } = tree;
+  const own = useRef<ProjectTreeApi>(null);
+  useImperativeHandle(apiRef, () => ({
+    newFile: () => own.current?.newFile(),
+    newFolder: () => own.current?.newFolder(),
+    refresh: () => own.current?.refresh(),
+    collapseAll: () => own.current?.collapseAll(),
+    expandAll: () => own.current?.expandAll(),
+    canCollapse: () => own.current?.canCollapse() ?? false,
+    reveal: (path) => own.current?.reveal(path),
+    scrollTo: (path) => own.current?.scrollTo(path),
+    finding: () => own.current?.finding() ?? false,
+    selectedFolder: () => own.current?.selectedFolder() ?? '',
+  }));
+  const [moreOpen, setMoreOpen] = useState(false);
+  const moreWrap = useRef<HTMLDivElement>(null);
+  const [moreBox, setMoreBox] = useState<{ top: number; right: number; maxHeight: number }>();
+  useEffect(() => {
+    if (!moreOpen || !moreWrap.current) return setMoreBox(undefined);
+    const r = moreWrap.current.getBoundingClientRect();
+    setMoreBox({ top: r.bottom + 4, right: window.innerWidth - r.right, maxHeight: Math.max(120, window.innerHeight - r.bottom - 12) });
+  }, [moreOpen]);
+  useEffect(() => {
+    if (!moreOpen) return;
+    const away = (e: MouseEvent) => {
+      if (!moreWrap.current?.contains(e.target as Node)) setMoreOpen(false);
+    };
+    document.addEventListener('mousedown', away);
+    return () => document.removeEventListener('mousedown', away);
+  }, [moreOpen]);
+  const item = (icon: string, label: string, act: () => void, checked?: boolean) => (
+    <button
+      type="button"
+      className="menu-item"
+      role={checked === undefined ? 'menuitem' : 'menuitemcheckbox'}
+      aria-checked={checked}
+      onClick={() => {
+        setMoreOpen(false);
+        act();
+      }}
+    >
+      <span className="menu-icon"><Icon name={icon as never} size={14} /></span>
+      <span className="menu-label">{label}</span>
+      {checked && <Icon name="check" size={14} />}
+    </button>
+  );
+  const [searching, setSearching] = useState(false);
+  const [showExcluded, setShowExcluded] = useState(showHidden);
+  const [signal, setSignal] = useState(0);
+  const [finding, setFinding] = useState(false);
+  const [findQuery, setFindQuery] = useState('');
+  const [filterMode, setFilterMode] = useState(true);
+  const [matchAt, setMatchAt] = useState(-1);
+  const findInput = useRef<HTMLInputElement>(null);
+  const [inside, setInside] = useState(false);
+
+  const result = useMemo(() => (finding && names ? findInTree(findQuery, names) : undefined), [finding, findQuery, names]);
+  useEffect(() => setMatchAt(-1), [result]);
+
+  const openFind = () => {
+    setFinding(true);
+    ensureNames?.();
+    findInput.current?.focus();
+    findInput.current?.select();
+  };
+  const closeFind = () => {
+    setFinding(false);
+    setFindQuery('');
+  };
+  const stepMatch = (delta: number) => {
+    if (!result?.order.length) return;
+    const next = (matchAt + delta + result.order.length) % result.order.length;
+    setMatchAt(next);
+    own.current?.scrollTo(result.order[next]!);
+  };
+
+  const openSearch = () => {
+    setSearching(true);
+    setSignal((n) => n + 1);
+  };
+  useCommand(commandById('explorer.search'), openSearch, { enabled: focused && inside });
+  useCommand(commandById('explorer.find'), openFind, { enabled: focused && inside });
+  useEffect(() => {
+    if (finding) findInput.current?.focus();
+  }, [finding]);
+  const collapsible = tree.expanded.some((id) => id !== nodeId(project.id, ''));
+  const toggleAll = () => (collapsible ? own.current?.collapseAll() : own.current?.expandAll());
+  useCommand(commandById('explorer.collapseAll'), toggleAll, { enabled: focused });
+
+  return (
+    <div
+      className="xp-pane"
+      onMouseDownCapture={() => {
+        onFocus();
+        setInside(true);
+      }}
+      onFocusCapture={() => {
+        onFocus();
+        setInside(true);
+      }}
+      onBlurCapture={(e) => {
+        if (!e.currentTarget.contains(e.relatedTarget as Node | null)) setInside(false);
+      }}
+    >
+      <ProjectPicker
+        projects={projects}
+        current={project}
+        onPick={onPick}
+        onAdd={onAdd}
+        onEdit={onEdit}
+        onRemove={onRemove}
+        actions={
+          <>
+            <button type="button" className="btn btn-ghost btn-sm btn-icon" onClick={() => own.current?.newFile()} title={t('explorer.newFile')} aria-label={t('explorer.newFile')}>
+              <Icon name="file-plus" />
+            </button>
+            <button type="button" className="btn btn-ghost btn-sm btn-icon" onClick={toggleAll} title={t(collapsible ? 'explorer.collapseAll' : 'explorer.expandAll')} aria-label={t(collapsible ? 'explorer.collapseAll' : 'explorer.expandAll')}>
+              <Icon name={collapsible ? 'collapse-all' : 'expand-all'} />
+            </button>
+            <button type="button" className="btn btn-ghost btn-sm btn-icon" onClick={onGoToFile} disabled={!onGoToFile} title={t('explorer.goToFile')} aria-label={t('explorer.goToFile')}>
+              <Icon name="locate" />
+            </button>
+            <div className="menu-wrap" ref={moreWrap} onKeyDown={(e) => e.key === 'Escape' && setMoreOpen(false)}>
+              <button type="button" className="btn btn-ghost btn-sm btn-icon" onClick={() => setMoreOpen(!moreOpen)} aria-expanded={moreOpen} aria-haspopup="menu" title={t('explorer.more')} aria-label={t('explorer.more')}>
+                <Icon name="more" />
+              </button>
+              {moreOpen && moreBox && (
+                <div className="menu" role="menu" style={{ position: 'fixed', overflowY: 'auto', ...moreBox }}>
+                  {item('search', t('explorer.search.open'), openSearch)}
+                  {item('folder-plus', t('explorer.newFolder'), () => own.current?.newFolder())}
+                  {item('refresh', t('explorer.refresh'), () => own.current?.refresh())}
+                  {tree.onOpenDetails && item('table', t('explorer.openDetails'), () => tree.onOpenDetails?.(project.id, own.current?.selectedFolder() ?? ''))}
+                  {item(showExcluded ? 'eye' : 'eye-off', t('explorer.showExcluded'), () => setShowExcluded(!showExcluded), showExcluded)}
+                  {onSplit && item('split-down', t('explorer.split'), onSplit)}
+                  {onCloseTree && item('close', t('explorer.closeTree'), onCloseTree)}
+                </div>
+              )}
+            </div>
+          </>
+        }
+      />
+      {finding && (
+        <div className="xp-find">
+          <input
+            ref={findInput}
+            type="search"
+            value={findQuery}
+            placeholder={t('explorer.find.placeholder')}
+            aria-label={t('explorer.find.placeholder')}
+            onChange={(e) => setFindQuery(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Escape') {
+                e.preventDefault();
+                closeFind();
+              } else if (e.key === 'Enter' || e.key === 'ArrowDown') {
+                e.preventDefault();
+                stepMatch(e.shiftKey ? -1 : 1);
+              } else if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                stepMatch(-1);
+              }
+            }}
+          />
+          <span className="xp-find-count muted">
+            {findQuery.trim() ? (result?.order.length ? `${matchAt >= 0 ? matchAt + 1 : 0}/${result.order.length}` : names ? t('explorer.find.none') : '…') : ''}
+          </span>
+          <button type="button" className={`chip${filterMode ? ' chip-on' : ''}`} onClick={() => setFilterMode(!filterMode)} aria-pressed={filterMode} title={t('explorer.find.filterHint')}>
+            {t('explorer.find.filter')}
+          </button>
+          <button type="button" className="btn btn-ghost btn-sm btn-icon" onClick={closeFind} title={t('explorer.search.close')} aria-label={t('explorer.search.close')}>
+            <Icon name="close" />
+          </button>
+        </div>
+      )}
+      <div className="xp-pane-body">
+        {searching && <ProjectSearch project={project} exclude={exclude} onOpenFile={tree.onPreviewFile ?? tree.onOpenFile} onClose={() => setSearching(false)} focusSignal={signal} />}
+        <div className="xp-tree-wrap" hidden={searching}>
+          <ProjectTree {...tree} view={{ exclude, sort, showExcluded }} find={result && { mode: filterMode ? 'filter' : 'highlight', result }} apiRef={own} />
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/explorer/copy-path.ts

@@ -0,0 +1,9 @@
+import { copyText, useToast } from '@deckbuilderkit/ui';
+import { t } from '../i18n';
+
+/** Copies a path to the clipboard and says so in a toast. */
+export function useCopyPath(): (path: string) => void {
+  const toast = useToast();
+  return (path) =>
+    void copyText(path).then((ok) => toast(ok ? { message: t('explorer.pathCopied') } : { message: t('explorer.copyFailed'), kind: 'error' }));
+}

package/src/explorer/file-undo.ts

@@ -0,0 +1,36 @@
+import { useRef } from 'react';
+
+/** One undoable file operation. Delete is not here: the Recycle Bin restores it. */
+export type UndoOp =
+  | { kind: 'create' | 'copy'; project: string; paths: string[] }
+  | { kind: 'rename' | 'move'; project: string; moves: Array<{ from: string; to: string }> };
+
+export const MAX_UNDO = 20;
+
+export interface FileUndo {
+  push(op: UndoOp): void;
+  /** The newest op. */
+  last(): UndoOp | undefined;
+  /** Removes `op` wherever it sits; false when it is already gone. */
+  take(op: UndoOp): boolean;
+}
+
+/** Stack of the last file operations of this Explorer session, newest last. */
+export function createFileUndo(): FileUndo {
+  const stack: UndoOp[] = [];
+  return {
+    push: (op) => {
+      stack.push(op);
+      if (stack.length > MAX_UNDO) stack.shift();
+    },
+    last: () => stack.at(-1),
+    take: (op) => {
+      const at = stack.indexOf(op);
+      if (at < 0) return false;
+      stack.splice(at, 1);
+      return true;
+    },
+  };
+}
+
+export const useFileUndo = (): FileUndo => (useRef<FileUndo>().current ??= createFileUndo());

package/src/explorer/fs-actions.ts

@@ -0,0 +1,34 @@
+import { relPath } from '@deckbuilderkit/ui';
+import type { FsArchiveFormat } from '@deckbuilderkit/server-core/protocol';
+import { explorerApi as api } from '../client';
+import { t } from '../i18n';
+import { freeName } from './os-drop';
+
+/** File actions shared by the project tree and the details tab. */
+
+/** The archive name without its extension(s): `a.tar.gz` → `a`. */
+export const archiveStem = (name: string) => name.replace(/\.[^.]+$/, '').replace(/\.tar$/i, '') || name;
+
+/** The folder all `items` sit in, or undefined when they span folders (or there are none). */
+export const commonParent = (items: ReadonlyArray<{ path: string }>) => {
+  const parents = new Set(items.map((n) => relPath.dirname(n.path)));
+  return parents.size === 1 ? [...parents][0]! : undefined;
+};
+
+/** Names in `dir` of `project`, folded the way the OS compares them, and the fold. */
+export const takenIn = async (project: string, dir: string) => {
+  const fold = /Windows|Mac/.test(navigator.userAgent) ? (n: string) => n.toLowerCase() : (n: string) => n;
+  return { fold, taken: new Set((await api.fsList(project, dir)).map((e) => fold(e.name))) };
+};
+
+/** Compresses `paths` (all in one folder) into a free name next to them; undefined when they span folders. */
+export async function compressPaths(project: { id: string; name: string }, paths: string[], format: FsArchiveFormat) {
+  const dir = commonParent(paths.map((path) => ({ path })));
+  if (dir === undefined || paths.length === 0) return undefined;
+  const { fold, taken } = await takenIn(project.id, dir);
+  const base = paths.length === 1 ? relPath.basename(paths[0]!) : relPath.basename(dir) || project.name;
+  const name = freeName(`${base}.${format}`, false, taken, fold);
+  const result = await api.fsCompress(project.id, paths, name, format);
+  const skipped = result.skippedLinks.length;
+  return { dir, name, result, message: skipped ? t('explorer.compressedSkipped', { name, count: skipped }) : t('explorer.compressed', { name }) };
+}