dsh-workspace-explorer 1.1.0 → 1.1.2

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; }

package/src/ui/thumbnail.js

@@ -1,106 +1,106 @@
-import { thumbnailType } from '../thumbnail-types.js';
-import { disks } from './workspace.js';
-
-const { createElement: h, useEffect, useRef, useState } = react;
-const pending = new Set();
-let running = 0;
-
-function startNext() {
-  while (running < 3 && pending.size) {
-    const next = pending.values().next().value;
-    pending.delete(next);
-    running++;
-    void next().finally(() => { running--; startNext(); });
-  }
-}
-
-function waitForFrame(media, event, signal) {
-  return new Promise((resolve, reject) => {
-    const handlers = new AbortController();
-    function settle(error) {
-      handlers.abort();
-      signal.removeEventListener('abort', cancel);
-      if (error) reject(error);
-      else resolve();
-    }
-    function cancel() { settle(signal.reason); }
-    if (signal.aborted) { cancel(); return; }
-    const options = { once: true, signal: handlers.signal };
-    signal.addEventListener('abort', cancel, { once: true });
-    media.addEventListener(event, () => settle(), options);
-    media.addEventListener('error', () => settle(new Error('无法解码缩略图')), options);
-  });
-}
-
-export async function makeThumbnail(path, type, signal, root, poster = false) {
-  const { url } = await disks.thumbnail(path, signal, root);
-  signal.throwIfAborted();
-  const video = type.startsWith('video/');
-  const media = document.createElement(video ? 'video' : 'img');
-  if (video) { media.preload = 'auto'; media.muted = true; }
-  try {
-    const firstFrame = waitForFrame(media, video ? 'loadeddata' : 'load', signal);
-    media.src = url;
-    await firstFrame;
-    if (video && !poster && Number.isFinite(media.duration) && media.duration > 0.2) {
-      const seeked = waitForFrame(media, 'seeked', signal);
-      media.currentTime = Math.min(0.7, media.duration * 0.12);
-      await seeked;
-    }
-    const width = video ? media.videoWidth : media.naturalWidth;
-    const height = video ? media.videoHeight : media.naturalHeight;
-    if (!width || !height) throw new Error('缩略图为空');
-    const [maxWidth, maxHeight] = poster ? [640, 360] : [192, 136];
-    const scale = Math.min(maxWidth / width, maxHeight / height, poster ? 1 : Infinity);
-    const canvas = document.createElement('canvas');
-    canvas.width = Math.max(1, Math.round(width * scale));
-    canvas.height = Math.max(1, Math.round(height * scale));
-    canvas.getContext('2d').drawImage(media, 0, 0, canvas.width, canvas.height);
-    return canvas.toDataURL('image/webp', 0.85);
-  } finally {
-    media.removeAttribute('src');
-    if (video) media.load();
-  }
-}
-
-export function Thumbnail({ path, active, fallback, root }) {
-  const slot = useRef(null);
-  const [result, setResult] = useState(null);
-  const type = thumbnailType(path);
-  const image = result?.path === path && result?.root === root ? result.image : null;
-  useEffect(() => {
-    const element = slot.current;
-    if (!element || !active || !type || image) return;
-    let job;
-    let failed = false;
-    function cancel() {
-      if (!job) return;
-      pending.delete(job.run);
-      job.controller.abort();
-      job = undefined;
-    }
-    const observer = new IntersectionObserver(([entry]) => {
-      if (!entry.isIntersecting) { cancel(); return; }
-      if (job || failed) return;
-      const controller = new AbortController();
-      const run = async () => {
-        try {
-          const signal = AbortSignal.any([controller.signal, AbortSignal.timeout(12000)]);
-          const image = await makeThumbnail(path, type, signal, root);
-          if (!signal.aborted) setResult({ path, root, image });
-        } catch {
-          if (!controller.signal.aborted) failed = true;
-        }
-      };
-      job = { controller, run };
-      pending.add(run);
-      startNext();
-    }, { root: element.closest('.dwe-list'), rootMargin: '72px 0px' });
-    observer.observe(element);
-    return () => { observer.disconnect(); cancel(); };
-  }, [active, path, type, image, root]);
-
-  return h('span', { ref: slot, className: 'dwe-thumbnail', 'aria-hidden': true },
-    image ? h('img', { src: image, alt: '', draggable: false }) : fallback,
-    image && type?.startsWith('video/') && h('span', { className: 'dwe-video-mark' }, '▶'));
+import { thumbnailType } from '../thumbnail-types.js';
+import { disks } from './workspace.js';
+
+const { createElement: h, useEffect, useRef, useState } = react;
+const pending = new Set();
+let running = 0;
+
+function startNext() {
+  while (running < 3 && pending.size) {
+    const next = pending.values().next().value;
+    pending.delete(next);
+    running++;
+    void next().finally(() => { running--; startNext(); });
+  }
+}
+
+function waitForFrame(media, event, signal) {
+  return new Promise((resolve, reject) => {
+    const handlers = new AbortController();
+    function settle(error) {
+      handlers.abort();
+      signal.removeEventListener('abort', cancel);
+      if (error) reject(error);
+      else resolve();
+    }
+    function cancel() { settle(signal.reason); }
+    if (signal.aborted) { cancel(); return; }
+    const options = { once: true, signal: handlers.signal };
+    signal.addEventListener('abort', cancel, { once: true });
+    media.addEventListener(event, () => settle(), options);
+    media.addEventListener('error', () => settle(new Error('无法解码缩略图')), options);
+  });
+}
+
+export async function makeThumbnail(path, type, signal, root, poster = false) {
+  const { url } = await disks.thumbnail(path, signal, root);
+  signal.throwIfAborted();
+  const video = type.startsWith('video/');
+  const media = document.createElement(video ? 'video' : 'img');
+  if (video) { media.preload = 'auto'; media.muted = true; }
+  try {
+    const firstFrame = waitForFrame(media, video ? 'loadeddata' : 'load', signal);
+    media.src = url;
+    await firstFrame;
+    if (video && !poster && Number.isFinite(media.duration) && media.duration > 0.2) {
+      const seeked = waitForFrame(media, 'seeked', signal);
+      media.currentTime = Math.min(0.7, media.duration * 0.12);
+      await seeked;
+    }
+    const width = video ? media.videoWidth : media.naturalWidth;
+    const height = video ? media.videoHeight : media.naturalHeight;
+    if (!width || !height) throw new Error('缩略图为空');
+    const [maxWidth, maxHeight] = poster ? [640, 360] : [192, 136];
+    const scale = Math.min(maxWidth / width, maxHeight / height, poster ? 1 : Infinity);
+    const canvas = document.createElement('canvas');
+    canvas.width = Math.max(1, Math.round(width * scale));
+    canvas.height = Math.max(1, Math.round(height * scale));
+    canvas.getContext('2d').drawImage(media, 0, 0, canvas.width, canvas.height);
+    return canvas.toDataURL('image/webp', 0.85);
+  } finally {
+    media.removeAttribute('src');
+    if (video) media.load();
+  }
+}
+
+export function Thumbnail({ path, active, fallback, root }) {
+  const slot = useRef(null);
+  const [result, setResult] = useState(null);
+  const type = thumbnailType(path);
+  const image = result?.path === path && result?.root === root ? result.image : null;
+  useEffect(() => {
+    const element = slot.current;
+    if (!element || !active || !type || image) return;
+    let job;
+    let failed = false;
+    function cancel() {
+      if (!job) return;
+      pending.delete(job.run);
+      job.controller.abort();
+      job = undefined;
+    }
+    const observer = new IntersectionObserver(([entry]) => {
+      if (!entry.isIntersecting) { cancel(); return; }
+      if (job || failed) return;
+      const controller = new AbortController();
+      const run = async () => {
+        try {
+          const signal = AbortSignal.any([controller.signal, AbortSignal.timeout(12000)]);
+          const image = await makeThumbnail(path, type, signal, root);
+          if (!signal.aborted) setResult({ path, root, image });
+        } catch {
+          if (!controller.signal.aborted) failed = true;
+        }
+      };
+      job = { controller, run };
+      pending.add(run);
+      startNext();
+    }, { root: element.closest('.dwe-list'), rootMargin: '72px 0px' });
+    observer.observe(element);
+    return () => { observer.disconnect(); cancel(); };
+  }, [active, path, type, image, root]);
+
+  return h('span', { ref: slot, className: 'dwe-thumbnail', 'aria-hidden': true },
+    image ? h('img', { src: image, alt: '', draggable: false }) : fallback,
+    image && type?.startsWith('video/') && h('span', { className: 'dwe-video-mark' }, '▶'));
 }

package/src/vendor/ui/extra-views.js

@@ -909,4 +909,4 @@ function paintKicad(canvas, doc, view) {
     if ((primitive.size || 1) * fit < 7) continue;
     ctx.fillText(String(primitive.text), mapX(primitive.x) + 2, mapY(primitive.y) - 2);
   }
-}
+}