mnote/rust/crates/mnote-web/src/ssr/pages/layout.rs

//! MNOTE 通用页面布局组件（Wolai / Notion 风格）

use leptos::prelude::*;

const SIDEBAR_TREE_JS: &str = r##"
(function(){
  if (window.__mnoteSidebarTreeRuntimeStarted) return;
  window.__mnoteSidebarTreeRuntimeStarted = true;

  var PAGE_DRAG_MIME = 'application/x-mnote-page-tree-node';
  var FILETREE_DRAG_MIME = 'application/x-mnote-filetree-row-ids';
  var MNOTE_SIDEBAR_TREE_MODE_KEY = 'mnote.sidebar.tree.mode';
  var mnoteNavigationInFlight = '';
  var draggingPageNodeId = '';
  var activePageDropRow = null;
  var draggingFileTreeRowIds = [];
  var activeFileTreeDropRow = null;
  var projectionRefreshTimer = 0;
  var activeTreeContextMenu = null;

  function closestAction(target, selector) {
    return target && typeof target.closest === 'function' ? target.closest(selector) : null;
  }

  function escapeHtml(value) {
    return String(value == null ? '' : value)
      .replace(/&/g, '&')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#39;');
  }

  function cssEscape(value) {
    if (window.CSS && typeof window.CSS.escape === 'function') return window.CSS.escape(value);
    return String(value).replace(/["\\]/g, '\\$&');
  }

  function currentDocumentId() {
    var match = window.location.pathname.match(/^\/documents\/([^\/]+)/);
    return match ? decodeURIComponent(match[1]) : '';
  }

  function normalizeSidebarTreeMode(value) {
    var mode = String(value || '').trim();
    return mode === 'filetree' ? 'filetree' : 'page';
  }

  function readStoredSidebarTreeMode() {
    var params = new URLSearchParams(window.location.search);
    var fromUrl = normalizeSidebarTreeMode(params.get('treeView') || params.get('sidebarTree'));
    if (params.has('treeView') || params.has('sidebarTree')) return fromUrl;
    try {
      var stored = window.sessionStorage ? window.sessionStorage.getItem(MNOTE_SIDEBAR_TREE_MODE_KEY) : '';
      return normalizeSidebarTreeMode(stored);
    } catch (_) {
      return 'page';
    }
  }

  function persistSidebarTreeMode(mode) {
    var normalized = normalizeSidebarTreeMode(mode);
    document.documentElement.setAttribute('data-mnote-sidebar-tree-mode', normalized);
    try {
      if (window.sessionStorage) window.sessionStorage.setItem(MNOTE_SIDEBAR_TREE_MODE_KEY, normalized);
    } catch (_) {}
    return normalized;
  }

  function activeSidebarTreeMode() {
    var active = document.querySelector('[data-mnote-sidebar-tree-tab][aria-selected="true"]');
    if (active instanceof HTMLElement) {
      return normalizeSidebarTreeMode(active.getAttribute('data-mnote-sidebar-tree-tab'));
    }
    return readStoredSidebarTreeMode();
  }

  function resolveWorkspaceId(trigger) {
    var direct = (trigger.getAttribute('data-workspace-id') || '').trim();
    if (direct) return direct;
    var root = trigger.closest('[data-workspace-id]');
    if (root) {
      var value = (root.getAttribute('data-workspace-id') || '').trim();
      if (value) return value;
    }
    return (new URLSearchParams(window.location.search).get('workspaceId') || 'default').trim() || 'default';
  }

  function setCommandPending(trigger, pending) {
    if (!(trigger instanceof HTMLElement)) return;
    trigger.setAttribute('data-pending', pending ? 'true' : 'false');
    if ('disabled' in trigger) {
      if (pending) trigger.setAttribute('disabled', 'disabled');
      else trigger.removeAttribute('disabled');
    }
  }

  async function dispatchTreeCommand(trigger, body) {
    setCommandPending(trigger, true);
    try {
      var response = await fetch('/api/tree/commands', {
        method: 'POST',
        headers: { 'content-type': 'application/json' },
        body: JSON.stringify(body)
      });
      var payload = await response.json().catch(function(){ return null; });
      if (!response.ok || !payload || !payload.result) {
        throw new Error((payload && payload.message) || 'tree_command_failed_' + response.status);
      }
      window.dispatchEvent(new CustomEvent('tree:local-command', { detail: { body: body, result: payload.result } }));
      return payload.result;
    } catch (error) {
      setCommandPending(trigger, false);
      if (trigger instanceof HTMLElement) {
        trigger.setAttribute('data-error', error instanceof Error ? error.message : String(error));
      }
      throw error;
    }
  }

  function navigateToDocument(nodeId, workspaceId, options) {
    if (!nodeId) return;
    var treeView = normalizeSidebarTreeMode(options && options.treeView ? options.treeView : activeSidebarTreeMode());
    persistSidebarTreeMode(treeView);
    if (currentDocumentId() === nodeId && window.location.pathname.indexOf('/documents/') === 0) {
      document.querySelectorAll('.tree-row[data-active="true"], .tree-row[data-selected="true"]').forEach(function(row) {
        if (row instanceof HTMLElement) {
          row.setAttribute('data-active', 'false');
          row.setAttribute('data-selected', 'false');
        }
      });
      document.querySelectorAll('.tree-row[data-node-id="' + cssEscape(nodeId) + '"], .tree-row[data-document-id="' + cssEscape(nodeId) + '"], .tree-row[data-doc-id="' + cssEscape(nodeId) + '"]').forEach(function(row) {
        if (row instanceof HTMLElement) {
          if (row.getAttribute('data-shell-mode') === 'filetree') row.setAttribute('data-selected', 'true');
          else row.setAttribute('data-active', 'true');
        }
      });
      return;
    }
    var targetUrl = new URL('/documents/' + encodeURIComponent(nodeId), window.location.origin);
    if (workspaceId) targetUrl.searchParams.set('workspaceId', workspaceId);
    if (treeView === 'filetree') targetUrl.searchParams.set('treeView', 'filetree');
    var url = targetUrl.pathname + targetUrl.search;
    if (mnoteNavigationInFlight === url) return;
    mnoteNavigationInFlight = url;
    document.documentElement.setAttribute('data-mnote-navigation-pending', 'true');
    document.documentElement.setAttribute('data-mnote-navigation-target', nodeId);
    if (window.__mnoteTreeLiveEventSource && typeof window.__mnoteTreeLiveEventSource.close === 'function') {
      window.__mnoteTreeLiveEventSource.close();
    }
    window.location.assign(url);
  }

  async function createPage(trigger, parentId) {
    var workspaceId = resolveWorkspaceId(trigger);
    var effectiveParentId = (parentId || trigger.getAttribute('data-parent-id') || '').trim();
    if (!workspaceId) return;
    var result = await dispatchTreeCommand(trigger, {
      action: 'create',
      workspaceId: workspaceId,
      parentId: effectiveParentId || null,
      title: '新页面'
    });
    var nextWorkspaceId = result.workspaceId || workspaceId;
    navigateToDocument(result.documentId, nextWorkspaceId, { treeView: activeSidebarTreeMode() });
  }

  function applySidebarTreeTab(mode, shell) {
    mode = persistSidebarTreeMode(mode);
    shell = shell || document.querySelector('[data-testid="wolai-sidebar-page-tree-shell"]');
    if (!shell) return;
    var tabs = shell.querySelectorAll('[data-mnote-sidebar-tree-tab]');
    for (var i = 0; i < tabs.length; i++) {
      var isActive = tabs[i].getAttribute('data-mnote-sidebar-tree-tab') === mode;
      tabs[i].setAttribute('aria-selected', isActive ? 'true' : 'false');
      tabs[i].classList.toggle('wolai-sidebar-tab-active', isActive);
      tabs[i].classList.toggle('wolai-sidebar-tab-muted', !isActive);
    }
    var panels = shell.querySelectorAll('[data-mnote-sidebar-tree-panel]');
    for (var j = 0; j < panels.length; j++) {
      var isCurrentPanel = panels[j].getAttribute('data-mnote-sidebar-tree-panel') === mode;
      panels[j].hidden = !isCurrentPanel;
    }
  }

  function switchSidebarTreeTab(trigger) {
    var mode = trigger ? trigger.getAttribute('data-mnote-sidebar-tree-tab') : 'page';
    applySidebarTreeTab(mode, trigger ? trigger.closest('[data-testid="wolai-sidebar-page-tree-shell"]') : null);
  }

  function restoreSidebarTreeTab() {
    applySidebarTreeTab(readStoredSidebarTreeMode(), null);
  }

  function updateTitleEverywhere(documentId, title) {
    if (!documentId) return;
    var escaped = cssEscape(documentId);
    var selectors = [
      '.tree-row[data-node-id="' + escaped + '"] > .tree-link > .tree-link-title',
      '.tree-row[data-document-id="' + escaped + '"] > .tree-link > .tree-link-title',
      '.tree-row[data-doc-id="' + escaped + '"] > .tree-link > .tree-link-title',
      '.wolai-page-row[data-node-id="' + escaped + '"] > .wolai-row-title',
      'a[href="/documents/' + escaped + '"] > .wolai-row-title',
      'a[href^="/documents/' + escaped + '?"] > .wolai-row-title'
    ];
    selectors.forEach(function(selector) {
      document.querySelectorAll(selector).forEach(function(node) {
        if (node instanceof HTMLElement) node.textContent = title;
      });
    });
  }

  function readProjection(value) {
    if (!value || typeof value !== 'object') return null;
    if (value.result && typeof value.result === 'object') return value.result;
    if (value.snapshot && value.snapshot.tree) return value.snapshot.tree;
    if (value.data && value.data.tree) return value.data.tree;
    if (value.tree && typeof value.tree === 'object') return value.tree;
    return value;
  }

  function projectionItems(projection) {
    var resolved = readProjection(projection);
    return resolved && Array.isArray(resolved.items) ? resolved.items : [];
  }

  function nodeIdOf(item) {
    return String(item && (item.nodeId || item.id || item.documentId) || '').trim();
  }

  function rowIdOf(item) {
    return String(item && (item.rowId || item.nodeId || item.id) || '').trim();
  }

  function parentIdOf(item) {
    return String(item && (item.parentNodeId || item.parentId || '') || '').trim();
  }

  function titleOf(item) {
    return String(item && item.title || '无标题').trim() || '无标题';
  }

  function groupRowsByParent(rows) {
    var ids = new Set(rows.map(nodeIdOf).filter(Boolean));
    var grouped = new Map();
    rows.forEach(function(item) {
      var parentId = parentIdOf(item);
      if (!ids.has(parentId)) parentId = '';
      if (!grouped.has(parentId)) grouped.set(parentId, []);
      grouped.get(parentId).push(item);
    });
    return grouped;
  }

  function renderPageRows(parentId, grouped, activeId) {
    return (grouped.get(parentId) || []).map(function(item) {
      var nodeId = nodeIdOf(item);
      var title = titleOf(item);
      var depth = Number(item.depth || 0);
      var parent = parentIdOf(item);
      var children = grouped.get(nodeId) || [];
      var expandable = Boolean(item.expandable || item.childCount > 0 || children.length);
      var expanded = expandable && item.expandedByDefault !== false;
      var toggle = expandable
        ? '<button type="button" class="tree-toggle" data-testid="tree-node-toggle" data-rust-action="toggle" data-node-id="' + escapeHtml(nodeId) + '" aria-label="' + (expanded ? '折叠 ' : '展开 ') + escapeHtml(title) + '">' + (expanded ? '▾' : '▸') + '</button>'
        : '<span class="tree-spacer" aria-hidden="true"></span>';
      var childHtml = expandable && expanded
        ? '<ul class="tree-children">' + renderPageRows(nodeId, grouped, activeId) + '</ul>'
        : '';
      return '<li class="tree-node" data-node-id="' + escapeHtml(nodeId) + '"><div class="tree-row" role="treeitem" aria-level="' + (depth + 1) + '" aria-expanded="' + String(expandable && expanded) + '" data-rust-rendered-row="page" data-testid="wolai-sidebar-row" data-tree-testid="tree-node-open" data-node-id="' + escapeHtml(nodeId) + '"' + (parent ? ' data-parent-id="' + escapeHtml(parent) + '"' : '') + ' data-depth="' + depth + '" data-shell-mode="page" data-active="' + String(nodeId === activeId) + '" data-focused="false" data-draggable="true" draggable="true" tabindex="-1">' + toggle + '<span class="tree-kind-badge" data-kind="page" aria-hidden="true"></span><button type="button" class="tree-link" data-testid="tree-node-open" data-rust-action="open" data-node-id="' + escapeHtml(nodeId) + '"><span class="tree-link-title">' + escapeHtml(title) + '</span></button><div class="tree-actions"><button type="button" class="tree-action" data-testid="tree-action-create" data-rust-action="create" data-node-id="' + escapeHtml(nodeId) + '" aria-label="新建子页面">+</button><button type="button" class="tree-action" data-testid="tree-action-rename" data-rust-action="rename" data-node-id="' + escapeHtml(nodeId) + '" aria-label="重命名">✎</button><button type="button" class="tree-action" data-testid="tree-action-menu" data-rust-action="menu" data-node-id="' + escapeHtml(nodeId) + '" aria-label="更多操作">…</button></div></div>' + childHtml + '</li>';
    }).join('');
  }

  function renderPageProjection(projection) {
    var tree = document.getElementById('sidebar-tree-root');
    if (!tree) return false;
    var rows = projectionItems(projection).filter(function(item) {
      return String(item.rowKind || 'document') === 'document';
    });
    var activeId = currentDocumentId();
    tree.innerHTML = '<ul class="tree-root" role="tree" data-rust-page-renderer="initial_v1">' + (rows.length ? renderPageRows('', groupRowsByParent(rows), activeId) : '<li class="tree-empty" data-rust-rendered-row="page-empty">暂无页面</li>') + '</ul>';
    return true;
  }

  function fileDocumentId(item) {
    var meta = item && item.resourceMeta && typeof item.resourceMeta === 'object' ? item.resourceMeta : {};
    if (meta.documentId) return String(meta.documentId).trim();
    if (item && item.documentId) return String(item.documentId).trim();
    if (item && item.rowKind === 'document') return nodeIdOf(item);
    if (item && item.rowKind === 'index') return nodeIdOf(item).replace(/^index:/, '');
    return '';
  }

  function fileAssetId(item) {
    var meta = item && item.resourceMeta && typeof item.resourceMeta === 'object' ? item.resourceMeta : {};
    if (meta.assetId) return String(meta.assetId).trim();
    if (item && item.assetId) return String(item.assetId).trim();
    if (item && item.rowKind === 'asset') return nodeIdOf(item).replace(/^asset:/, '');
    return '';
  }

  function iconKindOf(item) {
    return String(item && (item.iconHint || item.rowKind || 'file') || 'file').trim() || 'file';
  }

  function renderFileRows(parentId, grouped, activeId) {
    return (grouped.get(parentId) || []).map(function(item) {
      var nodeId = nodeIdOf(item);
      var rowId = rowIdOf(item);
      var rowKind = String(item.rowKind || 'document');
      var title = titleOf(item);
      var depth = Number(item.depth || 0);
      var parent = parentIdOf(item);
      var documentId = fileDocumentId(item);
      var assetId = fileAssetId(item);
      var children = grouped.get(nodeId) || [];
      var expandable = Boolean(item.expandable || item.childCount > 0 || children.length);
      var expanded = expandable && item.expandedByDefault !== false;
      var selected = rowId === 'doc:' + activeId || rowId === 'index:' + activeId || documentId === activeId;
      var testId = rowKind === 'document' ? 'filetree-doc-row' : rowKind === 'index' ? 'filetree-index-row' : 'filetree-asset-row';
      var toggle = expandable
        ? '<button type="button" class="tree-toggle" data-testid="filetree-toggle" data-rust-action="toggle" data-row-id="' + escapeHtml(rowId) + '" aria-label="' + (expanded ? '折叠 ' : '展开 ') + escapeHtml(title) + '">' + (expanded ? '▾' : '▸') + '</button>'
        : '<span class="tree-spacer" aria-hidden="true"></span>';
      var createAction = rowKind === 'document'
        ? '<button type="button" class="tree-action" data-testid="filetree-create" data-rust-action="create" data-row-id="' + escapeHtml(rowId) + '" data-node-id="' + escapeHtml(documentId || nodeId) + '" aria-label="新建子页面">+</button>'
        : '';
      var childHtml = expandable && expanded
        ? '<ul class="tree-children">' + renderFileRows(nodeId, grouped, activeId) + '</ul>'
        : '';
      return '<li class="tree-node" data-node-id="' + escapeHtml(nodeId) + '"><div class="tree-row" role="treeitem" aria-level="' + (depth + 1) + '" aria-expanded="' + String(expandable && expanded) + '" data-rust-rendered-row="filetree" data-testid="' + testId + '" data-row-id="' + escapeHtml(rowId) + '" data-row-kind="' + escapeHtml(rowKind) + '" data-node-id="' + escapeHtml(nodeId) + '"' + (parent ? ' data-parent-id="' + escapeHtml(parent) + '"' : '') + ' data-document-id="' + escapeHtml(documentId) + '" data-doc-id="' + escapeHtml(documentId) + '" data-asset-id="' + escapeHtml(assetId) + '" data-shell-mode="filetree" data-selected="' + String(selected) + '" data-active="false" draggable="true">' + toggle + '<span class="tree-kind-badge" data-kind="' + escapeHtml(iconKindOf(item)) + '" aria-hidden="true"></span><button type="button" class="tree-link" data-rust-action="open" data-row-id="' + escapeHtml(rowId) + '" data-document-id="' + escapeHtml(documentId) + '" data-asset-id="' + escapeHtml(assetId) + '"><span class="tree-link-title">' + escapeHtml(title) + '</span></button><div class="tree-actions">' + createAction + '<button type="button" class="tree-action" data-testid="filetree-action-menu" data-rust-action="menu" data-row-id="' + escapeHtml(rowId) + '" aria-label="更多操作">…</button></div></div>' + childHtml + '</li>';
    }).join('');
  }

  function renderFileProjection(projection) {
    var tree = document.getElementById('sidebar-file-tree-root');
    if (!tree) return false;
    var rows = projectionItems(projection);
    var activeId = currentDocumentId();
    tree.innerHTML = '<ul class="tree-root" role="tree" data-rust-filetree-renderer="initial_v1">' + (rows.length ? renderFileRows('', groupRowsByParent(rows), activeId) : '<li class="tree-empty" data-rust-rendered-row="filetree-empty">暂无文件或页面</li>') + '</ul>';
    return true;
  }

  async function fetchProjection(path, workspaceId) {
    var url = new URL(path, window.location.origin);
    url.searchParams.set('workspaceId', workspaceId || 'default');
    url.searchParams.set('depth', '99');
    var response = await fetch(url.toString(), { cache: 'no-store' });
    var payload = await response.json().catch(function(){ return null; });
    if (!response.ok || !payload || !payload.result) throw new Error('tree_projection_failed_' + response.status);
    return payload.result;
  }

  function scheduleProjectionRefresh(workspaceId) {
    if (projectionRefreshTimer) window.clearTimeout(projectionRefreshTimer);
    projectionRefreshTimer = window.setTimeout(function() {
      projectionRefreshTimer = 0;
      var resolvedWorkspaceId = workspaceId || resolveWorkspaceId(document.body);
      Promise.all([
        fetchProjection('/api/tree/projections/sidebar', resolvedWorkspaceId).then(renderPageProjection),
        fetchProjection('/api/tree/projections/file', resolvedWorkspaceId).then(renderFileProjection)
      ]).then(function() {
        document.documentElement.setAttribute('data-mnote-tree-live-applied', 'true');
      }).catch(function(error) {
        document.documentElement.setAttribute('data-mnote-tree-live-apply-error', error instanceof Error ? error.message : String(error));
      });
    }, 180);
  }

  function toggleChildren(row, button) {
    var li = row && row.parentElement;
    var children = li ? li.querySelector(':scope > .tree-children') : null;
    if (!children) return;
    children.classList.toggle('tree-children--collapsed');
    var collapsed = children.classList.contains('tree-children--collapsed');
    row.setAttribute('aria-expanded', collapsed ? 'false' : 'true');
    if (button) button.textContent = collapsed ? '▸' : '▾';
  }

  function dispatchSidebarEvent(name, detail) {
    document.documentElement.setAttribute('data-mnote-last-tree-action', name);
    window.dispatchEvent(new CustomEvent(name, { detail: detail }));
  }

  function rowTitle(row) {
    var title = row ? row.querySelector(':scope > .tree-link > .tree-link-title') : null;
    return title && title.textContent ? title.textContent.trim() : '无标题';
  }

  function rowCenter(row) {
    var rect = row.getBoundingClientRect();
    return { x: rect.left + Math.min(rect.width - 12, 180), y: rect.top + Math.min(rect.height, 22) };
  }

  function closeTreeContextMenu() {
    if (activeTreeContextMenu && activeTreeContextMenu.parentElement) {
      activeTreeContextMenu.parentElement.removeChild(activeTreeContextMenu);
    }
    activeTreeContextMenu = null;
  }

  function copyTreeContextValue(value, actionName) {
    var text = String(value || '');
    var done = function() {
      document.documentElement.setAttribute('data-mnote-tree-context-last-copy', actionName || 'copy');
    };
    if (navigator.clipboard && typeof navigator.clipboard.writeText === 'function') {
      return navigator.clipboard.writeText(text).then(done).catch(function(){});
    }
    var textarea = document.createElement('textarea');
    textarea.value = text;
    textarea.setAttribute('readonly', 'readonly');
    textarea.style.position = 'fixed';
    textarea.style.left = '-9999px';
    document.body.appendChild(textarea);
    textarea.select();
    try { document.execCommand('copy'); } catch (_) {}
    document.body.removeChild(textarea);
    done();
    return Promise.resolve();
  }

  function documentHref(documentId, workspaceId) {
    var url = new URL('/documents/' + encodeURIComponent(documentId), window.location.origin);
    if (workspaceId) url.searchParams.set('workspaceId', workspaceId);
    return url.toString();
  }

  function openTreePicker(mode, detail) {
    var url = new URL('/tree', window.location.origin);
    url.searchParams.set('mode', 'picker');
    url.searchParams.set('allowRootPick', '1');
    url.searchParams.set('intent', mode);
    if (detail.workspaceId) url.searchParams.set('workspaceId', detail.workspaceId);
    if (detail.documentId) {
      url.searchParams.set('sourceDocumentId', detail.documentId);
      url.searchParams.set('excludeIds', detail.documentId);
    }
    window.location.assign(url.pathname + url.search);
  }

  function convertToPreviousSiblingChild(trigger, detail) {
    var documentId = detail.documentId || '';
    var row = document.querySelector('#sidebar-tree-root .tree-row[data-node-id="' + cssEscape(documentId) + '"]');
    if (!(row instanceof HTMLElement)) return;
    var parentId = row.getAttribute('data-parent-id') || '';
    var siblings = Array.from(document.querySelectorAll('#sidebar-tree-root .tree-row[data-shell-mode="page"]')).filter(function(candidate) {
      return (candidate.getAttribute('data-parent-id') || '') === parentId;
    });
    var index = siblings.indexOf(row);
    if (index <= 0) {
      window.alert('当前页面前面没有同级页面。');
      return;
    }
    var previous = siblings[index - 1];
    var previousId = previous.getAttribute('data-node-id') || '';
    var children = previous.parentElement ? previous.parentElement.querySelectorAll(':scope > .tree-children > .tree-node > .tree-row[data-shell-mode="page"]') : [];
    void dispatchTreeCommand(trigger || row, {
      action: 'move',
      workspaceId: detail.workspaceId || resolveWorkspaceId(row),
      documentId: documentId,
      parentId: previousId,
      sortOrder: children.length
    }).then(function(){ scheduleProjectionRefresh(detail.workspaceId || resolveWorkspaceId(row)); });
  }

  function handleTreeContextMenuAction(action, detail, trigger) {
    closeTreeContextMenu();
    var documentId = detail.documentId || '';
    var workspaceId = detail.workspaceId || resolveWorkspaceId(trigger || document.body);
    var title = detail.title || '无标题';
    if (action === 'open-right') {
      dispatchSidebarEvent('tree.page.open-right', detail);
      return;
    }
    if (action === 'share') {
      dispatchSidebarEvent('tree.page.share', detail);
      return;
    }
    if (action === 'move') {
      openTreePicker('move', detail);
      return;
    }
    if (action === 'embed') {
      openTreePicker('embed', detail);
      return;
    }
    if (action === 'copy-link') {
      void copyTreeContextValue(documentHref(documentId, workspaceId), 'copy-link');
      return;
    }
    if (action === 'copy-link-title') {
      void copyTreeContextValue(title + ' ' + documentHref(documentId, workspaceId), 'copy-link-title');
      return;
    }
    if (action === 'copy-reference-inline') {
      void copyTreeContextValue('((' + title + ' ' + documentId + '))', 'copy-reference-inline');
      return;
    }
    if (action === 'copy-reference-embed') {
      void copyTreeContextValue('{{' + title + ' ' + documentId + '}}', 'copy-reference-embed');
      return;
    }
    if (action === 'copy-id') {
      void copyTreeContextValue(documentId || detail.assetId || detail.rowId || '', 'copy-id');
      return;
    }
    if (action === 'duplicate') {
      dispatchSidebarEvent('tree.page.duplicate', detail);
      return;
    }
    if (action === 'rename') {
      var nextTitle = window.prompt('重命名页面', title);
      if (nextTitle && nextTitle.trim() && documentId) {
        void dispatchTreeCommand(trigger || document.body, {
          action: 'rename',
          workspaceId: workspaceId,
          documentId: documentId,
          title: nextTitle.trim()
        }).then(function(){ updateTitleEverywhere(documentId, nextTitle.trim()); });
      }
      return;
    }
    if (action === 'create-child') {
      void createPage(trigger || document.body, documentId);
      return;
    }
    if (action === 'convert-child') {
      convertToPreviousSiblingChild(trigger, detail);
      return;
    }
    if (action === 'delete-trash' && documentId) {
      if (!window.confirm('确定要将“' + title + '”删除到垃圾桶吗？')) return;
      void dispatchTreeCommand(trigger || document.body, {
        action: 'purge',
        workspaceId: workspaceId,
        documentId: documentId
      }).then(function(){ scheduleProjectionRefresh(workspaceId); });
    }
  }

  function appendTreeContextMenuButton(menu, item, detail, trigger) {
    if (item.separator) {
      var sep = document.createElement('div');
      sep.className = 'mnote-tree-context-menu__separator';
      sep.setAttribute('role', 'separator');
      menu.appendChild(sep);
      return;
    }
    var button = document.createElement('button');
    button.type = 'button';
    button.className = item.danger ? 'mnote-tree-context-menu__item mnote-tree-context-menu__item--danger' : 'mnote-tree-context-menu__item';
    button.setAttribute('role', 'menuitem');
    button.setAttribute('data-action', item.action);
    button.disabled = item.disabled === true;
    var icon = document.createElement('span');
    icon.className = 'material-symbols-outlined mnote-tree-context-menu__icon';
    icon.setAttribute('aria-hidden', 'true');
    icon.setAttribute('data-icon', item.icon || 'radio_button_unchecked');
    var label = document.createElement('span');
    label.className = 'mnote-tree-context-menu__label';
    label.textContent = item.label;
    button.appendChild(icon);
    button.appendChild(label);
    if (item.shortcut) {
      var shortcut = document.createElement('span');
      shortcut.className = 'mnote-tree-context-menu__shortcut';
      shortcut.textContent = item.shortcut;
      button.appendChild(shortcut);
    }
    button.addEventListener('click', function(event) {
      event.preventDefault();
      event.stopPropagation();
      handleTreeContextMenuAction(item.action, detail, trigger);
    });
    menu.appendChild(button);
  }

  function openTreeContextMenu(kind, detail, x, y, trigger) {
    closeTreeContextMenu();
    var menu = document.createElement('div');
    menu.className = 'mnote-tree-context-menu';
    menu.setAttribute('role', 'menu');
    menu.setAttribute('data-testid', 'mnote-tree-context-menu');
    menu.setAttribute('data-kind', kind);
    var isAsset = kind === 'filetree' && detail.assetId && detail.rowKind !== 'document' && detail.rowKind !== 'index';
    var items = isAsset ? [
      { action: 'open-right', icon: 'open_in_new', label: '在右侧边栏打开', shortcut: 'Alt + O' },
      { action: 'move', icon: 'drive_file_move', label: '移动到...' },
      { action: 'copy-id', icon: 'tag', label: '复制资源 ID' }
    ] : [
      { action: 'open-right', icon: 'right_panel_open', label: '在右侧边栏打开', shortcut: 'Alt + O' },
      { action: 'share', icon: 'share', label: '共享...' },
      { action: 'move', icon: 'drive_file_move', label: '移动到...' },
      { action: 'embed', icon: 'account_tree', label: '嵌入到...' },
      { action: 'copy-link', icon: 'link', label: '复制访问链接' },
      { action: 'copy-link-title', icon: 'link', label: '复制访问链接（带标题）' },
      { action: 'copy-reference-inline', icon: 'content_copy', label: '复制页面引用链接' },
      { action: 'copy-id', icon: 'tag', label: '复制页面 ID' },
      { action: 'duplicate', icon: 'file_copy', label: '拷贝副本' },
      { separator: true },
      { action: 'rename', icon: 'edit', label: '重命名' },
      { action: 'create-child', icon: 'add', label: '新建子页面' },
      { action: 'convert-child', icon: 'subdirectory_arrow_right', label: '转为上一个子页面' },
      { action: 'delete-trash', icon: 'delete', label: '删除到垃圾桶', danger: true }
    ];
    items.forEach(function(item) { appendTreeContextMenuButton(menu, item, detail, trigger); });
    document.body.appendChild(menu);
    var rect = menu.getBoundingClientRect();
    var left = Math.min(Math.max(8, x || 8), Math.max(8, window.innerWidth - rect.width - 8));
    var top = Math.min(Math.max(8, y || 8), Math.max(8, window.innerHeight - rect.height - 8));
    menu.style.left = left + 'px';
    menu.style.top = top + 'px';
    activeTreeContextMenu = menu;
  }

  function openPageTreeContextMenu(row, x, y, trigger) {
    if (!(row instanceof HTMLElement)) return;
    var documentId = row.getAttribute('data-node-id') || '';
    openTreeContextMenu('page', {
      documentId: documentId,
      rowId: documentId,
      rowKind: 'document',
      title: rowTitle(row),
      workspaceId: resolveWorkspaceId(row)
    }, x, y, trigger || row);
  }

  function openFileTreeContextMenu(row, x, y, trigger) {
    if (!(row instanceof HTMLElement)) return;
    var documentId = row.getAttribute('data-document-id') || row.getAttribute('data-doc-id') || '';
    openTreeContextMenu('filetree', {
      documentId: documentId,
      rowId: row.getAttribute('data-row-id') || '',
      rowKind: row.getAttribute('data-row-kind') || '',
      assetId: row.getAttribute('data-asset-id') || '',
      title: rowTitle(row),
      workspaceId: resolveWorkspaceId(row)
    }, x, y, trigger || row);
  }

  document.addEventListener('click', function(e) {
    if (activeTreeContextMenu && activeTreeContextMenu.contains(e.target)) return;
    if (activeTreeContextMenu) closeTreeContextMenu();

    var tabTrigger = closestAction(e.target, '[data-mnote-sidebar-tree-tab]');
    if (tabTrigger) {
      e.preventDefault();
      switchSidebarTreeTab(tabTrigger);
      return;
    }

    var createTrigger = closestAction(e.target, '[data-mnote-action="create-page"]');
    if (createTrigger) {
      e.preventDefault();
      void createPage(createTrigger, null);
      return;
    }

    var fileTree = document.getElementById('sidebar-file-tree-root');
    if (fileTree && fileTree.contains(e.target)) {
      var fileBtn = closestAction(e.target, '[data-rust-action]');
      var fileRow = closestAction(e.target, '.tree-row[data-shell-mode="filetree"]');
      if (!fileRow) return;
      var fileAction = fileBtn ? fileBtn.getAttribute('data-rust-action') : 'open';
      var rowId = fileRow.getAttribute('data-row-id') || '';
      var rowKind = fileRow.getAttribute('data-row-kind') || '';
      var documentId = fileRow.getAttribute('data-document-id') || fileRow.getAttribute('data-doc-id') || '';
      var assetId = fileRow.getAttribute('data-asset-id') || '';
      if (fileAction === 'toggle') {
        e.preventDefault();
        toggleChildren(fileRow, fileBtn);
        return;
      }
      if (fileAction === 'create') {
        e.preventDefault();
        void createPage(fileBtn || fileRow, documentId || fileRow.getAttribute('data-node-id'));
        return;
      }
      if (fileAction === 'menu') {
        e.preventDefault();
        var point = rowCenter(fileBtn || fileRow);
        dispatchSidebarEvent('tree.filetree.context-menu', { rowId: rowId, rowKind: rowKind, documentId: documentId || null, assetId: assetId || null });
        openFileTreeContextMenu(fileRow, point.x, point.y, fileBtn || fileRow);
        return;
      }
      e.preventDefault();
      fileTree.querySelectorAll('.tree-row[data-selected="true"]').forEach(function(row) {
        if (row instanceof HTMLElement) row.setAttribute('data-selected', 'false');
      });
      fileRow.setAttribute('data-selected', 'true');
      dispatchSidebarEvent('tree.filetree.open', { rowId: rowId, rowKind: rowKind, documentId: documentId || null, assetId: assetId || null });
      if ((rowKind === 'document' || rowKind === 'index') && documentId) {
        navigateToDocument(documentId, resolveWorkspaceId(fileRow), { treeView: 'filetree' });
      } else if (assetId) {
        dispatchSidebarEvent('tree.asset.open', { rowId: rowId, rowKind: rowKind, documentId: documentId || null, assetId: assetId });
      }
      return;
    }

    var tree = document.getElementById('sidebar-tree-root');
    if (!tree || !tree.contains(e.target)) return;
    var btn = closestAction(e.target, '[data-rust-action]');
    if (!btn) return;
    var nodeId = btn.getAttribute('data-node-id');
    var action = btn.getAttribute('data-rust-action');

    if (action === 'toggle') {
      var row = btn.closest('.tree-row');
      if (!row) return;
      toggleChildren(row, btn);
      e.preventDefault();
    } else if (action === 'open') {
      var workspaceId = resolveWorkspaceId(btn);
      navigateToDocument(nodeId, workspaceId, { treeView: 'page' });
      e.preventDefault();
    } else if (action === 'create') {
      e.preventDefault();
      void createPage(btn, nodeId);
    } else if (action === 'rename') {
      e.preventDefault();
      var title = window.prompt('重命名页面');
      if (title && title.trim()) {
        void dispatchTreeCommand(btn, {
          action: 'rename',
          workspaceId: resolveWorkspaceId(btn),
          documentId: nodeId,
          title: title.trim()
        }).then(function(){
          updateTitleEverywhere(nodeId, title.trim());
          scheduleProjectionRefresh(resolveWorkspaceId(btn));
        });
      }
    } else if (action === 'menu') {
      e.preventDefault();
      var menuPoint = rowCenter(btn);
      dispatchSidebarEvent('tree.page.context-menu', { documentId: nodeId, target: { documentId: nodeId } });
      openPageTreeContextMenu(btn.closest('.tree-row'), menuPoint.x, menuPoint.y, btn);
    }
  });

  document.addEventListener('contextmenu', function(event) {
    var fileRow = closestAction(event.target, '.tree-row[data-shell-mode="filetree"]');
    if (fileRow) {
      event.preventDefault();
      openFileTreeContextMenu(fileRow, event.clientX, event.clientY, fileRow);
      return;
    }
    var pageRow = closestAction(event.target, '.tree-row[data-shell-mode="page"]');
    if (pageRow) {
      event.preventDefault();
      openPageTreeContextMenu(pageRow, event.clientX, event.clientY, pageRow);
    }
  });

  document.addEventListener('keydown', function(event) {
    if (event.key === 'Escape') closeTreeContextMenu();
  });

  function readPageDragNodeId(event) {
    var fromTransfer = event.dataTransfer ? event.dataTransfer.getData(PAGE_DRAG_MIME) || event.dataTransfer.getData('text/plain') : '';
    return (fromTransfer || draggingPageNodeId || '').trim();
  }

  function clearPageDropFeedback() {
    if (activePageDropRow instanceof HTMLElement) {
      activePageDropRow.setAttribute('data-drop-feedback', 'false');
    }
    activePageDropRow = null;
  }

  function canDropPage(sourceNodeId, targetRow) {
    if (!sourceNodeId || !(targetRow instanceof HTMLElement)) return false;
    var targetNodeId = targetRow.getAttribute('data-node-id') || '';
    if (!targetNodeId || targetNodeId === sourceNodeId) return false;
    var sourceNode = document.querySelector('#sidebar-tree-root .tree-node[data-node-id="' + cssEscape(sourceNodeId) + '"]');
    return !(sourceNode instanceof HTMLElement && sourceNode.contains(targetRow));
  }

  function pageDropPosition(event, row) {
    var rect = row.getBoundingClientRect();
    var ratio = rect.height > 0 ? (event.clientY - rect.top) / rect.height : 0.5;
    if (ratio < 0.25) return 'before';
    if (ratio > 0.75) return 'after';
    return 'inside';
  }

  function resolvePageMoveTarget(targetRow, position) {
    var targetNodeId = targetRow.getAttribute('data-node-id') || '';
    var parentId = targetRow.getAttribute('data-parent-id') || null;
    if (position === 'inside') {
      var children = targetRow.parentElement ? targetRow.parentElement.querySelectorAll(':scope > .tree-children > .tree-node > .tree-row[data-shell-mode="page"]') : [];
      return { parentId: targetNodeId, sortOrder: children.length };
    }
    var siblings = Array.from(document.querySelectorAll('#sidebar-tree-root .tree-row[data-shell-mode="page"]')).filter(function(row) {
      return (row.getAttribute('data-parent-id') || '') === (parentId || '');
    });
    var index = siblings.indexOf(targetRow);
    return { parentId: parentId, sortOrder: Math.max(0, index + (position === 'after' ? 1 : 0)) };
  }

  document.addEventListener('dragstart', function(event) {
    var pageRow = closestAction(event.target, '.tree-row[data-shell-mode="page"][draggable="true"]');
    if (pageRow) {
      draggingPageNodeId = pageRow.getAttribute('data-node-id') || '';
      if (event.dataTransfer) {
        event.dataTransfer.effectAllowed = 'move';
        event.dataTransfer.setData(PAGE_DRAG_MIME, draggingPageNodeId);
        event.dataTransfer.setData('text/plain', draggingPageNodeId);
      }
      return;
    }
    var fileRow = closestAction(event.target, '.tree-row[data-shell-mode="filetree"][draggable="true"]');
    if (fileRow) {
      var rowId = fileRow.getAttribute('data-row-id') || '';
      draggingFileTreeRowIds = rowId ? [rowId] : [];
      if (event.dataTransfer) {
        var payload = JSON.stringify({ type: 'mnote-file-tree-dnd', version: 1, rowIds: draggingFileTreeRowIds });
        event.dataTransfer.effectAllowed = 'copyMove';
        event.dataTransfer.setData(FILETREE_DRAG_MIME, payload);
        event.dataTransfer.setData('application/x-mnote-file-tree', payload);
        event.dataTransfer.setData('text/plain', payload);
      }
    }
  });

  document.addEventListener('dragover', function(event) {
    var pageRow = closestAction(event.target, '.tree-row[data-shell-mode="page"]');
    var sourceNodeId = readPageDragNodeId(event);
    if (pageRow && canDropPage(sourceNodeId, pageRow)) {
      event.preventDefault();
      clearPageDropFeedback();
      pageRow.setAttribute('data-drop-feedback', 'true');
      pageRow.setAttribute('data-drop-position', pageDropPosition(event, pageRow));
      activePageDropRow = pageRow;
      if (event.dataTransfer) event.dataTransfer.dropEffect = 'move';
      return;
    }
    var fileTree = document.getElementById('sidebar-file-tree-root');
    if (fileTree && fileTree.contains(event.target)) {
      var hasFiles = event.dataTransfer && Array.prototype.indexOf.call(event.dataTransfer.types || [], 'Files') >= 0;
      var hasInternal = event.dataTransfer && Array.prototype.indexOf.call(event.dataTransfer.types || [], FILETREE_DRAG_MIME) >= 0;
      if (!hasFiles && !hasInternal && draggingFileTreeRowIds.length === 0) return;
      event.preventDefault();
      if (activeFileTreeDropRow instanceof HTMLElement) activeFileTreeDropRow.setAttribute('data-drop-target', 'false');
      activeFileTreeDropRow = closestAction(event.target, '.tree-row[data-shell-mode="filetree"]') || fileTree;
      if (activeFileTreeDropRow instanceof HTMLElement) activeFileTreeDropRow.setAttribute('data-drop-target', 'true');
      if (event.dataTransfer) event.dataTransfer.dropEffect = hasFiles || event.altKey ? 'copy' : 'move';
    }
  });

  document.addEventListener('drop', function(event) {
    var pageRow = closestAction(event.target, '.tree-row[data-shell-mode="page"]');
    var sourceNodeId = readPageDragNodeId(event);
    if (pageRow && canDropPage(sourceNodeId, pageRow)) {
      event.preventDefault();
      var position = pageDropPosition(event, pageRow);
      var target = resolvePageMoveTarget(pageRow, position);
      clearPageDropFeedback();
      draggingPageNodeId = '';
      void dispatchTreeCommand(pageRow, {
        action: 'move',
        workspaceId: resolveWorkspaceId(pageRow),
        documentId: sourceNodeId,
        parentId: target.parentId,
        sortOrder: target.sortOrder
      }).then(function(){ scheduleProjectionRefresh(resolveWorkspaceId(pageRow)); });
      return;
    }
    var fileTree = document.getElementById('sidebar-file-tree-root');
    if (fileTree && fileTree.contains(event.target)) {
      var targetRow = closestAction(event.target, '.tree-row[data-shell-mode="filetree"]');
      var files = event.dataTransfer ? Array.from(event.dataTransfer.files || []) : [];
      var raw = event.dataTransfer ? event.dataTransfer.getData(FILETREE_DRAG_MIME) || event.dataTransfer.getData('application/x-mnote-file-tree') || '' : '';
      var rowIds = draggingFileTreeRowIds.slice();
      if (raw) {
        try {
          var parsed = JSON.parse(raw);
          if (Array.isArray(parsed.rowIds)) rowIds = parsed.rowIds;
        } catch (_) {}
      }
      if (!files.length && !rowIds.length) return;
      event.preventDefault();
      var detail = {
        workspaceId: resolveWorkspaceId(targetRow || fileTree),
        targetRowId: targetRow ? targetRow.getAttribute('data-row-id') : null,
        targetRowKind: targetRow ? targetRow.getAttribute('data-row-kind') : 'root',
        documentId: targetRow ? targetRow.getAttribute('data-document-id') || targetRow.getAttribute('data-doc-id') : null,
        assetId: targetRow ? targetRow.getAttribute('data-asset-id') : null
      };
      if (activeFileTreeDropRow instanceof HTMLElement) activeFileTreeDropRow.setAttribute('data-drop-target', 'false');
      activeFileTreeDropRow = null;
      if (files.length) {
        dispatchSidebarEvent('tree.filetree.external-drop', Object.assign({}, detail, { files: files }));
      } else {
        dispatchSidebarEvent('tree.filetree.internal-drop', Object.assign({}, detail, { rowIds: rowIds, copy: event.altKey === true }));
      }
      draggingFileTreeRowIds = [];
    }
  });

  document.addEventListener('dragend', function() {
    draggingPageNodeId = '';
    draggingFileTreeRowIds = [];
    clearPageDropFeedback();
    if (activeFileTreeDropRow instanceof HTMLElement) activeFileTreeDropRow.setAttribute('data-drop-target', 'false');
    activeFileTreeDropRow = null;
  });

  window.addEventListener('tree:title-updated', function(event) {
    var detail = event.detail || {};
    updateTitleEverywhere(detail.documentId, detail.title);
    document.documentElement.setAttribute('data-mnote-title-local-applied', 'true');
  });

  window.addEventListener('tree:snapshot', function(event) {
    var payload = event.detail && event.detail.payload ? event.detail.payload : event.detail;
    if (renderPageProjection(payload)) {
      document.documentElement.setAttribute('data-mnote-tree-live-applied', 'snapshot');
    }
    scheduleProjectionRefresh(payload && payload.workspaceId);
  });

  window.addEventListener('tree:delta', function(event) {
    var payload = event.detail && event.detail.payload ? event.detail.payload : event.detail;
    var data = payload && (payload.data || payload.delta || payload);
    var documents = data && (data.upsertDocuments || data.upsert_documents);
    if (Array.isArray(documents)) {
      documents.forEach(function(doc) {
        updateTitleEverywhere(doc.id || doc.documentId, doc.title || '无标题');
      });
    }
    document.documentElement.setAttribute('data-mnote-tree-live-applied', 'delta');
    scheduleProjectionRefresh(payload && payload.workspaceId);
  });

  window.addEventListener('tree:resync', function(event) {
    var payload = event.detail && event.detail.payload ? event.detail.payload : event.detail;
    document.documentElement.setAttribute('data-mnote-tree-live-applied', 'resync');
    scheduleProjectionRefresh(payload && payload.workspaceId);
  });

  var tree = document.getElementById('sidebar-tree-root');
  var activeId = currentDocumentId();
  if (tree && activeId) {
    var activeRow = tree.querySelector('.tree-row[data-node-id="' + cssEscape(activeId) + '"]');
    if (activeRow instanceof HTMLElement) activeRow.setAttribute('data-active', 'true');
  }
  restoreSidebarTreeTab();
})();
"##;

const TREE_LIVE_CONTROLLER_JS: &str = r##"
(function(){
  if (window.__mnoteTreeLiveControllerStarted) return;
  window.__mnoteTreeLiveControllerStarted = true;

  function readBootstrap() {
    var script = document.getElementById('__MNOTE_TREE_LIVE_BOOTSTRAP__');
    var fallback = {
      schema: 'mnote.tree_live_bootstrap.v1',
      transport: 'convex-command-log-sse',
      endpoint: '/api/tree/events',
      resyncEndpoint: '/api/tree/projections/sidebar',
      rootIds: [],
      initialRevision: null
    };
    if (!script || !script.textContent) return fallback;
    try {
      return Object.assign(fallback, JSON.parse(script.textContent));
    } catch (_) {
      return fallback;
    }
  }

  function resolveWorkspaceId() {
    var withWorkspace = document.querySelector('[data-workspace-id]');
    if (withWorkspace) {
      var value = (withWorkspace.getAttribute('data-workspace-id') || '').trim();
      if (value) return value;
    }
    var params = new URLSearchParams(window.location.search);
    return (params.get('workspaceId') || 'default').trim() || 'default';
  }

  function dispatchTreeEvent(name, detail) {
    window.dispatchEvent(new CustomEvent(name, { detail: detail }));
  }

  function applyStatus(status) {
    document.documentElement.setAttribute('data-mnote-tree-live-status', status);
  }

  function applyTransport(transport) {
    document.documentElement.setAttribute('data-mnote-tree-live-transport', transport || 'convex-command-log-sse');
  }

  function closeActiveSource() {
    var source = window.__mnoteTreeLiveEventSource;
    if (source && typeof source.close === 'function') {
      source.close();
      window.__mnoteTreeLiveEventSource = null;
      applyStatus('closed');
    }
  }

  function start() {
    if (!('EventSource' in window)) {
      applyStatus('unsupported');
      return;
    }
    var bootstrap = readBootstrap();
    applyTransport(bootstrap.transport || 'convex-command-log-sse');
    var workspaceId = bootstrap.workspaceId || resolveWorkspaceId();
    var url = new URL(bootstrap.endpoint || '/api/tree/events', window.location.origin);
    url.searchParams.set('workspaceId', workspaceId);
    if (Array.isArray(bootstrap.rootIds) && bootstrap.rootIds.length === 1) {
      url.searchParams.set('rootNodeId', bootstrap.rootIds[0]);
    }
    var failures = 0;
    var source = new EventSource(url.toString());
    window.__mnoteTreeLiveEventSource = source;
    applyStatus('connecting');

    source.addEventListener('open', function(){
      failures = 0;
      applyStatus('connected');
    });

    source.addEventListener('snapshot', function(event){
      var payload = JSON.parse(event.data || '{}');
      var revision = payload.revision || payload.cursor || event.lastEventId || null;
      document.documentElement.setAttribute('data-mnote-tree-live-revision', String(revision || ''));
      dispatchTreeEvent('tree:snapshot', { payload: payload, revision: revision, bootstrap: bootstrap });
    });

    source.addEventListener('delta', function(event){
      var payload = JSON.parse(event.data || '{}');
      var revision = payload.revision || payload.cursor || event.lastEventId || null;
      document.documentElement.setAttribute('data-mnote-tree-live-revision', String(revision || ''));
      dispatchTreeEvent('tree:delta', { payload: payload, revision: revision, bootstrap: bootstrap });
    });

    source.addEventListener('resync', function(event){
      var payload = JSON.parse(event.data || '{}');
      var revision = payload.revision || payload.cursor || event.lastEventId || null;
      document.documentElement.setAttribute('data-mnote-tree-live-revision', String(revision || ''));
      dispatchTreeEvent('tree:resync', { payload: payload, revision: revision, bootstrap: bootstrap });
    });

    source.onerror = function(){
      failures += 1;
      applyStatus(failures >= 3 ? 'resync-pending' : 'reconnecting');
      if (failures >= 3) {
        dispatchTreeEvent('tree:resync-requested', { endpoint: bootstrap.resyncEndpoint, workspaceId: workspaceId });
      }
    };
  }

  window.__mnoteTreeLiveClose = closeActiveSource;
  window.addEventListener('pagehide', closeActiveSource, { once: true });

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', start, { once: true });
  } else {
    start();
  }
})();
"##;

/// MNOTE Wolai 风格页面布局
///
/// 包含左侧栏 + 内容区的双栏布局。
/// 侧栏显示品牌、导航链接和可选的页面树。
///
/// # 用法
///
/// ```ignore
/// view! {
///     <PageLayout current_nav="home" sidebar_tree_html={None}>
///         <section>...</section>
///     </PageLayout>
/// }
/// ```
#[component]
pub fn PageLayout(
    children: Children,
    current_nav: &'static str,
    /// 侧栏页面树 HTML（可选），由路由 handler 渲染
    #[prop(optional)]
    sidebar_tree_html: Option<String>,
    /// 工作区名称（可选），显示在侧栏顶部
    #[prop(optional)]
    workspace_name: Option<String>,
    /// workspace shell 侧栏 sections HTML（可选），由 projection 渲染
    #[prop(optional)]
    workspace_sidebar_html: Option<String>,
    /// 顶栏当前页面标题（可选）
    #[prop(optional)]
    topbar_title: Option<String>,
) -> impl IntoView {
    let sidebar_tree_html = sidebar_tree_html.unwrap_or_default();

    let ws_name = workspace_name
        .map(|value| value.trim().to_string())
        .filter(|value| !value.is_empty())
        .unwrap_or_else(|| "开发用户 的空间".to_string());
    let topbar_title = topbar_title
        .map(|value| value.trim().to_string())
        .filter(|value| !value.is_empty())
        .unwrap_or_else(|| "个人".to_string());
    let sidebar_sections_html = workspace_sidebar_html
        .map(|value| value.trim().to_string())
        .filter(|value| !value.is_empty())
        .unwrap_or_else(|| {
            let dataset = serde_json::json!({
                "workspaces": [{ "id": "default", "name": ws_name.clone() }],
                "documents": []
            });
            let projection = crate::workspace_shell::build_workspace_shell_projection(
                &dataset, "default", None, &ws_name,
            );
            crate::workspace_shell::render_workspace_shell_sidebar_html(
                &projection,
                Some(sidebar_tree_html.as_str()),
                None,
            )
        });
    let tree_live_bootstrap = serde_json::json!({
        "schema": "mnote.tree_live_bootstrap.v1",
        "transport": "convex-command-log-sse",
        "workspaceId": null,
        "rootIds": [],
        "initialRevision": null,
        "endpoint": "/api/tree/events",
        "resyncEndpoint": "/api/tree/projections/sidebar",
        "views": ["page-tree", "file-tree"]
    })
    .to_string();

    view! {
        <div class="mnote-shell wolai-workspace-shell" data-mnote-web-owner="mnote-web" data-mnote-shell="workspace">
            <aside class="mnote-sidebar wolai-sidebar" data-testid="wolai-sidebar">
                <div class="mnote-sidebar-header wolai-sidebar-header" data-testid="wolai-workspace-identity">
                    <a href="/" class="mnote-sidebar-brand wolai-avatar" aria-label="工作区首页">"L"</a>
                    <span class="sidebar-workspace-name">{ws_name}</span>
                    <span class="wolai-sidebar-chevron" aria-hidden="true">"⌄"</span>
                </div>
                <nav class="mnote-sidebar-nav wolai-quick-actions" aria-label="快捷操作">
                    <a href="/search" class:active={current_nav == "search"} title="搜索" aria-label="搜索"><span class="material-symbols-outlined nav-icon" data-icon="search" aria-hidden="true"></span></a>
                    <a href="/graph" title="关系图" aria-label="关系图"><span class="material-symbols-outlined nav-icon" data-icon="account_tree" aria-hidden="true"></span></a>
                    <a href="/actions" title="快捷动作" aria-label="快捷动作"><span class="material-symbols-outlined nav-icon" data-icon="bolt" aria-hidden="true"></span></a>
                    <a href="/help" title="帮助" aria-label="帮助"><span class="material-symbols-outlined nav-icon" data-icon="help" aria-hidden="true"></span></a>
                    <a href="/files" title="文件" aria-label="文件"><span class="material-symbols-outlined nav-icon" data-icon="inventory_2" aria-hidden="true"></span></a>
                    <a href="/more" title="更多" aria-label="更多"><span class="material-symbols-outlined nav-icon" data-icon="more_horiz" aria-hidden="true"></span></a>
                </nav>
                <div class="wolai-sidebar-body" inner_html={sidebar_sections_html}></div>
                <script id="__MNOTE_TREE_LIVE_BOOTSTRAP__" type="application/json" inner_html={tree_live_bootstrap}></script>
                <script inner_html={SIDEBAR_TREE_JS.to_string()}></script>
                <script id="mnote-tree-live-controller" inner_html={TREE_LIVE_CONTROLLER_JS.to_string()}></script>
            </aside>
            <div class="mnote-main">
                <header class="wolai-topbar" data-testid="wolai-topbar">
                    <div class="wolai-topbar-left">
                        <button type="button" class="wolai-icon-button wolai-menu-button" aria-label="切换侧栏"><span class="material-symbols-outlined" data-icon="menu" aria-hidden="true"></span></button>
                        <nav class="wolai-breadcrumb" aria-label="页面路径">
                            <span class="wolai-breadcrumb-root">"The Digital Atelier"</span>
                            <span class="wolai-breadcrumb-separator" aria-hidden="true">"/"</span>
                            <span class="wolai-breadcrumb-current"><span class="material-symbols-outlined wolai-home-icon" data-icon="home" aria-hidden="true"></span><span data-page-title-current="true">{topbar_title}</span></span>
                        </nav>
                    </div>
                    <div class="wolai-topbar-actions" aria-label="页面操作">
                        <span class="wolai-public-pill"><span aria-hidden="true">"●"</span>"Public"</span>
                        <button type="button" class="wolai-icon-button" title="收藏" aria-label="收藏"><span class="material-symbols-outlined" data-icon="star" aria-hidden="true"></span></button>
                        <button type="button" class="wolai-icon-button" title="历史" aria-label="历史"><span class="material-symbols-outlined" data-icon="history" aria-hidden="true"></span></button>
                        <button type="button" class="wolai-icon-button wolai-ai-inline" title="AI" aria-label="AI"><span class="material-symbols-outlined material-symbols-filled" data-icon="auto_awesome" aria-hidden="true"></span></button>
                        <button type="button" class="wolai-icon-button" title="搜索" aria-label="搜索"><span class="material-symbols-outlined" data-icon="search" aria-hidden="true"></span></button>
                        <button type="button" class="wolai-icon-button" title="更多" aria-label="更多"><span class="material-symbols-outlined" data-icon="more_horiz" aria-hidden="true"></span></button>
                    </div>
                </header>
                <article class="mnote-content">
                    {children()}
                </article>
                <div class="wolai-floating-actions" aria-label="浮动操作">
                    <button type="button" data-testid="wolai-floating-help" class="wolai-floating-button wolai-floating-button--help" aria-label="帮助"><span class="material-symbols-outlined" data-icon="help" aria-hidden="true"></span></button>
                    <button type="button" data-testid="wolai-floating-ai" class="wolai-floating-button wolai-floating-button--ai" aria-label="AI 助手"><span class="material-symbols-outlined material-symbols-filled" data-icon="auto_awesome" aria-hidden="true"></span></button>
                </div>
            </div>
        </div>
    }
}

#[cfg(test)]
mod tests {
    use super::{SIDEBAR_TREE_JS, TREE_LIVE_CONTROLLER_JS};

    #[test]
    fn sidebar_tree_runtime_handles_navigation_drag_and_filetree_actions() {
        assert!(SIDEBAR_TREE_JS.contains("mnoteNavigationInFlight"));
        assert!(SIDEBAR_TREE_JS.contains("data-mnote-navigation-pending"));
        assert!(SIDEBAR_TREE_JS.contains("MNOTE_SIDEBAR_TREE_MODE_KEY"));
        assert!(SIDEBAR_TREE_JS.contains("restoreSidebarTreeTab"));
        assert!(SIDEBAR_TREE_JS.contains("treeView"));
        assert!(SIDEBAR_TREE_JS.contains("application/x-mnote-page-tree-node"));
        assert!(SIDEBAR_TREE_JS.contains("dragstart"));
        assert!(SIDEBAR_TREE_JS.contains("drop"));
        assert!(SIDEBAR_TREE_JS.contains("data-drop-feedback"));
        assert!(SIDEBAR_TREE_JS.contains("action: 'move'"));
        assert!(SIDEBAR_TREE_JS.contains("sidebar-file-tree-root"));
        assert!(SIDEBAR_TREE_JS.contains("tree.filetree.open"));
        assert!(SIDEBAR_TREE_JS.contains("tree.asset.open"));
        assert!(SIDEBAR_TREE_JS.contains("tree.filetree.internal-drop"));
        assert!(SIDEBAR_TREE_JS.contains("tree.filetree.external-drop"));
    }

    #[test]
    fn sidebar_tree_runtime_renders_context_menu_and_scoped_title_updates() {
        assert!(SIDEBAR_TREE_JS.contains("openTreeContextMenu"));
        assert!(SIDEBAR_TREE_JS.contains("mnote-tree-context-menu"));
        assert!(SIDEBAR_TREE_JS.contains("复制访问链接（带标题）"));
        assert!(SIDEBAR_TREE_JS.contains("删除到垃圾桶"));
        assert!(SIDEBAR_TREE_JS.contains(
            ".tree-row[data-node-id=\"' + escaped + '\"] > .tree-link > .tree-link-title"
        ));
        assert!(!SIDEBAR_TREE_JS
            .contains("[data-node-id=\"' + cssEscape(documentId) + '\"] .tree-link-title"));
    }

    #[test]
    fn tree_live_controller_marks_transport_and_closes_source_on_pagehide() {
        assert!(TREE_LIVE_CONTROLLER_JS.contains("convex-command-log-sse"));
        assert!(TREE_LIVE_CONTROLLER_JS.contains("data-mnote-tree-live-transport"));
        assert!(TREE_LIVE_CONTROLLER_JS.contains("pagehide"));
        assert!(TREE_LIVE_CONTROLLER_JS.contains("__mnoteTreeLiveEventSource"));
        assert!(TREE_LIVE_CONTROLLER_JS.contains("tree:snapshot"));
        assert!(TREE_LIVE_CONTROLLER_JS.contains("tree:delta"));
        assert!(TREE_LIVE_CONTROLLER_JS.contains("tree:resync"));
    }
}