dsh-workspace-explorer 1.1.0 → 1.1.1

package/src/ui/explorer.js

@@ -1,5 +1,5 @@
 import { joinPath, move, parentOf, renamePath, resourceAddress, underPath, visit, windowsPath } from './navigation.js';
-import { Preview, PreviewBoundary } from './preview.js';
+import { formatSize, Preview, PreviewBoundary } from './preview.js';
 import { disks } from './workspace.js';
 import { useComposerDrop } from './composer-drop.js';
 import { Thumbnail } from './thumbnail.js';
@@ -80,14 +80,6 @@ function selectNames(current, name, entries, shift, ctrl) {
   return { names, anchor: name };
 }
 
-function formatSize(bytes) {
-  if (typeof bytes !== 'number') return '—';
-  if (bytes < 1024) return bytes + ' B';
-  if (bytes < 1024 ** 2) return (bytes / 1024).toFixed(1) + ' KB';
-  if (bytes < 1024 ** 3) return (bytes / 1024 ** 2).toFixed(1) + ' MB';
-  return (bytes / 1024 ** 3).toFixed(1) + ' GB';
-}
-
 function entryType(entry) {
   if (entry.type === 'drive') return '磁盘';
   if (entry.type === 'directory') return '文件夹';
@@ -175,21 +167,19 @@ function PreviewDivider({ root, ratio, setRatio }) {
 }
 
 export function Explorer({
-  cwd, sessionId, initialPath, bindFileActions, getTarget, onPath, openLocal, openFolderTab,
+  cwd, sessionId, initialPath, bindFileActions, getTarget, onPath, openLocal, openDocument, openFolderTab,
   refreshDirectories, updateRenamedPath,
 }) {
   const workspace = windowsPath(cwd);
   const [localHistory, setLocalHistory] = useState(() => firstPath(initialPath ?? workspace));
   const [scoped, setScoped] = useState(null);
   const workspaceMode = scoped !== null;
-  const root = workspaceMode ? (sessionId ? workspace : scoped.root) : null;
-  const history = workspaceMode ? (root === scoped.root ? scoped.history : firstPath(root)) : localHistory;
+  const root = scoped?.root ?? null;
+  const history = scoped?.history ?? localHistory;
   const changeHistory = useCallback(change => {
-    if (workspaceMode) setScoped(current => current && {
-      root, history: change(current.root === root ? current.history : firstPath(root)),
-    });
+    if (workspaceMode) setScoped(current => current && { ...current, history: change(current.history) });
     else setLocalHistory(change);
-  }, [workspaceMode, root]);
+  }, [workspaceMode]);
   const [revision, setRevision] = useState(0);
   const [listing, setListing] = useState(null);
   const [selection, setSelection] = useState(emptySelection);
@@ -244,7 +234,7 @@ export function Explorer({
       if (!current) return current;
       const absolute = renamePath(current.absolute, from, to);
       return absolute === current.absolute ? current
-        : { absolute, name: absolute.split('\\').at(-1), address: resourceAddress(absolute) };
+        : { ...current, absolute, name: absolute.split('\\').at(-1), address: resourceAddress(absolute) };
     });
   }, []);
   const closeMenu = useCallback((restore = false) => {
@@ -295,12 +285,6 @@ export function Explorer({
     setScoped(workspaceMode ? null : { root: workspace, history: firstPath(workspace) });
   }
 
-  useLayoutEffect(() => {
-    if (!workspaceMode || !root || root === scoped.root) return;
-    resetNavigation();
-    setScoped({ root, history: firstPath(root) });
-  }, [workspaceMode, root, scoped?.root, resetNavigation]);
-
   useLayoutEffect(() => { onPath(path); }, [onPath, path]);
 
   useEffect(() => {
@@ -331,7 +315,6 @@ export function Explorer({
   }, [root, term, revision, sessionId]);
 
   useEffect(() => () => pathRequest.current?.abort(), []);
-  useLayoutEffect(() => bindFileActions({ refresh, rename }), [bindFileActions, refresh, rename]);
   useLayoutEffect(() => { scroll.current.scrollTop = 0; }, [path, term]);
   useLayoutEffect(() => {
     const result = resultToReveal.current;
@@ -356,20 +339,33 @@ export function Explorer({
     changeHistory(value => move(value, delta));
   }
 
-  function openPreview(absolute, name) {
-    setPreview(current => current?.absolute === absolute ? current : {
-      name, absolute, address: resourceAddress(absolute),
+  const openPreview = useCallback((absolute, name, size, line) => {
+    const targetLine = Number.isSafeInteger(line) && line > 0 ? line : undefined;
+    setPreview(current => current?.absolute === absolute && !targetLine ? current : {
+      name, absolute, size, line: targetLine, address: resourceAddress(absolute),
     });
-  }
+  }, []);
 
-  function openSearchHit(match) {
-    if (!underPath(match.path, root)) return;
-    const folder = parentOf(match.path);
-    navigate(folder);
-    resultToReveal.current = { folder, name: match.name };
-    setSelection(singleSelection(match.name));
-    openPreview(match.path, match.name);
+  const revealFile = useCallback((absolute, name, size, line) => {
+    const folder = parentOf(absolute);
+    if (workspaceMode && !underPath(folder, root)) {
+      resetNavigation();
+      setScoped(null);
+      setLocalHistory(history => visit(history, folder));
+    } else {
+      navigate(folder);
+      if (folder === path && ready && !ready.entries.some(entry => entry.name === name)) refresh();
+    }
+    resultToReveal.current = { folder, name };
+    setSelection(singleSelection(name));
+    openPreview(absolute, name, size, line);
     setPreviewOpen(true);
+  }, [workspaceMode, root, path, ready, resetNavigation, navigate, refresh, openPreview]);
+
+  useLayoutEffect(() => bindFileActions({ refresh, rename, reveal: revealFile }), [bindFileActions, refresh, rename, revealFile]);
+
+  function openSearchHit(match) {
+    if (underPath(match.path, root)) revealFile(match.path, match.name);
   }
 
   function select(event, entry) {
@@ -378,7 +374,7 @@ export function Explorer({
     setSelection(current => selectNames(current, entry.name, entries, shiftKey, ctrlKey));
     setActionError('');
     setActionNotice('');
-    if (!shiftKey && !ctrlKey && entry.type === 'file') openPreview(joinPath(path, entry.name), entry.name);
+    if (!shiftKey && !ctrlKey && entry.type === 'file') openPreview(joinPath(path, entry.name), entry.name, entry.size);
   }
 
   async function openWithWindows(path) {
@@ -511,7 +507,7 @@ export function Explorer({
       if (target.type === 'directory') navigate(windowsPath(target.path));
       else {
         closeEditor();
-        openPreview(target.path, target.name);
+        openPreview(target.path, target.name, target.size);
       }
       scroll.current.focus();
     } catch (error) {
@@ -529,7 +525,9 @@ export function Explorer({
     if (!target || !shownPreview) return;
     try {
       if (root) await disks.locate(shownPreview.absolute, undefined, root);
-      if (getTarget() === target) target.actions.openResource(resourceAddress(shownPreview.absolute, target.sessionId));
+      if (getTarget() === target) openDocument(resourceAddress(shownPreview.absolute, target.sessionId), {
+        paneId: target.paneId, params: shownPreview.line ? { line: shownPreview.line } : undefined,
+      });
     } catch (error) {
       setActionError(error?.message || String(error));
     }
@@ -586,6 +584,7 @@ export function Explorer({
           tool('home', workspaceMode ? '返回工作区根目录' : '返回此电脑', () => navigate(root), path === root),
           tool('workspace', '跳转至工作区', () => navigate(workspace), !workspace || path === workspace || workspaceMode)),
         h('div', { className: 'dwe-nav' },
+          h('span', { className: 'dwe-v-divider', 'aria-hidden': true }),
           tool('copy', '复制', () => runAction('copy', selectedEntries), !modifySelected),
           tool('cut', '剪切', () => runAction('cut', selectedEntries), !modifySelected),
           tool('paste', '粘贴', () => runAction('paste'), !path || working),
@@ -651,14 +650,15 @@ export function Explorer({
                 !grid && h('span', { className: 'dwe-meta' }, entryType(entry)),
                 !grid && h('span', { className: 'dwe-meta' }, formatSize(entry.size))))))),
       h('footer', { className: 'dwe-status-bar' },
+        h('div', { className: 'dwe-nav', role: 'group', 'aria-label': '文件视图' },
+          tool('list', '列表', () => changeView('list'), false, !grid),
+          tool('grid', '大图标', () => changeView('grid'), false, grid)),
+        h('span', { className: 'dwe-v-divider', 'aria-hidden': true }),
         h('span', { className: 'dwe-status', role: 'status', title: actionNotice },
           term ? found?.matches ? found.matches.length + ' 个结果' + (found.truncated ? ' · 请缩小关键词' : '') : ' '
             : actionNotice || (selectedEntries.length > 1 ? '已选择 ' + selectedEntries.length + ' 项'
               : ready?.entries ? ready.entries.length + ' 个项目' + (ready.truncated ? ' · 列表已截断' : '') : ' ')),
-        h('div', { className: 'dwe-nav', role: 'group', 'aria-label': '视图与预览' },
-          tool('list', '列表', () => changeView('list'), false, !grid),
-          tool('grid', '大图标', () => changeView('grid'), false, grid),
-          tool('preview', '预览窗格', () => setPreviewOpen(open => !open), false, previewOpen)))),
+        tool('preview', '预览窗格', () => setPreviewOpen(open => !open), false, previewOpen))),
     previewOpen && h(PreviewDivider, { root: layout, ratio: splitRatio, setRatio: setSplitRatio }),
     previewOpen && h('section', { className: 'dwe-preview', 'aria-label': '文件预览' },
       h('header', { className: 'dwe-preview-bar' },

package/src/ui/favorites.js

@@ -1,6 +1,7 @@
 import { renamePath, underPath, windowsPath } from './navigation.js';
 
 const key = 'dsh-workspace-explorer.favorites';
+const dragType = 'application/x-dwe-favorite';
 const { createElement: h, useLayoutEffect, useRef, useSyncExternalStore } = react;
 const listeners = new Set();
 
@@ -66,8 +67,33 @@ export function renameFavorites(from, to) {
   update(unique(folders.map(path => renamePath(path, from, to))));
 }
 
+function moveFavorite(from, to, after) {
+  if (from === to || !folders.includes(from) || !folders.includes(to)) return;
+  const next = folders.filter(path => path !== from);
+  next.splice(next.indexOf(to) + Number(after), 0, from);
+  update(next);
+}
+
 export function Favorites({ anchor, close, folders, navigate, currentPath, removeIcon, workspaceMode, root }) {
   const panel = useRef(null);
+  const dragged = useRef(null);
+  const dropRow = useRef(null);
+
+  function clearDropRow() {
+    if (dropRow.current) delete dropRow.current.dataset.dweFavoriteDrop;
+    dropRow.current = null;
+  }
+
+  function resetDrag() {
+    dragged.current = null;
+    clearDropRow();
+  }
+
+  function isAfter(event) {
+    const bounds = event.currentTarget.getBoundingClientRect();
+    return event.clientY >= bounds.top + bounds.height / 2;
+  }
+
   useLayoutEffect(() => {
     const popup = panel.current;
     const button = anchor.current;
@@ -108,9 +134,35 @@ export function Favorites({ anchor, close, folders, navigate, currentPath, remov
   return h('section', { ref: panel, className: 'dwe-favorites', 'aria-label': '收藏夹' },
     h('header', null, h('strong', null, '收藏夹'),
       h('button', { type: 'button', className: 'dwe-clear-favorites', disabled: !folders.length, onClick: clearFavorites }, '清空收藏')),
-    folders.length ? h('ul', null, ...folders.map(path => {
+    folders.length ? h('ul', { onDragLeave: event => {
+      if (!event.currentTarget.contains(event.relatedTarget)) clearDropRow();
+    } }, ...folders.map(path => {
       const name = path.length === 3 ? path.slice(0, 2) : path.split('\\').at(-1);
-      return h('li', { key: path },
+      return h('li', {
+        key: path, draggable: true,
+        onDragStart: event => {
+          dragged.current = path;
+          event.dataTransfer.effectAllowed = 'move';
+          event.dataTransfer.setData(dragType, path);
+        },
+        onDragOver: event => {
+          if (!dragged.current || !event.dataTransfer.types.includes(dragType)) return;
+          if (dropRow.current !== event.currentTarget) clearDropRow();
+          if (dragged.current === path) return;
+          event.preventDefault();
+          event.dataTransfer.dropEffect = 'move';
+          dropRow.current = event.currentTarget;
+          dropRow.current.dataset.dweFavoriteDrop = isAfter(event) ? 'after' : 'before';
+        },
+        onDrop: event => {
+          const from = dragged.current;
+          if (!from || event.dataTransfer.getData(dragType) !== from) return;
+          event.preventDefault();
+          resetDrag();
+          moveFavorite(from, path, isAfter(event));
+        },
+        onDragEnd: resetDrag,
+      },
         h('button', {
           type: 'button', className: 'dwe-favorite-location', title: path, onClick: () => navigate(path),
           disabled: workspaceMode && !underPath(path, root),

package/src/ui/navigation.js

@@ -39,3 +39,12 @@ export function resourceAddress(path, sessionId) {
   const encoded = path.split('\\').map(segment => encodeURIComponent(segment).replace(/%3A/gi, ':')).join('/');
   return 'dsh-resource://file/' + (sessionId ? 'session/' + encodeURIComponent(sessionId) : 'absolute') + '/' + encoded;
 }
+
+export function sessionFilePath(address, sessionId) {
+  const match = /^dsh-resource:\/\/file\/session\/([^/?#]+)\/([^?#]+)(?:[?#].*)?$/.exec(address);
+  if (!match || !sessionId) return null;
+  try {
+    if (decodeURIComponent(match[1]) !== sessionId) return null;
+    return match[2].split('/').map(decodeURIComponent).join('/');
+  } catch { return null; }
+}

package/src/ui/preview.js

@@ -7,7 +7,7 @@ import { PreviewUnavailable } from './preview-unavailable.js';
 import { PdfPreview } from './pdf-preview.js';
 import { usePreviewZoom } from './preview-zoom.js';
 
-const { createElement: h, useEffect, useRef, useState } = react;
+const { createElement: h, useEffect, useLayoutEffect, useRef, useState } = react;
 const coverActions = {
   [PREVIEW_IDS.archive]: '解压预览',
   [PREVIEW_IDS.model]: '查看模型',
@@ -21,6 +21,14 @@ const coverActions = {
   [PREVIEW_IDS.dfu]: '查看固件',
 };
 
+export function formatSize(bytes) {
+  if (typeof bytes !== 'number') return '—';
+  if (bytes < 1024) return bytes + ' B';
+  if (bytes < 1024 ** 2) return (bytes / 1024).toFixed(1) + ' KB';
+  if (bytes < 1024 ** 3) return (bytes / 1024 ** 2).toFixed(1) + ' MB';
+  return (bytes / 1024 ** 3).toFixed(1) + ' GB';
+}
+
 export class PreviewBoundary extends react.Component {
   state = { failed: false };
 
@@ -35,6 +43,18 @@ export class PreviewBoundary extends react.Component {
 
 function PreviewCover({ file, root, videoType, label, archive, start }) {
   const [poster, setPoster] = useState(null);
+  const [resolvedSize, setResolvedSize] = useState(undefined);
+  const { absolute, name, size } = file;
+
+  useEffect(() => {
+    if (size !== undefined) return;
+    const controller = new AbortController();
+    void disks.locate(absolute, controller.signal, root).then(result => {
+      if (!controller.signal.aborted) setResolvedSize(result.size);
+    }, () => {});
+    return () => controller.abort();
+  }, [absolute, size, root]);
+
   useEffect(() => {
     if (!videoType) return;
     const controller = new AbortController();
@@ -50,16 +70,22 @@ function PreviewCover({ file, root, videoType, label, archive, start }) {
       h('rect', { x: 5, y: 3, width: 26, height: 30, rx: 5, fill: '#7462c4' }),
       h('path', { d: 'M18 5h3v4h-3v4h3v4h-3v4m-2 0h6v6h-6z', fill: 'none', stroke: '#fff', strokeWidth: 1.6, strokeLinejoin: 'round' }))
     : h(primitives.FileTypeIcon, { path: file.name, size: 36 });
-  return h('div', { className: 'dwe-preview-cover', 'data-poster': Boolean(poster) || undefined },
+  return h('div', {
+    className: 'dwe-preview-cover', 'data-video': Boolean(videoType) || undefined,
+    'data-poster': Boolean(poster) || undefined,
+  },
     poster && h('img', { src: poster, alt: '', draggable: false }),
-    h('div', { className: 'dwe-cover-action' },
-      !videoType && fileIcon,
-      h('button', {
-        type: 'button', className: videoType ? 'dwe-cover-play' : 'dwe-cover-open',
-        title: label, 'aria-label': label, onClick: start,
-      }, videoType ? h('svg', { width: 24, height: 24, viewBox: '0 0 24 24', 'aria-hidden': true },
-        h('path', { d: 'M9 5v14l11-7z', fill: 'currentColor' })) : label)),
-    h('div', { className: 'dwe-cover-file', title: file.name }, file.name));
+    h('div', { className: 'dwe-cover-content' },
+      h('div', { className: 'dwe-cover-action' },
+        !videoType && fileIcon,
+        h('button', {
+          type: 'button', className: videoType ? 'dwe-cover-play' : 'dwe-cover-open',
+          title: label, 'aria-label': label, onClick: start,
+        }, videoType ? h('svg', { width: 24, height: 24, viewBox: '0 0 24 24', 'aria-hidden': true },
+          h('path', { d: 'M9 5v14l11-7z', fill: 'currentColor' })) : label)),
+      h('div', { className: 'dwe-cover-details' },
+        h('div', { className: 'dwe-cover-file', title: name }, name),
+        h('div', { className: 'dwe-cover-size' }, formatSize(size ?? resolvedSize)))));
 }
 
 function ImagePreview({ url, name, onError }) {
@@ -87,6 +113,27 @@ function ImagePreview({ url, name, onError }) {
     }));
 }
 
+function TextPreview({ text, eof, file }) {
+  const content = useRef(null);
+  useLayoutEffect(() => {
+    if (!file.line || !text) return;
+    let offset = 0;
+    for (let line = 1; line < file.line; line++) {
+      const end = text.indexOf('\n', offset);
+      if (end < 0) return;
+      offset = end + 1;
+    }
+    if (offset === text.length) return;
+    const range = document.createRange();
+    range.setStart(content.current.firstChild, offset);
+    range.setEnd(content.current.firstChild, offset + 1);
+    const scroll = content.current.parentElement;
+    scroll.scrollTop += range.getBoundingClientRect().top - scroll.getBoundingClientRect().top - 12;
+  }, [file, text]);
+  return h('pre', { ref: content, className: 'dwe-text' },
+    text || '（空文件）', eof ? '' : '\n\n… 仅显示首页，可在原生预览中继续查看');
+}
+
 export function Preview({ file, root }) {
   const [result, setResult] = useState({ kind: 'loading' });
   const [started, setStarted] = useState(false);
@@ -155,8 +202,7 @@ export function Preview({ file, root }) {
         onError: () => setResult({ kind: 'unavailable' }),
       });
     case 'text':
-      return h('pre', { className: 'dwe-text' },
-        result.text || '（空文件）', result.eof ? '' : '\n\n… 仅显示首页，可在原生预览中继续查看');
+      return h(TextPreview, { text: result.text, eof: result.eof, file });
     case 'unavailable':
       return h(PreviewUnavailable);
     default:

package/src/ui/styles.js

@@ -1,4 +1,36 @@
 export const explorerCss = `
+[data-dwe-sidebar-handoff] {
+  grid-template-columns: var(--dwe-handoff-columns) !important;
+  transition: none !important;
+}
+[data-dwe-sidebar-track-instant],
+[data-sidebar-right-panel] :is([data-dockkit-host='dock'], [data-dockkit-empty], [data-dockkit-divider]):not([data-dwe-sidebar-toggle-motion]),
+[data-dwe-sidebar-handoff] [data-sidebar-right-panel] :is([data-dockkit-host='dock'], [data-dockkit-empty], [data-dockkit-divider]) {
+  transition: none !important;
+}
+.dwe-conversation-drop {
+  position: fixed; inset: 0; z-index: 2147483647;
+  display: grid; box-sizing: border-box; padding: 0 6px 6px 3px;
+  --dwe-drop-blue: #4176E6;
+  pointer-events: none; user-select: none;
+}
+.dwe-conversation-drop-area {
+  position: relative; display: grid; place-items: center; padding: 24px;
+  border-radius: 10px; overflow: hidden;
+  background: color-mix(in srgb, var(--dsw-alias-bg-base, Canvas) 38%, transparent);
+  backdrop-filter: blur(7.5px); color: var(--dwe-drop-blue);
+  text-align: center; font-size: 24px;
+}
+.dwe-conversation-drop-area::before {
+  content: ''; position: absolute; inset: 0; border: 4px solid var(--dwe-drop-blue); border-radius: inherit;
+}
+.dwe-conversation-drop[data-dwe-drop-active] .dwe-conversation-drop-area::before { border-width: 8px; }
+.dwe-conversation-drag-icon {
+  position: fixed; top: 0; left: 0; width: 40px; height: 40px;
+  display: grid; place-items: center; border-radius: 8px;
+  background: var(--dsw-alias-bg-base, Canvas); box-shadow: 0 2px 8px #0004;
+  transform: translate3d(clamp(0px, var(--dwe-drag-x), 100vw - 44px), clamp(0px, var(--dwe-drag-y), 100vh - 44px), 0);
+}
 .dwe-host { height: 100%; min-height: 0; min-width: 0; }
 [data-dockkit-tab]:has([data-dwe-tab-title]) {
   flex-shrink: 0; min-inline-size: calc(5em + 59px); max-inline-size: max(170px, calc(5em + 59px));
@@ -12,6 +44,7 @@ export const explorerCss = `
 [data-dwe-tab-title] > span { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .dwe {
   --dwe-line: var(--dsw-alias-border-l3, color-mix(in srgb, currentColor 14%, transparent));
+  --dwe-rule-inset: 8px;
   --dwe-tint: color-mix(in srgb, currentColor 5%, transparent);
   --dwe-hover: color-mix(in srgb, currentColor 8%, transparent);
   --dwe-blue: #458bf5;
@@ -48,11 +81,17 @@ export const explorerCss = `
 .dwe-divider:focus-visible { outline: 2px solid var(--dwe-blue); outline-offset: -2px; }
 .dwe-toolbar, .dwe-preview-bar {
   display: flex; flex: none; align-items: center; gap: 6px;
-  padding: 3px 8px; min-width: 0; border-bottom: 1px solid var(--dwe-line);
+  padding: 3px 8px; min-width: 0; border-bottom: 1px solid transparent;
+}
+.dwe-toolbar, .dwe-head, .dwe-status-bar, .dwe-preview-bar {
+  background-image: linear-gradient(#F5F5F5, #F5F5F5);
+  background-repeat: no-repeat; background-origin: border-box;
+  background-size: calc(100% - 2 * var(--dwe-rule-inset)) 1px; background-position: center bottom;
 }
 .dwe-address-bar { display: flex; min-width: 0; flex: none; align-items: center; gap: 3px; padding: 5px 8px 0; }
 .dwe-toolbar { justify-content: space-between; gap: 4px; overflow-x: auto; scrollbar-width: none; }
 .dwe-nav { display: flex; align-items: center; gap: 2px; flex: none; }
+.dwe-v-divider { flex: 0 0 1px; height: 15px; margin-inline: 3px; background: var(--dwe-line); }
 .dwe button {
   font: inherit; color: inherit; border: 0; background: transparent; cursor: default;
 }
@@ -66,8 +105,9 @@ export const explorerCss = `
   background: color-mix(in srgb, var(--dwe-blue) 20%, transparent);
 }
 .dwe-tool[data-dwe-tool="star"][aria-pressed="true"] svg { color: #a36a00; fill: #ffca58; }
-.dwe-tool[data-dwe-tool="favorites"][aria-expanded="true"] {
-  background: color-mix(in srgb, var(--dwe-blue) 20%, transparent);
+.dwe-tool:is(.dwe-scope-tool, .dwe-favorites-tool, [data-dwe-tool="preview"], [data-dwe-tool="list"], [data-dwe-tool="grid"]) {
+  &:is([aria-pressed="true"], [aria-expanded="true"]) { background: var(--dwe-hover); }
+  &:hover:not(:disabled) { background: color-mix(in srgb, var(--dwe-blue) 20%, transparent); }
 }
 .dwe-favorites {
   position: absolute; z-index: 4; display: flex; flex-direction: column; box-sizing: border-box;
@@ -80,7 +120,12 @@ export const explorerCss = `
   padding-inline-start: 6px; min-height: 25px;
 }
 .dwe-favorites ul { list-style: none; margin: 0; padding: 0; overflow: auto; }
-.dwe-favorites li { display: flex; align-items: center; gap: 4px; }
+.dwe-favorites li { position: relative; display: flex; align-items: center; gap: 4px; }
+.dwe-favorites li[data-dwe-favorite-drop]::after {
+  content: ''; position: absolute; inset-inline: 4px; height: 2px; background: var(--dwe-blue); pointer-events: none;
+}
+.dwe-favorites li[data-dwe-favorite-drop='before']::after { top: 0; }
+.dwe-favorites li[data-dwe-favorite-drop='after']::after { bottom: 0; }
 .dwe-favorite-location {
   display: flex; flex: 1; min-width: 0; align-items: center; gap: 7px; text-align: start;
   min-height: 28px; padding: 2px 4px; border-radius: 5px;
@@ -132,7 +177,7 @@ export const explorerCss = `
 .dwe-columns > span { padding-inline: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .dwe-head {
   position: sticky; top: 0; z-index: 1; padding: 5px 6px; font-size: 12px;
-  background: var(--dsw-alias-bg-base, Canvas); border-bottom: 1px solid var(--dwe-line);
+  background-color: var(--dsw-alias-bg-base, Canvas); border-bottom: 1px solid transparent;
 }
 .dwe-head span + span { border-inline-start: 1px solid var(--dwe-line); }
 .dwe-columns > span:last-child { text-align: end; }
@@ -146,7 +191,7 @@ export const explorerCss = `
 .dwe-tile .dwe-name { flex-direction: column; gap: 5px; }
 .dwe-thumbnail {
   position: relative; display: grid; place-items: center; inline-size: 100%; max-inline-size: 110px;
-  block-size: 60px; pointer-events: none;
+  grid-template: minmax(0, 1fr) / minmax(0, 1fr); block-size: 60px; pointer-events: none;
 }
 .dwe-thumbnail img {
   display: block; max-inline-size: 100%; max-block-size: 100%; object-fit: contain; border-radius: 3px;
@@ -171,13 +216,14 @@ export const explorerCss = `
 .dwe-meta, .dwe-status { opacity: .72; font-size: 12px; }
 .dwe-status { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .dwe-status-bar {
-  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 4px;
-  padding: 2px 6px 2px 12px; border-top: 1px solid var(--dwe-line);
+  flex: none; display: flex; align-items: center; gap: 4px;
+  padding: 2px 8px; border-top: 1px solid transparent; background-position: center top;
 }
+.dwe-status-bar > .dwe-tool { margin-inline-start: auto; }
 .dwe-preview {
   min-height: 0; display: flex; flex-direction: column;
 }
-.dwe-preview-bar { background: var(--dsw-alias-bg-base, Canvas); }
+.dwe-preview-bar { background-color: var(--dsw-alias-bg-base, Canvas); }
 .dwe-preview-label { flex: none; margin-inline: 4px; line-height: 28px; }
 .dwe-preview-name {
   min-width: 0; height: 28px; box-sizing: border-box; padding-inline: 7px 3px;
@@ -188,13 +234,17 @@ export const explorerCss = `
 .dwe-preview-body { flex: 1 1 auto; min-height: 0; overflow: auto; }
 .dwe-preview-cover {
   position: relative; display: grid; place-items: center; isolation: isolate;
-  height: 100%; min-height: 100px; overflow: hidden; background: var(--dwe-tint);
+  height: 100%; min-height: 112px; box-sizing: border-box; padding: 6px 12px;
+  overflow: hidden; background: var(--dwe-tint);
 }
+.dwe-preview-cover[data-video] { min-height: 128px; }
 .dwe-preview-cover[data-poster] { background: #15171a; }
 .dwe-preview-cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: -1; }
+.dwe-cover-content { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 8px; width: 100%; }
 .dwe-cover-action { display: flex; align-items: center; gap: 10px; }
 .dwe .dwe-cover-play {
-  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
+  display: grid; place-items: center; width: 52px; height: 52px; padding: 0; box-sizing: border-box;
+  border-radius: 50%; corner-shape: round;
   background: #243953; color: #fff; box-shadow: 0 2px 8px #0003; cursor: pointer;
 }
 .dwe .dwe-cover-play:hover:not(:disabled) { background: #34577f; }
@@ -202,11 +252,17 @@ export const explorerCss = `
   padding: 7px 12px; border: 1px solid var(--dwe-line); border-radius: 6px;
   background: var(--dsw-alias-bg-base, Canvas); white-space: nowrap; cursor: pointer;
 }
-.dwe-cover-file {
-  position: absolute; inset-block-end: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-  max-width: calc(100% - 24px); padding: 3px 8px; border-radius: 5px;
+.dwe-cover-details {
+  display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 3px;
+  max-width: 100%; min-width: 0; box-sizing: border-box; padding: 2px 8px; border-radius: 5px;
+}
+.dwe-cover-file { max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dwe-cover-size { font-size: 12px; opacity: .72; }
+.dwe-preview-cover[data-video] .dwe-cover-details {
+  position: absolute; inset: 0 0 auto; display: flex; align-items: center; gap: 6px;
+  padding: 8px; border-radius: 0; background: #0009; color: #fff;
 }
-.dwe-preview-cover[data-poster] .dwe-cover-file { background: #15171abb; color: #fff; }
+.dwe-preview-cover[data-video] .dwe-cover-size { flex: none; white-space: nowrap; }
 .dwe-pdf-scroll {
   height: 100%; overflow: auto; scrollbar-gutter: stable both-edges; background: var(--dwe-tint);
 }
@@ -274,6 +330,9 @@ export const explorerCss = `
 .dwe-dialog-actions button[type="submit"] { background: color-mix(in srgb, var(--dwe-blue) 23%, transparent); }
 .dwe-dialog-actions button[data-dwe-action="delete"] { background: #ad303d; color: #fff; }
 .dwe-dialog-actions button[data-dwe-action="delete"]:hover:not(:disabled) { background: #942634; }
+@container (max-width: 440px) {
+  .dwe-toolbar .dwe-tool:not(.dwe-scope-tool) { width: 26px; height: 26px; flex-basis: 26px; }
+}
 @container (max-width: 380px) {
   .dwe-columns { grid-template-columns: minmax(0, 1fr) 62px; }
   .dwe-columns > span:nth-child(2) { display: none; }