dsh-linked-workspace 0.8.0 → 0.8.2

package/lib/client.js

@@ -1835,8 +1835,112 @@ function fileIconSpec(name, isDir) {
   return ICON_spec('unknown')
 }
 
+// ---- file-creation.js ----
+// Shared by the directory menu, its submit handler and API regression tests.
+// Preview formats (CSV/HTML/images) are regular files; only document templates
+// are sent to docs.create.
+function newEntryMenuItems(menu, t, onNew) {
+  return [true, false].map(function (isDir) {
+    var title = t(isDir ? 'newFolderTitle' : 'newFileTitle');
+    return {
+      label: t(isDir ? 'ctxNewFolder' : 'ctxNewFile'),
+      onSelect: function () {
+        onNew({ kind: 'new', side: menu.side, dir: menu.path, isDir: isDir,
+          title: title, label: t('nameLabel'), value: title });
+      },
+    };
+  });
+}
+
+function newEntryRequest(side, dirPath, name, isDir, scope) {
+  var child = String(name || '').trim();
+  if (!child || child === '.' || child === '..' || /[/\\\0]/.test(child)) {
+    var error = new Error('文件或文件夹名称无效 / Invalid file or folder name');
+    error.code = 'BAD_REQUEST';
+    throw error;
+  }
+  var parent = String(dirPath || '');
+  var separator = side === 'remote' || parent.indexOf('\\') < 0 ? '/' : '\\';
+  var target = parent + (/[\\/]$/.test(parent) ? '' : separator) + child;
+  var match = child.toLowerCase().match(/\.[^./\\]+$/);
+  var extension = match ? match[0] : '';
+  var kinds = { '.md': 'markdown', '.markdown': 'markdown', '.pdf': 'pdf',
+    '.docx': 'docx', '.xlsx': 'xlsx', '.pptx': 'pptx' };
+  var kind = isDir ? '' : (kinds[extension] || '');
+  var method;
+  var params;
+  if (isDir) {
+    method = side === 'remote' ? 'fs.mkdir' : 'local.mkdir';
+    params = side === 'remote' ? { path: target, createOnly: true } : { path: parent, name: child };
+  } else if (kind) {
+    method = 'docs.create';
+    params = { path: target, kind: kind };
+  } else {
+    method = side === 'remote' ? 'fs.write' : 'local.newFile';
+    params = side === 'remote' ? { path: target, content: '', createOnly: true } : { path: target };
+  }
+  if (side === 'remote') params = Object.assign({}, scope, params);
+  return { method: method, params: params, path: target, kind: kind };
+}
+
+// ---- url-safety.js ----
+// URL safety helpers shared by the document sanitizer and its unit tests.
+//
+// Browsers strip ASCII control characters, tabs and newlines while parsing a
+// URL scheme, so `jav&#9;ascript:` reaches the address bar as `javascript:`.
+// The checks below normalise the value the same way before looking at it.
+var SAFE_SCHEMES = { http: 1, https: 1, mailto: 1, tel: 1 };
+var IMAGE_DATA = /^data:image\/(?:png|jpeg|jpg|gif|webp|bmp|avif|x-icon)[;,]/
+var URL_ATTRIBUTES = {
+  href: 1,
+  src: 1,
+  'xlink:href': 1,
+  action: 1,
+  formaction: 1,
+  data: 1,
+  poster: 1,
+  background: 1,
+  cite: 1,
+  longdesc: 1,
+  usemap: 1,
+};
+
+function normalizeUrlValue(value) {
+  return String(value == null ? '' : value)
+    // C0/C1 controls, space, zero-width and line/paragraph separators are what
+    // URL parsers silently drop inside a scheme.
+    .replace(/[\u0000-\u0020\u007f-\u009f\u200b-\u200f\u2028\u2029\ufeff]/g, '')
+    .trim();
+}
+
+function urlSchemeOf(value) {
+  var text = normalizeUrlValue(value);
+  var match = /^([a-zA-Z][a-zA-Z0-9+.-]*):/.exec(text);
+  return match ? match[1].toLowerCase() : '';
+}
+
+// Returns '' when the attribute is safe to keep, or a short reason when the
+// sanitizer has to drop it. `tagName` is only needed for data: URLs, which are
+// allowed for images and rejected everywhere else.
+function urlAttributeViolation(name, value, tagName) {
+  var attribute = String(name || '').toLowerCase();
+  if (/^on/.test(attribute)) return 'event handler';
+  if (!URL_ATTRIBUTES[attribute]) return '';
+  var text = normalizeUrlValue(value);
+  if (text === '') return '';
+  // Relative paths, fragments and protocol-relative URLs have no scheme.
+  if (text.charAt(0) === '#' || text.slice(0, 2) === '//') return '';
+  var scheme = urlSchemeOf(text);
+  if (scheme === '') return '';
+  if (SAFE_SCHEMES[scheme]) return '';
+  if (scheme === 'data' && String(tagName || '').toLowerCase() === 'img' && IMAGE_DATA.test(text)) return '';
+  return scheme + ': URL';
+}
+
     var TREE_TAB_TYPE = 'dsh-linked-workspace';
     var REMOTE_TAB_TYPE = 'dsh-linked-workspace:remote';
+    // One tree page; a folder with 20k entries must not render 20k rows.
+    var TREE_PAGE_SIZE = 500;
     var linkedLocalKeys = new Set();
     var linkedWorkspaceKeys = new Set();
     var hasRemoteDirectories = false;
@@ -2006,6 +2110,12 @@ function fileIconSpec(name, isDir) {
       truncated: '内容已截断',
       fileLoadError: '无法打开文件',
       imageLoadError: '无法预览图片',
+      imageZoomIn: '放大',
+      imageZoomOut: '缩小',
+      imageFit: '适应窗口',
+      imageActualSize: '原始大小',
+      htmlLoadError: '无法预览网页',
+      htmlScriptsDisabled: '网页脚本已禁用',
       previewOnly: '图片预览',
       csvTable: '表格',
       csvSource: '源码',
@@ -2044,6 +2154,10 @@ function fileIconSpec(name, isDir) {
       latency: '延迟',
       countSuffix: ' 个',
       noEntries: '空目录',
+      loadMore: '加载更多（剩余 {{count}} 项）',
+      loadMoreShort: '加载更多',
+      sheetTruncated: '仅显示前 {{rows}} 行 × {{cols}} 列',
+      sheetMore: '工作表较多，仅显示前 20 个',
       noCredential: '缺少凭据',
       sourceManagerShort: 'SSH',
       remoteGroup: '远程目录',
@@ -2329,6 +2443,12 @@ function fileIconSpec(name, isDir) {
       truncated: 'Content truncated',
       fileLoadError: 'Cannot open the file',
       imageLoadError: 'Cannot preview this image',
+      imageZoomIn: 'Zoom in',
+      imageZoomOut: 'Zoom out',
+      imageFit: 'Fit to window',
+      imageActualSize: 'Actual size',
+      htmlLoadError: 'Cannot preview this page',
+      htmlScriptsDisabled: 'Page scripts are disabled',
       previewOnly: 'Image preview',
       csvTable: 'Table',
       csvSource: 'Source',
@@ -2367,6 +2487,10 @@ function fileIconSpec(name, isDir) {
       latency: 'Latency',
       countSuffix: '',
       noEntries: 'Empty directory',
+      loadMore: 'Load more ({{count}} left)',
+      loadMoreShort: 'Load more',
+      sheetTruncated: 'Showing the first {{rows}} rows × {{cols}} columns',
+      sheetMore: 'Showing the first 20 worksheets only',
       noCredential: 'No credentials',
       sourceManagerShort: 'SSH',
       remoteGroup: 'Remote directories',
@@ -2677,6 +2801,7 @@ function fileIconSpec(name, isDir) {
         FS_IS_DIR: '目标是目录',
         FS_NOT_DIR: '目标不是目录',
         FS_TOO_LARGE: '文件过大',
+        FS_EXISTS: '目标已存在，请使用其他名称',
         CONFLICT: '远端文件已被修改',
         BAD_REQUEST: '请求参数无效',
       },
@@ -2691,6 +2816,7 @@ function fileIconSpec(name, isDir) {
         FS_IS_DIR: 'That path is a directory',
         FS_NOT_DIR: 'That path is not a directory',
         FS_TOO_LARGE: 'The file is too large',
+        FS_EXISTS: 'The target already exists; choose another name',
         CONFLICT: 'The remote file changed',
         BAD_REQUEST: 'Invalid request',
       },
@@ -2713,6 +2839,7 @@ function fileIconSpec(name, isDir) {
       if (value === '.xlsx') return 'xlsx';
       if (value === '.pptx') return 'pptx';
       if (value === '.csv' || value === '.tsv') return 'csv';
+      if (value === '.html' || value === '.htm') return 'html';
       if (value === '.png' || value === '.jpg' || value === '.jpeg' || value === '.gif'
         || value === '.webp' || value === '.bmp' || value === '.ico' || value === '.avif'
         || value === '.svg') return 'image';
@@ -2770,7 +2897,7 @@ function fileIconSpec(name, isDir) {
         parsed.querySelectorAll('script,style,iframe,object,embed,link,meta,base,form').forEach(function (node) { node.remove(); });
         parsed.querySelectorAll('*').forEach(function (element) {
           Array.from(element.attributes).forEach(function (attribute) {
-            if (/^on/i.test(attribute.name) || /^javascript:/i.test(attribute.value) || /^data:text\/html/i.test(attribute.value)) {
+            if (urlAttributeViolation(attribute.name, attribute.value, element.tagName)) {
               element.removeAttribute(attribute.name);
             }
           });
@@ -3036,6 +3163,9 @@ function fileIconSpec(name, isDir) {
       '.rw-tree-body{padding:2px 4px 6px;border-top:1px solid var(--dsw-alias-border-l1)}',
       '.rw-row{display:flex;align-items:center;gap:5px;width:100%;min-width:0;height:23px;padding:0 6px;border:0;border-radius:5px;background:transparent;color:var(--dsw-alias-label-primary);font:inherit;font-size:12.5px;cursor:pointer;text-align:left;box-sizing:border-box}',
       '.rw-row:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(127,127,127,.12))}',
+      '.rw-row:focus-visible{outline:var(--dsw-focus-ring-width,2px) solid var(--dsw-focus-ring-color,var(--dsw-alias-brand-primary,#4176e6));outline-offset:-1px}',
+      '.rw-input:focus-visible,.rw-textarea:focus-visible{outline:var(--dsw-focus-ring-width,2px) solid var(--dsw-focus-ring-color,var(--dsw-alias-brand-primary,#4176e6));outline-offset:-1px}',
+      '.rw-btn:focus-visible,.rw-doc-tab:focus-visible,.rw-icon-btn:focus-visible{outline:var(--dsw-focus-ring-width,2px) solid var(--dsw-focus-ring-color,var(--dsw-alias-brand-primary,#4176e6));outline-offset:1px}',
       '.rw-row.is-active{background:color-mix(in srgb,var(--dsw-alias-brand-primary) 14%,transparent)}',
       '.rw-row-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto;min-width:0}',
       '.rw-row-size{flex:none;font-size:10.5px;color:var(--dsw-alias-label-tertiary);font-variant-numeric:tabular-nums}',
@@ -3163,6 +3293,10 @@ function fileIconSpec(name, isDir) {
       '.rw-doc-table td{border:1px solid var(--dsw-alias-border-l2);padding:0}',
       '.rw-doc-table input{width:100%;border:0;background:transparent;padding:4px 5px;font:inherit;color:var(--dsw-alias-label-primary);outline:none;box-sizing:border-box}',
       '.rw-doc-tabs{display:flex;gap:3px;padding:5px;border-bottom:1px solid var(--dsw-alias-border-l1);overflow:auto;flex:none}',
+      '.rw-doc-note{padding:3px 10px;font-size:11px;color:var(--dsw-alias-label-tertiary);border-bottom:1px solid var(--dsw-alias-border-l1)}',
+      '.rw-load-more{width:100%;border:0;background:transparent;cursor:pointer;text-align:left;font:inherit;font-size:11.5px;color:var(--dsw-alias-brand-primary)}',
+      '.rw-load-more:hover{text-decoration:underline}',
+      '.rw-load-more:disabled{opacity:.6;cursor:default}',
       '.rw-doc-tab{padding:2px 8px;border:1px solid transparent;border-radius:5px;background:transparent;color:var(--dsw-alias-label-secondary);font:inherit;font-size:11.5px;cursor:pointer;white-space:nowrap}',
       '.rw-doc-tab.is-on{background:var(--dsw-alias-bg-layer-2);border-color:var(--dsw-alias-border-l2);color:var(--dsw-alias-label-primary)}',
       '.rw-doc-grid{width:100%;border-collapse:collapse;font-size:11.5px}',
@@ -3213,8 +3347,14 @@ function fileIconSpec(name, isDir) {
       '.rw-image-preview{display:flex;flex-direction:column;height:100%;min-height:0;background:var(--dsw-alias-bg-base);color:var(--dsw-alias-label-primary)}',
       '.rw-image-head{display:flex;align-items:center;gap:8px;padding:6px 10px;border-bottom:1px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-1);min-width:0;flex:none}',
       '.rw-image-head .rw-actions{display:flex;align-items:center;gap:6px;flex:none}',
-      '.rw-image-stage{display:flex;align-items:center;justify-content:center;flex:1 1 auto;min-height:0;overflow:auto;padding:18px;background:repeating-conic-gradient(var(--dsw-alias-bg-layer-1) 0% 25%,var(--dsw-alias-bg-base) 0% 50%) 50%/18px 18px}',
-      '.rw-image{max-width:100%;max-height:100%;object-fit:contain;border-radius:4px;box-shadow:0 2px 16px rgba(0,0,0,.18)}',
+      '.rw-image-stage{display:block;flex:1 1 auto;min-height:0;overflow:auto;padding:18px;text-align:center;background:repeating-conic-gradient(var(--dsw-alias-bg-layer-1) 0% 25%,var(--dsw-alias-bg-base) 0% 50%) 50%/18px 18px}',
+      '.rw-image-canvas{display:inline-block;min-width:100%;min-height:100%;box-sizing:border-box}',
+      '.rw-image{display:inline-block;max-width:none;max-height:none;vertical-align:top;border-radius:4px;box-shadow:0 2px 16px rgba(0,0,0,.18)}',
+      '.rw-image-tools{display:flex;align-items:center;gap:4px;flex:none}',
+      '.rw-image-zoom{min-width:52px;text-align:center;font-variant-numeric:tabular-nums;color:var(--dsw-alias-label-secondary);font-size:12px}',
+      '.rw-html-preview{display:flex;flex-direction:column;height:100%;min-height:0;background:var(--dsw-alias-bg-base);color:var(--dsw-alias-label-primary)}',
+      '.rw-html-stage{flex:1 1 auto;min-height:0;background:#fff;position:relative}',
+      '.rw-html-frame{display:block;width:100%;height:100%;border:0;background:#fff}',
       '.rw-csv-wrap{flex:1 1 auto;min-height:0;overflow:auto;background:var(--dsw-alias-bg-base)}',
       '.rw-csv-table{border-collapse:collapse;font:12px/18px ui-monospace,"Cascadia Code",Consolas,monospace;min-width:100%}',
       '.rw-csv-table th{position:sticky;top:0;z-index:1;background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-tertiary);font-weight:600;text-align:left;padding:4px 8px;border:1px solid var(--dsw-alias-border-l1);white-space:nowrap}',
@@ -3866,13 +4006,38 @@ function fileIconSpec(name, isDir) {
       var state = useState({ loading: true, error: null, data: null });
       var view = state[0];
       var setView = state[1];
+      var naturalState = useState(null);
+      var natural = naturalState[0];
+      var setNatural = naturalState[1];
+      var zoomState = useState(1);
+      var zoom = zoomState[0];
+      var setZoom = zoomState[1];
+      var stageRef = useRef(null);
       var params = scopeParams(scope);
+      var MIN_ZOOM = 0.05;
+      var MAX_ZOOM = 8;
+
+      function clampZoom(value) {
+        return Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, value));
+      }
+
+      function zoomBy(factor) {
+        setZoom(function (previous) { return clampZoom(previous * factor); });
+      }
+
+      function fitToStage() {
+        if (!natural || !stageRef.current) return;
+        var width = Math.max(40, stageRef.current.clientWidth - 36);
+        var height = Math.max(40, stageRef.current.clientHeight - 36);
+        setZoom(clampZoom(Math.min(1, width / natural.width, height / natural.height)));
+      }
 
       var load = useCallback(function () {
         if (!filePath || (!local && !scope)) {
           setView({ loading: false, error: new Error(t('noWorkspace')), data: null });
           return;
         }
+        setNatural(null);
         setView({ loading: true, error: null, data: null });
         var request = local ? { path: filePath } : Object.assign({ path: filePath }, params);
         apiCall(local ? 'local.media' : 'media.read', request).then(function (result) {
@@ -3884,13 +4049,59 @@ function fileIconSpec(name, isDir) {
 
       useEffect(function () { load(); }, [load]);
 
+      useEffect(function () {
+        setZoom(1);
+        setNatural(null);
+      }, [filePath]);
+
+      useEffect(function () {
+        if (!natural || !stageRef.current) return;
+        var width = Math.max(40, stageRef.current.clientWidth - 36);
+        var height = Math.max(40, stageRef.current.clientHeight - 36);
+        setZoom(clampZoom(Math.min(1, width / natural.width, height / natural.height)));
+      }, [natural]);
+
+      useEffect(function () {
+        var stage = stageRef.current;
+        if (!stage) return;
+        function onWheel(event) {
+          if (!event.ctrlKey && !event.metaKey) return;
+          event.preventDefault();
+          setZoom(function (previous) {
+            return clampZoom(previous * (event.deltaY < 0 ? 1.2 : 1 / 1.2));
+          });
+        }
+        stage.addEventListener('wheel', onWheel, { passive: false });
+        return function () { stage.removeEventListener('wheel', onWheel); };
+      }, [view.data]);
+
       var name = basename(filePath) || t('fileTabTitle');
+      var zoomTools = view.data ? h('div', { className: 'rw-image-tools' },
+        h('button', {
+          type: 'button', className: 'rw-btn rw-btn-sm', title: t('imageZoomOut'),
+          onClick: function () { zoomBy(1 / 1.2); },
+        }, '−'),
+        h('span', { className: 'rw-image-zoom' }, Math.round(zoom * 100) + '%'),
+        h('button', {
+          type: 'button', className: 'rw-btn rw-btn-sm', title: t('imageZoomIn'),
+          onClick: function () { zoomBy(1.2); },
+        }, '+'),
+        h('button', {
+          type: 'button', className: 'rw-btn rw-btn-sm', title: t('imageFit'),
+          onClick: fitToStage,
+        }, t('imageFit')),
+        h('button', {
+          type: 'button', className: 'rw-btn rw-btn-sm', title: t('imageActualSize'),
+          onClick: function () { setZoom(1); },
+        }, '1:1')) : null;
+
       var header = h('div', { className: 'rw-image-head' },
         h(FileGlyph, { name: name, size: 15 }),
         h('div', { className: 'rw-editor-title' },
           h('span', { className: 'rw-editor-name', title: name }, name),
           h('span', { className: 'rw-editor-path', title: filePath }, filePath)),
         h('div', { className: 'rw-actions' },
+          zoomTools,
           h('button', { type: 'button', className: 'rw-btn rw-btn-sm', onClick: load, disabled: view.loading }, IconRefresh(12), t('reload'))));
 
       if (view.loading) {
@@ -3904,24 +4115,104 @@ function fileIconSpec(name, isDir) {
             h('button', { type: 'button', className: 'rw-btn', onClick: load }, IconRefresh(13), t('retry'))));
       }
       var data = view.data;
+      var imageStyle = natural
+        ? { width: natural.width * zoom + 'px', height: natural.height * zoom + 'px' }
+        : { maxWidth: '100%', maxHeight: '100%' };
       return h('div', { className: 'rw-image-preview' },
         header,
-        h('div', { className: 'rw-image-stage' },
-          h('img', {
-            className: 'rw-image',
-            src: 'data:' + data.mime + ';base64,' + data.base64,
-            alt: name,
-            onError: function () {
-              setView({ loading: false, error: new Error(t('imageLoadError')), data: null });
-            },
-          })),
+        h('div', { className: 'rw-image-stage', ref: stageRef },
+          h('div', { className: 'rw-image-canvas' },
+            h('img', {
+              className: 'rw-image',
+              src: 'data:' + data.mime + ';base64,' + data.base64,
+              alt: name,
+              style: imageStyle,
+              onLoad: function (event) {
+                var image = event.currentTarget;
+                if (image.naturalWidth && image.naturalHeight) {
+                  setNatural({ width: image.naturalWidth, height: image.naturalHeight });
+                }
+              },
+              onError: function () {
+                setView({ loading: false, error: new Error(t('imageLoadError')), data: null });
+              },
+            }))),
         h('div', { className: 'rw-editor-status' },
           h('span', { className: 'rw-status-chip' }, data.mime || 'image'),
           h('span', { className: 'rw-status-chip' }, formatBytes(data.size || 0)),
+          h('span', { className: 'rw-status-chip' }, Math.round(zoom * 100) + '%'),
           h('span', { className: 'rw-fill', style: { flex: '1 1 auto' } }),
           h('span', { className: 'rw-status-chip' }, t('previewOnly'))));
     }
 
+    function HtmlPreview(props) {
+      var ctx = props.ctx;
+      var t = props.t;
+      var locale = props.locale;
+      var scope = props.scope;
+      var local = props.local === true;
+      var filePath = props.path;
+      var state = useState({ loading: true, error: null, data: null });
+      var view = state[0];
+      var setView = state[1];
+      var params = scopeParams(scope);
+
+      var load = useCallback(function () {
+        if (!filePath || (!local && !scope)) {
+          setView({ loading: false, error: new Error(t('noWorkspace')), data: null });
+          return;
+        }
+        setView({ loading: true, error: null, data: null });
+        var request = local ? { path: filePath } : Object.assign({ path: filePath }, params);
+        apiCall(local ? 'local.read' : 'fs.read', request).then(function (result) {
+          if (result.binary || result.tooLarge) {
+            setView({ loading: false, error: new Error(t('htmlLoadError')), data: null });
+            return;
+          }
+          setView({ loading: false, error: null, data: result });
+        }).catch(function (error) {
+          setView({ loading: false, error: error, data: null });
+        });
+      }, [scopeKeyOf(scope), filePath, local]);
+
+      useEffect(function () { load(); }, [load]);
+
+      var name = basename(filePath) || t('fileTabTitle');
+      var header = h('div', { className: 'rw-image-head' },
+        h(FileGlyph, { name: name, size: 15 }),
+        h('div', { className: 'rw-editor-title' },
+          h('span', { className: 'rw-editor-name', title: name }, name),
+          h('span', { className: 'rw-editor-path', title: filePath }, filePath)),
+        h('div', { className: 'rw-actions' },
+          h('button', { type: 'button', className: 'rw-btn rw-btn-sm', onClick: load, disabled: view.loading }, IconRefresh(12), t('reload'))));
+
+      if (view.loading) {
+        return h('div', { className: 'rw-html-preview' }, header,
+          h('div', { className: 'rw-editor-message' }, Spinner(14), t('loading')));
+      }
+      if (view.error) {
+        return h('div', { className: 'rw-html-preview' }, header,
+          h('div', { className: 'rw-editor-message' },
+            h(Banner, { kind: 'error' }, t('htmlLoadError') + '：' + messageOf(view.error, t, locale)),
+            h('button', { type: 'button', className: 'rw-btn', onClick: load }, IconRefresh(13), t('retry'))));
+      }
+      var data = view.data;
+      return h('div', { className: 'rw-html-preview' },
+        header,
+        h('div', { className: 'rw-html-stage' },
+          h('iframe', {
+            className: 'rw-html-frame',
+            title: name,
+            sandbox: '',
+            srcDoc: data.content || '',
+          })),
+        h('div', { className: 'rw-editor-status' },
+          h('span', { className: 'rw-status-chip' }, 'HTML'),
+          h('span', { className: 'rw-status-chip' }, formatBytes(data.size || 0)),
+          h('span', { className: 'rw-fill', style: { flex: '1 1 auto' } }),
+          h('span', { className: 'rw-status-chip' }, t('htmlScriptsDisabled'))));
+    }
+
     // ── editor ─────────────────────────────────────────────────────────────
 
     function colorForToken(colors, type) {
@@ -4337,6 +4628,19 @@ function fileIconSpec(name, isDir) {
         });
       }
 
+      function listRequest(path, offset) {
+        var params = { path: path, limit: TREE_PAGE_SIZE, offset: offset };
+        return props.kind === 'local'
+          ? apiCall('local.list', params)
+          : apiCall('fs.list', Object.assign(params, scopeParams(props.scope)));
+      }
+
+      function applyEntries(list) {
+        return props.showHidden ? list : list.filter(function (entry) {
+          return String(entry.name || '').charAt(0) !== '.';
+        });
+      }
+
       function load(path, silent) {
         if (pending.current.has(path)) return;
         pending.current.add(path);
@@ -4346,18 +4650,18 @@ function fileIconSpec(name, isDir) {
           entries.set(path, { loading: !silent, error: null, entries: existing.entries || [], loaded: existing.loaded });
           return { entries: entries };
         });
-        var request = props.kind === 'local'
-          ? apiCall('local.list', { path: path })
-          : apiCall('fs.list', Object.assign({ path: path }, scopeParams(props.scope)));
-        request.then(function (result) {
+        listRequest(path, 0).then(function (result) {
           pending.current.delete(path);
-          var entries = result.entries || [];
-          if (!props.showHidden) {
-            entries = entries.filter(function (entry) { return String(entry.name || '').charAt(0) !== '.'; });
-          }
           setCache(function (previous) {
             var next = new Map(previous.entries);
-            next.set(path, { loading: false, error: null, loaded: true, entries: entries });
+            next.set(path, {
+              loading: false,
+              error: null,
+              loaded: true,
+              entries: applyEntries(result.entries || []),
+              total: Number(result.total) || (result.entries || []).length,
+              hasMore: Boolean(result.hasMore),
+            });
             return { entries: next };
           });
           setExpanded(function (previous) {
@@ -4375,7 +4679,39 @@ function fileIconSpec(name, isDir) {
         });
       }
 
-      return h(TreeDirectory, {
+      function loadMore(path) {
+        var record = cache.entries.get(path);
+        if (!record || record.loadingMore || !record.hasMore) return;
+        setCache(function (previous) {
+          var next = new Map(previous.entries);
+          var current = next.get(path);
+          if (current) next.set(path, Object.assign({}, current, { loadingMore: true }));
+          return { entries: next };
+        });
+        listRequest(path, (record.entries || []).length).then(function (result) {
+          setCache(function (previous) {
+            var next = new Map(previous.entries);
+            var current = next.get(path) || { entries: [] };
+            next.set(path, Object.assign({}, current, {
+              loadingMore: false,
+              loaded: true,
+              entries: current.entries.concat(applyEntries(result.entries || [])),
+              total: Number(result.total) || current.total,
+              hasMore: Boolean(result.hasMore),
+            }));
+            return { entries: next };
+          });
+        }).catch(function (error) {
+          setCache(function (previous) {
+            var next = new Map(previous.entries);
+            var current = next.get(path);
+            if (current) next.set(path, Object.assign({}, current, { loadingMore: false, moreError: error }));
+            return { entries: next };
+          });
+        });
+      }
+
+      return h('div', { className: 'rw-tree', role: 'tree', 'aria-label': t('allFiles') }, h(TreeDirectory, {
         path: rootPath,
         name: props.rootName || t('allFiles'),
         depth: 0,
@@ -4386,12 +4722,13 @@ function fileIconSpec(name, isDir) {
         toggle: toggle,
         state: { entries: cache.entries },
         load: load,
+        loadMore: loadMore,
         onSelect: props.onSelect,
         onPin: props.onPin,
         onSelectPath: props.onSelectPath,
         onContextMenu: props.onContextMenu,
         selectedPath: props.selectedPath || '',
-      });
+      }));
     }
 
     function TreeSection(props) {
@@ -4713,20 +5050,46 @@ function fileIconSpec(name, isDir) {
       var state = useState(props.value || '');
       var value = state[0];
       var setValue = state[1];
-      function submit() { if (value.trim() !== '') props.onSubmit(value.trim()); }
-      return h(DialogShell, { title: props.title, onClose: props.onClose },
+      var statusState = useState({ busy: false, error: '' });
+      var status = statusState[0];
+      var setStatus = statusState[1];
+      var pendingRef = useRef(false);
+      var mountedRef = useRef(true);
+      useEffect(function () {
+        mountedRef.current = true;
+        return function () { mountedRef.current = false; };
+      }, []);
+      function close() { if (!pendingRef.current) props.onClose(); }
+      function submit() {
+        if (value.trim() === '' || pendingRef.current) return;
+        pendingRef.current = true;
+        setStatus({ busy: true, error: '' });
+        Promise.resolve().then(function () { return props.onSubmit(value.trim()); }).then(function () {
+          pendingRef.current = false;
+          if (mountedRef.current) setStatus({ busy: false, error: '' });
+        }).catch(function (error) {
+          pendingRef.current = false;
+          if (mountedRef.current) setStatus({ busy: false, error: messageOf(error, props.t, props.locale) });
+        });
+      }
+      return h(DialogShell, { title: props.title, onClose: close },
         h('label', { className: 'rw-dialog-label' }, props.label),
         h('input', {
           className: 'rw-dialog-input',
           value: value,
+          disabled: status.busy,
           autoFocus: true,
           spellCheck: false,
           onChange: function (event) { setValue(event.currentTarget.value); },
-          onKeyDown: function (event) { if (event.key === 'Enter') submit(); },
+          onKeyDown: function (event) {
+            if (event.key === 'Enter' && (!event.nativeEvent || !event.nativeEvent.isComposing)) { event.preventDefault(); submit(); }
+            else if (event.key === 'Escape') close();
+          },
         }),
+        status.error ? h(Banner, { kind: 'error' }, status.error) : null,
         h('div', { className: 'rw-dialog-actions' },
-          h('button', { type: 'button', className: 'rw-btn rw-btn-sm', onClick: props.onClose }, props.t('cancel')),
-          h('button', { type: 'button', className: 'rw-btn rw-btn-sm rw-btn-primary', onClick: submit }, props.t('confirm'))));
+          h('button', { type: 'button', className: 'rw-btn rw-btn-sm', disabled: status.busy, onClick: close }, props.t('cancel')),
+          h('button', { type: 'button', className: 'rw-btn rw-btn-sm rw-btn-primary', disabled: status.busy || value.trim() === '', onClick: submit }, props.t(status.busy ? 'loading' : 'confirm'))));
     }
 
     function ConfirmDialog(props) {
@@ -5055,6 +5418,12 @@ function fileIconSpec(name, isDir) {
           h('div', { className: 'rw-doc-tabs' }, sheets.map(function (sheet, index) {
             return h('button', { key: sheet.name, type: 'button', className: 'rw-doc-tab' + (index === state.sheet ? ' is-on' : ''), onClick: function () { patch({ sheet: index }); } }, sheet.name);
           })),
+          active.truncated
+            ? h('div', { className: 'rw-doc-note' }, t('sheetTruncated', { rows: active.maxRow || 0, cols: active.maxCol || 0 }))
+            : null,
+          (state.data.sheetCount || sheets.length) > sheets.length
+            ? h('div', { className: 'rw-doc-note' }, t('sheetMore'))
+            : null,
           h('div', { style: { flex: '1 1 auto', overflow: 'auto', padding: 8 } },
             h('table', { className: 'rw-doc-grid' },
               h('thead', null, header),
@@ -5644,27 +6013,13 @@ function fileIconSpec(name, isDir) {
       }
 
       function submitNew(side, dirPath, name, isDir) {
-        var target = joinChildPath(dirPath, name, side);
-        var docKind = documentKindOf(name);
-        var promise;
-        if (isDir) {
-          promise = side === 'remote'
-            ? apiCall('fs.mkdir', Object.assign({ path: target }, scopeParams(scopeRef)))
-            : apiCall('local.mkdir', { path: dirPath, name: name });
-        } else if (docKind) {
-          promise = side === 'remote'
-            ? apiCall('docs.create', Object.assign({ path: target, kind: docKind }, scopeParams(scopeRef)))
-            : apiCall('docs.create', { path: target, kind: docKind });
-        } else {
-          promise = side === 'remote'
-            ? apiCall('fs.write', Object.assign({ path: target, content: '' }, scopeParams(scopeRef)))
-            : apiCall('local.newFile', { path: target });
-        }
-        promise.then(function () {
+        var request = newEntryRequest(side, dirPath, name, isDir, scopeParams(scopeRef));
+        return apiCall(request.method, request.params).then(function () {
+          setDialog(null);
           showNotice('success', t('newDone'));
           refreshTree();
-          if (!isDir && docKind) openInternalFile(side, target);
-        }).catch(noticeError);
+          if (!isDir && request.kind) openInternalFile(side, request.path);
+        });
       }
 
       function submitChmod(side, targetPath, mode) {
@@ -5679,9 +6034,9 @@ function fileIconSpec(name, isDir) {
       }
 
       function submitDialog(current, value) {
+        if (current.kind === 'new') return submitNew(current.side, current.dir, value, current.isDir);
         setDialog(null);
         if (current.kind === 'rename') submitRenamed(current.side, current.path, value);
-        else if (current.kind === 'new') submitNew(current.side, current.dir, value, current.isDir);
         else if (current.kind === 'chmod') submitChmod(current.side, current.path, value);
       }
 
@@ -5741,14 +6096,8 @@ function fileIconSpec(name, isDir) {
           setDialog({ kind: 'chmod', side: menu.side, path: menu.path, title: t('chmodTitle'), label: t('chmodLabel'), value: '644' });
         } });
         if (menu.isDir) {
-          items.push({ label: t('ctxNew'), sub: [
-            { label: t('ctxNewFolder'), onSelect: function () {
-              setDialog({ kind: 'new', side: menu.side, dir: menu.path, isDir: true, title: t('newFolderTitle'), label: t('nameLabel'), value: t('newFolderTitle') });
-            } },
-            { label: t('ctxNewFile'), onSelect: function () {
-              setDialog({ kind: 'new', side: menu.side, dir: menu.path, isDir: false, title: t('newFileTitle'), label: t('nameLabel'), value: t('newFileTitle') });
-            } },
-          ] });
+          items.push({ separator: true });
+          items = items.concat(newEntryMenuItems(menu, t, setDialog));
         }
         items.push({ separator: true });
         items.push({ label: t('ctxProperties'), onSelect: function () { showProperties(menu.side, menu.path); } });
@@ -5809,11 +6158,12 @@ function fileIconSpec(name, isDir) {
         }
         return h(PromptDialog, {
           t: t,
+          locale: locale,
           title: dialog.title,
           label: dialog.label,
           value: dialog.value,
           onClose: function () { setDialog(null); },
-          onSubmit: function (value) { submitDialog(dialog, value); },
+          onSubmit: function (value) { return submitDialog(dialog, value); },
         });
       }
 
@@ -5959,6 +6309,13 @@ function fileIconSpec(name, isDir) {
             path: activeFile.path,
             local: activeFile.side === 'local',
           })
+          : activeDocKind === 'html'
+          ? h(HtmlPreview, {
+            ctx: ctx, t: t, locale: locale,
+            scope: activeFile.side === 'remote' ? sourceScopeOf(selected) : undefined,
+            path: activeFile.path,
+            local: activeFile.side === 'local',
+          })
           : activeDocKind && activeDocKind !== 'csv'
           ? h(DocumentPane, {
             ctx: ctx, t: t, locale: locale,
@@ -6171,6 +6528,7 @@ function fileIconSpec(name, isDir) {
                 toggle: toggle,
                 state: state,
                 load: props.load,
+                loadMore: props.loadMore,
                 onSelect: onSelect,
                 onPin: onPin,
                 onSelectPath: onSelectPath,
@@ -6182,6 +6540,9 @@ function fileIconSpec(name, isDir) {
               children.push(h('button', {
                 key: child.path,
                 type: 'button',
+                role: 'treeitem',
+                'aria-level': depth + 1,
+                'aria-selected': active,
                 className: 'rw-row' + (active ? ' is-active' : ''),
                 style: { paddingLeft: 6 + (depth + 1) * 12 },
                 title: child.path,
@@ -6203,12 +6564,28 @@ function fileIconSpec(name, isDir) {
                 h('span', { className: 'rw-row-size' }, formatBytes(child.size))));
             }
           });
+          if (entry.hasMore) {
+            children.push(h('button', {
+              key: 'more',
+              type: 'button',
+              className: 'rw-row-msg rw-load-more',
+              style: { paddingLeft: 6 + (depth + 1) * 12 },
+              disabled: Boolean(entry.loadingMore),
+              onClick: function () { if (props.loadMore) props.loadMore(path); },
+            }, entry.loadingMore ? Spinner(12) : null,
+            entry.moreError
+              ? messageOf(entry.moreError, t, locale)
+              : t('loadMore', { count: Math.max((entry.total || 0) - entry.entries.length, 0) })));
+          }
         }
       }
 
       return h(React.Fragment, null,
         h('button', {
           type: 'button',
+          role: 'treeitem',
+          'aria-level': depth + 1,
+          'aria-expanded': isOpen,
           className: 'rw-row' + (selectedPath === path ? ' is-active' : ''),
           style: { paddingLeft: 6 + depth * 12 },
           title: path,
@@ -6216,13 +6593,16 @@ function fileIconSpec(name, isDir) {
             if (onSelectPath) onSelectPath({ path: path, name: name, isDir: true });
             if (event.detail !== 2) toggle(path);
           },
+          onKeyDown: function (event) {
+            if (event.key === 'ArrowRight' && !isOpen) { event.preventDefault(); toggle(path); }
+            else if (event.key === 'ArrowLeft' && isOpen) { event.preventDefault(); toggle(path); }
+          },
           onContextMenu: function (event) {
             if (!onContextMenu) return;
             event.preventDefault();
             event.stopPropagation();
             onContextMenu({ path: path, name: name, isDir: true, event: event });
           },
-          'aria-expanded': isOpen,
         },
           h('span', { className: 'rw-chevron' + (isOpen ? ' is-open' : '') }, IconChevron(12)),
           h(FileGlyph, { name: name, dir: true, open: isOpen, size: 13 }),
@@ -6253,6 +6633,11 @@ function fileIconSpec(name, isDir) {
         });
       }
 
+      function listRequest(path, offset) {
+        return Object.assign({ path: path, limit: TREE_PAGE_SIZE, offset: offset },
+          source.kind === 'linked' ? { linkedId: source.id } : { workspaceId: source.id });
+      }
+
       function load(path) {
         setCache(function (previous) {
           var record = previous.entries.get(path);
@@ -6262,13 +6647,17 @@ function fileIconSpec(name, isDir) {
           entries.set(path, { loading: true, error: null, entries: existing.entries || [], loaded: existing.loaded });
           return { entries: entries };
         });
-        var request = source.kind === 'linked'
-          ? { linkedId: source.id, path: path }
-          : { workspaceId: source.id, path: path };
-        apiCall('fs.list', request).then(function (result) {
+        apiCall('fs.list', listRequest(path, 0)).then(function (result) {
           setCache(function (previous) {
             var entries = new Map(previous.entries);
-            entries.set(path, { loading: false, error: null, loaded: true, entries: result.entries || [] });
+            entries.set(path, {
+              loading: false,
+              error: null,
+              loaded: true,
+              entries: result.entries || [],
+              total: Number(result.total) || (result.entries || []).length,
+              hasMore: Boolean(result.hasMore),
+            });
             return { entries: entries };
           });
           setExpanded(function (previous) {
@@ -6285,6 +6674,38 @@ function fileIconSpec(name, isDir) {
         });
       }
 
+      function loadMore(path) {
+        var record = cache.entries.get(path);
+        if (!record || record.loadingMore || !record.hasMore) return;
+        setCache(function (previous) {
+          var entries = new Map(previous.entries);
+          var current = entries.get(path);
+          if (current) entries.set(path, Object.assign({}, current, { loadingMore: true }));
+          return { entries: entries };
+        });
+        apiCall('fs.list', listRequest(path, (record.entries || []).length)).then(function (result) {
+          setCache(function (previous) {
+            var entries = new Map(previous.entries);
+            var current = entries.get(path) || { entries: [] };
+            entries.set(path, Object.assign({}, current, {
+              loadingMore: false,
+              loaded: true,
+              entries: current.entries.concat(result.entries || []),
+              total: Number(result.total) || current.total,
+              hasMore: Boolean(result.hasMore),
+            }));
+            return { entries: entries };
+          });
+        }).catch(function (error) {
+          setCache(function (previous) {
+            var entries = new Map(previous.entries);
+            var current = entries.get(path);
+            if (current) entries.set(path, Object.assign({}, current, { loadingMore: false, moreError: error }));
+            return { entries: entries };
+          });
+        });
+      }
+
       useEffect(function () {
         if (!open) return;
         var root = source.remotePath;
@@ -6313,7 +6734,7 @@ function fileIconSpec(name, isDir) {
             h('span', { className: 'rw-tree-ws-sub' }, source.username + '@' + source.host + (source.kind === 'linked' ? ' · ' + t('linkedChip') : ''))),
           h(StatusPill, { status: source.status, t: t })),
         open
-          ? h('div', { className: 'rw-tree-body' },
+          ? h('div', { className: 'rw-tree-body', role: 'tree', 'aria-label': source.name },
             h(TreeDirectory, {
               path: source.remotePath,
               name: '/',
@@ -6325,6 +6746,7 @@ function fileIconSpec(name, isDir) {
               toggle: toggle,
               state: { entries: cache.entries },
               load: load,
+              loadMore: loadMore,
               onSelect: props.onSelect,
               selectedPath: props.selectedPath,
             }))
@@ -6601,10 +7023,58 @@ function fileIconSpec(name, isDir) {
         });
       }
 
+      var modalRef = useRef(null);
+      var focusablesOf = function () {
+        var node = modalRef.current;
+        if (!node) return [];
+        return Array.prototype.filter.call(
+          node.querySelectorAll('button, input, select, textarea, a[href], [tabindex]:not([tabindex="-1"])'),
+          function (element) { return !element.disabled && element.offsetParent !== null; });
+      };
+
+      useEffect(function () {
+        if (!props.open) return;
+        var node = modalRef.current;
+        if (!node) return;
+        // Focus the first real field, not the tab strip, so typing works at once.
+        var target = node.querySelector('.rw-modal-body input, .rw-modal-body textarea') || focusablesOf()[0];
+        if (target && typeof target.focus === 'function') target.focus();
+      }, [props.open, flow]);
+
+      function onModalKeyDown(event) {
+        if (event.key === 'Escape') {
+          event.preventDefault();
+          event.stopPropagation();
+          if (props.onCancel) props.onCancel();
+          return;
+        }
+        if (event.key !== 'Tab') return;
+        // Keep Tab inside the dialog: without this the focus escapes to the
+        // page behind the backdrop.
+        var focusables = focusablesOf();
+        if (focusables.length === 0) return;
+        var first = focusables[0];
+        var last = focusables[focusables.length - 1];
+        if (event.shiftKey && document.activeElement === first) {
+          event.preventDefault();
+          last.focus();
+        } else if (!event.shiftKey && document.activeElement === last) {
+          event.preventDefault();
+          first.focus();
+        }
+      }
+
       if (!props.open) return null;
 
       return h('div', { className: 'rw-modal-backdrop', role: 'presentation' },
-        h('div', { className: 'rw-modal', role: 'dialog', 'aria-modal': 'true', 'aria-label': t('flowTitle') },
+        h('div', {
+          ref: modalRef,
+          className: 'rw-modal',
+          role: 'dialog',
+          'aria-modal': 'true',
+          'aria-label': t('flowTitle'),
+          onKeyDown: onModalKeyDown,
+        },
           h('div', { className: 'rw-modal-head' },
             h('span', { className: 'rw-icon-chip' }, IconLink(16)),
             h('span', { className: 'rw-modal-title' }, t('flowTitle')),