fish-dock-plugin-filemgr 0.0.0-stage → 1.0.4

package/dist/filemgr/plugins/filemgr/filemgr.css

@@ -0,0 +1,271 @@
+/* 文件管理页：外层三栏（暂存 | 分隔条 | 预览），内层复用 page.css 的文件夹/预览双栏。
+   两条硬规矩沿用 page.css：高度用固定 px 不写 vh；main 总高钉死，避免上报高度抖动。 */
+body[data-layout=double]{height:820px}
+body.fm-layout, main.fm{height:820px;display:flex;flex-direction:column;padding:0}
+
+.fm-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 8px 8px;flex:none;flex-wrap:wrap}
+.fm-head .identity{display:flex;align-items:baseline;gap:10px;min-width:0}
+.fm-head #state{color:var(--dock-muted);font-size:12px}
+.fm-head #state:empty{display:none}
+/* 标题右侧的文件元信息：名 · 类型 · 大小 · 修改时间 */
+.fm-head .fm-meta{color:var(--dock-muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:52vw}
+.fm-head .fm-meta:empty{display:none}
+
+/* 错误条跨全宽 */
+main.fm > #error{margin:0 8px 8px;flex:none}
+
+/* 外层三列：暂存栏 | 分隔条 | 预览区。暂存栏宽度由 --stash-w 控制。 */
+.fm-body{
+  flex:1 1 auto;min-height:0;
+  display:grid;
+  grid-template-columns:min(var(--stash-w,300px),50%) 8px minmax(0,1fr);
+  gap:5px;align-items:stretch;
+  padding:0 8px 8px;
+}
+
+/* 外层分隔条：整条 8px 命中，中间画 2px 竖线 */
+#fmsplit{position:relative;cursor:col-resize;touch-action:none;align-self:stretch;border-radius:6px}
+#fmsplit::before{content:'';position:absolute;top:8px;bottom:8px;left:50%;width:2px;margin-left:-1px;border-radius:2px;background:var(--dock-line);transition:background .12s}
+#fmsplit:hover::before,#fmsplit:focus-visible::before,#fmsplit[data-dragging=true]::before{background:var(--dock-accent)}
+#fmsplit:focus-visible{outline:none}
+#fmsplit[data-dragging=true]{background:var(--dock-control)}
+body[data-resizing=true]{user-select:none;cursor:col-resize}
+
+/* ---- 左：暂存栏 ---- */
+#stash-col{
+  margin:0;padding:12px;min-width:0;min-height:0;overflow:hidden;
+  display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:8px;
+  border:1px solid var(--dock-line);border-radius:18px;background:var(--dock-card);
+}
+.fm-col-title{margin:0;font-size:13.5px;font-weight:600}
+#stash-col .stash-toolbar{gap:6px;margin:0}
+#stash-col .stash-toolbar button{min-height:26px;padding:2px 10px;font-size:12px}
+/* 分组操作条：现在是暂存区内部的一行，不再单独占 grid 行 */
+#stash-col #groupbar{padding:0;margin:0;background:transparent;border:0;min-height:0}
+#stash-col #groupbar .group-ops{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0}
+#stash-col #groupbar button{min-height:24px;padding:1px 9px;font-size:11.5px}
+/* 内联新建分组输入框（不依赖 window.prompt，WebView2 里 prompt 可能被禁用） */
+#stash-col #groupbar .group-new-input{min-height:24px;padding:1px 8px;font-size:11.5px;min-width:110px;
+  background:var(--dock-input,#12161d);color:inherit;border:1px solid var(--dock-accent,#3b82f6);border-radius:6px;outline:none}
+
+/* 可折叠分组：每个分组是一个 <details>，组头是标签样式（参考 cost-meter 的「今日」折叠） */
+#list{padding:2px 6px}
+.stash-group{margin:4px 0;border-radius:10px}
+.stash-group>.stash-tag{
+  display:flex;align-items:center;gap:6px;list-style:none;cursor:pointer;
+  padding:5px 10px;border-radius:999px;border:1px solid var(--dock-line);
+  background:var(--dock-bg);color:var(--dock-muted);font-size:12px;font-weight:600;
+  user-select:none;
+}
+.stash-group>.stash-tag::-webkit-details-marker{display:none}
+.stash-group>.stash-tag::before{content:'›';flex:none;width:1em;text-align:center;opacity:.75;transition:transform .12s}
+.stash-group[open]>.stash-tag::before{content:'⌄'}
+.stash-group>.stash-tag:hover{filter:brightness(1.15)}
+.stash-tag-dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--dock-accent)}
+.stash-tag-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.stash-tag-count{opacity:.65;font-weight:400}
+.stash-tag-del{margin-left:auto;flex:none;opacity:.55;padding:0 4px;font-size:13px;line-height:1;cursor:pointer}
+/* 当前正在筛选的标签（state.view 指向的组）高亮 */
+.stash-group>.stash-tag.active{color:#1a1035;background:var(--dock-accent);border-color:var(--dock-accent)}
+.stash-group>.stash-tag.active>.stash-tag-dot{background:#1a1035}
+.stash-group>.stash-tag.active>.stash-tag-count{opacity:.8}
+.stash-group>.stash-tag.active>.stash-tag-del{color:#1a1035;opacity:.75}
+.stash-group>.stash-tag.active>.stash-tag-del:hover{color:#7a1010}
+/* 右侧文件列表：已在暂存/分组里的文件 */
+.filelist .row.stashed .nm{color:var(--dock-accent)}
+.stash-badge{flex:none;font-size:10px;line-height:1;padding:2px 6px;border-radius:999px;
+  background:color-mix(in srgb,var(--dock-accent) 22%,transparent);color:var(--dock-accent);
+  border:1px solid color-mix(in srgb,var(--dock-accent) 45%,transparent);white-space:nowrap;max-width:9em;overflow:hidden;text-overflow:ellipsis}
+.stash-tag-del:hover{opacity:1;color:#ff5f57}
+/* 标签内「只看本组 / 看全部」按钮：文字标签，带边框，保证一眼能读懂 */
+.stash-tag-filter{flex:none;padding:1px 8px;font-size:11px;line-height:1.5;cursor:pointer;border-radius:999px;
+  border:1px solid color-mix(in srgb,var(--dock-line) 90%,transparent);color:var(--dock-muted);background:transparent}
+.stash-tag-filter:hover{color:var(--dock-text);border-color:var(--dock-accent)}
+.stash-tag-filter.on{color:#1a1035;background:var(--dock-accent);border-color:var(--dock-accent);font-weight:700}
+/* 标签内「全选 / 取消」按钮：与「只看」同款胶囊，全选态高亮，多组各自独立 */
+.stash-tag-select{flex:none;padding:1px 8px;font-size:11px;line-height:1.5;cursor:pointer;border-radius:999px;
+  border:1px solid color-mix(in srgb,var(--dock-line) 90%,transparent);color:var(--dock-muted);background:transparent}
+.stash-tag-select:hover{color:var(--dock-text);border-color:var(--dock-accent)}
+.stash-tag-select.all{color:#1a1035;background:var(--dock-accent);border-color:var(--dock-accent);font-weight:700}
+.stash-group>.stash-tag.active>.stash-tag-select{color:#1a1035;border-color:color-mix(in srgb,#1a1035 45%,transparent);background:transparent}
+.stash-group>.stash-tag.active>.stash-tag-select.all{background:#1a1035;color:var(--dock-accent);border-color:#1a1035}
+.stash-group-empty{margin:6px 8px 10px;color:var(--dock-muted);font-size:11.5px}
+#stash-col #stash{padding:8px;margin:0;overflow:hidden;min-height:0;border:1px solid var(--dock-line);border-radius:12px;background:var(--dock-bg);display:flex;flex-direction:column;gap:6px;position:relative}
+#stash-col #stash>#list{flex:1 1 auto;min-height:0;overflow:auto;padding:0}
+#stash-col #list{min-height:120px}
+#stash-col #foot{margin:0;font-size:11.5px}
+#stash-col #foot:empty{display:none}
+
+/* ---- 右：预览区（内含 page.css 的 .workspace 双栏） ---- */
+#preview-col{
+  min-width:0;min-height:0;display:flex;flex-direction:column;gap:8px;
+  padding:12px;border:1px solid var(--dock-line);border-radius:18px;background:var(--dock-card);
+  overflow:hidden;
+}
+#preview-col .preview-toolbar{gap:8px;margin:0;flex:none;position:relative}
+#preview-col #jump{margin:0;flex:none}
+/* 内层 workspace 填满余下高度；page.css 已定义三列（side|split|stage）。 */
+#preview-col .workspace{flex:1 1 auto;min-height:0;align-items:stretch}
+
+/* 内层 stage / side 在合并页里要撑满，不再固定 820 */
+#preview-col #stage{padding:10px 12px 14px}
+#preview-col #view{overflow:auto}
+
+/* 窄屏：暂存栏收窄 */
+@media(max-width:900px){
+  .fm-body{grid-template-columns:min(var(--stash-w,300px),46%) 8px minmax(0,1fr);gap:4px}
+  #stash-col{padding:8px}
+  #preview-col{padding:8px}
+}
+@media(max-width:640px){
+  .fm-body{grid-template-columns:min(var(--stash-w,300px),40%) 8px minmax(0,1fr);gap:3px}
+}
+
+/* ---- 互关联①:文件列表项(左栏目录树/单栏目录)的「＋暂存」按钮 ---- */
+/* 行内既有 sz/dt，再加一列放按钮；按钮默认隐藏，悬停行时浮现，避免视觉噪音。 */
+/* 列顺序：add(20) ni(26图标) nm(主) st(类型) sz(大小) dt(时间)。
+   六列全部固定宽度（nm 除外），保证每一行对齐；badge 不再作为 grid item，
+   而是塞进 .nm 内部，否则"已暂存"行会多占一列把 size/time 顶偏。 */
+.filelist .row{grid-template-columns:20px 26px minmax(0,1fr) 58px 62px 96px}
+
+/* ---- 文件夹列表：工具条 + 表头（列宽与 .row 的 6 列严格对齐）---- */
+/* #browse 原来是 3 行 grid（crumbs|list|foot），这里多插了 tools 与 head 两个子元素，
+   必须把行模板同步扩到 5 行，否则 list/foot 会被挤进自动行导致整个左栏塌陷。 */
+#browse{grid-template-rows:auto auto auto minmax(0,1fr) auto}
+.browse-tools{display:flex;justify-content:flex-end;gap:6px;margin:0;flex:none}
+.browse-tools .tiny{font:600 11px/1 inherit;font-family:inherit;padding:2px 9px;border-radius:999px;
+  border:1px solid var(--dock-line);background:transparent;color:var(--dock-muted);cursor:pointer;opacity:.75}
+.browse-tools .tiny:hover{opacity:1;color:var(--dock-fg)}
+.browse-tools .tiny.on{background:color-mix(in srgb,var(--dock-accent) 16%,transparent);
+  border-color:var(--dock-accent);color:var(--dock-fg);opacity:1}
+.browse-head{display:grid;grid-template-columns:20px 26px minmax(0,1fr) 58px 62px 96px;gap:0 6px;
+  align-items:center;padding:3px 8px 2px;margin:0 0 1px;flex:none;font-size:11px;color:var(--dock-muted);
+  border-bottom:1px solid var(--dock-line)}
+.browse-head[hidden]{display:none}
+.browse-head button{background:none;border:0;padding:0;font:inherit;color:inherit;text-align:left;
+  cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.browse-head button:hover{color:var(--dock-fg)}
+.browse-head button.on{color:var(--dock-fg);font-weight:600}
+.browse-head button.on[data-dir=asc]::after{content:' ▲';font-size:9px;opacity:.8}
+.browse-head button.on[data-dir=desc]::after{content:' ▼';font-size:9px;opacity:.8}
+.browse-head button:nth-child(3){text-align:left}
+.browse-head button:nth-child(6){text-align:right}
+
+.filelist .row .nm{display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden}
+.filelist .row .nm .nmt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.filelist .row .nm .stash-badge{flex:none}
+.filelist .row .st{color:var(--dock-muted);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.filelist .row .sz{text-align:right}
+.filelist .row .dt{max-width:9.5em;overflow:hidden;text-overflow:ellipsis}
+.row .add{
+  display:flex;align-items:center;justify-content:center;
+  width:20px;height:20px;padding:0;border:0;border-radius:4px;
+  font-size:14px;line-height:1;color:var(--dock-muted);cursor:pointer;
+  background:transparent;transition:color .12s,background .12s;
+  opacity:.55;
+}
+/* 图标列：目录 📁 / 文件 📄。空着会让 "+" 和文件名之间出现一大块空白。 */
+.filelist .row .ni{display:flex;align-items:center;justify-content:center;width:26px;height:26px;font-size:12px;line-height:1}
+.filelist .row .ni::before{content:'📄'}
+.filelist .row.dir .ni::before{content:'📁'}
+.filelist .row:hover .add,.filelist .row:focus-within .add{opacity:1}
+.row .add:hover,.row .add:focus-visible{color:var(--dock-accent);outline:none}
+
+/* ---- 互关联②:暂存列表项的「预览」按钮 ---- */
+.stash-preview-btn{
+  flex:none;font:600 11px/1 inherit;font-family:inherit;padding:3px 9px;border:1px solid var(--dock-line);
+  border-radius:999px;color:var(--dock-muted);cursor:pointer;white-space:nowrap;
+  opacity:0;transition:opacity .12s,background .12s,color .12s;
+}
+#list .row:hover .stash-preview-btn,#list .row:focus-within .stash-preview-btn{opacity:1}
+#list .row.selected .stash-preview-btn{color:var(--dock-accent);border-color:color-mix(in srgb,var(--dock-accent) 55%,transparent);opacity:1}
+.stash-preview-btn:hover,.stash-preview-btn:focus-visible{background:var(--dock-accent);border-color:var(--dock-accent);color:#1a1035;outline:none}
+
+/* ---- 常用文件夹 ---- */
+#fav-open{font-size:14px;min-width:26px;padding:0}
+.fav-pop{
+  position:absolute;top:100%;right:0;z-index:100;
+  min-width:260px;max-width:360px;max-height:360px;overflow-y:auto;
+  background:var(--dock-card);border:1px solid var(--dock-line);
+  border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.35);
+  padding:6px;margin-top:4px;
+}
+.fav-section:not(:last-child){border-bottom:1px solid var(--dock-line);margin-bottom:4px;padding-bottom:4px}
+.fav-label{font-size:10.5px;color:var(--dock-muted);text-transform:uppercase;letter-spacing:.5px;padding:4px 8px 2px}
+.fav-item{
+  display:flex;align-items:center;gap:6px;
+  width:100%;min-height:30px;padding:4px 8px;
+  border:0;border-radius:8px;background:transparent;
+  font-size:12px;text-align:left;cursor:pointer;
+  color:var(--dock-text);overflow:hidden;
+}
+.fav-item:hover{background:var(--dock-control)}
+.fav-item .fav-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.fav-item .fav-pin{flex:none;font-size:11px;color:var(--dock-accent);opacity:.7}
+.fav-item .fav-del{flex:none;font-size:14px;color:var(--dock-muted);opacity:0;padding:0 2px;line-height:1}
+.fav-item:hover .fav-del{opacity:.7}
+.fav-item .fav-del:hover{opacity:1;color:var(--dock-accent)}
+
+/* ---- 文件夹列表：框选（rubber band）+ 多选 + 拖到暂存区 ---- */
+/* 行是 button，但拖动时仍可能触发文本选择，直接禁用更省事。 */
+.filelist .row{user-select:none;-webkit-user-select:none}
+/* 列表容器必须是定位祖先，选框才能以它左上角为原点算坐标。 */
+#browse-list{position:relative}
+
+/* 框选矩形：用 fixed 定位，跟着指针在视口里的坐标走，不受滚动影响。 */
+#rubber{
+  position:fixed;z-index:60;pointer-events:none;display:none;
+  border:1px solid var(--dock-accent);border-radius:3px;
+  background:color-mix(in srgb,var(--dock-accent) 18%,transparent);
+}
+#rubber.on{display:block}
+
+/* 多选行：左侧加一道强调色竖条，底色轻微提亮，和「当前预览」的 .active 区分开。 */
+.filelist .row.sel{
+  background:color-mix(in srgb,var(--dock-accent) 16%,transparent);
+  box-shadow:inset 3px 0 0 var(--dock-accent);
+}
+.filelist .row.sel .nm{color:var(--dock-text)}
+
+/* 拖动中：禁止选中文本，光标改成抓取手势 */
+body[data-boxing=true]{user-select:none;cursor:crosshair}
+body[data-dragging=true]{user-select:none;cursor:grabbing}
+/* 正在被拖去暂存区的行淡一点，给出"正在搬走"的反馈 */
+.filelist .row.drag-src{opacity:.45}
+
+/* 暂存区在拖动悬停时高亮，明确告诉用户"松手就进来" */
+#stash-col.drop-target #stash{
+  border-color:var(--dock-accent);
+  box-shadow:0 0 0 2px color-mix(in srgb,var(--dock-accent) 35%,transparent);
+}
+
+/* 拖动时跟随指针的小胶囊标签 */
+.drag-ghost{
+  position:fixed;z-index:70;pointer-events:none;
+  padding:3px 9px;border-radius:999px;font-size:12px;line-height:1.5;
+  background:var(--dock-accent);color:#1a1035;font-weight:600;
+  box-shadow:0 6px 18px rgba(0,0,0,.45);
+}
+
+/* ---- 文件管理页（double 布局）：让文件夹区更紧凑、能一屏看到更多条目 ----
+   之前行高 28px + 上栏只占 55%，44 个目录一屏只看得到 7 项，看起来像"显示不全"。
+   这里把行压到 25px、上栏提到 62%，并把符号列略缩，保证一屏能看到约 15 项。 */
+body[data-layout=double] #preview-col .filelist .row{padding:3px 8px;min-height:25px;font-size:12.5px}
+body[data-layout=double] #preview-col .filelist .row .ni{width:22px;height:22px}
+body[data-layout=double] #preview-col .filelist .row .nm{gap:5px}
+body[data-layout=double] #preview-col .browse-head{grid-template-columns:20px 22px minmax(0,1fr) 58px 62px 96px}
+body[data-layout=double] #preview-col .filelist .row{grid-template-columns:20px 22px minmax(0,1fr) 58px 62px 96px}
+
+/* 点中一行时给一个清晰的按键反馈，避免"点了不知道有没有生效"的错觉 */
+.filelist .row:active{background:color-mix(in srgb,var(--dock-accent) 22%,transparent)}
+
+
+/* ---- 窄屏（≤700px）覆盖带 #preview-col 的 6 列定义 ----
+   page.css 里的窄屏断点写的是 ody[data-layout=double] .browse-head（specificity 0,2,1），
+   而上面 256/257 行的 ody[data-layout=double] #preview-col .browse-head 含 id（1,2,1），
+   specificity 更高且本文件后加载 → 窗口变窄时列宽仍然是 6 列，「名称」列头被挤成 0 宽。
+   所以必须在同一文件、同形选择器里再覆盖一次。 */
+@media(max-width:700px){
+  body[data-layout=double] #preview-col .browse-head{grid-template-columns:20px 26px minmax(0,1fr);gap:0}
+  body[data-layout=double] #preview-col .filelist .row{grid-template-columns:20px 26px minmax(0,1fr);gap:0;padding:4px 7px}
+}

package/dist/filemgr/plugins/filemgr/page.css

@@ -0,0 +1,218 @@
+/* 文件预览页：沿用 dock.css 的灰阶与胶囊控件，只补布局与预览区样式。 */
+#app-main, main{min-width:0}
+header{flex-wrap:wrap}
+header nav{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
+.layouts{border-radius:999px;background:var(--dock-card);padding:3px;gap:2px}
+.layouts button{border:0;background:transparent;min-height:24px;padding:2px 12px}
+.layouts button[aria-pressed=true]{background:var(--dock-line);color:var(--dock-text)}
+
+.workspace{display:grid;gap:12px;align-items:start;grid-template-columns:minmax(0,1fr)}
+/* 双栏：左文件夹 / 右预览。
+   两条硬规矩，都是为了不打自己的脸：
+   1) 高度用固定 px，绝不写 vh。宿主是拿我们上报的 main 高度去设 iframe 高度的，
+      再用 vh 就是「高度依赖视口、视口依赖上报高度」的死循环，面板会一直抖。
+   2) main 的总高也钉死（见下方 body[data-layout=double] main），窄屏 header 换行时
+      由 workspace 让位，总高恒定 —— 上报值稳定，宿主只量一次。 */
+body[data-layout=double] main{display:flex;flex-direction:column;height:820px}
+/* 三行：上栏（文件夹） | 分隔条 | 下栏（预览）。上栏高度由 --side-h 控制，拖动分隔条就是改这个变量。 */
+body[data-layout=double] .workspace{
+  flex:1 1 auto;
+  min-height:0;
+  grid-template-rows:min(var(--side-h,420px),62%) 8px minmax(0,1fr);
+  grid-template-columns:minmax(0,1fr);
+  gap:5px;
+  align-items:stretch;
+}
+
+/* 分栏分隔条：整条 8px 都是拖动命中区，中间画 2px 横线。单栏时整条隐藏。 */
+#split{display:none;position:relative;cursor:row-resize;touch-action:none;align-self:stretch;border-radius:6px}
+body[data-layout=double] #split{display:block}
+#split::before{content:'';position:absolute;left:8px;right:8px;top:50%;height:2px;margin-top:-1px;border-radius:2px;background:var(--dock-line);transition:background .12s}
+#split:hover::before,#split:focus-visible::before,#split[data-dragging=true]::before{background:var(--dock-accent)}
+#split:focus-visible{outline:none}
+#split[data-dragging=true]{background:var(--dock-control)}
+/* 拖动期间锁住文字选中，否则会拖出一片蓝色选区。 */
+body[data-resizing=true]{user-select:none;cursor:row-resize}
+body[data-layout=single] #side{display:none}
+body[data-layout=single] #browse{display:none}
+
+#side{margin:0;padding:12px;display:grid;gap:10px;grid-template-rows:minmax(0,1fr) auto;min-height:0;overflow:hidden;border:1px solid var(--dock-line);border-radius:18px;background:var(--dock-card)}
+/* 上下并列后 #side 只有上栏那点高度（默认 360px），「位置/最近」面板在里面会
+   把文件夹列表挤成几十像素（实测 filelist 只剩 4 行）。用户也明确要求过移除
+   显示位置功能，所以双栏时整块 #loc 不出现，把高度全留给列表。 */
+body[data-layout=double] #side{grid-template-rows:minmax(0,1fr);gap:0}
+
+/* 左栏：文件夹浏览器，独立滚动，撑满可用高度 */
+#browse{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:8px;min-height:0;min-width:0;margin:0}
+#browse-crumbs{margin:0}
+#browse-list{overflow:auto;min-height:0;align-content:start;padding-right:2px}
+#browse .filelist{margin:0}
+.browse-foot{display:flex;gap:6px;flex-wrap:wrap;border-top:1px solid var(--dock-line);padding-top:6px}
+
+/* 位置/最近：双栏时折叠到左栏底部，单栏时不出现在左栏 */
+#loc{display:grid;gap:4px;min-width:0;max-height:340px;overflow:auto;border-top:1px solid var(--dock-line);padding-top:8px}
+body[data-layout=double] #loc{display:none}
+
+#side h2{font-size:11.5px;color:var(--dock-muted);text-transform:none;letter-spacing:0;margin:2px 0 4px}
+#roots,#recent{display:grid;gap:2px}
+#roots button,#recent button{text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-color:transparent;background:transparent;font-weight:500;min-height:26px;padding:3px 10px}
+#roots button:hover,#recent button:hover{background:var(--dock-control)}
+#roots button[aria-current=true],#recent button[aria-current=true]{background:var(--dock-line);border-color:var(--dock-line)}
+button.ghost{background:transparent;border-color:transparent;color:var(--dock-muted);font-weight:500;min-height:24px;padding:2px 10px}
+#path-line{font-size:11.5px;overflow-wrap:anywhere;margin:10px 0 0;max-height:88px;overflow:auto}
+
+#stage{margin:0;padding:12px 14px 18px;min-width:0;min-height:0;overflow:auto}
+body[data-layout=double] #stage{border:1px solid var(--dock-line);border-radius:18px;background:var(--dock-card)}
+body[data-layout=double] #view{height:100%;min-height:0}
+.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:0 0 10px;font-size:12px}
+.crumbs button{background:transparent;border-color:transparent;min-height:22px;padding:1px 8px;font-weight:500;color:var(--dock-muted)}
+.crumbs button:hover{color:var(--dock-text);background:var(--dock-control)}
+.crumbs button:last-of-type{color:var(--dock-text)}
+.crumbs span{color:var(--dock-muted)}
+
+#view{min-width:0}
+#view>header{display:none}
+
+.filelist{display:grid;gap:2px;margin:0}
+.filelist .row{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;width:100%;text-align:left;border:0;background:transparent;border-radius:9px;padding:5px 9px;font-weight:500;min-height:28px}
+.filelist .row:hover{background:var(--dock-control)}
+.filelist .row .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
+.filelist .row .nm::before{content:'';display:inline-block;width:14px;text-align:center;margin-right:6px;color:var(--dock-muted)}
+.filelist .row.dir .nm::before{content:'▸';color:var(--dock-accent)}
+.filelist .row .sz,.filelist .row .dt{color:var(--dock-muted);font-size:11.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
+.filelist .empty{color:var(--dock-muted);padding:10px 4px}
+
+.preview-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px}
+.preview-head h2{font-size:13.5px;margin:0;overflow-wrap:anywhere}
+.preview-head .badge{font-size:11px;color:var(--dock-muted);border:1px solid var(--dock-line);border-radius:999px;padding:1px 9px}
+
+pre.body{white-space:pre;overflow:auto;max-height:720px;margin:0;padding:10px 12px;border-radius:12px;background:#0b0b0c;border:1px solid var(--dock-line);font:12px/1.62 'Cascadia Mono',Consolas,'Courier New',monospace;tab-size:2}
+:root[data-dock-theme=light] pre.body{background:#f6f6f7}
+pre.body .ln{display:inline-block;width:3.2em;margin-right:10px;text-align:right;color:var(--dock-muted);user-select:none;opacity:.65}
+
+.md{overflow-wrap:anywhere;font-size:13px;line-height:1.68;max-height:720px;overflow:auto;padding:2px 2px}
+.md h1,.md h2,.md h3,.md h4,.md h5,.md h6{margin:16px 0 8px;line-height:1.3}
+.md h1{font-size:19px}.md h2{font-size:16.5px}.md h3{font-size:14.5px}.md h4,.md h5,.md h6{font-size:13.5px}
+.md h1:first-child,.md h2:first-child{margin-top:2px}
+.md p{margin:8px 0;color:var(--dock-text)}
+.md code{font-family:'Cascadia Mono',Consolas,monospace;font-size:12px;background:var(--dock-control);border-radius:5px;padding:1px 5px}
+.md pre{background:#0b0b0c;border:1px solid var(--dock-line);border-radius:12px;padding:10px 12px;overflow:auto;margin:10px 0}
+:root[data-dock-theme=light] .md pre{background:#f6f6f7}
+.md pre code{background:transparent;padding:0;font-size:12px;line-height:1.6}
+.md blockquote{margin:10px 0;padding:2px 0 2px 12px;border-left:3px solid var(--dock-line);color:var(--dock-muted)}
+.md ul,.md ol{margin:8px 0;padding-left:22px;color:var(--dock-text)}
+.md li{margin:3px 0}
+.md hr{border:0;border-top:1px solid var(--dock-line);margin:14px 0}
+.md a{color:var(--dock-accent);text-decoration:none}
+.md a:hover{text-decoration:underline}
+.md table{border-collapse:collapse;margin:10px 0;font-size:12.5px;display:block;overflow:auto}
+.md th,.md td{border:1px solid var(--dock-line);padding:5px 10px;text-align:left}
+.md th{background:var(--dock-card);font-weight:600}
+.md img{max-width:100%;border-radius:10px}
+.md .task{color:var(--dock-muted)}
+
+.figure{display:grid;gap:8px;justify-items:start}
+.figure img{max-width:100%;max-height:720px;border-radius:12px;background:var(--dock-card);border:1px solid var(--dock-line)}
+.figure img.zoomable{cursor:zoom-in;transition:filter .12s}
+.figure img.zoomable:hover{filter:brightness(1.06)}
+.figure .meta{font-size:11.5px;color:var(--dock-muted);font-variant-numeric:tabular-nums}
+
+/* 图片放大查看灯箱 */
+.lb-overlay{position:fixed;inset:0;z-index:2147483600;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(8,10,14,.92);backdrop-filter:blur(2px);user-select:none}
+.lb-overlay[hidden]{display:none}
+.lb-stage{flex:1 1 auto;display:flex;align-items:center;justify-content:center;width:100%;overflow:hidden;cursor:default}
+.lb-img{max-width:96vw;max-height:86vh;border-radius:8px;box-shadow:0 12px 60px rgba(0,0,0,.6);will-change:transform;transform-origin:center center}
+.lb-bar{display:flex;gap:8px;padding:10px 14px;align-items:center}
+.lb-btn{appearance:none;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.10);color:#f2f4f8;font-size:13px;line-height:1;padding:6px 11px;border-radius:9px;cursor:pointer;min-width:34px}
+.lb-btn:hover{background:rgba(255,255,255,.20)}
+.lb-btn.wide{padding:6px 14px}
+.lb-btn.close{border-color:rgba(255,120,120,.5);background:rgba(220,80,80,.22)}
+.lb-tip{font-size:11px;color:rgba(255,255,255,.5);padding:0 14px 12px}
+
+.sheet{display:grid;gap:8px;margin:0 0 16px}
+.sheet h3{margin:0;font-size:12.5px;color:var(--dock-muted)}
+.sheet .grid{overflow:auto;max-height:440px;border:1px solid var(--dock-line);border-radius:12px}
+.sheet table{border-collapse:collapse;font-size:12px}
+.sheet td,.sheet th{border-right:1px solid var(--dock-line);border-bottom:1px solid var(--dock-line);padding:4px 9px;white-space:pre;max-width:400px;overflow:hidden;text-overflow:ellipsis;vertical-align:top}
+.sheet th{position:sticky;top:0;background:var(--dock-card);font-weight:600;z-index:1}
+.sheet tr:last-child td{border-bottom:0}
+.sheet td:last-child,.sheet th:last-child{border-right:0}
+
+.doc{max-height:720px;overflow:auto;padding-right:4px}
+.doc .para{margin:6px 0;overflow-wrap:anywhere}
+.doc .gap{height:8px}
+.doc .dh{margin:14px 0 6px;overflow-wrap:anywhere}
+.doc .dh.h1{font-size:17px}.doc .dh.h2{font-size:15px}.doc .dh.h3{font-size:14px}.doc .dh.h4,.doc .dh.h5,.doc .dh.h6{font-size:13.5px}
+.slides{display:grid;gap:12px;max-height:720px;overflow:auto}
+.slide{border:1px solid var(--dock-line);border-radius:14px;padding:10px 14px;background:var(--dock-card)}
+.slide h3{font-size:12px;color:var(--dock-muted);margin:0 0 8px;font-weight:600}
+.slide p{margin:3px 0;color:var(--dock-text);overflow-wrap:anywhere}
+
+.hint{border:1px dashed var(--dock-line);border-radius:14px;padding:16px;background:var(--dock-card)}
+.hint h3{margin:0 0 6px;font-size:13.5px}
+.hint p{margin:6px 0;color:var(--dock-muted);font-size:12.5px;overflow-wrap:anywhere}
+.hint .actions{margin-top:10px}
+
+/* 打开文件夹：路径输入 + 目录选择器 */
+#jump{margin:0 0 12px}
+#jump h2{font-size:12.5px;color:var(--dock-muted);margin:0 0 8px}
+#jump label{display:grid;gap:5px;font-size:12px;color:var(--dock-muted)}
+#jump input{width:100%;box-sizing:border-box;min-height:28px;padding:3px 10px;border-radius:10px;border:1px solid var(--dock-line);background:var(--dock-control);color:var(--dock-text);font:12px/1.5 'Cascadia Mono',Consolas,monospace}
+#jump .actions{display:flex;gap:8px;margin:8px 0 0}
+.picker{margin:12px 0 0;border:1px solid var(--dock-line);border-radius:14px;background:var(--dock-card);overflow:hidden}
+.picker-bar{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--dock-line);flex-wrap:wrap}
+.picker-bar code{flex:1;min-width:0;font:11.5px/1.5 'Cascadia Mono',Consolas,monospace;color:var(--dock-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.picker-list{max-height:320px;overflow:auto;padding:6px;display:grid;gap:2px}
+.picker-list .row{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:0;background:transparent;border-radius:9px;padding:5px 9px;font-weight:500;min-height:26px}
+.picker-list .row:hover{background:var(--dock-control)}
+.picker-list .row .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
+.picker-list .row .nm::before{content:'▸';display:inline-block;width:14px;margin-right:6px;color:var(--dock-accent)}
+.picker-list .note{padding:6px 9px;margin:0}
+
+.foot{margin:12px 0 0;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
+/* 窄面板（宿主设置面板就是 520px）：双栏必须保住，只把左栏再压窄一点，
+   绝不 display:none —— 那样用户就永远看不到文件夹那一栏。 */
+@media(max-width:700px){
+  body[data-layout=double] .workspace{grid-template-rows:min(var(--side-h,280px),42%) 8px minmax(0,1fr);gap:4px}
+  header nav{width:100%}
+  /* 左栏只有一百多像素：大小/日期两列会把文件名挤成 "▶ .."，
+     窄栏下让位给文件名，只保留图标 + 名字。 */
+  body[data-layout=double] .filelist .row{grid-template-columns:20px 26px minmax(0,1fr);gap:0;padding:4px 7px}
+  body[data-layout=double] .filelist .row .st,
+  body[data-layout=double] .filelist .row .sz,
+  body[data-layout=double] .filelist .row .dt{display:none}
+  body[data-layout=double] .filelist .row .nm::before{width:12px;margin-right:4px}
+  /* 表头必须跟着行一起塌成 3 列，否则 6 列的表头会把「名称」列头挤成 0 宽
+     （行已隐藏 st/sz/dt，表头对应的 span/button 要同步隐藏）。 */
+  body[data-layout=double] .browse-head{grid-template-columns:20px 26px minmax(0,1fr);gap:0}
+  body[data-layout=double] .browse-head > *:nth-child(n+4){display:none}
+  /* 徽标可收缩，别把文件名压成单字符 */
+  body[data-layout=double] .filelist .row .nm .stash-badge{flex:0 1 auto;min-width:0;max-width:5em}
+  body[data-layout=double] #browse-crumbs{font-size:11px;gap:2px}
+  body[data-layout=double] #browse-crumbs button{padding:1px 5px;min-height:20px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+  body[data-layout=double] .browse-foot{gap:4px;padding-top:4px}
+  body[data-layout=double] .browse-foot button{padding:2px 6px;min-height:22px;font-size:11.5px}
+}
+@media(max-width:430px){
+  body[data-layout=double] .workspace{grid-template-rows:min(var(--side-h,280px),40%) 8px minmax(0,1fr);gap:3px}
+  #side{padding:8px}
+  #stage{padding:10px}
+  /* 超窄栏里徽标即使收缩也只剩一两个字，会把文件名挤没。
+     直接隐藏徽标，靠 .row.stashed / aria-stashed 的 accent 变色识别「已暂存」。 */
+  body[data-layout=double] .filelist .row .nm .stash-badge,
+  body[data-layout=double] #preview-col .filelist .row .nm .stash-badge{display:none}
+}
+
+
+/* 插件内目录选择器：宿主没有 fish:hold 时的兜底，不弹原生对话框，面板不会失焦 */
+.dirpick{position:fixed;inset:0;z-index:80;display:grid;place-items:center;background:#0009;backdrop-filter:blur(2px)}
+.dirpick[hidden]{display:none}
+.dirpick-card{width:min(560px,86vw);max-height:min(560px,84vh);display:grid;grid-template-rows:auto auto minmax(120px,1fr) auto auto;gap:10px;background:var(--dock-card);border:1px solid var(--dock-line);border-radius:14px;padding:14px;box-shadow:0 18px 48px #000a}
+.dirpick-head{display:flex;align-items:center;justify-content:space-between;font-weight:600;font-size:13px}
+.dirpick-list{overflow:auto;min-height:120px;border:1px solid var(--dock-line);border-radius:10px;padding:4px}
+.dirpick-list .row{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:7px;cursor:pointer}
+.dirpick-list .row:hover{background:var(--dock-control)}
+.dirpick-list .row.sel{background:color-mix(in oklab,var(--dock-accent) 22%,transparent)}
+.dirpick-list .row .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.dirpick-foot{display:flex;align-items:center;gap:8px}
+.dirpick-path{flex:1;min-width:0;background:var(--dock-control);border:1px solid var(--dock-line);border-radius:8px;color:var(--dock-text);padding:6px 9px;font-size:12.5px}