sdocs-dev 1.2.0 → 1.3.0

package/public/css/mobile.css

@@ -26,6 +26,13 @@
   #write { padding: 24px 20px 40px; max-width: 100%; }
   #raw { padding: 20px 16px; min-height: calc(100dvh - 36px); font-size: 16px; }
 
+  /* ── File-info card: inset 20px from viewport edges ── */
+  #file-info-card {
+    max-width: none;
+    margin: 16px 20px 0;
+    padding: 8px 12px;
+  }
+
   /* ── Write toolbar: sticky below left-toolbar ── */
   body.write-mode #write-toolbar { position: sticky; top: 36px; z-index: 98; justify-content: flex-start; }
 

package/public/css/panel.css

@@ -383,7 +383,7 @@ body.export-mode #export-panel {
 }
 #statusbar span {
   font-size: 11px;
-  color: var(--text-3);
+  color: var(--text-2);
 }
 #statusbar .dot {
   width: 6px; height: 6px;

package/public/css/rendered.css

@@ -104,6 +104,7 @@
   color: var(--md-link-color);
   text-decoration: var(--md-link-decoration);
   text-underline-offset: 2px;
+  cursor: pointer;
 }
 :is(#rendered, #write) a:hover { opacity: .8; }
 
@@ -129,7 +130,15 @@
 #rendered .section-toggle.open {
   transform: rotate(90deg);
 }
-#rendered .section-toggle:hover {
+#rendered .section-toggle:hover,
+#rendered h1:hover > .section-toggle,
+#rendered .md-section > h2:hover > .section-toggle,
+#rendered .md-section > h3:hover > .section-toggle,
+#rendered .md-section > h4:hover > .section-toggle,
+#rendered > h1:hover ~ .md-section .section-toggle,
+#rendered .md-section > h2:hover ~ .md-section-body .section-toggle,
+#rendered .md-section > h3:hover ~ .md-section-body .section-toggle,
+#rendered .md-section > h4:hover ~ .md-section-body .section-toggle {
   color: var(--text-2);
 }
 #rendered .md-section-body:not(.open):not(:has(.md-section-body.open)) > :not(.md-section) {
@@ -254,6 +263,81 @@
   white-space: pre;
   word-break: normal;
 }
+/* ── Charts ── */
+.sdoc-chart {
+  margin: 1.2em 0;
+  padding: 16px;
+  border-radius: var(--radius, 8px);
+  background: var(--md-chart-bg, var(--md-block-bg, #F5F2EE));
+  max-width: 100%;
+  position: relative;
+}
+.sdoc-chart canvas { max-height: 400px; }
+.sdoc-chart-error { outline: 2px dashed #ef4444; }
+
+/* Chart menu */
+.chart-menu-btn {
+  position: absolute; top: 6px; right: 6px;
+  background: var(--md-chart-bg, var(--md-block-bg, #F5F2EE));
+  border: 1px solid var(--md-copy-btn-border, rgba(0,0,0,0.1));
+  border-radius: 4px;
+  padding: 3px 5px;
+  cursor: pointer; opacity: 0.7;
+  transition: opacity .15s;
+  color: var(--md-chart-text, var(--text-3, #999));
+  font-size: 12px; line-height: 1;
+  display: flex; align-items: center; justify-content: center;
+  z-index: 2;
+}
+.chart-menu-btn:hover { opacity: 1; background: var(--md-copy-btn-hover, rgba(0,0,0,0.05)); }
+
+.chart-menu {
+  display: none; position: absolute; top: 36px; right: 8px;
+  min-width: 160px; width: max-content; background: var(--bg-surface, #fff);
+  border: 1px solid var(--border, #e0dcd7);
+  border-radius: var(--radius, 8px);
+  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
+  padding: 6px 0; z-index: 10; font-size: 13px; color: var(--text, #333);
+}
+.chart-menu.open { display: block; }
+
+.chart-menu-item {
+  display: block; width: 100%; padding: 6px 14px;
+  border: none; background: none; text-align: left;
+  cursor: pointer; font-size: 13px; color: var(--text, #333);
+}
+.chart-menu-item:hover { background: var(--bg-hover, #f5f3f0); }
+
+.chart-menu-sep { height: 1px; background: var(--border, #e0dcd7); margin: 4px 0; }
+
+.chart-menu-toggle {
+  display: flex; align-items: center; gap: 6px;
+  padding: 5px 14px; cursor: pointer; font-size: 13px; color: var(--text-2, #666);
+}
+.chart-menu-toggle:hover { background: var(--bg-hover, #f5f3f0); }
+.chart-menu-toggle input { margin: 0; }
+
+.chart-menu-types { display: flex; gap: 3px; padding: 4px 10px; flex-wrap: wrap; }
+.chart-type-btn {
+  padding: 3px 10px; border: 1px solid var(--border, #e0dcd7);
+  background: none; border-radius: var(--radius-sm, 4px);
+  font-size: 11px; cursor: pointer; color: var(--text-2, #666);
+  white-space: nowrap;
+}
+.chart-type-btn:hover { background: var(--bg-hover, #f5f3f0); }
+.chart-type-btn.active {
+  background: var(--bg-input, #fff); color: var(--text, #333);
+  border-color: var(--border-strong, #c0bbb5); box-shadow: 0 1px 2px rgba(0,0,0,0.06);
+}
+
+.chart-menu-input {
+  display: block; width: calc(100% - 28px); margin: 4px 14px;
+  padding: 4px 8px; border: 1px solid var(--border, #e0dcd7);
+  border-radius: var(--radius-sm, 4px); font-size: 12px;
+  background: var(--bg-input, #fff); color: var(--text, #333);
+}
+.chart-menu-input:focus { outline: none; border-color: var(--accent, #3b82f6); }
+
 :is(#rendered, #write) blockquote {
   border-left: var(--md-bq-border);
   font-size: var(--md-bq-size);
@@ -293,3 +377,102 @@
 }
 :is(#rendered, #write) tr:nth-child(even) td { background: var(--md-table-even-bg); }
 :is(#rendered, #write) img { max-width: 100%; border-radius: var(--radius-md); }
+
+/* ── File-info card (shown when front matter has `file:`) ─────────── */
+/* Inherits the block cascade: --md-fic-bg / --md-fic-text fall back to
+   --md-block-bg / --md-block-text so the card blends in with code blocks,
+   blockquotes, and charts. Override per-doc via `styles.fileinfo` in YAML. */
+#file-info-card[hidden] { display: none; }
+#file-info-card {
+  --fic-bg:    var(--md-fic-bg,   var(--md-block-bg,   var(--bg)));
+  --fic-text:  var(--md-fic-text, var(--md-block-text, var(--text)));
+  --fic-muted:  color-mix(in srgb, var(--fic-text) 60%, transparent);
+  --fic-border: color-mix(in srgb, var(--fic-text) 15%, transparent);
+  --fic-hover:  color-mix(in srgb, var(--fic-text) 8%, transparent);
+
+  max-width: 680px;
+  margin: 24px auto 0;
+  padding: 10px 16px;
+  background: var(--fic-bg);
+  border: 1px solid var(--fic-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-sm);
+  font-family: var(--font-ui);
+  font-size: 13px;
+  color: var(--fic-text);
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+#file-info-card .fic-rows { display: flex; flex-direction: column; gap: 4px; }
+#file-info-card .fic-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 2px 0;
+  border-radius: var(--radius-sm);
+}
+#file-info-card .fic-label {
+  color: var(--fic-muted);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  min-width: 52px;
+}
+#file-info-card .fic-value {
+  flex: 1;
+  min-width: 0;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12.5px;
+  color: var(--fic-text);
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+#file-info-card .fic-local-pill {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--fic-muted);
+  background: var(--fic-hover);
+  border: 1px solid var(--fic-border);
+  border-radius: 999px;
+  padding: 2px 7px;
+}
+#file-info-card .fic-copy,
+#file-info-card .fic-action {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: transparent;
+  border: 1px solid var(--fic-border);
+  color: var(--fic-text);
+  border-radius: var(--radius-sm);
+  padding: 4px 8px;
+  font-family: var(--font-ui);
+  font-size: 12px;
+  cursor: pointer;
+  transition: background .1s, border-color .1s, color .1s;
+}
+#file-info-card .fic-copy { padding: 3px 6px; }
+#file-info-card .fic-copy:hover,
+#file-info-card .fic-action:hover {
+  background: var(--fic-hover);
+  color: var(--fic-text);
+}
+#file-info-card .fic-footer {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-top: 2px;
+}
+#file-info-card .fic-privacy-note {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  color: var(--fic-muted);
+}
+#file-info-card .fic-privacy-note[hidden] { display: none; }

package/public/index.html

@@ -11,7 +11,7 @@
 <link rel="stylesheet" href="/public/css/panel.css">
 <link rel="stylesheet" href="/public/css/write.css">
 <link rel="stylesheet" href="/public/css/mobile.css">
-<script>
+<script nonce="__CSP_NONCE__">
   (function(){
     var t = localStorage.getItem('sdocs-theme');
     if (!t) t = window.matchMedia('(prefers-color-scheme:dark)').matches ? 'dark' : 'light';
@@ -46,22 +46,14 @@
         <button class="btn" id="btn-export" title="Export">
           <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>
         </button>
-        <span class="write-tb-sep"></span>
         <button class="btn" id="btn-new" title="New document">
           <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>
         </button>
+        <span class="write-tb-sep"></span>
+        <button class="btn" id="btn-theme" title="Toggle dark mode" aria-label="Toggle dark mode">
+          <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"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" stroke-width="2"/></svg>
+        </button>
       </div>
-      <button id="btn-expand-all" class="toolbar-icon-btn" title="Expand all sections" aria-label="Expand all sections">
-        <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>
-      </button>
-      <button id="btn-collapse-all" class="toolbar-icon-btn" title="Collapse all sections" aria-label="Collapse all sections">
-        <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>
-      </button>
-      <button id="btn-theme" title="Toggle dark mode" aria-label="Toggle dark mode">
-        <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">
-          <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/>
-        </svg>
-      </button>
       <span id="drop-hint">
         <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>
         Drop .md to load
@@ -105,7 +97,17 @@
         <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>
       </button>
     </div>
-    <div id="content-area">
+    <div id="content-area" tabindex="0">
+      <div id="file-info-card" hidden>
+        <div class="fic-rows"></div>
+        <div class="fic-footer">
+          <button class="fic-action" id="fic-copy-all" title="Copy the full markdown (body + front matter)">
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
+            <span>Copy whole file</span>
+          </button>
+          <span class="fic-privacy-note" hidden><span class="fic-local-pill">local only</span> rows aren't included in shared sdocs</span>
+        </div>
+      </div>
       <div id="rendered"></div>
       <div id="write" contenteditable="true" spellcheck="true"></div>
       <textarea id="raw" spellcheck="false"></textarea>
@@ -218,37 +220,87 @@
         </div>
 
         <div class="sub-section">
-          <div class="sub-header" data-target="sub-colors-code">
-            <span class="arrow">▶</span> Code
+          <div class="sub-header" data-target="sub-colors-blocks">
+            <span class="arrow">▶</span> Blocks
           </div>
-          <div class="sub-body" id="sub-colors-code">
+          <div class="sub-body" id="sub-colors-blocks">
+            <p style="font-size:11px; color:var(--text-3); margin:0 0 8px; line-height:1.5;">Default for code blocks, blockquotes, and charts. Override individually below.</p>
             <div class="control-row">
               <label>Background</label>
-              <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>
+              <div class="color-pair"><input type="color" id="ctrl-block-bg" value="#f4f1ed"><button class="reset-btn" id="reset-block-bg" title="Reset to default">↺</button></div>
             </div>
             <div class="control-row">
               <label>Text</label>
-              <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>
+              <div class="color-pair"><input type="color" id="ctrl-block-text" value="#6b6560"><button class="reset-btn" id="reset-block-text" title="Reset to default">↺</button></div>
             </div>
-          </div>
-        </div>
 
-        <div class="sub-section">
-          <div class="sub-header" data-target="sub-colors-bq">
-            <span class="arrow">▶</span> Blockquote
-          </div>
-          <div class="sub-body" id="sub-colors-bq">
-            <div class="control-row">
-              <label>Border</label>
-              <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>
+            <div class="sub-section">
+              <div class="sub-header" data-target="sub-colors-code">
+                <span class="arrow">▶</span> Code
+              </div>
+              <div class="sub-body" id="sub-colors-code">
+                <div class="control-row">
+                  <label>Background</label>
+                  <div class="color-pair"><input type="color" id="ctrl-code-bg" value="#f4f1ed"><button class="reset-btn" id="reset-code-bg" title="Follow block background">↺</button></div>
+                </div>
+                <div class="control-row">
+                  <label>Text</label>
+                  <div class="color-pair"><input type="color" id="ctrl-code-color" value="#6b21a8"><button class="reset-btn" id="reset-code-color" title="Follow block text">↺</button></div>
+                </div>
+              </div>
             </div>
-            <div class="control-row">
-              <label>Background</label>
-              <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>
+
+            <div class="sub-section">
+              <div class="sub-header" data-target="sub-colors-bq">
+                <span class="arrow">▶</span> Blockquote
+              </div>
+              <div class="sub-body" id="sub-colors-bq">
+                <div class="control-row">
+                  <label>Border</label>
+                  <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>
+                </div>
+                <div class="control-row">
+                  <label>Background</label>
+                  <div class="color-pair"><input type="color" id="ctrl-bq-bg" value="#f7f5f2"><button class="reset-btn" id="reset-bq-bg" title="Follow block background">↺</button></div>
+                </div>
+                <div class="control-row">
+                  <label>Text</label>
+                  <div class="color-pair"><input type="color" id="ctrl-bq-color" value="#6b6560"><button class="reset-btn" id="reset-bq-color" title="Follow block text">↺</button></div>
+                </div>
+              </div>
             </div>
-            <div class="control-row">
-              <label>Text</label>
-              <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>
+
+            <div class="sub-section">
+              <div class="sub-header" data-target="sub-colors-charts">
+                <span class="arrow">▶</span> Charts
+              </div>
+              <div class="sub-body" id="sub-colors-charts">
+                <div class="control-row">
+                  <label>Background</label>
+                  <div class="color-pair"><input type="color" id="ctrl-chart-bg" value="#f4f1ed"><button class="reset-btn" id="reset-chart-bg" title="Follow block background">↺</button></div>
+                </div>
+                <div class="control-row">
+                  <label>Text</label>
+                  <div class="color-pair"><input type="color" id="ctrl-chart-text" value="#78716c"><button class="reset-btn" id="reset-chart-text" title="Follow block text">↺</button></div>
+                </div>
+                <div class="control-row">
+                  <label>Accent</label>
+                  <div class="color-pair"><input type="color" id="ctrl-chart-accent" value="#3b82f6"><button class="reset-btn" id="reset-chart-accent" title="Reset to default palette">↺</button></div>
+                </div>
+                <div class="control-row">
+                  <label>Palette</label>
+                  <select id="ctrl-chart-palette">
+                    <option value="monochrome" selected>Monochrome</option>
+                    <option value="complementary">Complementary</option>
+                    <option value="analogous">Analogous</option>
+                    <option value="triadic">Triadic</option>
+                    <option value="pastel">Pastel</option>
+                    <option value="warm">Warm</option>
+                    <option value="cool">Cool</option>
+                    <option value="earth">Earth</option>
+                  </select>
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -567,28 +619,70 @@
 
 <!-- Status bar -->
 <div id="statusbar">
-  <span class="dot"></span>
-  <span id="status-text">Ready</span>
-  <span style="margin-left:auto; font-size:10.5px; color:var(--text-3)">
-    YAML front matter &middot; drag to load
+  <span id="status-text"></span>
+  <span style="margin-left:auto; font-size:10.5px; color:var(--text-2); display:flex; align-items:center; gap:4px; flex-wrap:wrap; justify-content:flex-end">
+    <span>100% private (<a href="https://sdocs.dev/#sec=privacy" target="_blank" rel="noopener" style="color:var(--text-2); text-decoration:underline">learn why</a>)</span>
+    · CLI for you &amp; your agents: <span id="cli-install-wrap" style="display:inline-flex; align-items:center; gap:3px; cursor:pointer" title="Click to copy install command"><code id="cli-install-cmd" style="background:var(--bg-surface); border:1px solid var(--md-link-color, #2563eb); border-radius:3px; padding:1px 5px; font-size:10px; color:var(--md-link-color, #2563eb)">npm i -g sdocs-dev</code><button id="cli-copy-btn" style="background:none; border:none; cursor:pointer; color:var(--md-link-color, #2563eb); padding:0; vertical-align:middle; opacity:0.5; transition:opacity .15s"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button></span>
+    · <a href="https://github.com/JoshInLisbon/SDocs" target="_blank" rel="noopener" style="color:var(--text-2); text-decoration:underline">GitHub</a>
   </span>
 </div>
+<style>
+  #cli-install-wrap:hover #cli-copy-btn { opacity: 1 !important; }
+</style>
+<script nonce="__CSP_NONCE__">
+(function () {
+  var COPY_ICON = '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
+  var CHECK_ICON = '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>';
+  var wrap = document.getElementById('cli-install-wrap');
+  var btn = document.getElementById('cli-copy-btn');
+  if (wrap && btn) wrap.addEventListener('click', function () {
+    navigator.clipboard.writeText('npm i -g sdocs-dev').then(function () {
+      btn.innerHTML = CHECK_ICON;
+      setTimeout(function () { btn.innerHTML = COPY_ICON; }, 1500);
+    });
+  });
+})();
+</script>
 
-<script src="/public/brotli-wasm.js"></script>
+<script src="/public/brotli-wasm-v1.js"></script>
 <script src="/public/vendor/marked.min.js"></script>
+<script src="/public/vendor/purify.min.js"></script>
 <script src="/public/sdocs-yaml.js"></script>
 <script src="/public/sdocs-styles.js"></script>
 <script src="/public/sdocs-state.js"></script>
+<script src="/public/sdocs-slugify.js"></script>
 <script src="/public/sdocs-theme.js"></script>
 <script src="/public/sdocs-controls.js"></script>
 <script src="/public/sdocs-export.js"></script>
 <script src="/public/sdocs-write.js"></script>
+<script src="/public/sdocs-charts.js"></script>
 <script src="/public/sdocs-app.js"></script>
-<script>
+<script nonce="__CSP_NONCE__">
 var APP_VERSION = '__APP_VERSION__';
-if ('serviceWorker' in navigator) {
+var SDOCS_DEV = '__SDOCS_DEV__' === '1';
+// Cohort: store the ISO week of first visit for retention tracking.
+// Not a unique ID — groups all visitors who first came the same week.
+if (!localStorage.getItem('sdocs_cohort')) {
+  try {
+    var _d = new Date(), _u = new Date(Date.UTC(_d.getFullYear(), _d.getMonth(), _d.getDate()));
+    var _dn = _u.getUTCDay() || 7;
+    _u.setUTCDate(_u.getUTCDate() + 4 - _dn);
+    var _ys = new Date(Date.UTC(_u.getUTCFullYear(), 0, 1));
+    var _wn = Math.ceil((((_u - _ys) / 86400000) + 1) / 7);
+    localStorage.setItem('sdocs_cohort', _u.getUTCFullYear() + '-W' + String(_wn).padStart(2, '0'));
+  } catch (e) { /* private browsing or storage disabled */ }
+}
+if (SDOCS_DEV && 'serviceWorker' in navigator) {
+  // Dev mode: unregister any existing SW and clear caches so edits are picked up instantly.
+  navigator.serviceWorker.getRegistrations().then(function (regs) {
+    regs.forEach(function (r) { r.unregister(); });
+  });
+  if (window.caches) caches.keys().then(function (ks) { ks.forEach(function (k) { caches.delete(k); }); });
+} else if ('serviceWorker' in navigator) {
+  var _cohort = '';
+  try { _cohort = localStorage.getItem('sdocs_cohort') || ''; } catch (e) {}
   navigator.serviceWorker.register('/sw.js').then(function (reg) {
-    var msg = { type: 'check-update', version: APP_VERSION };
+    var msg = { type: 'check-update', version: APP_VERSION, cohort: _cohort };
     if (reg.active) reg.active.postMessage(msg);
     navigator.serviceWorker.addEventListener('controllerchange', function () {
       if (navigator.serviceWorker.controller) navigator.serviceWorker.controller.postMessage(msg);