dsh-plugin-workbench 0.0.2 → 0.0.3

package/lib/client.js

@@ -30,7 +30,7 @@ window.__ModuleLoader__.load({
 		let react = require("react");
 		let react_jsx_runtime = require("react/jsx-runtime");
 		//#region \0dsh-css:src/client/files.module.css.mjs
-		const css$1 = "[data-fe-theme=light]{--fe-bg:#fff;--fe-sidebar-bg:#f3f3f3;--fe-fg:#1f1f1f;--fe-muted:#6e6e6e;--fe-faint:#9d9d9d;--fe-border:#e5e5e5;--fe-border-strong:#c8c8c8;--fe-accent:#005fb8;--fe-hover:#e8e8e8;--fe-selection:#add6ff;--fe-token-keyword:#00f;--fe-token-string:#a31515;--fe-token-comment:green;--fe-token-number:#098658;--fe-token-function:#795e26;--fe-token-type:#267f99;--fe-token-variable:#001080;--fe-token-tag:maroon;--fe-token-meta:#6e6e6e}[data-fe-theme=dark]{--fe-bg:#1e1e1e;--fe-sidebar-bg:#252526;--fe-fg:#d4d4d4;--fe-muted:#ccc;--fe-faint:#9d9d9d;--fe-border:#3c3c3c;--fe-border-strong:#454545;--fe-accent:#007acc;--fe-hover:#2a2d2e;--fe-selection:#264f78;--fe-token-keyword:#569cd6;--fe-token-string:#ce9178;--fe-token-comment:#6a9955;--fe-token-number:#b5cea8;--fe-token-function:#dcdcaa;--fe-token-type:#4ec9b0;--fe-token-variable:#9cdcfe;--fe-token-tag:#569cd6;--fe-token-meta:#9b9b9b}.Myjg4a_column{box-sizing:border-box;background:var(--fe-sidebar-bg);min-width:0;height:100%;color:var(--fe-fg);flex-direction:column;font-size:13px;display:flex;overflow:hidden}.Myjg4a_header{box-sizing:border-box;border-bottom:1px solid var(--fe-border);flex:none;align-items:center;gap:6px;height:34px;padding:0 8px;display:flex}.Myjg4a_headerTitle{text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase;letter-spacing:.04em;min-width:0;color:var(--fe-muted);flex:1;font-size:11px;font-weight:600;overflow:hidden}.Myjg4a_headerActions{flex:none;align-items:center;gap:2px;display:flex}.Myjg4a_action{appearance:none;color:var(--fe-muted);cursor:pointer;background:0 0;border:none;border-radius:5px;justify-content:center;align-items:center;width:22px;height:22px;padding:0;font-size:13px;line-height:1;display:inline-flex}.Myjg4a_action:hover:not(:disabled){background:var(--fe-hover);color:var(--fe-fg)}.Myjg4a_action:disabled{opacity:.5;cursor:default}.Myjg4a_treeArea{flex:1;min-height:0;padding:4px;overflow-y:auto}.Myjg4a_row{cursor:pointer;user-select:none;white-space:nowrap;height:22px;color:var(--fe-fg);border-radius:3px;align-items:center;gap:6px;font-size:13px;display:flex}.Myjg4a_row:hover{background:var(--fe-hover)}.Myjg4a_rowSelected{background:var(--fe-selection)}.Myjg4a_rowSelected .Myjg4a_name{color:var(--fe-fg)}.Myjg4a_chevron{text-align:center;width:12px;color:var(--fe-muted);flex:none;font-size:10px;line-height:22px}.Myjg4a_icon{text-align:center;flex:none;width:16px;font-size:13px;line-height:22px}.Myjg4a_name{text-overflow:ellipsis;flex:1;min-width:0;overflow:hidden}.Myjg4a_size{color:var(--fe-faint);flex:none;font-size:11px}.Myjg4a_actions{opacity:0;flex:none;align-items:center;gap:2px;transition:opacity .12s;display:flex}.Myjg4a_row:hover .Myjg4a_actions,.Myjg4a_row:focus-within .Myjg4a_actions{opacity:1}.Myjg4a_rowHint{color:var(--fe-faint);padding:2px 8px 2px 0;font-size:12px;line-height:20px}.Myjg4a_rowError{color:#f48771;padding:2px 8px 2px 0;font-size:12px;line-height:18px}.Myjg4a_preview{border-right:1px solid var(--fe-border);background:var(--fe-bg);flex-direction:column;flex:0 0 55%;min-width:240px;min-height:0;animation:.18s Myjg4a_fe-preview-in;display:flex;overflow:hidden}.Myjg4a_previewClosing{animation:.2s forwards Myjg4a_fe-preview-out}@keyframes Myjg4a_fe-preview-in{0%{opacity:0}to{opacity:1}}@keyframes Myjg4a_fe-preview-out{0%{opacity:1}to{opacity:0}}.Myjg4a_handle{cursor:col-resize;touch-action:none;z-index:2;background:0 0;flex:none;width:6px;margin-left:-4px;margin-right:-2px}.Myjg4a_handle:hover,.Myjg4a_handle:active{background:var(--fe-accent);opacity:.35}.Myjg4a_tabBar{border-bottom:1px solid var(--fe-border);background:var(--fe-sidebar-bg);flex:none;align-items:stretch;height:34px;display:flex}.Myjg4a_tabScroller{scrollbar-width:thin;flex:1;align-items:stretch;min-width:0;display:flex;overflow-x:auto}.Myjg4a_collapse{appearance:none;color:var(--fe-muted);cursor:pointer;background:0 0;border:none;border-radius:4px;flex:none;justify-content:center;align-items:center;width:26px;height:26px;margin:auto 4px;padding:0;font-size:14px;line-height:1;display:inline-flex}.Myjg4a_collapse:hover{background:var(--fe-hover);color:var(--fe-fg)}.Myjg4a_tab{max-width:180px;color:var(--fe-muted);border-right:1px solid var(--fe-border);cursor:pointer;user-select:none;white-space:nowrap;flex:none;align-items:center;gap:6px;padding:0 8px 0 12px;font-size:13px;display:flex}.Myjg4a_tab:hover{background:var(--fe-hover)}.Myjg4a_tabActive{background:var(--fe-bg);color:var(--fe-fg);box-shadow:inset 0 -1px 0 var(--fe-accent)}.Myjg4a_tabName{text-overflow:ellipsis;flex:1;min-width:0;overflow:hidden}.Myjg4a_tabClose{appearance:none;color:var(--fe-faint);cursor:pointer;background:0 0;border:none;border-radius:3px;justify-content:center;align-items:center;width:16px;height:16px;padding:0;font-size:11px;display:inline-flex}.Myjg4a_tabClose:hover{background:var(--fe-hover);color:var(--fe-fg)}.Myjg4a_tabDot{background:var(--fe-fg);opacity:.85;border-radius:50%;flex:none;width:8px;height:8px}.Myjg4a_previewBody{flex:1;min-height:0;overflow:auto}.Myjg4a_editor{height:100%;min-height:0;position:relative}.Myjg4a_editorHighlight{pointer-events:none;white-space:pre;color:var(--fe-fg);background:0 0;margin:0;padding:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;line-height:1.5;position:absolute;inset:0;overflow:hidden}.Myjg4a_editorHighlight code{font-family:inherit;font-size:inherit;line-height:inherit;white-space:inherit}.Myjg4a_editorTextarea{box-sizing:border-box;resize:none;color:#0000;caret-color:var(--fe-fg);white-space:pre;tab-size:2;background:0 0;border:none;outline:none;margin:0;padding:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;line-height:1.5;position:absolute;inset:0;overflow:auto}.Myjg4a_saveError{color:#1e1e1e;background:#f48771;border-radius:4px;padding:4px 10px;font-size:12px;position:absolute;bottom:8px;right:8px}.Myjg4a_previewHint{color:var(--fe-faint);padding:12px;font-size:12px;line-height:18px}.Myjg4a_previewMeta{color:var(--fe-faint);font-size:11px}.Myjg4a_placeholder{text-align:center;color:var(--fe-faint);flex:1;justify-content:center;align-items:center;padding:16px;font-size:12px;line-height:18px;display:flex}.Myjg4a_editorHighlight .hljs-keyword,.Myjg4a_editorHighlight .hljs-selector-tag,.Myjg4a_editorHighlight .hljs-literal{color:var(--fe-token-keyword)}.Myjg4a_editorHighlight .hljs-string,.Myjg4a_editorHighlight .hljs-regexp,.Myjg4a_editorHighlight .hljs-addition{color:var(--fe-token-string)}.Myjg4a_editorHighlight .hljs-comment,.Myjg4a_editorHighlight .hljs-quote{color:var(--fe-token-comment);font-style:italic}.Myjg4a_editorHighlight .hljs-number,.Myjg4a_editorHighlight .hljs-symbol,.Myjg4a_editorHighlight .hljs-bullet{color:var(--fe-token-number)}.Myjg4a_editorHighlight .hljs-title,.Myjg4a_editorHighlight .hljs-section,.Myjg4a_editorHighlight .hljs-title.function_{color:var(--fe-token-function)}.Myjg4a_editorHighlight .hljs-type,.Myjg4a_editorHighlight .hljs-built_in,.Myjg4a_editorHighlight .hljs-class .hljs-title{color:var(--fe-token-type)}.Myjg4a_editorHighlight .hljs-attr,.Myjg4a_editorHighlight .hljs-attribute,.Myjg4a_editorHighlight .hljs-variable,.Myjg4a_editorHighlight .hljs-template-variable,.Myjg4a_editorHighlight .hljs-params{color:var(--fe-token-variable)}.Myjg4a_editorHighlight .hljs-tag,.Myjg4a_editorHighlight .hljs-name{color:var(--fe-token-tag)}.Myjg4a_editorHighlight .hljs-meta{color:var(--fe-token-meta)}.Myjg4a_editorHighlight .hljs-emphasis{font-style:italic}.Myjg4a_editorHighlight .hljs-strong{font-weight:700}body[data-dsh-maid-atelier] [data-skin-chrome=top-trim],body[data-dsh-maid-atelier] [data-skin-chrome=bottom-trim]{translate:calc(var(--maid-sidebar-width,0px) + var(--dsh-explorer-width,0px) + var(--dsh-preview-width,0px)) 0!important}[class*=explorerCol]{border-right:1px solid var(--fe-border)!important}";
+		const css$1 = "[data-fe-theme=light]{--fe-bg:#fff;--fe-sidebar-bg:#f3f3f3;--fe-fg:#1f1f1f;--fe-muted:#6e6e6e;--fe-faint:#9d9d9d;--fe-border:#e5e5e5;--fe-border-strong:#c8c8c8;--fe-accent:#005fb8;--fe-hover:#e8e8e8;--fe-selection:#add6ff;--fe-token-keyword:#00f;--fe-token-string:#a31515;--fe-token-comment:green;--fe-token-number:#098658;--fe-token-function:#795e26;--fe-token-type:#267f99;--fe-token-variable:#001080;--fe-token-tag:maroon;--fe-token-meta:#6e6e6e}[data-fe-theme=dark]{--fe-bg:#1e1e1e;--fe-sidebar-bg:#252526;--fe-fg:#d4d4d4;--fe-muted:#ccc;--fe-faint:#9d9d9d;--fe-border:#3c3c3c;--fe-border-strong:#454545;--fe-accent:#007acc;--fe-hover:#2a2d2e;--fe-selection:#264f78;--fe-token-keyword:#569cd6;--fe-token-string:#ce9178;--fe-token-comment:#6a9955;--fe-token-number:#b5cea8;--fe-token-function:#dcdcaa;--fe-token-type:#4ec9b0;--fe-token-variable:#9cdcfe;--fe-token-tag:#569cd6;--fe-token-meta:#9b9b9b}.Myjg4a_column{box-sizing:border-box;background:var(--fe-sidebar-bg);min-width:0;height:100%;color:var(--fe-fg);flex-direction:column;font-size:13px;display:flex;overflow:hidden}.Myjg4a_header{box-sizing:border-box;border-bottom:1px solid var(--fe-border);flex:none;align-items:center;gap:6px;height:34px;padding:0 8px;display:flex}.Myjg4a_headerTitle{text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase;letter-spacing:.04em;min-width:0;color:var(--fe-muted);flex:1;font-size:11px;font-weight:600;overflow:hidden}.Myjg4a_headerActions{flex:none;align-items:center;gap:2px;display:flex}.Myjg4a_action{appearance:none;color:var(--fe-muted);cursor:pointer;background:0 0;border:none;border-radius:5px;justify-content:center;align-items:center;width:22px;height:22px;padding:0;font-size:13px;line-height:1;display:inline-flex}.Myjg4a_action:hover:not(:disabled){background:var(--fe-hover);color:var(--fe-fg)}.Myjg4a_action:disabled{opacity:.5;cursor:default}.Myjg4a_treeArea{flex:1;min-height:0;padding:4px;overflow-y:auto}.Myjg4a_row{cursor:pointer;user-select:none;white-space:nowrap;height:22px;color:var(--fe-fg);border-radius:3px;align-items:center;gap:6px;font-size:13px;display:flex}.Myjg4a_row:hover{background:var(--fe-hover)}.Myjg4a_rowSelected{background:var(--fe-selection)}.Myjg4a_rowSelected .Myjg4a_name{color:var(--fe-fg)}.Myjg4a_chevron{text-align:center;width:12px;color:var(--fe-muted);flex:none;font-size:10px;line-height:22px}.Myjg4a_icon{text-align:center;flex:none;width:16px;font-size:13px;line-height:22px}.Myjg4a_fileBadge{letter-spacing:-.3px;box-sizing:border-box;vertical-align:middle;user-select:none;border-radius:3px;justify-content:center;align-items:center;width:16px;height:15px;padding:0 1px;font-size:8px;font-weight:700;line-height:1;display:inline-flex}.Myjg4a_fileBadgeLong{letter-spacing:-.4px;font-size:6.5px}.Myjg4a_name{text-overflow:ellipsis;flex:1;min-width:0;overflow:hidden}.Myjg4a_size{color:var(--fe-faint);flex:none;font-size:11px}.Myjg4a_actions{opacity:0;flex:none;align-items:center;gap:2px;transition:opacity .12s;display:flex}.Myjg4a_row:hover .Myjg4a_actions,.Myjg4a_row:focus-within .Myjg4a_actions{opacity:1}.Myjg4a_rowHint{color:var(--fe-faint);padding:2px 8px 2px 0;font-size:12px;line-height:20px}.Myjg4a_rowError{color:#f48771;padding:2px 8px 2px 0;font-size:12px;line-height:18px}.Myjg4a_preview{border-right:1px solid var(--fe-border);background:var(--fe-bg);flex-direction:column;flex:0 0 55%;min-width:240px;min-height:0;animation:.18s Myjg4a_fe-preview-in;display:flex;overflow:hidden}.Myjg4a_previewClosing{animation:.2s forwards Myjg4a_fe-preview-out}@keyframes Myjg4a_fe-preview-in{0%{opacity:0}to{opacity:1}}@keyframes Myjg4a_fe-preview-out{0%{opacity:1}to{opacity:0}}.Myjg4a_handle{cursor:col-resize;touch-action:none;z-index:2;background:0 0;flex:none;width:6px;margin-left:-4px;margin-right:-2px}.Myjg4a_handle:hover,.Myjg4a_handle:active{background:var(--fe-accent);opacity:.35}.Myjg4a_tabBar{border-bottom:1px solid var(--fe-border);background:var(--fe-sidebar-bg);flex:none;align-items:stretch;height:34px;display:flex}.Myjg4a_tabScroller{scrollbar-width:thin;flex:1;align-items:stretch;min-width:0;display:flex;overflow-x:auto}.Myjg4a_collapse,.Myjg4a_tabAction{appearance:none;color:var(--fe-muted);cursor:pointer;background:0 0;border:none;border-radius:4px;flex:none;justify-content:center;align-items:center;width:26px;height:26px;margin:auto 4px;padding:0;font-size:14px;line-height:1;display:inline-flex}.Myjg4a_collapse:hover,.Myjg4a_tabAction:hover{background:var(--fe-hover);color:var(--fe-fg)}.Myjg4a_tabActionActive{background:var(--fe-hover);color:var(--fe-accent)}.Myjg4a_tab{max-width:180px;color:var(--fe-muted);border-right:1px solid var(--fe-border);cursor:pointer;user-select:none;white-space:nowrap;flex:none;align-items:center;gap:6px;padding:0 8px 0 12px;font-size:13px;display:flex}.Myjg4a_tab:hover{background:var(--fe-hover)}.Myjg4a_tabActive{background:var(--fe-bg);color:var(--fe-fg);box-shadow:inset 0 -1px 0 var(--fe-accent)}.Myjg4a_tabName{text-overflow:ellipsis;flex:1;min-width:0;overflow:hidden}.Myjg4a_tabIcon{flex:none;justify-content:center;align-items:center;width:16px;font-size:13px;line-height:1;display:inline-flex}.Myjg4a_tabClose{appearance:none;color:var(--fe-faint);cursor:pointer;background:0 0;border:none;border-radius:3px;justify-content:center;align-items:center;width:16px;height:16px;padding:0;font-size:11px;display:inline-flex}.Myjg4a_tabClose:hover{background:var(--fe-hover);color:var(--fe-fg)}.Myjg4a_tabDot{background:var(--fe-fg);opacity:.85;border-radius:50%;flex:none;width:8px;height:8px}.Myjg4a_previewBody{flex:1;min-height:0;overflow:auto}.Myjg4a_editor{height:100%;min-height:0;position:relative}.Myjg4a_editorHighlight{pointer-events:none;white-space:pre;tab-size:2;color:var(--fe-fg);background:0 0;margin:0;padding:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;line-height:1.5;position:absolute;inset:0;overflow:auto}.Myjg4a_editorHighlight code{font-family:inherit;font-size:inherit;line-height:inherit;white-space:inherit}.Myjg4a_editorTextarea{box-sizing:border-box;resize:none;color:#0000;caret-color:var(--fe-fg);white-space:pre;tab-size:2;background:0 0;border:none;outline:none;margin:0;padding:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;line-height:1.5;position:absolute;inset:0;overflow:auto}.Myjg4a_editor[data-wrap=on] .Myjg4a_editorHighlight,.Myjg4a_editor[data-wrap=on] .Myjg4a_editorTextarea{white-space:pre-wrap;overflow-wrap:anywhere}.Myjg4a_editor[data-wrap=on] .Myjg4a_editorTextarea{overflow-x:hidden}.Myjg4a_saveError{color:#1e1e1e;background:#f48771;border-radius:4px;padding:4px 10px;font-size:12px;position:absolute;bottom:8px;right:8px}.Myjg4a_previewHint{color:var(--fe-faint);padding:12px;font-size:12px;line-height:18px}.Myjg4a_previewMeta{color:var(--fe-faint);font-size:11px}.Myjg4a_placeholder{text-align:center;color:var(--fe-faint);flex:1;justify-content:center;align-items:center;padding:16px;font-size:12px;line-height:18px;display:flex}.Myjg4a_editorHighlight .hljs-keyword,.Myjg4a_editorHighlight .hljs-selector-tag,.Myjg4a_editorHighlight .hljs-literal{color:var(--fe-token-keyword)}.Myjg4a_editorHighlight .hljs-string,.Myjg4a_editorHighlight .hljs-regexp,.Myjg4a_editorHighlight .hljs-addition{color:var(--fe-token-string)}.Myjg4a_editorHighlight .hljs-comment,.Myjg4a_editorHighlight .hljs-quote{color:var(--fe-token-comment);font-style:italic}.Myjg4a_editorHighlight .hljs-number,.Myjg4a_editorHighlight .hljs-symbol,.Myjg4a_editorHighlight .hljs-bullet{color:var(--fe-token-number)}.Myjg4a_editorHighlight .hljs-title,.Myjg4a_editorHighlight .hljs-section,.Myjg4a_editorHighlight .hljs-title.function_{color:var(--fe-token-function)}.Myjg4a_editorHighlight .hljs-type,.Myjg4a_editorHighlight .hljs-built_in,.Myjg4a_editorHighlight .hljs-class .hljs-title{color:var(--fe-token-type)}.Myjg4a_editorHighlight .hljs-attr,.Myjg4a_editorHighlight .hljs-attribute,.Myjg4a_editorHighlight .hljs-variable,.Myjg4a_editorHighlight .hljs-template-variable,.Myjg4a_editorHighlight .hljs-params{color:var(--fe-token-variable)}.Myjg4a_editorHighlight .hljs-tag,.Myjg4a_editorHighlight .hljs-name{color:var(--fe-token-tag)}.Myjg4a_editorHighlight .hljs-meta{color:var(--fe-token-meta)}.Myjg4a_editorHighlight .hljs-emphasis{font-style:italic}.Myjg4a_editorHighlight .hljs-strong{font-weight:700}body[data-dsh-maid-atelier] [data-skin-chrome=top-trim],body[data-dsh-maid-atelier] [data-skin-chrome=bottom-trim]{translate:calc(var(--maid-sidebar-width,0px) + var(--dsh-explorer-width,0px) + var(--dsh-preview-width,0px)) 0!important}[class*=explorerCol]{border-right:1px solid var(--fe-border)!important}";
 		const tagId = "dsh-plugin-workbench/files.module.css";
 		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId) + "]") === null) {
 			const tag = document.createElement("style");
@@ -50,6 +50,8 @@ window.__ModuleLoader__.load({
 			"editorTextarea": "Myjg4a_editorTextarea",
 			"fe-preview-in": "Myjg4a_fe-preview-in",
 			"fe-preview-out": "Myjg4a_fe-preview-out",
+			"fileBadge": "Myjg4a_fileBadge",
+			"fileBadgeLong": "Myjg4a_fileBadgeLong",
 			"handle": "Myjg4a_handle",
 			"header": "Myjg4a_header",
 			"headerActions": "Myjg4a_headerActions",
@@ -69,15 +71,465 @@ window.__ModuleLoader__.load({
 			"saveError": "Myjg4a_saveError",
 			"size": "Myjg4a_size",
 			"tab": "Myjg4a_tab",
+			"tabAction": "Myjg4a_tabAction",
+			"tabActionActive": "Myjg4a_tabActionActive",
 			"tabActive": "Myjg4a_tabActive",
 			"tabBar": "Myjg4a_tabBar",
 			"tabClose": "Myjg4a_tabClose",
 			"tabDot": "Myjg4a_tabDot",
+			"tabIcon": "Myjg4a_tabIcon",
 			"tabName": "Myjg4a_tabName",
 			"tabScroller": "Myjg4a_tabScroller",
 			"treeArea": "Myjg4a_treeArea"
 		};
 		//#endregion
+		//#region src/client/fileIcons.tsx
+		/**
+		* File-type icons for the explorer tree rows and the preview tabs.
+		*
+		* Code/config files render as small colored badges with an extension label
+		* (VS Code "Minimal"-theme style); media, archives and installer files use
+		* emoji; anything unknown falls back to a generic document glyph. No icon
+		* assets are shipped — badges are pure CSS (per-language colors) and emoji
+		* come from the platform font.
+		*/
+		/** lowercase extension (no dot) → badge colors. */
+		const BADGES = {
+			ts: {
+				label: "TS",
+				bg: "#3178c6",
+				fg: "#ffffff"
+			},
+			mts: {
+				label: "TS",
+				bg: "#3178c6",
+				fg: "#ffffff"
+			},
+			cts: {
+				label: "TS",
+				bg: "#3178c6",
+				fg: "#ffffff"
+			},
+			tsx: {
+				label: "TSX",
+				bg: "#61dafb",
+				fg: "#06283d"
+			},
+			js: {
+				label: "JS",
+				bg: "#f7df1e",
+				fg: "#1e1e1e"
+			},
+			mjs: {
+				label: "JS",
+				bg: "#f7df1e",
+				fg: "#1e1e1e"
+			},
+			cjs: {
+				label: "JS",
+				bg: "#f7df1e",
+				fg: "#1e1e1e"
+			},
+			jsx: {
+				label: "JSX",
+				bg: "#61dafb",
+				fg: "#06283d"
+			},
+			json: {
+				label: "{}",
+				bg: "#cbcb41",
+				fg: "#1e1e1e"
+			},
+			jsonc: {
+				label: "{}",
+				bg: "#cbcb41",
+				fg: "#1e1e1e"
+			},
+			html: {
+				label: "HTML",
+				bg: "#e44d26",
+				fg: "#ffffff"
+			},
+			htm: {
+				label: "HTML",
+				bg: "#e44d26",
+				fg: "#ffffff"
+			},
+			css: {
+				label: "CSS",
+				bg: "#2965f1",
+				fg: "#ffffff"
+			},
+			scss: {
+				label: "SCSS",
+				bg: "#cc6699",
+				fg: "#ffffff"
+			},
+			less: {
+				label: "LESS",
+				bg: "#2a4d80",
+				fg: "#ffffff"
+			},
+			md: {
+				label: "MD",
+				bg: "#519aba",
+				fg: "#ffffff"
+			},
+			markdown: {
+				label: "MD",
+				bg: "#519aba",
+				fg: "#ffffff"
+			},
+			py: {
+				label: "PY",
+				bg: "#3572a5",
+				fg: "#ffffff"
+			},
+			pyw: {
+				label: "PY",
+				bg: "#3572a5",
+				fg: "#ffffff"
+			},
+			go: {
+				label: "GO",
+				bg: "#00add8",
+				fg: "#06283d"
+			},
+			rs: {
+				label: "RS",
+				bg: "#dea584",
+				fg: "#1e1e1e"
+			},
+			java: {
+				label: "JAVA",
+				bg: "#b07219",
+				fg: "#ffffff"
+			},
+			c: {
+				label: "C",
+				bg: "#6e6e6e",
+				fg: "#ffffff"
+			},
+			h: {
+				label: "H",
+				bg: "#6e6e6e",
+				fg: "#ffffff"
+			},
+			cpp: {
+				label: "CPP",
+				bg: "#f34b7d",
+				fg: "#ffffff"
+			},
+			cc: {
+				label: "CPP",
+				bg: "#f34b7d",
+				fg: "#ffffff"
+			},
+			cxx: {
+				label: "CPP",
+				bg: "#f34b7d",
+				fg: "#ffffff"
+			},
+			hpp: {
+				label: "HPP",
+				bg: "#f34b7d",
+				fg: "#ffffff"
+			},
+			hxx: {
+				label: "HPP",
+				bg: "#f34b7d",
+				fg: "#ffffff"
+			},
+			cs: {
+				label: "CS",
+				bg: "#178600",
+				fg: "#ffffff"
+			},
+			sh: {
+				label: "SH",
+				bg: "#89e051",
+				fg: "#1e1e1e"
+			},
+			bash: {
+				label: "SH",
+				bg: "#89e051",
+				fg: "#1e1e1e"
+			},
+			zsh: {
+				label: "SH",
+				bg: "#89e051",
+				fg: "#1e1e1e"
+			},
+			ps1: {
+				label: "PS1",
+				bg: "#012456",
+				fg: "#ffffff"
+			},
+			psm1: {
+				label: "PS1",
+				bg: "#012456",
+				fg: "#ffffff"
+			},
+			psd1: {
+				label: "PS1",
+				bg: "#012456",
+				fg: "#ffffff"
+			},
+			bat: {
+				label: "BAT",
+				bg: "#6e6e6e",
+				fg: "#ffffff"
+			},
+			cmd: {
+				label: "BAT",
+				bg: "#6e6e6e",
+				fg: "#ffffff"
+			},
+			sql: {
+				label: "SQL",
+				bg: "#e38c00",
+				fg: "#ffffff"
+			},
+			yml: {
+				label: "YML",
+				bg: "#cb171e",
+				fg: "#ffffff"
+			},
+			yaml: {
+				label: "YML",
+				bg: "#cb171e",
+				fg: "#ffffff"
+			},
+			toml: {
+				label: "TOML",
+				bg: "#8b8b8b",
+				fg: "#ffffff"
+			},
+			ini: {
+				label: "INI",
+				bg: "#8b8b8b",
+				fg: "#ffffff"
+			},
+			conf: {
+				label: "INI",
+				bg: "#8b8b8b",
+				fg: "#ffffff"
+			},
+			cfg: {
+				label: "INI",
+				bg: "#8b8b8b",
+				fg: "#ffffff"
+			},
+			xml: {
+				label: "XML",
+				bg: "#a074c4",
+				fg: "#ffffff"
+			},
+			xsl: {
+				label: "XML",
+				bg: "#a074c4",
+				fg: "#ffffff"
+			},
+			svg: {
+				label: "SVG",
+				bg: "#e37933",
+				fg: "#ffffff"
+			},
+			vue: {
+				label: "VUE",
+				bg: "#41b883",
+				fg: "#06283d"
+			},
+			lock: {
+				label: "LOCK",
+				bg: "#9d9d9d",
+				fg: "#1e1e1e"
+			},
+			env: {
+				label: "ENV",
+				bg: "#f05033",
+				fg: "#ffffff"
+			},
+			gitignore: {
+				label: "GIT",
+				bg: "#f05033",
+				fg: "#ffffff"
+			},
+			gitattributes: {
+				label: "GIT",
+				bg: "#f05033",
+				fg: "#ffffff"
+			},
+			gitmodules: {
+				label: "GIT",
+				bg: "#f05033",
+				fg: "#ffffff"
+			},
+			editorconfig: {
+				label: "CFG",
+				bg: "#8b8b8b",
+				fg: "#ffffff"
+			},
+			npmrc: {
+				label: "CFG",
+				bg: "#8b8b8b",
+				fg: "#ffffff"
+			},
+			pnpmrc: {
+				label: "CFG",
+				bg: "#8b8b8b",
+				fg: "#ffffff"
+			},
+			yarnrc: {
+				label: "CFG",
+				bg: "#8b8b8b",
+				fg: "#ffffff"
+			},
+			mk: {
+				label: "MK",
+				bg: "#6d8086",
+				fg: "#ffffff"
+			},
+			makefile: {
+				label: "MK",
+				bg: "#6d8086",
+				fg: "#ffffff"
+			},
+			txt: {
+				label: "TXT",
+				bg: "#9d9d9d",
+				fg: "#ffffff"
+			},
+			log: {
+				label: "TXT",
+				bg: "#9d9d9d",
+				fg: "#ffffff"
+			},
+			pdf: {
+				label: "PDF",
+				bg: "#e74c3c",
+				fg: "#ffffff"
+			}
+		};
+		/** lowercase extension (no dot) → emoji glyph. */
+		const EMOJI = {
+			png: "🖼️",
+			jpg: "🖼️",
+			jpeg: "🖼️",
+			gif: "🖼️",
+			webp: "🖼️",
+			bmp: "🖼️",
+			ico: "🖼️",
+			avif: "🖼️",
+			jfif: "🖼️",
+			tif: "🖼️",
+			tiff: "🖼️",
+			mp3: "🎵",
+			wav: "🎵",
+			flac: "🎵",
+			ogg: "🎵",
+			oga: "🎵",
+			m4a: "🎵",
+			aac: "🎵",
+			wma: "🎵",
+			opus: "🎵",
+			mid: "🎵",
+			mp4: "🎬",
+			mkv: "🎬",
+			avi: "🎬",
+			mov: "🎬",
+			webm: "🎬",
+			flv: "🎬",
+			wmv: "🎬",
+			m4v: "🎬",
+			mpg: "🎬",
+			mpeg: "🎬",
+			zip: "🗜️",
+			rar: "🗜️",
+			"7z": "🗜️",
+			tar: "🗜️",
+			gz: "🗜️",
+			bz2: "🗜️",
+			xz: "🗜️",
+			tgz: "🗜️",
+			tbz2: "🗜️",
+			zst: "🗜️",
+			doc: "📘",
+			docx: "📘",
+			odt: "📘",
+			rtf: "📘",
+			xls: "📗",
+			xlsx: "📗",
+			ods: "📗",
+			csv: "📗",
+			ppt: "📙",
+			pptx: "📙",
+			odp: "📙",
+			epub: "📖",
+			mobi: "📖",
+			exe: "📦",
+			msi: "📦",
+			dmg: "📦",
+			app: "📦",
+			deb: "📦",
+			rpm: "📦",
+			apk: "📦",
+			iso: "📦"
+		};
+		/** Well-known extension-less names (lowercase) → emoji. */
+		const NAMED_EMOJI = { dockerfile: "🐳" };
+		/** Resolve a file name to its icon spec (badge colors or an emoji glyph). */
+		function fileIconFor(name) {
+			const lower = name.trim().toLowerCase();
+			if (lower === "") return {
+				kind: "emoji",
+				char: "📄"
+			};
+			const namedEmoji = NAMED_EMOJI[lower];
+			if (namedEmoji !== void 0) return {
+				kind: "emoji",
+				char: namedEmoji
+			};
+			let key;
+			if (lower.startsWith(".")) {
+				const rest = lower.slice(1);
+				key = rest.startsWith("env.") ? "env" : rest;
+			} else {
+				const dot = lower.lastIndexOf(".");
+				key = dot > 0 ? lower.slice(dot + 1) : lower;
+			}
+			const badge = BADGES[key];
+			if (badge !== void 0) return {
+				kind: "badge",
+				label: badge.label,
+				bg: badge.bg,
+				fg: badge.fg
+			};
+			const emoji = EMOJI[key];
+			if (emoji !== void 0) return {
+				kind: "emoji",
+				char: emoji
+			};
+			return {
+				kind: "emoji",
+				char: "📄"
+			};
+		}
+		/** Render a file's icon: a colored extension badge or an emoji glyph. */
+		function FileIcon({ name }) {
+			const icon = fileIconFor(name);
+			if (icon.kind === "emoji") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: icon.char });
+			const className = icon.label.length >= 4 ? `${files_module_css_default.fileBadge} ${files_module_css_default.fileBadgeLong}` : files_module_css_default.fileBadge;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className,
+				style: {
+					background: icon.bg,
+					color: icon.fg
+				},
+				children: icon.label
+			});
+		}
+		//#endregion
 		//#region src/client/store.ts
 		/**
 		* Module-local store shared by the explorer tree (FileExplorer) and the split
@@ -93,15 +545,29 @@ window.__ModuleLoader__.load({
 			active: void 0,
 			collapsed: false
 		};
+		const WRAP_KEY = "dsh-plugin-workbench:wrap";
+		/** Read the persisted wrap preference; defaults to soft wrap ON. */
+		function storedWrap() {
+			try {
+				if (typeof window === "undefined") return true;
+				const stored = window.localStorage.getItem(WRAP_KEY);
+				return stored === null ? true : stored === "1";
+			} catch {
+				return true;
+			}
+		}
+		const initialWrap = storedWrap();
 		let state = {
 			currentCwd: void 0,
 			workspaces: {},
-			theme: "dark"
+			theme: "dark",
+			wrap: initialWrap
 		};
 		let view = {
 			tabs: EMPTY_TABS,
 			active: void 0,
 			collapsed: false,
+			wrap: initialWrap,
 			theme: "dark",
 			cwd: void 0
 		};
@@ -128,10 +594,11 @@ window.__ModuleLoader__.load({
 				tabs: ws.tabs,
 				active: ws.active,
 				collapsed: ws.collapsed,
+				wrap: state.wrap,
 				theme: state.theme,
 				cwd: state.currentCwd
 			};
-			if (nextView.tabs === view.tabs && nextView.active === view.active && nextView.collapsed === view.collapsed && nextView.theme === view.theme && nextView.cwd === view.cwd) return;
+			if (nextView.tabs === view.tabs && nextView.active === view.active && nextView.collapsed === view.collapsed && nextView.wrap === view.wrap && nextView.theme === view.theme && nextView.cwd === view.cwd) return;
 			view = nextView;
 			for (const listener of [...listeners]) listener();
 		}
@@ -236,6 +703,17 @@ window.__ModuleLoader__.load({
 				theme: state.theme === "dark" ? "light" : "dark"
 			});
 		}
+		/** Toggle display-only soft wrap for the editor (global, persisted). */
+		function toggleWrap() {
+			const wrap = !state.wrap;
+			try {
+				window.localStorage.setItem(WRAP_KEY, wrap ? "1" : "0");
+			} catch {}
+			commit({
+				...state,
+				wrap
+			});
+		}
 		//#endregion
 		//#region src/client/FileExplorer.tsx
 		/**
@@ -488,7 +966,7 @@ window.__ModuleLoader__.load({
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 							className: files_module_css_default.icon,
-							children: isDir ? "📁" : entry.kind === "file" ? "📄" : "·"
+							children: isDir ? isExpanded ? "📂" : "📁" : entry.kind === "file" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FileIcon, { name: entry.name }) : "·"
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 							className: files_module_css_default.name,
@@ -8261,7 +8739,7 @@ window.__ModuleLoader__.load({
 			};
 		}
 		function FilePreview({ t, readFile, writeFile }) {
-			const { tabs, active, theme, collapsed } = useTabsState();
+			const { tabs, active, theme, collapsed, wrap } = useTabsState();
 			const [previewWidth, setPreviewWidth] = (0, react.useState)(null);
 			const [closing, setClosing] = (0, react.useState)(false);
 			const [dragPath, setDragPath] = (0, react.useState)(void 0);
@@ -8432,6 +8910,7 @@ window.__ModuleLoader__.load({
 						const highlighted = active !== void 0 ? highlightCode(activeData.draft ?? "", active) : "";
 						return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: files_module_css_default.editor,
+							"data-wrap": wrap ? "on" : "off",
 							children: [
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
 									ref: highlightRef,
@@ -8446,7 +8925,7 @@ window.__ModuleLoader__.load({
 									onScroll: onTextareaScroll,
 									onKeyDown,
 									spellCheck: false,
-									wrap: "off",
+									wrap: wrap ? "soft" : "off",
 									title: t("action.saveHint")
 								}),
 								saveError !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -8488,44 +8967,58 @@ window.__ModuleLoader__.load({
 				"data-fe-theme": theme,
 				children: [tabs.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: files_module_css_default.tabBar,
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: files_module_css_default.tabScroller,
-						children: tabs.map((path) => {
-							const data = cacheRef.current.get(path);
-							return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: `${files_module_css_default.tab} ${path === active ? files_module_css_default.tabActive : ""}`,
-								onClick: () => activateFile(path),
-								draggable: true,
-								onDragStart: (e) => onTabDragStart(e, path),
-								onDragOver: (e) => onTabDragOver(e, path),
-								onDragEnd: onTabDragEnd,
-								title: path,
-								children: [
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: files_module_css_default.tabName,
-										children: basenameOf(path)
-									}),
-									data?.dirty === true && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: files_module_css_default.tabDot }),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-										type: "button",
-										className: files_module_css_default.tabClose,
-										title: t("tab.close"),
-										onClick: (e) => {
-											e.stopPropagation();
-											closeFile(path);
-										},
-										children: "✕"
-									})
-								]
-							}, path);
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: files_module_css_default.tabScroller,
+							children: tabs.map((path) => {
+								const data = cacheRef.current.get(path);
+								return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: `${files_module_css_default.tab} ${path === active ? files_module_css_default.tabActive : ""}`,
+									onClick: () => activateFile(path),
+									draggable: true,
+									onDragStart: (e) => onTabDragStart(e, path),
+									onDragOver: (e) => onTabDragOver(e, path),
+									onDragEnd: onTabDragEnd,
+									title: path,
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: files_module_css_default.tabIcon,
+											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FileIcon, { name: basenameOf(path) })
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: files_module_css_default.tabName,
+											children: basenameOf(path)
+										}),
+										data?.dirty === true && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: files_module_css_default.tabDot }),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+											type: "button",
+											className: files_module_css_default.tabClose,
+											title: t("tab.close"),
+											onClick: (e) => {
+												e.stopPropagation();
+												closeFile(path);
+											},
+											children: "✕"
+										})
+									]
+								}, path);
+							})
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: `${files_module_css_default.tabAction}${wrap ? ` ${files_module_css_default.tabActionActive}` : ""}`,
+							title: wrap ? t("action.wrapOff") : t("action.wrapOn"),
+							onClick: toggleWrap,
+							children: "⤶"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: files_module_css_default.collapse,
+							title: t("tab.collapse"),
+							onClick: collapsePreview,
+							children: "<"
 						})
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						type: "button",
-						className: files_module_css_default.collapse,
-						title: t("tab.collapse"),
-						onClick: collapsePreview,
-						children: "<"
-					})]
+					]
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: files_module_css_default.previewBody,
 					children: renderBody()
@@ -8549,6 +9042,8 @@ window.__ModuleLoader__.load({
 			"action.open": "在系统中打开",
 			"action.theme": "切换浅色/暗色主题",
 			"action.saveHint": "Ctrl+S 保存",
+			"action.wrapOn": "开启自动换行（显示层换行，不改文件）",
+			"action.wrapOff": "关闭自动换行（长行横向滚动）",
 			"tab.close": "关闭标签页",
 			"tab.collapse": "收起文件详情",
 			"tab.expand": "弹出文件详情",
@@ -8565,6 +9060,8 @@ window.__ModuleLoader__.load({
 			"action.open": "Open in system",
 			"action.theme": "Toggle light/dark theme",
 			"action.saveHint": "Ctrl+S to save",
+			"action.wrapOn": "Enable word wrap (display only, file unchanged)",
+			"action.wrapOff": "Disable word wrap (long lines scroll horizontally)",
 			"tab.close": "Close tab",
 			"tab.collapse": "Collapse file details",
 			"tab.expand": "Expand file details",