npm - collabmd - Versions diffs - 0.1.42 → 0.1.44 - Mend

collabmd 0.1.42 → 0.1.44

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (603) hide show

package/src/client/presentation/app-shell-template.js DELETED Viewed

@@ -1,675 +0,0 @@
-import { html } from 'lit-html';
-import { badgeClassNames } from './components/ui/badge.js';
-import { buttonClassNames, iconButtonClassNames } from './components/ui/button.js';
-import { inputClassNames } from './components/ui/input.js';
-import { segmentedButtonClassNames, segmentedControlClassNames } from './components/ui/segmented-control.js';
-export function appShellTemplate() {
-  return html`
-    <a href="#editorContainer" class="sr-only skip-link">Skip to editor</a>
-    <div class="app-shell">
-      <aside id="sidebar" class="sidebar">
-        <div class="sidebar-header">
-          <div class="sidebar-brand">
-            <svg width="20" height="20" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-              <rect x="6" y="8" width="28" height="38" rx="4" stroke="var(--color-primary)" stroke-width="2" fill="var(--color-primary)" fill-opacity="0.12"></rect>
-              <rect x="22" y="10" width="28" height="38" rx="4" stroke="var(--color-primary)" stroke-width="2" fill="var(--color-primary)" fill-opacity="0.25"></rect>
-              <path d="M14 20l4 10 1.5-4 4-1.5L14 20z" fill="var(--color-primary)" opacity="0.7"></path>
-              <path d="M38 28l-4-10-1.5 4-4 1.5L38 28z" fill="var(--color-primary)"></path>
-            </svg>
-            <span class="sidebar-title">CollabMD</span>
-          </div>
-          <div class="sidebar-actions">
-            <button class=${iconButtonClassNames({ extra: 'sidebar-close-btn' })} id="sidebarClose" aria-label="Close sidebar" title="Close sidebar">
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
-                <line x1="18" y1="6" x2="6" y2="18"></line>
-                <line x1="6" y1="6" x2="18" y2="18"></line>
-              </svg>
-            </button>
-            <div class="sidebar-create-shell">
-              <button
-                class=${buttonClassNames({ variant: 'secondary', size: 'compact', pill: true, extra: 'sidebar-create-btn' })}
-                id="sidebarCreateBtn"
-                aria-label="Create"
-                aria-expanded="false"
-                aria-haspopup="menu"
-                title="Create file or folder"
-              >
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
-                  <line x1="12" y1="5" x2="12" y2="19"></line>
-                  <line x1="5" y1="12" x2="19" y2="12"></line>
-                </svg>
-                <span class="sidebar-create-btn-label">Create</span>
-              </button>
-            </div>
-            <button class=${iconButtonClassNames()} id="refreshFilesBtn" aria-label="Refresh" title="Refresh file list">
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
-                <polyline points="23 4 23 10 17 10"></polyline>
-                <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path>
-              </svg>
-            </button>
-          </div>
-        </div>
-        <div class="ui-nav-tabs" id="sidebarTabs">
-          <button class="ui-nav-tab active" id="filesSidebarTab" type="button">
-            <span class="ui-nav-tab-icon" aria-hidden="true">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
-                <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
-              </svg>
-            </span>
-            <span class="ui-nav-tab-label">Files</span>
-          </button>
-          <button class="ui-nav-tab" id="commentsSidebarTab" type="button">
-            <span class="ui-nav-tab-icon" aria-hidden="true">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
-              </svg>
-            </span>
-            <span class="ui-nav-tab-label">Comments</span>
-          </button>
-          <button class="ui-nav-tab hidden" id="gitSidebarTab" type="button">
-            <span class="ui-nav-tab-icon" aria-hidden="true">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <circle cx="18" cy="18" r="3"></circle>
-                <circle cx="6" cy="6" r="3"></circle>
-                <path d="M13 6h3a2 2 0 0 1 2 2v7"></path>
-                <path d="M6 9v12"></path>
-              </svg>
-            </span>
-            <span class="ui-nav-tab-label">Git</span>
-          </button>
-        </div>
-        <div class="sidebar-search" id="fileSearch">
-          <input
-            type="text"
-            class=${inputClassNames({ extra: 'sidebar-search-input' })}
-            id="fileSearchInput"
-            placeholder="Search files..."
-            autocomplete="off"
-            spellcheck="false"
-            aria-label="Search files"
-          >
-        </div>
-        <div class="sidebar-search hidden" id="gitSearch">
-          <input
-            type="text"
-            class=${inputClassNames({ extra: 'sidebar-search-input' })}
-            id="gitSearchInput"
-            placeholder="Search changes..."
-            autocomplete="off"
-            spellcheck="false"
-            aria-label="Search changed files"
-          >
-        </div>
-        <nav id="fileTree" class="file-tree" aria-label="File explorer"></nav>
-        <section id="commentOverviewPanel" class="comment-overview-panel hidden" aria-label="Open comments"></section>
-        <div id="gitPanel" class="git-panel hidden" aria-label="Git changes"></div>
-      </aside>
-      <button
-        type="button"
-        class="sidebar-backdrop"
-        id="sidebarBackdrop"
-        aria-label="Close navigation"
-        aria-hidden="true"
-        hidden
-      ></button>
-      <main class="main-area" id="mainContent">
-        <header class="toolbar" role="banner">
-          <div class="toolbar-left">
-            <button class=${buttonClassNames({ variant: 'ghost', toolbar: true })} id="sidebarToggle" aria-label="Toggle sidebar" title="Toggle sidebar">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
-                <line x1="3" y1="6" x2="21" y2="6"></line>
-                <line x1="3" y1="12" x2="21" y2="12"></line>
-                <line x1="3" y1="18" x2="21" y2="18"></line>
-              </svg>
-            </button>
-            <div class="toolbar-room-info">
-              <span class="toolbar-room-name" id="activeFileName">CollabMD</span>
-            </div>
-          </div>
-          <div class="toolbar-center" id="toolbarCenter">
-            <div class=${segmentedControlClassNames({ extra: 'view-toggle' })} role="group" aria-label="View mode">
-              <button class=${segmentedButtonClassNames({ active: true, extra: 'view-btn' })} data-view="split" aria-label="Split view" aria-pressed="true" title="Split view">
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                  <rect x="3" y="3" width="18" height="18" rx="2"></rect>
-                  <line x1="12" y1="3" x2="12" y2="21"></line>
-                </svg>
-              </button>
-              <button class=${segmentedButtonClassNames({ extra: 'view-btn' })} data-view="editor" aria-label="Editor only" aria-pressed="false" title="Editor only">
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                  <rect x="3" y="3" width="18" height="18" rx="2"></rect>
-                  <line x1="8" y1="8" x2="16" y2="8"></line>
-                  <line x1="8" y1="12" x2="14" y2="12"></line>
-                  <line x1="8" y1="16" x2="12" y2="16"></line>
-                </svg>
-              </button>
-              <button class=${segmentedButtonClassNames({ extra: 'view-btn' })} data-view="preview" aria-label="Preview only" aria-pressed="false" title="Preview only">
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                  <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
-                  <circle cx="12" cy="12" r="3"></circle>
-                </svg>
-              </button>
-            </div>
-          </div>
-          <div class="toolbar-right">
-            <button class=${buttonClassNames({ variant: 'ghost', toolbar: true, extra: 'mobile-view-toggle' })} id="mobileViewToggle" aria-label="Toggle editor/preview" title="Toggle view">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
-                <circle cx="12" cy="12" r="3"></circle>
-              </svg>
-              <span class="ui-toolbar-button-label">Preview</span>
-            </button>
-            <div class="toolbar-status-cluster" aria-label="Workspace status">
-              <span class=${badgeClassNames({ tone: 'accent', hidden: true, extra: 'toolbar-badge' })} id="toolbarDiffBadge">Diff</span>
-              <span class=${badgeClassNames({ tone: 'muted', hidden: true, extra: 'toolbar-badge' })} id="gitOperationStatus" aria-live="polite" aria-atomic="true"></span>
-              <button
-                type="button"
-                class=${badgeClassNames({ tone: 'muted', extra: ['toolbar-badge', 'toolbar-badge-button'] })}
-                id="userCount"
-                aria-controls="presencePanel"
-                aria-expanded="false"
-                data-presence-panel-trigger="true"
-              ></button>
-            </div>
-            <div class="user-avatars toolbar-presence-cluster" id="userAvatars"></div>
-            <section class="presence-panel hidden" id="presencePanel" aria-label="Online users" aria-hidden="true">
-              <div class="presence-panel-header">
-                <div>
-                  <h2 class="presence-panel-title">Online now</h2>
-                  <p class="presence-panel-status" id="presencePanelStatus">Click someone to follow.</p>
-                </div>
-              </div>
-              <div class="presence-panel-list" id="presencePanelList"></div>
-            </section>
-            <div class="chat-container" id="chatContainer">
-              <button class=${buttonClassNames({ variant: 'ghost', toolbar: true, extra: 'chat-toggle-btn' })} id="chatToggleBtn" aria-label="Open team chat" aria-expanded="false" title="Team chat">
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                  <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
-                </svg>
-                <span class="ui-toolbar-button-label">Chat</span>
-                <span class=${badgeClassNames({ tone: 'solid', count: true, hidden: true, extra: 'chat-toggle-badge' })} id="chatToggleBadge">0</span>
-              </button>
-              <div class="toast-container chat-toast-container" id="chatToastContainer" aria-live="polite" aria-atomic="true"></div>
-              <section class="chat-panel hidden" id="chatPanel" aria-label="Team chat">
-                <div class="chat-panel-header">
-                  <div>
-                    <h2 class="chat-panel-title">Team chat</h2>
-                    <p class="chat-panel-status" id="chatStatus">Syncing...</p>
-                  </div>
-                  <button
-                    class=${buttonClassNames({
-                      variant: 'secondary',
-                      size: 'compact',
-                      pill: true,
-                      surface: true,
-                      action: true,
-                      extra: 'chat-notification-action',
-                    })}
-                    id="chatNotificationBtn"
-                    type="button"
-                  >
-                    Enable alerts
-                  </button>
-                </div>
-                <div class="chat-empty-state" id="chatEmptyState">
-                  Temporary room chat for whoever is online right now.
-                </div>
-                <div class="chat-messages hidden" id="chatMessages" role="log" aria-live="polite" aria-relevant="additions text"></div>
-                <form class="chat-form" id="chatForm">
-                  <input
-                    type="text"
-                    class=${inputClassNames({ extra: 'chat-input' })}
-                    id="chatInput"
-                    placeholder="Send a quick update..."
-                    autocomplete="off"
-                    spellcheck="true"
-                    maxlength="280"
-                    aria-label="Team chat message"
-                  >
-                  <button type="submit" class=${buttonClassNames({ variant: 'primary', extra: 'chat-send-btn' })}>Send</button>
-                </form>
-              </section>
-            </div>
-            <button
-              class=${buttonClassNames({ variant: 'ghost', toolbar: true, extra: 'toolbar-overflow-toggle' })}
-              id="toolbarOverflowToggle"
-              aria-label="Open more actions"
-              aria-expanded="false"
-              title="More actions"
-            >
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
-                <circle cx="12" cy="12" r="1"></circle>
-                <circle cx="19" cy="12" r="1"></circle>
-                <circle cx="5" cy="12" r="1"></circle>
-              </svg>
-            </button>
-            <div class="toolbar-overflow-menu" id="toolbarOverflowMenu">
-              <button class=${buttonClassNames({ variant: 'ghost', toolbar: true, extra: 'hidden' })} id="fileHistoryBtn" aria-label="Open file history" title="View file history">
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-                  <path d="M3 12a9 9 0 1 0 3-6.7"></path>
-                  <path d="M3 4v5h5"></path>
-                  <path d="M12 7v5l3 3"></path>
-                </svg>
-                <span class="ui-toolbar-button-label" id="fileHistoryBtnLabel">History</span>
-              </button>
-              <button class=${buttonClassNames({ variant: 'ghost', toolbar: true, extra: 'ui-toolbar-button--name' })} id="editNameBtn" aria-label="Set name. Change display name" title="Change display name">
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                  <path d="M12 20h9"></path>
-                  <path d="M16.5 3.5a2.12 2.12 0 1 1 3 3L7 19l-4 1 1-4Z"></path>
-                </svg>
-                <span class="ui-toolbar-button-label ui-toolbar-button-text" id="currentUserName">Set name</span>
-              </button>
-              <button class=${buttonClassNames({ variant: 'ghost', toolbar: true })} id="shareBtn" aria-label="Share. Copy link" title="Share link">
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
-                  <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
-                  <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
-                </svg>
-                <span class="ui-toolbar-button-label">Share</span>
-              </button>
-              <button class=${buttonClassNames({ variant: 'ghost', toolbar: true, extra: 'toolbar-search-files-btn' })} id="searchFilesBtn" aria-label="Search files" title="Search files">
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
-                  <circle cx="11" cy="11" r="7"></circle>
-                  <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
-                </svg>
-                <span class="ui-toolbar-button-label">Search files</span>
-              </button>
-              <details class="toolbar-overflow-group hidden" id="exportMenuGroup">
-                <summary class=${buttonClassNames({ variant: 'ghost', toolbar: true, extra: 'toolbar-overflow-group-toggle' })} aria-label="Export options" title="Export">
-                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
-                    <polyline points="14 2 14 8 20 8"></polyline>
-                    <path d="M12 18v-6"></path>
-                    <path d="m9 15 3 3 3-3"></path>
-                  </svg>
-                  <span class="ui-toolbar-button-label">Export</span>
-                </summary>
-                <div class="toolbar-overflow-submenu">
-                  <button class=${buttonClassNames({ variant: 'ghost', toolbar: true })} id="exportDocxBtn" aria-label="Export DOCX" title="Export DOCX">
-                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-                      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
-                      <polyline points="14 2 14 8 20 8"></polyline>
-                      <path d="M8 13h2l1.2 2 1.6-4 1.2 2H18"></path>
-                    </svg>
-                    <span class="ui-toolbar-button-label">Export DOCX</span>
-                  </button>
-                  <button class=${buttonClassNames({ variant: 'ghost', toolbar: true })} id="exportPdfBtn" aria-label="Print or save PDF" title="Print / Save PDF">
-                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-                      <path d="M6 9V2h12v7"></path>
-                      <path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path>
-                      <rect x="6" y="14" width="12" height="8"></rect>
-                    </svg>
-                    <span class="ui-toolbar-button-label">Print / Save PDF</span>
-                  </button>
-                </div>
-              </details>
-              <button class=${buttonClassNames({ variant: 'ghost', toolbar: true, extra: 'toolbar-theme-button' })} id="themeToggleBtn" data-theme-toggle aria-label="Toggle theme" title="Toggle theme">
-                <span class="toolbar-theme-icon" data-theme-toggle-icon aria-hidden="true">
-                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <circle cx="12" cy="12" r="5"></circle>
-                    <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"></path>
-                  </svg>
-                </span>
-                <span class="ui-toolbar-button-label">Theme</span>
-                <span class=${badgeClassNames({ tone: 'muted', extra: 'toolbar-theme-state' })} data-theme-toggle-state>Dark</span>
-              </button>
-            </div>
-          </div>
-        </header>
-        <div id="emptyState" class="empty-state">
-          <div class="empty-state-content">
-            <div class="empty-state-logo" aria-hidden="true">
-              <svg width="48" height="48" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <rect x="6" y="8" width="28" height="38" rx="4" stroke="var(--color-primary)" stroke-width="2" fill="var(--color-primary)" fill-opacity="0.12"></rect>
-                <rect x="22" y="10" width="28" height="38" rx="4" stroke="var(--color-primary)" stroke-width="2" fill="var(--color-primary)" fill-opacity="0.25"></rect>
-                <path d="M14 20l4 10 1.5-4 4-1.5L14 20z" fill="var(--color-primary)" opacity="0.7"></path>
-                <path d="M38 28l-4-10-1.5 4-4 1.5L38 28z" fill="var(--color-primary)"></path>
-              </svg>
-            </div>
-            <h2 class="empty-state-title">Welcome to CollabMD</h2>
-            <p class="empty-state-desc">Open a file from the sidebar, or get started quickly:</p>
-            <div class="empty-state-actions">
-              <button class=${buttonClassNames({ variant: 'primary', extra: 'empty-state-btn' })} id="emptyStateNewFileBtn">
-                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
-                  <line x1="12" y1="5" x2="12" y2="19"></line>
-                  <line x1="5" y1="12" x2="19" y2="12"></line>
-                </svg>
-                Create
-              </button>
-              <button class=${buttonClassNames({ variant: 'secondary', extra: 'empty-state-btn' })} id="emptyStateSearchBtn">
-                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
-                  <circle cx="11" cy="11" r="8"></circle>
-                  <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
-                </svg>
-                Search Everything
-                <kbd class="empty-state-kbd">⌘K</kbd>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div id="editor-page" class="editor-page hidden">
-          <div class="editor-layout" id="editorLayout" data-view="split">
-            <div class="editor-pane" id="editorPane">
-              <div class="pane-header">
-                <div class="pane-header-meta">
-                  <span class="pane-label">Editor</span>
-                  <span class="pane-label-meta" id="lineInfo">Ln 1, Col 1</span>
-                </div>
-                <div class="pane-header-actions">
-                  <button class=${buttonClassNames({ variant: 'ghost', size: 'compact', toggle: true, extra: 'mobile-editor-find-btn' })} id="editorFindBtn" aria-label="Find in file" title="Find in file">
-                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
-                      <circle cx="11" cy="11" r="7"></circle>
-                      <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
-                    </svg>
-                    <span class="ui-action-label">Find</span>
-                  </button>
-                  <button class=${buttonClassNames({ variant: 'ghost', size: 'compact', toggle: true, extra: 'hidden' })} id="commentSelectionBtn" aria-label="Comment current line or selection" title="Comment current line or selection">
-                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-                      <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
-                    </svg>
-                    <span class="ui-action-label">Comment</span>
-                  </button>
-                  <button class=${buttonClassNames({ variant: 'ghost', size: 'compact', toggle: true })} id="toggleWrapBtn" aria-label="Disable line wrap" title="Disable line wrap">
-                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-                      <path d="M3 6h14a4 4 0 1 1 0 8H9"></path>
-                      <path d="m9 10-4 4 4 4"></path>
-                      <path d="M3 18h7"></path>
-                    </svg>
-                    <span id="wrapToggleLabel">Wrap on</span>
-                  </button>
-                </div>
-              </div>
-              <div id="markdownToolbar" class="markdown-toolbar hidden" role="toolbar" aria-label="Markdown formatting"></div>
-              <div id="editorContainer" class="editor-container">
-                <div class="editor-loading" id="editorLoading">
-                  <div class="skeleton-line skeleton-line--title skeleton-line--break"></div>
-                  <div class="skeleton-line skeleton-line--full"></div>
-                  <div class="skeleton-line skeleton-line--ninety"></div>
-                  <div class="skeleton-line skeleton-line--ninety-five"></div>
-                  <div class="skeleton-line skeleton-line--eighty skeleton-line--break"></div>
-                  <div class="skeleton-line skeleton-line--full"></div>
-                  <div class="skeleton-line skeleton-line--eighty-five"></div>
-                </div>
-              </div>
-            </div>
-            <div class="resizer" id="resizer" role="separator" aria-orientation="vertical" tabindex="0" aria-label="Resize editor and preview" aria-controls="editorPane previewPane" aria-valuemin="20" aria-valuemax="80" aria-valuenow="50"></div>
-            <div class="preview-pane" id="previewPane">
-              <div class="pane-header">
-                <span class="pane-label">Preview</span>
-                <div class="pane-header-actions">
-                  <div id="backlinksHeaderPanel" class="backlinks-panel backlinks-panel-header hidden" data-backlinks-variant="header">
-                    <button type="button" class="backlinks-header" aria-expanded="false">
-                      <svg class="backlinks-chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-                        <polyline points="9 18 15 12 9 6"></polyline>
-                      </svg>
-                      <span class="backlinks-toggle">0 Linked Mentions</span>
-                      <span class="backlinks-count"></span>
-                    </button>
-                    <div class="backlinks-body" aria-hidden="true" inert>
-                      <div class="backlinks-list"></div>
-                    </div>
-                  </div>
-                  <button class=${buttonClassNames({ variant: 'ghost', size: 'compact', toggle: true, extra: 'hidden' })} id="commentsToggle" aria-label="Toggle comments" title="Toggle comments">
-                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-                      <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
-                    </svg>
-                    <span class="ui-action-label">Comments</span>
-                  </button>
-                  <button class=${buttonClassNames({ variant: 'ghost', size: 'compact', toggle: true })} id="outlineToggle" aria-label="Toggle outline" aria-controls="outlinePanel" aria-expanded="false" title="Toggle outline">
-                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
-                      <line x1="3" y1="6" x2="21" y2="6"></line>
-                      <line x1="3" y1="12" x2="15" y2="12"></line>
-                      <line x1="3" y1="18" x2="18" y2="18"></line>
-                    </svg>
-                  </button>
-                </div>
-              </div>
-              <div class="preview-body">
-                <div id="previewContainer" class="preview-container">
-                  <div id="previewContent" class="preview-content"></div>
-                  <div id="backlinksInlinePanel" class="backlinks-panel backlinks-panel-inline hidden">
-                    <button type="button" class="backlinks-header" aria-expanded="false">
-                      <svg class="backlinks-chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-                        <polyline points="9 18 15 12 9 6"></polyline>
-                      </svg>
-                      <span class="backlinks-toggle">0 Linked Mentions</span>
-                      <span class="backlinks-count"></span>
-                    </button>
-                    <div class="backlinks-body" aria-hidden="true" inert>
-                      <div class="backlinks-list"></div>
-                    </div>
-                  </div>
-                </div>
-                <div id="backlinksPanel" class="backlinks-panel-layer hidden">
-                  <div class="backlinks-panel backlinks-panel-dock" data-backlinks-variant="dock">
-                    <button type="button" class="backlinks-header" aria-expanded="false">
-                      <svg class="backlinks-chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-                        <polyline points="9 18 15 12 9 6"></polyline>
-                      </svg>
-                      <span class="backlinks-toggle">0 Linked Mentions</span>
-                      <span class="backlinks-count"></span>
-                    </button>
-                    <div class="backlinks-body" aria-hidden="true" inert>
-                      <div class="backlinks-list"></div>
-                    </div>
-                  </div>
-                </div>
-                <aside id="commentsDrawer" class="comments-drawer hidden" aria-label="Comments">
-                  <div class="comments-drawer-header">
-                    <span class="comments-drawer-title">Comments</span>
-                  </div>
-                  <div id="commentsDrawerEmpty" class="comments-drawer-empty ui-empty-state ui-empty-state--compact">
-                    <p class="ui-empty-state-title">No comments yet</p>
-                    <p class="ui-empty-state-copy">Select text in the editor or use a preview bubble to start a thread.</p>
-                  </div>
-                  <div id="commentsDrawerList" class="comments-drawer-list"></div>
-                </aside>
-                <aside id="outlinePanel" class="outline-panel hidden" aria-label="Document outline" aria-hidden="true">
-                  <div class="outline-header">
-                    <span class="outline-title">Outline</span>
-                    <button class=${iconButtonClassNames({ extra: 'outline-close-btn' })} id="outlineClose" type="button" aria-label="Close outline" title="Close outline">
-                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
-                        <line x1="18" y1="6" x2="6" y2="18"></line>
-                        <line x1="6" y1="6" x2="18" y2="18"></line>
-                      </svg>
-                    </button>
-                  </div>
-                  <nav id="outlineNav" class="outline-nav"></nav>
-                </aside>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div id="diff-page" class="diff-page hidden">
-          <div class="diff-toolbar">
-            <div class="diff-toolbar-left">
-              <div class="diff-file-nav">
-                <button class=${iconButtonClassNames({ action: true })} id="diffPrevBtn" type="button" disabled aria-label="Previous changed file">
-                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
-                    <polyline points="15 18 9 12 15 6"></polyline>
-                  </svg>
-                </button>
-                <span class="diff-file-indicator" id="diffFileIndicator">0 / 0 files</span>
-                <button class=${iconButtonClassNames({ action: true })} id="diffNextBtn" type="button" disabled aria-label="Next changed file">
-                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
-                    <polyline points="9 18 15 12 9 6"></polyline>
-                  </svg>
-                </button>
-              </div>
-              <div class="diff-toolbar-actions">
-                <button class=${buttonClassNames({ variant: 'secondary', action: true, surface: true, wide: true, hidden: true, extra: 'diff-back-btn' })} id="diffBackToHistoryBtn" type="button">
-                  Back to History
-                </button>
-                <div class="diff-toolbar-actions-group diff-toolbar-actions-group-git" id="diffGitActionsGroup" role="group" aria-label="Git file actions">
-                  <button class=${buttonClassNames({ variant: 'secondary', action: true, surface: true, wide: true })} id="diffPrimaryActionBtn" type="button" disabled>
-                    Stage
-                  </button>
-                  <button class=${buttonClassNames({ variant: 'primary', action: true, wide: true })} id="diffCommitBtn" type="button" disabled>
-                    Commit Staged
-                  </button>
-                </div>
-                <span class="diff-toolbar-actions-divider" id="diffToolbarDivider" aria-hidden="true"></span>
-                <div class="diff-toolbar-actions-group" id="diffEditorActionsGroup" role="group" aria-label="Navigation actions">
-                  <button class=${buttonClassNames({ variant: 'secondary', action: true, surface: true, wide: true, extra: 'diff-open-editor-btn' })} id="diffOpenEditorBtn" type="button" disabled>
-                    Open in Editor
-                  </button>
-                </div>
-              </div>
-            </div>
-            <div class="diff-toolbar-right">
-              <div class="diff-stats" id="diffStats">
-                <span class="ui-stat-token ui-stat-token--add diff-stats-add">+0</span>
-                <span class="ui-stat-token ui-stat-token--del diff-stats-del">-0</span>
-              </div>
-              <div class=${segmentedControlClassNames({ hidden: true, extra: 'diff-layout-toggle' })} id="diffLayoutToggle" role="group" aria-label="Commit diff layout">
-                <button class=${segmentedButtonClassNames({ extra: 'view-btn diff-layout-btn' })} data-diff-layout="stacked" type="button">Stacked</button>
-                <button class=${segmentedButtonClassNames({ active: true, extra: 'view-btn diff-layout-btn' })} data-diff-layout="focused" type="button">Focused</button>
-              </div>
-              <div class=${segmentedControlClassNames({ extra: 'diff-mode-toggle' })} role="group" aria-label="Diff view mode">
-                <button class=${segmentedButtonClassNames({ active: true, extra: 'view-btn diff-mode-btn' })} data-diff-mode="unified" type="button">Unified</button>
-                <button class=${segmentedButtonClassNames({ extra: 'view-btn diff-mode-btn' })} data-diff-mode="split" type="button">Split</button>
-              </div>
-            </div>
-          </div>
-          <div class="diff-scroll" id="diffScroll">
-            <div class="diff-content" id="diffContent"></div>
-          </div>
-        </div>
-      </main>
-    </div>
-    <dialog class="app-dialog" id="displayNameDialog">
-      <form class="app-dialog-form" id="displayNameForm" method="dialog">
-        <div class="app-dialog-header">
-          <h2 class="app-dialog-title" id="displayNameTitle">Update display name</h2>
-          <p class="app-dialog-copy" id="displayNameCopy">Your name will be visible to everyone editing this vault.</p>
-        </div>
-        <label class="app-dialog-field" for="displayNameInput">
-          <span class="app-dialog-label">Name</span>
-          <input type="text" class=${inputClassNames()} id="displayNameInput" name="displayName" maxlength="24" autocomplete="nickname" spellcheck="false" required>
-        </label>
-        <div class="app-dialog-actions">
-          <button type="button" class=${buttonClassNames({ variant: 'secondary' })} id="displayNameCancel">Cancel</button>
-          <button type="submit" class=${buttonClassNames({ variant: 'primary' })} id="displayNameSubmit">Save name</button>
-        </div>
-      </form>
-    </dialog>
-    <dialog class="app-dialog" id="fileActionDialog">
-      <form class="app-dialog-form" id="fileActionForm" method="dialog">
-        <div class="app-dialog-header">
-          <h2 class="app-dialog-title" id="fileActionTitle">Create file</h2>
-          <p class="app-dialog-copy" id="fileActionCopy">Add a new file to the vault.</p>
-        </div>
-        <label class="app-dialog-field" id="fileActionField" for="fileActionInput">
-          <span class="app-dialog-label" id="fileActionLabel">Path</span>
-          <input type="text" class=${inputClassNames()} id="fileActionInput" name="fileActionValue" autocomplete="off" spellcheck="false" required>
-          <span class="app-dialog-hint" id="fileActionHint" hidden></span>
-        </label>
-        <p class="app-dialog-note" id="fileActionNote" hidden></p>
-        <div class="app-dialog-actions">
-          <button type="button" class=${buttonClassNames({ variant: 'secondary' })} id="fileActionCancel">Cancel</button>
-          <button type="submit" class=${buttonClassNames({ variant: 'primary' })} id="fileActionSubmit">Create</button>
-        </div>
-      </form>
-    </dialog>
-    <dialog class="app-dialog" id="gitCommitDialog">
-      <form class="app-dialog-form" id="gitCommitForm" method="dialog">
-        <div class="app-dialog-header">
-          <h2 class="app-dialog-title" id="gitCommitTitle">Commit staged changes</h2>
-          <p class="app-dialog-copy" id="gitCommitCopy">All staged changes will be included.</p>
-        </div>
-        <label class="app-dialog-field" for="gitCommitInput">
-          <span class="app-dialog-label">Commit message</span>
-          <input type="text" class=${inputClassNames()} id="gitCommitInput" name="gitCommitMessage" autocomplete="off" spellcheck="true" required>
-        </label>
-        <div class="app-dialog-actions">
-          <button type="button" class=${buttonClassNames({ variant: 'secondary' })} id="gitCommitCancel">Cancel</button>
-          <button type="submit" class=${buttonClassNames({ variant: 'primary' })} id="gitCommitSubmit">Commit staged changes</button>
-        </div>
-      </form>
-    </dialog>
-    <dialog class="app-dialog" id="gitResetDialog">
-      <form class="app-dialog-form" method="dialog">
-        <div class="app-dialog-header">
-          <h2 class="app-dialog-title" id="gitResetTitle">Reset file</h2>
-          <p class="app-dialog-copy" id="gitResetCopy">Restore this file from the current checked-out branch. If that branch does not contain the file, it will be deleted locally.</p>
-        </div>
-        <div class="app-dialog-field">
-          <label class="app-dialog-label" for="gitResetFileName">File</label>
-          <input class=${inputClassNames({ extra: 'app-dialog-input' })} id="gitResetFileName" type="text" readonly>
-        </div>
-        <div class="app-dialog-note is-danger">
-          Local file content and staged changes for this path will be discarded.
-        </div>
-        <div class="app-dialog-actions">
-          <button class=${buttonClassNames({ variant: 'secondary' })} id="gitResetCancel" type="button">Cancel</button>
-          <button class=${buttonClassNames({ variant: 'danger' })} id="gitResetSubmit" type="button">Reset File</button>
-        </div>
-      </form>
-    </dialog>
-    <div class="tab-lock-overlay hidden" id="tabLockOverlay" role="dialog" aria-modal="true" aria-labelledby="tabLockTitle">
-      <div class="tab-lock-card">
-        <span class="tab-lock-kicker">Single active tab</span>
-        <h2 class="tab-lock-title" id="tabLockTitle">This vault is active in another tab</h2>
-        <p class="tab-lock-copy" id="tabLockCopy">To avoid duplicate presence and chat, only one tab can stay connected at a time. Use the other tab, or take over the session here.</p>
-        <div class="tab-lock-actions">
-          <button type="button" class=${buttonClassNames({ variant: 'primary', size: 'lg' })} id="tabLockTakeoverBtn">Take over here</button>
-        </div>
-      </div>
-    </div>
-    <div class="toast-container" id="toastContainer"></div>
-    <div class="qs-overlay" id="quickSwitcher">
-      <div class="qs-modal">
-        <div class="qs-mode-tabs" role="tablist" aria-label="Search mode">
-          <button class="qs-mode-tab active" type="button" role="tab" aria-selected="true" data-qs-mode="files">Files</button>
-          <button class="qs-mode-tab" type="button" role="tab" aria-selected="false" data-qs-mode="text">Text</button>
-        </div>
-        <div class="qs-input-wrap">
-          <svg class="qs-search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
-            <circle cx="11" cy="11" r="8"></circle>
-            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
-          </svg>
-          <input type="text" class="qs-input" id="quickSwitcherInput" placeholder="Search files..." autocomplete="off" spellcheck="false">
-          <kbd class="qs-kbd">esc</kbd>
-        </div>
-        <div class="qs-results" id="quickSwitcherResults"></div>
-        <div class="qs-hint" id="quickSwitcherHint">Type to search files</div>
-        <div class="qs-footer" aria-hidden="true">
-          <span><kbd>↑</kbd><kbd>↓</kbd> Navigate</span>
-          <span><kbd>↵</kbd> Open</span>
-          <span><kbd>Tab</kbd> Switch mode</span>
-        </div>
-      </div>
-    </div>
-  `;
-}