Full document, spreadsheet, slideshow, and diagram tooling
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, viewport-fit=cover">
6 <link rel="manifest" href="/manifest.json">
7 <meta name="description" content="Atmosphere Office — document editor. All data stored locally in your browser.">
8 <meta property="og:title" content="Atmosphere Office">
9 <meta property="og:description" content="Atmosphere Office — document editor. All data stored locally in your browser.">
10 <meta property="og:type" content="website">
11 <meta property="og:image" content="/favicon.svg">
12 <title>Atmosphere Office</title>
13 <meta name="theme-color" content="#3a8a7a">
14 <link rel="icon" type="image/svg+xml" href="/favicon.svg">
15 <link rel="apple-touch-icon" href="/favicon.svg">
16 <link rel="stylesheet" href="../css/app.css">
17 <!-- Theme init — runs before paint to avoid FOUC. See #694. -->
18 <script src="/theme-init.js"></script>
19</head>
20<body>
21 <a class="skip-link" href="#main-content">Skip to content</a>
22 <div class="app-shell" id="app">
23 <!-- Top bar -->
24 <div class="app-topbar">
25 <a class="app-logo" href="/">Atmosphere</a>
26 <input class="doc-title-input" id="doc-title" type="text" value="Untitled Document" spellcheck="false">
27 <span class="topbar-spacer"></span>
28 <div class="collab-avatars" id="collab-avatars"></div>
29 <!-- Suggesting mode toggle -->
30 <div class="suggesting-toggle" id="suggesting-toggle">
31 <button class="suggesting-toggle-btn" id="btn-suggesting" title="Toggle suggesting mode">
32 <span class="suggesting-toggle-icon"><svg class="tb-icon" viewBox="0 0 16 16" style="width:14px;height:14px" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M11.5 2.5l2 2-9 9H2.5v-2z"/><path d="M9.5 4.5l2 2"/></svg></span>
33 <span class="suggesting-toggle-label" id="suggesting-label">Editing</span>
34 </button>
35 </div>
36 <!-- Markdown source toggle -->
37 <button class="btn-icon" id="btn-md-toggle" title="Toggle markdown source (Cmd+Shift+M)" aria-label="Toggle markdown source view">MD</button>
38 <!-- Outline toggle -->
39 <button class="btn-icon" id="btn-outline" title="Document outline">
40 <svg class="tb-icon" viewBox="0 0 16 16" style="width:16px;height:16px"><line x1="2" y1="3" x2="14" y2="3"/><line x1="4" y1="6.5" x2="14" y2="6.5"/><line x1="6" y1="10" x2="14" y2="10"/><line x1="2" y1="13.5" x2="14" y2="13.5"/></svg>
41 </button>
42 <!-- Minimap toggle -->
43 <button class="btn-icon" id="btn-minimap" title="Toggle minimap">
44 <svg class="tb-icon" viewBox="0 0 16 16" style="width:16px;height:16px" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><rect x="2" y="1.5" width="12" height="13" rx="1"/><line x1="5" y1="4.5" x2="11" y2="4.5"/><line x1="5" y1="7.5" x2="9" y2="7.5"/><line x1="5" y1="10.5" x2="10" y2="10.5"/></svg>
45 </button>
46 <!-- Version history -->
47 <button class="btn-icon" id="btn-history" title="Version history">
48 <svg class="tb-icon" viewBox="0 0 16 16" style="width:16px;height:16px" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="8" r="6"/><path d="M8 4.5V8l2.5 1.5"/></svg>
49 </button>
50 <!-- Comments sidebar -->
51 <button class="btn-icon" id="btn-comments" title="Comments">
52 <svg class="tb-icon" viewBox="0 0 16 16" style="width:16px;height:16px" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 2.5h11a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1h-3l-2.5 2.5v-2.5h-5.5a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1z"/><line x1="5" y1="5.5" x2="11" y2="5.5"/><line x1="5" y1="8" x2="9" y2="8"/></svg>
53 </button>
54 <!-- Typewriter / focus mode -->
55 <button class="btn-icon" id="btn-typewriter" title="Typewriter mode">
56 <svg class="tb-icon" viewBox="0 0 16 16" style="width:16px;height:16px" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="4" x2="13" y2="4"/><line x1="3" y1="8" x2="13" y2="8" stroke-width="2.5"/><line x1="3" y1="12" x2="13" y2="12"/></svg>
57 </button>
58 <!-- AI Chat -->
59 <button class="btn-icon" id="btn-ai-chat" title="AI Chat (Cmd+Shift+L)">
60 <svg class="tb-icon" viewBox="0 0 16 16" style="width:16px;height:16px" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h12a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H5l-3 3V4a1 1 0 0 1 1-1z"/><circle cx="5.5" cy="7.5" r="0.5" fill="currentColor" stroke="none"/><circle cx="8" cy="7.5" r="0.5" fill="currentColor" stroke="none"/><circle cx="10.5" cy="7.5" r="0.5" fill="currentColor" stroke="none"/></svg>
61 </button>
62 <!-- Share button -->
63 <button class="btn-icon" id="btn-share" title="Share document">
64 <svg class="tb-icon" viewBox="0 0 16 16" style="width:16px;height:16px" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="3.5" r="2"/><circle cx="4" cy="8" r="2"/><circle cx="12" cy="12.5" r="2"/><line x1="5.8" y1="9" x2="10.2" y2="11.5"/><line x1="10.2" y1="4.5" x2="5.8" y2="7"/></svg>
65 </button>
66 <div class="save-indicator saved" id="save-indicator">
67 <span class="save-dot save-dot--saved"></span>
68 <span id="save-text">Saved</span>
69 </div>
70 <div class="status-indicator" id="status">
71 <span class="status-dot connected" id="status-dot"></span>
72 <span id="status-text">Saved</span>
73 </div>
74 <button class="btn-icon" id="btn-shortcuts" title="Keyboard shortcuts">?</button>
75 <button class="theme-toggle" id="theme-toggle" title="Toggle dark mode"></button>
76 </div>
77
78 <!-- View-only badge (shown when ?mode=view) -->
79 <div class="view-only-badge" id="view-only-badge" style="display:none">View only</div>
80
81 <!-- Formatting toolbar (Google Docs-style, flat single-row) -->
82 <div class="toolbar gdocs-toolbar" id="toolbar" role="toolbar" aria-label="Formatting toolbar">
83 <!-- Group: History & Print -->
84 <button class="tb-btn toolbar-mobile-hide" id="tb-undo" title="Undo (Cmd+Z)" aria-label="Undo"><svg class="tb-icon" viewBox="0 0 16 16"><path d="M3 7.5h8a3 3 0 0 1 0 6H9"/><path d="M5.5 5L3 7.5 5.5 10"/></svg></button>
85 <button class="tb-btn toolbar-mobile-hide" id="tb-redo" title="Redo (Cmd+Shift+Z)" aria-label="Redo"><svg class="tb-icon" viewBox="0 0 16 16"><path d="M13 7.5H5a3 3 0 0 0 0 6h2"/><path d="M10.5 5l2.5 2.5-2.5 2.5"/></svg></button>
86 <button class="tb-btn toolbar-mobile-hide" id="tb-print" title="Print (Cmd+P)" aria-label="Print"><svg class="tb-icon" viewBox="0 0 16 16"><path d="M4 5V2h8v3"/><rect x="2" y="5" width="12" height="6" rx="1"/><path d="M4 11v3h8v-3"/><line x1="6" y1="12.5" x2="10" y2="12.5"/></svg></button>
87 <span class="toolbar-sep toolbar-mobile-hide"></span>
88
89 <!-- Group: Text style selects -->
90 <select class="tb-select toolbar-mobile-hide" id="tb-heading" title="Heading level" aria-label="Heading level">
91 <option value="paragraph">Normal</option>
92 <option value="1">Heading 1</option>
93 <option value="2">Heading 2</option>
94 <option value="3">Heading 3</option>
95 </select>
96 <select class="tb-select tb-select-narrow toolbar-mobile-hide" id="tb-font-size" title="Font size" aria-label="Font size">
97 <option value="">–</option>
98 <option value="8px">8</option>
99 <option value="9px">9</option>
100 <option value="10px">10</option>
101 <option value="11px">11</option>
102 <option value="12px">12</option>
103 <option value="14px">14</option>
104 <option value="16px">16</option>
105 <option value="18px">18</option>
106 <option value="20px">20</option>
107 <option value="24px">24</option>
108 <option value="28px">28</option>
109 <option value="32px">32</option>
110 <option value="36px">36</option>
111 <option value="48px">48</option>
112 <option value="72px">72</option>
113 </select>
114 <span class="toolbar-sep toolbar-mobile-hide"></span>
115
116 <!-- Group: Character formatting -->
117 <button class="tb-btn" id="tb-bold" title="Bold (Cmd+B)" aria-label="Bold"><svg class="tb-icon" viewBox="0 0 16 16"><path d="M4.5 2.5h4.5a2.5 2.5 0 0 1 0 5h-4.5zM4.5 7.5h5a3 3 0 0 1 0 6h-5z" stroke-width="2"/></svg></button>
118 <button class="tb-btn" id="tb-italic" title="Italic (Cmd+I)" aria-label="Italic"><svg class="tb-icon" viewBox="0 0 16 16"><line x1="10" y1="2.5" x2="6" y2="13.5"/><line x1="7" y1="2.5" x2="11" y2="2.5"/><line x1="5" y1="13.5" x2="9" y2="13.5"/></svg></button>
119 <button class="tb-btn toolbar-mobile-hide" id="tb-underline" title="Underline (Cmd+U)" aria-label="Underline"><svg class="tb-icon" viewBox="0 0 16 16"><path d="M4.5 2.5v5a3.5 3.5 0 0 0 7 0v-5"/><line x1="3.5" y1="14" x2="12.5" y2="14"/></svg></button>
120 <button class="tb-btn toolbar-mobile-hide" id="tb-strike" title="Strikethrough" aria-label="Strikethrough"><svg class="tb-icon" viewBox="0 0 16 16"><path d="M10.5 4.5c-.5-1-1.8-2-3.5-2s-3.5 1.2-3.5 3c0 1 .5 1.7 1.2 2"/><path d="M5.5 11.5c.5 1 1.8 2 3.5 2s3.5-1.2 3.5-3c0-.6-.2-1.1-.5-1.5"/><line x1="2" y1="8" x2="14" y2="8"/></svg></button>
121 <div class="tb-color-wrap toolbar-mobile-hide">
122 <input type="color" class="tb-color" id="tb-text-color" value="#1a1815" title="Text color" aria-label="Text color">
123 <span class="tb-color-label">A</span>
124 <span class="tb-color-swatch" id="tb-text-color-swatch"></span>
125 </div>
126 <div class="tb-color-wrap toolbar-mobile-hide">
127 <input type="color" class="tb-color" id="tb-highlight" value="#fff3c4" title="Highlight color" aria-label="Highlight color">
128 <span class="tb-color-label"><svg class="tb-icon" viewBox="0 0 16 16" style="width:12px;height:12px"><path d="M10 2L3.5 8.5 7.5 12.5 14 6z"/><path d="M3.5 8.5L2 14l5.5-1.5"/></svg></span>
129 <span class="tb-color-swatch tb-color-swatch-highlight" id="tb-highlight-swatch"></span>
130 </div>
131 <span class="toolbar-sep toolbar-mobile-hide"></span>
132
133 <!-- Group: Insert objects -->
134 <button class="tb-btn toolbar-mobile-hide" id="tb-link" title="Insert link (Cmd+K)" aria-label="Insert link"><svg class="tb-icon" viewBox="0 0 16 16"><path d="M6.5 9.5l3-3"/><path d="M9 4.5l1.5-1.5a2.12 2.12 0 0 1 3 3L12 7.5"/><path d="M7 11.5L5.5 13a2.12 2.12 0 0 1-3-3L4 8.5"/></svg></button>
135 <button class="tb-btn toolbar-mobile-hide" id="tb-image" title="Insert image" aria-label="Insert image"><svg class="tb-icon" viewBox="0 0 16 16"><rect x="1.5" y="2.5" width="13" height="11" rx="1.5"/><circle cx="5.5" cy="6" r="1.25"/><path d="M1.5 11l3.5-3.5 2.5 2.5 2.5-3L14.5 11"/></svg></button>
136 <button class="tb-btn toolbar-mobile-hide" id="tb-comment" title="Insert comment" aria-label="Insert comment"><svg class="tb-icon" viewBox="0 0 16 16"><path d="M2.5 2.5h11a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1h-3l-2.5 2.5v-2.5h-5.5a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1z"/></svg></button>
137 <span class="toolbar-sep toolbar-mobile-hide"></span>
138
139 <!-- Group: Paragraph formatting -->
140 <div class="toolbar-dropdown toolbar-mobile-hide" id="dd-align">
141 <button class="toolbar-dropdown-toggle" id="tb-align-toggle" title="Text alignment" aria-label="Text alignment" aria-expanded="false" aria-haspopup="true">
142 <span class="dd-icon"><svg class="tb-icon" viewBox="0 0 16 16"><line x1="2" y1="3" x2="14" y2="3"/><line x1="2" y1="6.5" x2="10" y2="6.5"/><line x1="2" y1="10" x2="14" y2="10"/><line x1="2" y1="13.5" x2="10" y2="13.5"/></svg></span><span class="caret">▾</span>
143 </button>
144 <div class="toolbar-dropdown-menu" role="menu">
145 <button class="toolbar-dropdown-item" data-align="left" title="Align left" role="menuitem">
146 <span class="item-icon"><svg class="tb-icon" viewBox="0 0 16 16"><line x1="2" y1="3" x2="14" y2="3"/><line x1="2" y1="6.5" x2="10" y2="6.5"/><line x1="2" y1="10" x2="14" y2="10"/><line x1="2" y1="13.5" x2="10" y2="13.5"/></svg></span><span class="item-label">Align left</span>
147 </button>
148 <button class="toolbar-dropdown-item" data-align="center" title="Align center" role="menuitem">
149 <span class="item-icon"><svg class="tb-icon" viewBox="0 0 16 16"><line x1="2" y1="3" x2="14" y2="3"/><line x1="4" y1="6.5" x2="12" y2="6.5"/><line x1="2" y1="10" x2="14" y2="10"/><line x1="4" y1="13.5" x2="12" y2="13.5"/></svg></span><span class="item-label">Align center</span>
150 </button>
151 <button class="toolbar-dropdown-item" data-align="right" title="Align right" role="menuitem">
152 <span class="item-icon"><svg class="tb-icon" viewBox="0 0 16 16"><line x1="2" y1="3" x2="14" y2="3"/><line x1="6" y1="6.5" x2="14" y2="6.5"/><line x1="2" y1="10" x2="14" y2="10"/><line x1="6" y1="13.5" x2="14" y2="13.5"/></svg></span><span class="item-label">Align right</span>
153 </button>
154 </div>
155 </div>
156 <div class="toolbar-dropdown toolbar-mobile-hide" id="dd-line-spacing">
157 <button class="toolbar-dropdown-toggle" id="tb-line-spacing-toggle" title="Line spacing" aria-label="Line spacing" aria-expanded="false" aria-haspopup="true">
158 <span class="dd-icon"><svg class="tb-icon" viewBox="0 0 16 16"><line x1="5" y1="3" x2="14" y2="3"/><line x1="5" y1="8" x2="14" y2="8"/><line x1="5" y1="13" x2="14" y2="13"/><path d="M2.5 4.5l-1-2h2z"/><path d="M2.5 11.5l-1 2h2z"/><line x1="2.5" y1="4.5" x2="2.5" y2="11.5"/></svg></span><span class="caret">▾</span>
159 </button>
160 <div class="toolbar-dropdown-menu" role="menu">
161 <button class="toolbar-dropdown-item" data-line-spacing="default" role="menuitem">
162 <span class="item-label">Default</span>
163 </button>
164 <button class="toolbar-dropdown-item" data-line-spacing="1" role="menuitem">
165 <span class="item-label">Single (1.0)</span>
166 </button>
167 <button class="toolbar-dropdown-item" data-line-spacing="1.15" role="menuitem">
168 <span class="item-label">1.15</span>
169 </button>
170 <button class="toolbar-dropdown-item" data-line-spacing="1.5" role="menuitem">
171 <span class="item-label">1.5</span>
172 </button>
173 <button class="toolbar-dropdown-item" data-line-spacing="2" role="menuitem">
174 <span class="item-label">Double (2.0)</span>
175 </button>
176 <button class="toolbar-dropdown-item" data-line-spacing="2.5" role="menuitem">
177 <span class="item-label">2.5</span>
178 </button>
179 <button class="toolbar-dropdown-item" data-line-spacing="3" role="menuitem">
180 <span class="item-label">3.0</span>
181 </button>
182 </div>
183 </div>
184 <span class="toolbar-sep"></span>
185
186 <!-- Group: Lists & indentation -->
187 <button class="tb-btn" id="tb-bullet-list" title="Bullet list" aria-label="Bullet list"><svg class="tb-icon" viewBox="0 0 16 16"><circle cx="3" cy="4" r="1.25" fill="currentColor" stroke="none"/><circle cx="3" cy="8" r="1.25" fill="currentColor" stroke="none"/><circle cx="3" cy="12" r="1.25" fill="currentColor" stroke="none"/><line x1="6.5" y1="4" x2="14" y2="4"/><line x1="6.5" y1="8" x2="14" y2="8"/><line x1="6.5" y1="12" x2="14" y2="12"/></svg></button>
188 <button class="tb-btn" id="tb-ordered-list" title="Numbered list" aria-label="Numbered list"><svg class="tb-icon" viewBox="0 0 16 16"><text x="2" y="5.5" font-size="4.5" fill="currentColor" stroke="none" font-family="sans-serif">1</text><text x="2" y="9.5" font-size="4.5" fill="currentColor" stroke="none" font-family="sans-serif">2</text><text x="2" y="13.5" font-size="4.5" fill="currentColor" stroke="none" font-family="sans-serif">3</text><line x1="6.5" y1="4" x2="14" y2="4"/><line x1="6.5" y1="8" x2="14" y2="8"/><line x1="6.5" y1="12" x2="14" y2="12"/></svg></button>
189 <button class="tb-btn toolbar-mobile-hide" id="tb-task-list" title="Task list" aria-label="Task list"><svg class="tb-icon" viewBox="0 0 16 16"><rect x="1.5" y="1.5" width="5" height="5" rx="1"/><path d="M2.5 4l1.5 1.5 3-3"/><rect x="1.5" y="9.5" width="5" height="5" rx="1"/><line x1="8.5" y1="4" x2="14.5" y2="4"/><line x1="8.5" y1="12" x2="14.5" y2="12"/></svg></button>
190 <button class="tb-btn toolbar-mobile-hide" id="tb-indent" title="Increase indent" aria-label="Increase indent"><svg class="tb-icon" viewBox="0 0 16 16"><line x1="2" y1="3" x2="14" y2="3"/><line x1="7" y1="6.5" x2="14" y2="6.5"/><line x1="7" y1="10" x2="14" y2="10"/><line x1="2" y1="13.5" x2="14" y2="13.5"/><path d="M2 6l3 2.25-3 2.25z" fill="currentColor" stroke="none"/></svg></button>
191 <button class="tb-btn toolbar-mobile-hide" id="tb-outdent" title="Decrease indent" aria-label="Decrease indent"><svg class="tb-icon" viewBox="0 0 16 16"><line x1="2" y1="3" x2="14" y2="3"/><line x1="7" y1="6.5" x2="14" y2="6.5"/><line x1="7" y1="10" x2="14" y2="10"/><line x1="2" y1="13.5" x2="14" y2="13.5"/><path d="M5 6l-3 2.25 3 2.25z" fill="currentColor" stroke="none"/></svg></button>
192 <span class="toolbar-sep toolbar-mobile-hide"></span>
193
194 <!-- Mobile more button (visible only on mobile) -->
195 <button class="tb-btn toolbar-mobile-more" id="tb-mobile-more" title="More formatting" aria-label="More formatting" aria-expanded="false" aria-haspopup="true"><svg class="tb-icon" viewBox="0 0 16 16"><circle cx="3" cy="8" r="1.25" fill="currentColor" stroke="none"/><circle cx="8" cy="8" r="1.25" fill="currentColor" stroke="none"/><circle cx="13" cy="8" r="1.25" fill="currentColor" stroke="none"/></svg></button>
196
197 <!-- More overflow menu -->
198 <div class="toolbar-overflow" id="overflow-menu">
199 <button class="toolbar-overflow-toggle" id="overflow-toggle" title="More options" aria-label="More options" aria-expanded="false" aria-haspopup="true">
200 <svg class="tb-icon" viewBox="0 0 16 16"><circle cx="8" cy="3" r="1.25" fill="currentColor" stroke="none"/><circle cx="8" cy="8" r="1.25" fill="currentColor" stroke="none"/><circle cx="8" cy="13" r="1.25" fill="currentColor" stroke="none"/></svg>
201 </button>
202 <div class="toolbar-overflow-menu" role="menu">
203 <!-- Section: Block elements -->
204 <button class="toolbar-dropdown-item" id="tb-blockquote" title="Blockquote" role="menuitem">
205 <span class="item-icon"><svg class="tb-icon" viewBox="0 0 16 16"><path d="M3 3v10"/><line x1="6" y1="5" x2="14" y2="5"/><line x1="6" y1="8" x2="12" y2="8"/><line x1="6" y1="11" x2="14" y2="11"/></svg></span><span class="item-label">Blockquote</span>
206 </button>
207 <button class="toolbar-dropdown-item" id="tb-codeblock" title="Code block" role="menuitem">
208 <span class="item-icon"><svg class="tb-icon" viewBox="0 0 16 16"><path d="M5.5 4L2.5 8l3 4"/><path d="M10.5 4l3 4-3 4"/></svg></span><span class="item-label">Code block</span>
209 </button>
210 <button class="toolbar-dropdown-item" id="tb-code" title="Inline code" role="menuitem">
211 <span class="item-icon"><svg class="tb-icon" viewBox="0 0 16 16"><path d="M6 4L3 8l3 4"/><path d="M10 4l3 4-3 4"/><line x1="9" y1="2.5" x2="7" y2="13.5"/></svg></span><span class="item-label">Inline code</span>
212 </button>
213 <button class="toolbar-dropdown-item" id="tb-table" title="Insert table" role="menuitem">
214 <span class="item-icon"><svg class="tb-icon" viewBox="0 0 16 16"><rect x="1.5" y="2.5" width="13" height="11" rx="1"/><line x1="1.5" y1="6" x2="14.5" y2="6"/><line x1="1.5" y1="10" x2="14.5" y2="10"/><line x1="6" y1="2.5" x2="6" y2="13.5"/><line x1="10.5" y1="2.5" x2="10.5" y2="13.5"/></svg></span><span class="item-label">Table</span>
215 </button>
216 <button class="toolbar-dropdown-item" id="tb-hr" title="Horizontal rule" role="menuitem">
217 <span class="item-icon"><svg class="tb-icon" viewBox="0 0 16 16"><line x1="2" y1="8" x2="14" y2="8"/></svg></span><span class="item-label">Horizontal rule</span>
218 </button>
219 <div class="toolbar-dropdown-divider"></div>
220
221 <!-- Section: Advanced formatting -->
222 <button class="toolbar-dropdown-item" id="tb-subscript" title="Subscript" role="menuitem">
223 <span class="item-icon"><svg class="tb-icon" viewBox="0 0 16 16"><path d="M2 3l5 5-5 5"/><text x="10" y="14" font-size="6" fill="currentColor" stroke="none" font-family="sans-serif">2</text></svg></span><span class="item-label">Subscript</span>
224 </button>
225 <button class="toolbar-dropdown-item" id="tb-superscript" title="Superscript" role="menuitem">
226 <span class="item-icon"><svg class="tb-icon" viewBox="0 0 16 16"><path d="M2 3l5 5-5 5"/><text x="10" y="6" font-size="6" fill="currentColor" stroke="none" font-family="sans-serif">2</text></svg></span><span class="item-label">Superscript</span>
227 </button>
228 <button class="toolbar-dropdown-item" id="tb-page-break" title="Page break (Cmd+Enter)" role="menuitem">
229 <span class="item-icon"><svg class="tb-icon" viewBox="0 0 16 16"><line x1="2" y1="3" x2="14" y2="3"/><line x1="2" y1="13" x2="14" y2="13"/><line x1="2" y1="8" x2="5" y2="8"/><line x1="7" y1="8" x2="9" y2="8"/><line x1="11" y1="8" x2="14" y2="8"/></svg></span><span class="item-label">Page break</span><span class="item-shortcut">⌘⏎</span>
230 </button>
231 <div class="toolbar-dropdown-divider"></div>
232
233 <!-- Section: Spacing -->
234 <button class="toolbar-dropdown-item" id="tb-para-spacing-toggle" title="Paragraph spacing" role="menuitem">
235 <span class="item-icon"><svg class="tb-icon" viewBox="0 0 16 16"><line x1="5" y1="2" x2="14" y2="2"/><line x1="5" y1="6" x2="14" y2="6"/><line x1="5" y1="10" x2="14" y2="10"/><line x1="5" y1="14" x2="14" y2="14"/><path d="M2 3.5v2"/><path d="M2 7.5v2"/></svg></span><span class="item-label">Paragraph spacing...</span>
236 </button>
237 <div class="toolbar-dropdown-divider"></div>
238
239 <!-- Section: Document -->
240 <button class="toolbar-dropdown-item" id="tb-spellcheck" title="Toggle spell check" role="menuitem">
241 <span class="item-icon"><svg class="tb-icon" viewBox="0 0 16 16"><path d="M2 8l3 4 7-8"/></svg></span><span class="item-label">Spell check</span>
242 </button>
243 <button class="toolbar-dropdown-item" id="tb-export-html" title="Export as HTML (Cmd+Shift+S)" role="menuitem">
244 <span class="item-icon"><svg class="tb-icon" viewBox="0 0 16 16"><path d="M5 4L2 8l3 4"/><path d="M11 4l3 4-3 4"/></svg></span><span class="item-label">Export HTML</span><span class="item-shortcut">⌘⇧S</span>
245 </button>
246 <button class="toolbar-dropdown-item" id="tb-export-md" title="Export as Markdown" role="menuitem">
247 <span class="item-icon"><svg class="tb-icon" viewBox="0 0 16 16"><rect x="1" y="3" width="14" height="10" rx="1.5"/><path d="M4 10V6l2 2.5L8 6v4"/><path d="M11 10l2-2.5L11 5"/></svg></span><span class="item-label">Export Markdown</span>
248 </button>
249 <button class="toolbar-dropdown-item" id="tb-export-txt" title="Export as plain text" role="menuitem">
250 <span class="item-icon"><svg class="tb-icon" viewBox="0 0 16 16"><path d="M4 2h6l3 3v9H4z"/><line x1="6" y1="7" x2="11" y2="7"/><line x1="6" y1="10" x2="11" y2="10"/></svg></span><span class="item-label">Export Text</span>
251 </button>
252 <button class="toolbar-dropdown-item" id="tb-export-pdf" title="Export as PDF (Cmd+Shift+P)" role="menuitem">
253 <span class="item-icon"><svg class="tb-icon" viewBox="0 0 16 16"><path d="M4 2h6l3 3v9H4z"/><text x="5.5" y="12" font-size="5" fill="currentColor" stroke="none" font-family="sans-serif" font-weight="bold">PDF</text></svg></span><span class="item-label">Export PDF</span><span class="item-shortcut">⌘⇧P</span>
254 </button>
255 <button class="toolbar-dropdown-item" id="tb-export-docx" title="Export as Word document" role="menuitem">
256 <span class="item-icon"><svg class="tb-icon" viewBox="0 0 16 16"><path d="M4 2h6l3 3v9H4z"/><text x="4.5" y="12" font-size="5" fill="currentColor" stroke="none" font-family="sans-serif" font-weight="bold">DOC</text></svg></span><span class="item-label">Export Word</span>
257 </button>
258 <button class="toolbar-dropdown-item" id="tb-import" title="Import file" role="menuitem">
259 <span class="item-icon"><svg class="tb-icon" viewBox="0 0 16 16"><path d="M8 10V2"/><path d="M5 5l3-3 3 3"/><path d="M2 10v3h12v-3"/></svg></span><span class="item-label">Import file</span>
260 </button>
261 </div>
262 </div>
263
264 <!-- Paragraph spacing sub-menu (hidden, triggered from overflow) -->
265 <div class="toolbar-dropdown toolbar-dropdown-sub" id="dd-para-spacing" style="display:none;position:fixed;z-index:60">
266 <div class="toolbar-dropdown-menu" role="menu" style="display:block">
267 <button class="toolbar-dropdown-item" data-para-spacing="default" role="menuitem"><span class="item-label">Default</span></button>
268 <button class="toolbar-dropdown-item" data-para-spacing="none" role="menuitem"><span class="item-label">None</span></button>
269 <button class="toolbar-dropdown-item" data-para-spacing="small" role="menuitem"><span class="item-label">Small</span></button>
270 <button class="toolbar-dropdown-item" data-para-spacing="medium" role="menuitem"><span class="item-label">Medium</span></button>
271 <button class="toolbar-dropdown-item" data-para-spacing="large" role="menuitem"><span class="item-label">Large</span></button>
272 </div>
273 </div>
274 </div>
275
276 <!-- Comment popover -->
277 <div class="comment-popover" id="comment-popover" style="display:none">
278 <div class="comment-popover-header">
279 <span class="comment-popover-author" id="comment-author"></span>
280 <span class="comment-popover-time" id="comment-time"></span>
281 </div>
282 <div class="comment-popover-text" id="comment-text"></div>
283 <div class="comment-popover-actions">
284 <button class="btn-ghost comment-resolve-btn" id="comment-resolve">Resolve</button>
285 <button class="btn-ghost comment-delete-btn" id="comment-delete">Delete</button>
286 </div>
287 </div>
288
289 <!-- Suggestion popover -->
290 <div class="suggestion-popover" id="suggestion-popover" style="display:none">
291 <div class="suggestion-popover-header">
292 <span class="suggestion-popover-author" id="suggestion-author"></span>
293 <span class="suggestion-popover-time" id="suggestion-time"></span>
294 <span class="suggestion-popover-type" id="suggestion-type"></span>
295 </div>
296 <div class="suggestion-popover-actions">
297 <button class="btn-ghost suggestion-accept-btn" id="suggestion-accept" title="Accept this suggestion">✓ Accept</button>
298 <button class="btn-ghost suggestion-reject-btn" id="suggestion-reject" title="Reject this suggestion">✗ Reject</button>
299 </div>
300 <div class="suggestion-popover-bulk">
301 <button class="btn-ghost suggestion-accept-all-btn" id="suggestion-accept-all" title="Accept all suggestions">Accept All</button>
302 <button class="btn-ghost suggestion-reject-all-btn" id="suggestion-reject-all" title="Reject all suggestions">Reject All</button>
303 </div>
304 </div>
305
306 <!-- Table toolbar (floating, hidden by default) -->
307 <div class="table-toolbar" id="table-toolbar" style="display:none">
308 <button class="table-tb-btn" data-cmd="addRowBefore" title="Add row above"><svg class="tb-icon" viewBox="0 0 16 16"><path d="M2 6h12M2 10h12M6 6v4M10 6v4"/><path d="M8 2v2" stroke-width="2"/></svg></button>
309 <button class="table-tb-btn" data-cmd="addRowAfter" title="Add row below"><svg class="tb-icon" viewBox="0 0 16 16"><path d="M2 6h12M2 10h12M6 6v4M10 6v4"/><path d="M8 12v2" stroke-width="2"/></svg></button>
310 <span class="table-tb-sep"></span>
311 <button class="table-tb-btn" data-cmd="addColumnBefore" title="Add column left"><svg class="tb-icon" viewBox="0 0 16 16"><path d="M6 2v12M10 2v12M6 6h4M6 10h4"/><path d="M2 8h2" stroke-width="2"/></svg></button>
312 <button class="table-tb-btn" data-cmd="addColumnAfter" title="Add column right"><svg class="tb-icon" viewBox="0 0 16 16"><path d="M6 2v12M10 2v12M6 6h4M6 10h4"/><path d="M12 8h2" stroke-width="2"/></svg></button>
313 <span class="table-tb-sep"></span>
314 <button class="table-tb-btn" data-cmd="deleteRow" title="Delete row"><svg class="tb-icon" viewBox="0 0 16 16"><line x1="4" y1="8" x2="12" y2="8" stroke-width="2"/></svg></button>
315 <button class="table-tb-btn" data-cmd="deleteColumn" title="Delete column"><svg class="tb-icon" viewBox="0 0 16 16"><line x1="4" y1="8" x2="12" y2="8" stroke-width="2"/></svg></button>
316 <span class="table-tb-sep"></span>
317 <button class="table-tb-btn" data-cmd="mergeCells" title="Merge cells"><svg class="tb-icon" viewBox="0 0 16 16"><rect x="2" y="2" width="12" height="12" rx="1"/><path d="M5.5 8h5M8 5.5v5"/></svg></button>
318 <button class="table-tb-btn" data-cmd="splitCell" title="Split cell"><svg class="tb-icon" viewBox="0 0 16 16"><rect x="2" y="2" width="12" height="12" rx="1"/><line x1="8" y1="2" x2="8" y2="14"/></svg></button>
319 <span class="table-tb-sep"></span>
320 <button class="table-tb-btn" data-cmd="toggleHeaderRow" title="Toggle header row"><svg class="tb-icon" viewBox="0 0 16 16"><rect x="2" y="2" width="12" height="12" rx="1"/><line x1="2" y1="6" x2="14" y2="6" stroke-width="2"/></svg></button>
321 <span class="table-tb-sep"></span>
322 <div class="table-tb-color-wrap">
323 <input type="color" class="table-tb-color" id="table-cell-color" value="#ffffff" title="Cell background color">
324 <span class="table-tb-color-label">BG</span>
325 </div>
326 </div>
327
328 <!-- Link preview tooltip (hidden by default) -->
329 <div class="link-preview-tooltip" id="link-preview" style="display:none">
330 <div class="link-preview-url" id="link-preview-url"></div>
331 <div class="link-preview-actions">
332 <button class="btn-ghost link-preview-btn" id="link-preview-open" title="Open link">Open</button>
333 <button class="btn-ghost link-preview-btn" id="link-preview-edit" title="Edit link">Edit</button>
334 <button class="btn-ghost link-preview-btn" id="link-preview-remove" title="Remove link">Remove</button>
335 </div>
336 </div>
337
338 <!-- Zen mode exit button (hidden by default) -->
339 <button class="zen-exit-btn" id="zen-exit" style="display:none" title="Exit zen mode (Cmd+Shift+F)">Exit Zen</button>
340
341 <!-- Share dialog -->
342 <div class="modal-backdrop share-dialog-backdrop" id="share-dialog" style="display:none">
343 <div class="modal share-dialog" role="dialog" aria-modal="true" aria-label="Share document">
344 <div class="share-dialog-header">
345 <h2>Share</h2>
346 <button class="btn-icon share-dialog-close" id="share-dialog-close" title="Close" aria-label="Close share dialog">×</button>
347 </div>
348 <div class="share-dialog-body">
349 <div class="share-link-row">
350 <input type="text" class="share-link-input" id="share-link-input" readonly aria-label="Sharing link">
351 <button class="btn-primary btn-sm" id="share-copy-link">Copy link</button>
352 </div>
353 <div class="share-mode-row">
354 <label class="share-mode-label">
355 <select id="share-mode-select" aria-label="Share mode">
356 <option value="edit">Anyone with link can edit</option>
357 <option value="view">Anyone with link can view</option>
358 </select>
359 </label>
360 </div>
361 <div class="share-expiry-row">
362 <label class="share-expiry-label">Link expiry:
363 <select id="share-expiry" aria-label="Link expiry">
364 <option value="none">No expiry</option>
365 <option value="1h">1 hour</option>
366 <option value="1d">1 day</option>
367 <option value="7d">7 days</option>
368 <option value="30d">30 days</option>
369 </select>
370 </label>
371 </div>
372 </div>
373 </div>
374 </div>
375
376 <!-- Editor + Version History Panel -->
377 <div class="editor-with-sidebar" id="main-content">
378 <!-- Outline sidebar (left) -->
379 <div class="outline-sidebar" id="outline-sidebar" style="display:none">
380 <div class="outline-sidebar-header">
381 <h3>Outline</h3>
382 <button class="btn-icon outline-sidebar-close" id="outline-sidebar-close" title="Close">×</button>
383 </div>
384 <div class="outline-list" id="outline-list">
385 <div class="outline-empty">No headings</div>
386 </div>
387 </div>
388
389 <div class="editor-container">
390 <div class="editor-wrapper" id="editor"></div>
391 <div class="minimap" id="minimap" style="display:none">
392 <div class="minimap-viewport" id="minimap-viewport"></div>
393 <div class="minimap-headings" id="minimap-headings"></div>
394 </div>
395 <textarea class="markdown-source-textarea" id="markdown-source" style="display:none" spellcheck="false" aria-label="Markdown source editor"></textarea>
396 <div class="footnote-section" id="footnote-section" style="display:none"></div>
397 </div>
398
399 <!-- Comments sidebar (right) -->
400 <div class="comments-sidebar" id="comments-sidebar" style="display:none">
401 <div class="comments-header">
402 <h3>Comments</h3>
403 <button class="btn-icon" id="comments-sidebar-close" title="Close">×</button>
404 </div>
405 <div class="comments-list" id="comments-list"></div>
406 <div class="comment-compose">
407 <input type="text" class="comment-reply-input" id="comment-new-input" placeholder="Add comment to selection...">
408 </div>
409 </div>
410
411 <!-- Version history sidebar -->
412 <div class="version-sidebar" id="version-sidebar" style="display:none">
413 <div class="version-sidebar-header">
414 <h3>Version History</h3>
415 <button class="btn-icon version-sidebar-close" id="version-sidebar-close" title="Close">×</button>
416 </div>
417 <div class="version-list" id="version-list">
418 <div class="version-empty">No versions yet</div>
419 </div>
420 <div class="version-preview" id="version-preview" style="display:none">
421 <div class="version-preview-header">
422 <button class="btn-ghost" id="version-back">← Back</button>
423 <button class="btn-primary btn-sm" id="version-restore">Restore this version</button>
424 </div>
425 <div class="version-preview-content" id="version-preview-content"></div>
426 </div>
427 </div>
428 </div>
429
430 <!-- Follow mode banner -->
431 <div class="follow-banner" id="follow-banner" style="display:none">
432 <span id="follow-label">Following</span>
433 <button id="follow-stop">Stop</button>
434 </div>
435
436 <!-- Word/character count footer -->
437 <div class="docs-footer" id="docs-footer">
438 <span id="word-count">0 words</span>
439 <span id="reading-time"></span>
440 <span id="char-count">0 characters</span>
441 <span id="char-count-no-spaces">0 without spaces</span>
442 </div>
443 </div>
444
445 <script type="module" src="./main.ts"></script>
446 <script src="/sw-reload.js"></script>
447 <script src="/theme-toggle.js"></script>
448 <div class="version-badge">v%APP_VERSION%</div>
449</body>
450</html>