sdocs-dev 1.2.0 → 1.3.1

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.
package/public/index.html DELETED
@@ -1,600 +0,0 @@
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">
6
- <title>SDocs</title>
7
- <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Crect x='2' y='2' width='28' height='28' rx='7' fill='%232563EB' fill-opacity='.15'/%3E%3Crect x='2' y='2' width='28' height='28' rx='7' stroke='%232563EB' stroke-width='2'/%3E%3Cpath d='M9 11h14M9 16h11M9 21h8' stroke='%232563EB' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E">
8
- <link rel="stylesheet" href="/public/css/tokens.css">
9
- <link rel="stylesheet" href="/public/css/layout.css">
10
- <link rel="stylesheet" href="/public/css/rendered.css">
11
- <link rel="stylesheet" href="/public/css/panel.css">
12
- <link rel="stylesheet" href="/public/css/write.css">
13
- <link rel="stylesheet" href="/public/css/mobile.css">
14
- <script>
15
- (function(){
16
- var t = localStorage.getItem('sdocs-theme');
17
- if (!t) t = window.matchMedia('(prefers-color-scheme:dark)').matches ? 'dark' : 'light';
18
- if (t === 'dark') document.documentElement.dataset.theme = 'dark';
19
- })();
20
- </script>
21
- </head>
22
- <body>
23
-
24
- <div id="main">
25
- <!-- ── Left panel ── -->
26
- <div id="left">
27
- <div id="left-toolbar">
28
- <a id="toolbar-brand" href="#" title="SDocs — reset to defaults">
29
- <span class="toolbar-brand-text toolbar-brand-full">SmallDocs</span>
30
- <span class="toolbar-brand-text toolbar-brand-short">SDocs</span>
31
- <span class="toolbar-brand-text toolbar-brand-tiny">SD</span>
32
- </a>
33
- <div class="toggle-group">
34
- <button class="btn active" id="btn-read" title="Read">
35
- <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 7v14"/><path d="M16 12h2"/><path d="M16 8h2"/><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/><path d="M6 12h2"/><path d="M6 8h2"/></svg>
36
- </button>
37
- <button class="btn" id="btn-style" title="Style">
38
- <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m14.622 17.897-10.68-2.913"/><path d="M18.376 2.622a1 1 0 1 1 3.002 3.002L17.36 9.643a.5.5 0 0 0 0 .707l.944.944a2.41 2.41 0 0 1 0 3.408l-.944.944a.5.5 0 0 1-.707 0L8.354 7.348a.5.5 0 0 1 0-.707l.944-.944a2.41 2.41 0 0 1 3.408 0l.944.944a.5.5 0 0 0 .707 0z"/><path d="M9 8c-1.804 2.71-3.97 3.46-6.583 3.948a.507.507 0 0 0-.302.819l7.32 8.883a1 1 0 0 0 1.185.204C12.735 20.405 16 16.792 16 15"/></svg>
39
- </button>
40
- <button class="btn" id="btn-write" title="Write">
41
- <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"/></svg>
42
- </button>
43
- <button class="btn" id="btn-raw" title="Raw">
44
- <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
45
- </button>
46
- <button class="btn" id="btn-export" title="Export">
47
- <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
48
- </button>
49
- <span class="write-tb-sep"></span>
50
- <button class="btn" id="btn-new" title="New document">
51
- <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11.35 22H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.706.706l3.588 3.588A2.4 2.4 0 0 1 20 8v5.35"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/><path d="M14 19h6"/><path d="M17 16v6"/></svg>
52
- </button>
53
- </div>
54
- <button id="btn-expand-all" class="toolbar-icon-btn" title="Expand all sections" aria-label="Expand all sections">
55
- <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M15 6V11C15 13.21 13.21 15 11 15H6C5.26 15 4.62 14.6 4.27 14H11C12.65 14 14 12.65 14 11V4.27C14.6 4.62 15 5.26 15 6ZM11 13H4C2.897 13 2 12.103 2 11V4C2 2.897 2.897 2 4 2H11C12.103 2 13 2.897 13 4V11C13 12.103 12.103 13 11 13ZM4 12H11C11.551 12 12 11.552 12 11V4C12 3.449 11.551 3 11 3H4C3.449 3 3 3.449 3 4V11C3 11.552 3.449 12 4 12ZM9.5 7H8V5.5C8 5.224 7.776 5 7.5 5C7.224 5 7 5.224 7 5.5V7H5.5C5.224 7 5 7.224 5 7.5C5 7.776 5.224 8 5.5 8H7V9.5C7 9.776 7.224 10 7.5 10C7.776 10 8 9.776 8 9.5V8H9.5C9.776 8 10 7.776 10 7.5C10 7.224 9.776 7 9.5 7Z"/></svg>
56
- </button>
57
- <button id="btn-collapse-all" class="toolbar-icon-btn" title="Collapse all sections" aria-label="Collapse all sections">
58
- <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M14 4.27051C14.5999 4.62053 15 5.26009 15 6V11C15 13.21 13.21 15 11 15H6C5.26009 15 4.62053 14.5999 4.27051 14H11C12.65 14 14 12.65 14 11V4.27051Z"/><path d="M9.5 7C9.776 7 10 7.224 10 7.5C10 7.776 9.776 8 9.5 8H5.5C5.224 8 5 7.776 5 7.5C5 7.224 5.224 7 5.5 7H9.5Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M11 2C12.103 2 13 2.897 13 4V11C13 12.103 12.103 13 11 13H4C2.897 13 2 12.103 2 11V4C2 2.897 2.897 2 4 2H11ZM4 3C3.449 3 3 3.449 3 4V11C3 11.552 3.449 12 4 12H11C11.551 12 12 11.552 12 11V4C12 3.449 11.551 3 11 3H4Z"/></svg>
59
- </button>
60
- <button id="btn-theme" title="Toggle dark mode" aria-label="Toggle dark mode">
61
- <svg id="icon-theme" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
62
- <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/>
63
- </svg>
64
- </button>
65
- <span id="drop-hint">
66
- <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M6 1v7M3.5 5.5L6 8l2.5-2.5M2 10h8" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
67
- Drop .md to load
68
- </span>
69
- </div>
70
- <div id="write-toolbar">
71
- <button class="write-tb-btn" id="wb-bold" title="Bold (Ctrl+B)"><strong>B</strong></button>
72
- <button class="write-tb-btn" id="wb-italic" title="Italic (Ctrl+I)"><em>I</em></button>
73
- <button class="write-tb-btn" id="wb-strike" title="Strikethrough (Ctrl+Shift+X)"><s>S</s></button>
74
- <button class="write-tb-btn" id="wb-code" title="Inline code (Ctrl+E)"><code>&lt;/&gt;</code></button>
75
- <span class="write-tb-sep"></span>
76
- <button class="write-tb-btn" id="wb-h1" title="Heading 1">H1</button>
77
- <button class="write-tb-btn" id="wb-h2" title="Heading 2">H2</button>
78
- <button class="write-tb-btn" id="wb-h3" title="Heading 3">H3</button>
79
- <button class="write-tb-btn" id="wb-h4" title="Heading 4">H4</button>
80
- <button class="write-tb-btn" id="wb-h5" title="Heading 5">H5</button>
81
- <button class="write-tb-btn" id="wb-p" title="Normal paragraph">&#182;</button>
82
- <span class="write-tb-sep"></span>
83
- <button class="write-tb-btn" id="wb-ul" title="Bullet list">
84
- <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><circle cx="3" cy="6" r="1.5" fill="currentColor" stroke="none"/><circle cx="3" cy="12" r="1.5" fill="currentColor" stroke="none"/><circle cx="3" cy="18" r="1.5" fill="currentColor" stroke="none"/></svg>
85
- </button>
86
- <button class="write-tb-btn" id="wb-ol" title="Numbered list">
87
- <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="10" y1="6" x2="21" y2="6"/><line x1="10" y1="12" x2="21" y2="12"/><line x1="10" y1="18" x2="21" y2="18"/><text x="2" y="8" font-size="8" fill="currentColor" stroke="none" font-family="sans-serif">1</text><text x="2" y="14" font-size="8" fill="currentColor" stroke="none" font-family="sans-serif">2</text><text x="2" y="20" font-size="8" fill="currentColor" stroke="none" font-family="sans-serif">3</text></svg>
88
- </button>
89
- <button class="write-tb-btn" id="wb-bq" title="Blockquote">
90
- <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="4" x2="3" y2="20"/><line x1="9" y1="8" x2="20" y2="8"/><line x1="9" y1="12" x2="18" y2="12"/><line x1="9" y1="16" x2="16" y2="16"/></svg>
91
- </button>
92
- <button class="write-tb-btn" id="wb-codeblock" title="Code block">
93
- <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
94
- </button>
95
- <span class="write-tb-sep"></span>
96
- <button class="write-tb-btn" id="wb-link" title="Insert link (Ctrl+K)">
97
- <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="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 d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
98
- </button>
99
- <button class="write-tb-btn" id="wb-image" title="Insert image">
100
- <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>
101
- </button>
102
- <button class="write-tb-btn" id="wb-hr" title="Horizontal rule">&#8212;</button>
103
- <span class="write-tb-sep"></span>
104
- <button class="write-tb-btn" id="wb-clear" title="Clear formatting">
105
- <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7V4h16v3"/><path d="M9 20h6"/><path d="M12 4v16"/><line x1="4" y1="20" x2="20" y2="4" stroke-width="1.5" opacity="0.5"/></svg>
106
- </button>
107
- </div>
108
- <div id="content-area">
109
- <div id="rendered"></div>
110
- <div id="write" contenteditable="true" spellcheck="true"></div>
111
- <textarea id="raw" spellcheck="false"></textarea>
112
- </div>
113
- </div>
114
-
115
- <div id="divider"></div>
116
-
117
- <!-- ── Right panel ── -->
118
- <div id="right">
119
- <div id="right-header">Styles</div>
120
-
121
- <!-- GENERAL -->
122
- <div class="panel-section">
123
- <div class="panel-header open" data-target="body-general">
124
- <span class="arrow">
125
- <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M3 2l4 3-4 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
126
- </span>
127
- General
128
- </div>
129
- <div class="panel-body open" id="body-general">
130
- <div class="control-row">
131
- <label>Font family</label>
132
- <select id="ctrl-font-family"></select>
133
- </div>
134
- <div class="control-row">
135
- <label>Base size</label>
136
- <input type="range" id="ctrl-base-size-range" min="10" max="28" step="1" value="16">
137
- <input type="number" id="ctrl-base-size-num" min="10" max="28" value="16">
138
- <span class="unit">px</span>
139
- </div>
140
- <div class="control-row">
141
- <label>Line height</label>
142
- <input type="range" id="ctrl-line-height-range" min="1.0" max="2.5" step="0.05" value="1.75">
143
- <input type="number" id="ctrl-line-height-num" min="1.0" max="2.5" step="0.05" value="1.75">
144
- </div>
145
- <button class="factory-reset-btn" id="factory-reset-styles" title="Reset all styles to defaults">Reset all styles</button>
146
- </div>
147
- </div>
148
-
149
- <!-- COLORS -->
150
- <div class="panel-section">
151
- <div class="panel-header" data-target="body-colors">
152
- <span class="arrow">
153
- <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M3 2l4 3-4 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
154
- </span>
155
- Colors
156
- </div>
157
- <div class="panel-body" id="body-colors">
158
- <div id="theme-tabs">
159
- <div class="toggle-group">
160
- <button class="btn active" id="theme-tab-light">
161
- <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
162
- Light
163
- </button>
164
- <button class="btn" id="theme-tab-dark">
165
- <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg>
166
- Dark
167
- </button>
168
- </div>
169
- </div>
170
- <div class="control-row">
171
- <label>Background</label>
172
- <div class="color-pair"><input type="color" id="ctrl-bg-color" value="#ffffff"><button class="reset-btn" id="reset-bg-color" title="Reset to default">↺</button></div>
173
- </div>
174
- <div class="control-row">
175
- <label>Text</label>
176
- <div class="color-pair"><input type="color" id="ctrl-color" value="#1c1917"><button class="reset-btn" id="reset-color" title="Reset to default">↺</button></div>
177
- </div>
178
-
179
- <div class="sub-section">
180
- <div class="sub-header" data-target="sub-colors-headings">
181
- <span class="arrow">▶</span> Headings
182
- </div>
183
- <div class="sub-body" id="sub-colors-headings">
184
- <div class="control-row">
185
- <label>All</label>
186
- <div class="color-pair"><input type="color" id="ctrl-h-color" value="#1c1917"><button class="reset-btn" id="reset-h-color" title="Follow body text color">↺</button></div>
187
- </div>
188
- <div class="control-row">
189
- <label>H1</label>
190
- <div class="color-pair"><input type="color" id="ctrl-h1-color" value="#1c1917"><button class="reset-btn" id="reset-h1-color" title="Follow header color">↺</button></div>
191
- </div>
192
- <div class="control-row">
193
- <label>H2</label>
194
- <div class="color-pair"><input type="color" id="ctrl-h2-color" value="#1c1917"><button class="reset-btn" id="reset-h2-color" title="Follow header color">↺</button></div>
195
- </div>
196
- <div class="control-row">
197
- <label>H3</label>
198
- <div class="color-pair"><input type="color" id="ctrl-h3-color" value="#1c1917"><button class="reset-btn" id="reset-h3-color" title="Follow header color">↺</button></div>
199
- </div>
200
- <div class="control-row">
201
- <label>H4</label>
202
- <div class="color-pair"><input type="color" id="ctrl-h4-color" value="#1c1917"><button class="reset-btn" id="reset-h4-color" title="Follow header color">↺</button></div>
203
- </div>
204
- </div>
205
- </div>
206
-
207
- <div class="control-row">
208
- <label>Paragraph</label>
209
- <div class="color-pair"><input type="color" id="ctrl-p-color" value="#1c1917"><button class="reset-btn" id="reset-p-color" title="Follow body text color">↺</button></div>
210
- </div>
211
- <div class="control-row">
212
- <label>Lists</label>
213
- <div class="color-pair"><input type="color" id="ctrl-list-color" value="#1c1917"><button class="reset-btn" id="reset-list-color" title="Follow paragraph color">↺</button></div>
214
- </div>
215
- <div class="control-row">
216
- <label>Link</label>
217
- <div class="color-pair"><input type="color" id="ctrl-link-color" value="#2563eb"><button class="reset-btn" id="reset-link-color" title="Reset to default">↺</button></div>
218
- </div>
219
-
220
- <div class="sub-section">
221
- <div class="sub-header" data-target="sub-colors-code">
222
- <span class="arrow">▶</span> Code
223
- </div>
224
- <div class="sub-body" id="sub-colors-code">
225
- <div class="control-row">
226
- <label>Background</label>
227
- <div class="color-pair"><input type="color" id="ctrl-code-bg" value="#f4f1ed"><button class="reset-btn" id="reset-code-bg" title="Reset to default">↺</button></div>
228
- </div>
229
- <div class="control-row">
230
- <label>Text</label>
231
- <div class="color-pair"><input type="color" id="ctrl-code-color" value="#6b21a8"><button class="reset-btn" id="reset-code-color" title="Reset to default">↺</button></div>
232
- </div>
233
- </div>
234
- </div>
235
-
236
- <div class="sub-section">
237
- <div class="sub-header" data-target="sub-colors-bq">
238
- <span class="arrow">▶</span> Blockquote
239
- </div>
240
- <div class="sub-body" id="sub-colors-bq">
241
- <div class="control-row">
242
- <label>Border</label>
243
- <div class="color-pair"><input type="color" id="ctrl-bq-border-color" value="#2563eb"><button class="reset-btn" id="reset-bq-border-color" title="Reset to default">↺</button></div>
244
- </div>
245
- <div class="control-row">
246
- <label>Background</label>
247
- <div class="color-pair"><input type="color" id="ctrl-bq-bg" value="#f7f5f2"><button class="reset-btn" id="reset-bq-bg" title="Reset to default">↺</button></div>
248
- </div>
249
- <div class="control-row">
250
- <label>Text</label>
251
- <div class="color-pair"><input type="color" id="ctrl-bq-color" value="#6b6560"><button class="reset-btn" id="reset-bq-color" title="Reset to default">↺</button></div>
252
- </div>
253
- </div>
254
- </div>
255
- </div>
256
- </div>
257
-
258
- <!-- HEADERS -->
259
- <div class="panel-section">
260
- <div class="panel-header" data-target="body-headers">
261
- <span class="arrow">
262
- <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M3 2l4 3-4 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
263
- </span>
264
- Headers
265
- </div>
266
- <div class="panel-body" id="body-headers">
267
-
268
- <div class="sub-section">
269
- <div class="sub-header" data-target="sub-headers-general">
270
- <span class="arrow">▶</span> General <span class="tag">h1–h4</span>
271
- </div>
272
- <div class="sub-body" id="sub-headers-general">
273
- <div class="control-row">
274
- <label>Font family</label>
275
- <select id="ctrl-h-font-family"><option value="inherit">Same as body</option></select>
276
- </div>
277
- <div class="control-row">
278
- <label>Size scale</label>
279
- <input type="range" id="ctrl-h-scale-range" min="0.5" max="2.0" step="0.05" value="1.0">
280
- <input type="number" id="ctrl-h-scale-num" min="0.5" max="2.0" step="0.05" value="1.0">
281
- </div>
282
- <div class="control-row">
283
- <label>Margin bottom</label>
284
- <input type="range" id="ctrl-h-mb-range" min="0" max="2" step="0.1" value="0.4">
285
- <input type="number" id="ctrl-h-mb-num" min="0" max="2" step="0.1" value="0.4">
286
- <span class="unit">em</span>
287
- </div>
288
- </div>
289
- </div>
290
-
291
- <div class="sub-section">
292
- <div class="sub-header" data-target="sub-h1">
293
- <span class="arrow">▶</span> H1 <span class="tag">h1</span>
294
- </div>
295
- <div class="sub-body" id="sub-h1">
296
- <div class="control-row">
297
- <label>Size</label>
298
- <input type="range" id="ctrl-h1-size-range" min="1" max="4" step="0.1" value="2.1">
299
- <input type="number" id="ctrl-h1-size-num" min="1" max="4" step="0.1" value="2.1">
300
- <span class="unit">em</span>
301
- </div>
302
- <div class="control-row">
303
- <label>Weight</label>
304
- <select id="ctrl-h1-weight">
305
- <option value="400">Regular</option>
306
- <option value="500">Medium</option>
307
- <option value="600">SemiBold</option>
308
- <option value="700" selected>Bold</option>
309
- <option value="800">ExtraBold</option>
310
- </select>
311
- </div>
312
- </div>
313
- </div>
314
-
315
- <div class="sub-section">
316
- <div class="sub-header" data-target="sub-h2">
317
- <span class="arrow">▶</span> H2 <span class="tag">h2</span>
318
- </div>
319
- <div class="sub-body" id="sub-h2">
320
- <div class="control-row">
321
- <label>Size</label>
322
- <input type="range" id="ctrl-h2-size-range" min="1" max="3" step="0.1" value="1.55">
323
- <input type="number" id="ctrl-h2-size-num" min="1" max="3" step="0.1" value="1.55">
324
- <span class="unit">em</span>
325
- </div>
326
- <div class="control-row">
327
- <label>Weight</label>
328
- <select id="ctrl-h2-weight">
329
- <option value="400">Regular</option>
330
- <option value="500">Medium</option>
331
- <option value="600" selected>SemiBold</option>
332
- <option value="700">Bold</option>
333
- </select>
334
- </div>
335
- </div>
336
- </div>
337
-
338
- <div class="sub-section">
339
- <div class="sub-header" data-target="sub-h3">
340
- <span class="arrow">▶</span> H3 <span class="tag">h3</span>
341
- </div>
342
- <div class="sub-body" id="sub-h3">
343
- <div class="control-row">
344
- <label>Size</label>
345
- <input type="range" id="ctrl-h3-size-range" min="0.8" max="2.5" step="0.1" value="1.2">
346
- <input type="number" id="ctrl-h3-size-num" min="0.8" max="2.5" step="0.1" value="1.2">
347
- <span class="unit">em</span>
348
- </div>
349
- <div class="control-row">
350
- <label>Weight</label>
351
- <select id="ctrl-h3-weight">
352
- <option value="400">Regular</option>
353
- <option value="500">Medium</option>
354
- <option value="600" selected>SemiBold</option>
355
- <option value="700">Bold</option>
356
- </select>
357
- </div>
358
- </div>
359
- </div>
360
-
361
- <div class="sub-section">
362
- <div class="sub-header" data-target="sub-h4">
363
- <span class="arrow">▶</span> H4 <span class="tag">h4</span>
364
- </div>
365
- <div class="sub-body" id="sub-h4">
366
- <div class="control-row">
367
- <label>Size</label>
368
- <input type="range" id="ctrl-h4-size-range" min="0.8" max="2" step="0.1" value="1.0">
369
- <input type="number" id="ctrl-h4-size-num" min="0.8" max="2" step="0.1" value="1.0">
370
- <span class="unit">em</span>
371
- </div>
372
- <div class="control-row">
373
- <label>Weight</label>
374
- <select id="ctrl-h4-weight">
375
- <option value="400">Regular</option>
376
- <option value="500">Medium</option>
377
- <option value="600" selected>SemiBold</option>
378
- <option value="700">Bold</option>
379
- </select>
380
- </div>
381
- </div>
382
- </div>
383
-
384
- </div>
385
- </div>
386
-
387
- <!-- PARAGRAPH -->
388
- <div class="panel-section">
389
- <div class="panel-header" data-target="body-paragraph">
390
- <span class="arrow">
391
- <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M3 2l4 3-4 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
392
- </span>
393
- Paragraph
394
- </div>
395
- <div class="panel-body" id="body-paragraph">
396
- <div class="control-row">
397
- <label>Line height</label>
398
- <input type="range" id="ctrl-p-lh-range" min="1.0" max="2.5" step="0.05" value="1.75">
399
- <input type="number" id="ctrl-p-lh-num" min="1.0" max="2.5" step="0.05" value="1.75">
400
- </div>
401
- <div class="control-row">
402
- <label>Margin bottom</label>
403
- <input type="range" id="ctrl-p-mb-range" min="0" max="3" step="0.1" value="1.1">
404
- <input type="number" id="ctrl-p-mb-num" min="0" max="3" step="0.1" value="1.1">
405
- <span class="unit">em</span>
406
- </div>
407
- </div>
408
- </div>
409
-
410
- <!-- LISTS -->
411
- <div class="panel-section">
412
- <div class="panel-header" data-target="body-lists">
413
- <span class="arrow">
414
- <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M3 2l4 3-4 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
415
- </span>
416
- Lists
417
- </div>
418
- <div class="panel-body" id="body-lists">
419
- <div class="control-row">
420
- <label>Item spacing</label>
421
- <input type="range" id="ctrl-list-spacing-range" min="0" max="1.5" step="0.05" value="0.3">
422
- <input type="number" id="ctrl-list-spacing-num" min="0" max="1.5" step="0.05" value="0.3">
423
- <span class="unit">em</span>
424
- </div>
425
- <div class="control-row">
426
- <label>Indent</label>
427
- <input type="range" id="ctrl-list-indent-range" min="0.5" max="3" step="0.1" value="1.6">
428
- <input type="number" id="ctrl-list-indent-num" min="0.5" max="3" step="0.1" value="1.6">
429
- <span class="unit">em</span>
430
- </div>
431
- </div>
432
- </div>
433
-
434
- <!-- LINKS -->
435
- <div class="panel-section">
436
- <div class="panel-header" data-target="body-links">
437
- <span class="arrow">
438
- <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M3 2l4 3-4 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
439
- </span>
440
- Links
441
- </div>
442
- <div class="panel-body" id="body-links">
443
- <div class="control-row">
444
- <label>Decoration</label>
445
- <select id="ctrl-link-decoration">
446
- <option value="underline" selected>Underline</option>
447
- <option value="none">None</option>
448
- <option value="dotted underline">Dotted</option>
449
- <option value="dashed underline">Dashed</option>
450
- </select>
451
- </div>
452
- </div>
453
- </div>
454
-
455
- <!-- CODE -->
456
- <div class="panel-section">
457
- <div class="panel-header" data-target="body-code">
458
- <span class="arrow">
459
- <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M3 2l4 3-4 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
460
- </span>
461
- Code
462
- </div>
463
- <div class="panel-body" id="body-code">
464
- <div class="control-row">
465
- <label>Font family</label>
466
- <select id="ctrl-code-font">
467
- <option value="'JetBrains Mono', 'Fira Mono', monospace" selected>JetBrains Mono</option>
468
- <option value="'Fira Mono', monospace">Fira Mono</option>
469
- <option value="'Source Code Pro', monospace">Source Code Pro</option>
470
- <option value="'Courier New', monospace">Courier New</option>
471
- <option value="monospace">System mono</option>
472
- </select>
473
- </div>
474
- </div>
475
- </div>
476
-
477
- <!-- BLOCKQUOTE -->
478
- <div class="panel-section">
479
- <div class="panel-header" data-target="body-blockquote">
480
- <span class="arrow">
481
- <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M3 2l4 3-4 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
482
- </span>
483
- Blockquote
484
- </div>
485
- <div class="panel-body" id="body-blockquote">
486
- <div class="control-row">
487
- <label>Border width</label>
488
- <input type="range" id="ctrl-bq-bw-range" min="1" max="8" step="1" value="3">
489
- <input type="number" id="ctrl-bq-bw-num" min="1" max="8" value="3">
490
- <span class="unit">px</span>
491
- </div>
492
- <div class="control-row">
493
- <label>Font size</label>
494
- <input type="range" id="ctrl-bq-size-range" min="0.7" max="1.5" step="0.05" value="1.0">
495
- <input type="number" id="ctrl-bq-size-num" min="0.7" max="1.5" step="0.05" value="1.0">
496
- <span class="unit">em</span>
497
- </div>
498
- </div>
499
- </div>
500
-
501
- <!-- SAVE AS DEFAULT -->
502
- <div class="panel-section">
503
- <div class="panel-header" data-target="body-save-default" style="color: var(--accent-text);">
504
- <span class="arrow">
505
- <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M3 2l4 3-4 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
506
- </span>
507
- Save as default styles
508
- </div>
509
- <div class="panel-body" id="body-save-default">
510
- <ul style="font-size:11.5px; color:var(--text-2); margin:0 0 10px; padding-left:1.2em; line-height:1.6; list-style:disc;">
511
- <li>Requires <strong>sdocs-dev</strong> CLI
512
- <ul style="padding-left:1.2em; margin:2px 0 0; list-style:circle;">
513
- <li style="color:var(--text-3);">Install: <code style="font-size:10px; background:var(--bg-surface); border:1px solid var(--border); border-radius:3px; padding:1px 4px;">npm link</code> from project root</li>
514
- </ul>
515
- </li>
516
- <li>Saves to <code style="font-size:10px; background:var(--bg-surface); border:1px solid var(--border); border-radius:3px; padding:1px 4px;">~/.sdocs/styles.yaml</code></li>
517
- <li>Paste the command below in your terminal</li>
518
- </ul>
519
- <div style="display:flex; gap:6px; margin-bottom:8px;">
520
- <button class="btn" id="btn-copy-default" style="flex:1; justify-content:center;">
521
- <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><rect x="3.5" y="3.5" width="7" height="7" rx="1" stroke="currentColor" stroke-width="1.3"/><path d="M8.5 3.5V2a1 1 0 00-1-1H2a1 1 0 00-1 1v5.5a1 1 0 001 1h1.5" stroke="currentColor" stroke-width="1.3"/></svg>
522
- Copy
523
- </button>
524
- </div>
525
- <pre id="save-default-display" style="font-size:10.5px; line-height:1.55; background:var(--bg-input); border:1px solid var(--border); border-radius:var(--radius); padding:10px; overflow-x:auto; white-space:pre-wrap; word-break:break-all; color:var(--text-2); margin:0;"></pre>
526
- <div id="save-default-msg" style="display:none; margin-top:6px; font-size:11px; color:var(--accent-text); text-align:center;"></div>
527
- </div>
528
- </div>
529
-
530
- </div><!-- /#right -->
531
-
532
- <!-- ── Export panel ── -->
533
- <div id="export-panel">
534
- <div id="export-panel-header">Export</div>
535
- <div id="export-panel-body">
536
- <button class="export-option" id="exp-pdf">
537
- <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="2" width="12" height="16" rx="2"/><path d="M8 2v4h8"/><path d="M4 14h16" stroke-dasharray="2 2"/><path d="M8 19h8"/></svg>
538
- <div class="export-option-text">
539
- <span class="export-option-title">PDF</span>
540
- <span class="export-option-desc">Opens print dialog for PDF save</span>
541
- </div>
542
- </button>
543
- <button class="export-option" id="exp-word">
544
- <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="2" width="12" height="16" rx="2"/><path d="M8 2v4h8"/><path d="M8 12l1.5 4 2-3 2 3 1.5-4"/></svg>
545
- <div class="export-option-text">
546
- <span class="export-option-title">Word (.docx)</span>
547
- <span class="export-option-desc">Download as Word document</span>
548
- </div>
549
- </button>
550
- <button class="export-option" id="exp-raw">
551
- <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="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><polyline points="14 2 14 8 20 8"/></svg>
552
- <div class="export-option-text">
553
- <span class="export-option-title">.md</span>
554
- <span class="export-option-desc">Plain markdown, no styles</span>
555
- </div>
556
- </button>
557
- <button class="export-option" id="exp-styled">
558
- <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="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><polyline points="14 2 14 8 20 8"/><path d="M9 15h6"/><path d="M9 11h6"/></svg>
559
- <div class="export-option-text">
560
- <span class="export-option-title">Styled .md</span>
561
- <span class="export-option-desc">Markdown with YAML front matter styles</span>
562
- </div>
563
- </button>
564
- </div>
565
- </div>
566
- </div><!-- /#main -->
567
-
568
- <!-- Status bar -->
569
- <div id="statusbar">
570
- <span class="dot"></span>
571
- <span id="status-text">Ready</span>
572
- <span style="margin-left:auto; font-size:10.5px; color:var(--text-3)">
573
- YAML front matter &middot; drag to load
574
- </span>
575
- </div>
576
-
577
- <script src="/public/brotli-wasm.js"></script>
578
- <script src="/public/vendor/marked.min.js"></script>
579
- <script src="/public/sdocs-yaml.js"></script>
580
- <script src="/public/sdocs-styles.js"></script>
581
- <script src="/public/sdocs-state.js"></script>
582
- <script src="/public/sdocs-theme.js"></script>
583
- <script src="/public/sdocs-controls.js"></script>
584
- <script src="/public/sdocs-export.js"></script>
585
- <script src="/public/sdocs-write.js"></script>
586
- <script src="/public/sdocs-app.js"></script>
587
- <script>
588
- var APP_VERSION = '__APP_VERSION__';
589
- if ('serviceWorker' in navigator) {
590
- navigator.serviceWorker.register('/sw.js').then(function (reg) {
591
- var msg = { type: 'check-update', version: APP_VERSION };
592
- if (reg.active) reg.active.postMessage(msg);
593
- navigator.serviceWorker.addEventListener('controllerchange', function () {
594
- if (navigator.serviceWorker.controller) navigator.serviceWorker.controller.postMessage(msg);
595
- });
596
- });
597
- }
598
- </script>
599
- </body>
600
- </html>