sdocs-dev 1.1.1 → 1.1.2

package/public/index.html

@@ -4,9 +4,6 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>SDocs</title>
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
 <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">
 <link rel="stylesheet" href="/public/css/tokens.css">
 <link rel="stylesheet" href="/public/css/layout.css">
@@ -37,12 +34,12 @@
         <button class="btn active" id="btn-read" title="Read">
           <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>
         </button>
-        <button class="btn" id="btn-write" title="Write">
-          <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>
-        </button>
         <button class="btn" id="btn-style" title="Style">
           <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>
         </button>
+        <button class="btn" id="btn-write" title="Write">
+          <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>
+        </button>
         <button class="btn" id="btn-raw" title="Raw">
           <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>
         </button>
@@ -245,6 +242,10 @@
               <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="Reset to default">↺</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="Reset to default">↺</button></div>
@@ -573,7 +574,7 @@
   </span>
 </div>
 
-<script src="https://cdn.jsdelivr.net/npm/marked@11/marked.min.js"></script>
+<script src="/public/vendor/marked.min.js"></script>
 <script src="/public/sdocs-yaml.js"></script>
 <script src="/public/sdocs-styles.js"></script>
 <script src="/public/sdocs-state.js"></script>
@@ -582,5 +583,17 @@
 <script src="/public/sdocs-export.js"></script>
 <script src="/public/sdocs-write.js"></script>
 <script src="/public/sdocs-app.js"></script>
+<script>
+var APP_VERSION = '__APP_VERSION__';
+if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('/sw.js').then(function (reg) {
+    var msg = { type: 'check-update', version: APP_VERSION };
+    if (reg.active) reg.active.postMessage(msg);
+    navigator.serviceWorker.addEventListener('controllerchange', function () {
+      if (navigator.serviceWorker.controller) navigator.serviceWorker.controller.postMessage(msg);
+    });
+  });
+}
+</script>
 </body>
 </html>

package/public/sdocs-app.js

@@ -263,7 +263,10 @@ function updateHash() {
     }
     var params = new URLSearchParams();
     if (!S._isDefaultState) {
-      var meta = Object.assign({}, S.currentMeta, { styles: S.collectStyles() });
+      var styles = SDocStyles.stripStyleDefaults(S.collectStyles());
+      var meta = Object.assign({}, S.currentMeta);
+      if (Object.keys(styles).length > 0) meta.styles = styles;
+      else delete meta.styles;
       var full = SDocYaml.serializeFrontMatter(meta) + '\n' + S.currentBody;
       var compressed = await compressText(full);
       params.set('md', compressed);
@@ -415,6 +418,10 @@ document.getElementById('factory-reset-styles').addEventListener('click', functi
 
 document.getElementById('toolbar-brand').addEventListener('click', function(e) {
   e.preventDefault();
+  if (window.location.hash && window.location.hash.indexOf('md=') !== -1) {
+    window.open(window.location.origin + window.location.pathname, '_blank');
+    return;
+  }
   S.resetAllStyles();
   loadText(DEFAULT_MD);
   S._isDefaultState = true;
@@ -476,19 +483,26 @@ S.loadText = loadText;
 // Sync theme tabs to initial theme
 S.updateThemeTabs(S.activeTheme);
 
-// ── Init ──────────────────────────────────
+// ── Load document from URL hash ──────────────────────────────────
 
-(async function () {
-  await _defaultReady;
-  if (window.location.pathname === '/new') {
-    startNewDocument();
-    return;
-  }
+var _lastLoadedHash = null;
+
+async function loadFromHash() {
   var hash = window.location.hash.slice(1);
+  if (hash === _lastLoadedHash) return;
+  _lastLoadedHash = hash;
+
+  clearTimeout(S._hashTimer);
+
   var params = hash ? new URLSearchParams(hash) : new URLSearchParams();
   var mdParam = params.get('md');
   var modeParam = params.get('mode');
   var stylesParam = params.get('styles');
+  var themeParam = params.get('theme');
+  var secParam = params.get('sec');
+
+  S.resetAllStyles();
+
   if (mdParam) {
     try {
       S._isDefaultState = false;
@@ -498,12 +512,29 @@ S.updateThemeTabs(S.activeTheme);
       console.warn('sdocs-dev: could not decode hash', e);
     }
   }
+
+  if (themeParam === 'light' || themeParam === 'dark') {
+    var savedPref = localStorage.getItem('sdocs-theme');
+    S.switchThemeAndUpdate(themeParam);
+    // Restore localStorage — URL theme is view-only, not persistent
+    if (savedPref) localStorage.setItem('sdocs-theme', savedPref);
+    else localStorage.removeItem('sdocs-theme');
+  } else {
+    // Restore user's actual preferred theme (previous hash may have overridden it)
+    var preferred = S.getPreferredTheme();
+    if (preferred !== S.activeTheme) {
+      S.switchThemeAndUpdate(preferred);
+    }
+  }
+
   if (modeParam && ['read', 'style', 'write', 'raw', 'export'].includes(modeParam)) {
     setMode(modeParam, true);
   } else {
     setMode('read', true);
   }
+
   if (!mdParam) {
+    S._isDefaultState = true;
     loadText(DEFAULT_MD);
     if (stylesParam) {
       try {
@@ -515,13 +546,11 @@ S.updateThemeTabs(S.activeTheme);
     }
   }
 
-  var secParam = params.get('sec');
   if (secParam) {
     setTimeout(function() {
       var target = document.getElementById(secParam);
       if (!target) return;
 
-      // Expand the target's own section body (its content)
       var ownSection = target.closest('.md-section');
       if (ownSection) {
         var ownBody = ownSection.querySelector(':scope > .md-section-body');
@@ -530,7 +559,6 @@ S.updateThemeTabs(S.activeTheme);
         if (ownToggle) { ownToggle.classList.add('open'); }
       }
 
-      // Expand all ancestor section bodies
       var el = target.closest('.md-section-body');
       while (el) {
         el.classList.add('open');
@@ -542,7 +570,6 @@ S.updateThemeTabs(S.activeTheme);
         el = el.parentElement ? el.parentElement.closest('.md-section-body') : null;
       }
 
-      // Add scroll spacer so the target can reach the top
       var spacerNeeded = contentArea.clientHeight - (contentArea.scrollHeight - target.offsetTop);
       if (spacerNeeded > 0) {
         var spacer = document.createElement('div');
@@ -554,8 +581,31 @@ S.updateThemeTabs(S.activeTheme);
       target.scrollIntoView({ behavior: 'smooth', block: 'start' });
     }, 200);
   }
+
+  if (!secParam) {
+    contentArea.scrollTop = 0;
+  }
+}
+
+// ── Init ──────────────────────────────────
+
+(async function () {
+  await _defaultReady;
+  if (window.location.pathname === '/new') {
+    startNewDocument();
+    return;
+  }
+  await loadFromHash();
 }());
 
+window.addEventListener('hashchange', function () {
+  loadFromHash();
+});
+
+window.addEventListener('popstate', function () {
+  loadFromHash();
+});
+
 // ── Toolbar scroll hints (fade + bounce-peek) ──────
 
 function initScrollHint(el) {

package/public/sdocs-controls.js

@@ -51,7 +51,7 @@ var STANDALONE_COLOR_IDS = new Set(SDocStyles.STANDALONE_COLOR_IDS);
   'ctrl-h1-weight','ctrl-h2-weight','ctrl-h3-weight','ctrl-h4-weight',
   'ctrl-bg-color','ctrl-link-color','ctrl-link-decoration',
   'ctrl-code-font','ctrl-code-bg','ctrl-code-color',
-  'ctrl-bq-border-color','ctrl-bq-color',
+  'ctrl-bq-border-color','ctrl-bq-bg','ctrl-bq-color',
 ].forEach(function(id) {
   var handler = function() { if (STANDALONE_COLOR_IDS.has(id)) S.overriddenColors.add(id); applyCtrl(id); };
   document.getElementById(id).addEventListener('input',  handler);
@@ -97,7 +97,7 @@ document.getElementById('reset-h4-color').addEventListener('click',   function()
 document.getElementById('reset-p-color').addEventListener('click',    function() { resetColorValue('ctrl-p-color'); S.syncAll('controls'); });
 document.getElementById('reset-list-color').addEventListener('click', function() { resetColorValue('ctrl-list-color'); S.syncAll('controls'); });
 
-['ctrl-bg-color','ctrl-link-color','ctrl-code-bg','ctrl-code-color','ctrl-bq-border-color','ctrl-bq-color'].forEach(function(ctrlId) {
+['ctrl-bg-color','ctrl-link-color','ctrl-code-bg','ctrl-code-color','ctrl-bq-border-color','ctrl-bq-bg','ctrl-bq-color'].forEach(function(ctrlId) {
   var btnId = 'reset-' + ctrlId.replace('ctrl-', '');
   document.getElementById(btnId).addEventListener('click', function() {
     var defaultVal = S.getStandaloneDefault(ctrlId);
@@ -165,54 +165,41 @@ function applyStylesFromMeta(s) {
     return;
   }
 
-  // Legacy single-theme path: top-level colors go to light theme
+  // Legacy single-theme path: top-level colors go to light theme only,
+  // then loadThemeColors applies the correct theme's colors.
+  var lightOverridden = S.themeOverridden.light;
+  var lightColors = S.themeColors.light;
   var newOverridden = result.overriddenColors;
 
-  S.overriddenColors.clear();
-  setColorValue('ctrl-color', S.getColorDefault(), false);
+  lightOverridden.clear();
+  S.themeOverridden.dark.clear();
 
   newOverridden.forEach(function(id) {
-    S.overriddenColors.add(id);
-    setColorValue(id, controls[id], true);
+    lightOverridden.add(id);
+    lightColors[id] = controls[id];
   });
 
-  // Also apply standalone colors from legacy format
-  if (s.background) {
-    S.overriddenColors.add('ctrl-bg-color');
-    var elBg = document.getElementById('ctrl-bg-color');
-    if (elBg) { elBg.value = s.background; applyCtrl('ctrl-bg-color'); }
-  }
-  if (s.link && s.link.color) {
-    S.overriddenColors.add('ctrl-link-color');
-    var el = document.getElementById('ctrl-link-color');
-    if (el) { el.value = s.link.color; applyCtrl('ctrl-link-color'); }
-  }
+  // Also store standalone colors from legacy format into light theme
+  var legacyStandalone = [];
+  if (s.background) legacyStandalone.push(['ctrl-bg-color', s.background]);
+  if (s.link && s.link.color) legacyStandalone.push(['ctrl-link-color', s.link.color]);
   if (s.code) {
-    if (s.code.background) {
-      S.overriddenColors.add('ctrl-code-bg');
-      var el2 = document.getElementById('ctrl-code-bg');
-      if (el2) { el2.value = s.code.background; applyCtrl('ctrl-code-bg'); }
-    }
-    if (s.code.color) {
-      S.overriddenColors.add('ctrl-code-color');
-      var el3 = document.getElementById('ctrl-code-color');
-      if (el3) { el3.value = s.code.color; applyCtrl('ctrl-code-color'); }
-    }
+    if (s.code.background) legacyStandalone.push(['ctrl-code-bg', s.code.background]);
+    if (s.code.color) legacyStandalone.push(['ctrl-code-color', s.code.color]);
   }
   if (s.blockquote) {
-    if (s.blockquote.borderColor) {
-      S.overriddenColors.add('ctrl-bq-border-color');
-      var el4 = document.getElementById('ctrl-bq-border-color');
-      if (el4) { el4.value = s.blockquote.borderColor; applyCtrl('ctrl-bq-border-color'); }
-    }
-    if (s.blockquote.color) {
-      S.overriddenColors.add('ctrl-bq-color');
-      var el5 = document.getElementById('ctrl-bq-color');
-      if (el5) { el5.value = s.blockquote.color; applyCtrl('ctrl-bq-color'); }
-    }
+    if (s.blockquote.borderColor) legacyStandalone.push(['ctrl-bq-border-color', s.blockquote.borderColor]);
+    if (s.blockquote.background) legacyStandalone.push(['ctrl-bq-bg', s.blockquote.background]);
+    if (s.blockquote.color) legacyStandalone.push(['ctrl-bq-color', s.blockquote.color]);
   }
+  legacyStandalone.forEach(function(pair) {
+    lightOverridden.add(pair[0]);
+    lightColors[pair[0]] = pair[1];
+  });
 
+  // Now apply the active theme's colors (light overrides or dark defaults)
   S._syncing = wasSyncing;
+  S.loadThemeColors(S.activeTheme);
 }
 
 function collectStyles() {
@@ -257,7 +244,7 @@ function resetAllStyles() {
    'ctrl-p-lh-num','ctrl-p-mb-num',
    'ctrl-link-color','ctrl-link-decoration',
    'ctrl-code-font','ctrl-code-bg','ctrl-code-color',
-   'ctrl-bq-border-color','ctrl-bq-bw-num','ctrl-bq-size-num','ctrl-bq-color',
+   'ctrl-bq-border-color','ctrl-bq-bg','ctrl-bq-bw-num','ctrl-bq-size-num','ctrl-bq-color',
    'ctrl-list-spacing-num','ctrl-list-indent-num',
   ].forEach(function(id) { applyCtrl(id); });
 }

package/public/sdocs-export.js

@@ -47,11 +47,12 @@ function buildExportCSS() {
   var preBG     = cv('--md-pre-bg')      || codeBG;
 
   var bqBorder  = cv('--md-bq-border')   || '3px solid #2563eb';
+  var bqBg      = cv('--md-bq-bg')      || '#f7f5f2';
   var bqColor   = cv('--md-bq-color')    || '#6b6560';
   var bqPad     = cv('--md-bq-padding')  || '0.5em 1em';
   var bqMargin  = cv('--md-bq-margin')   || '1.2em 0';
 
-  return '\nbody {\n  font-family: ' + fontFamily + ';\n  font-size: ' + baseSize + ';\n  color: ' + color + ';\n  line-height: ' + lineHeight + ';\n  background-color: ' + bgColor + ';\n  max-width: 720px;\n  margin: 0 auto;\n  padding: 40px 48px 60px;\n  -webkit-font-smoothing: antialiased;\n}\nh1 { font-family: ' + hFontFamily + '; font-size: ' + h1Size + '; color: ' + h1Color + '; font-weight: ' + h1Weight + '; letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 ' + hMB + '; }\nh2 { font-family: ' + hFontFamily + '; font-size: ' + h2Size + '; color: ' + h2Color + '; font-weight: ' + h2Weight + '; letter-spacing: -0.015em; line-height: 1.3; margin: 1.4em 0 ' + hMB + '; padding-bottom: 0.3em; border-bottom: 1px solid #ede8e2; }\nh3 { font-family: ' + hFontFamily + '; font-size: ' + h3Size + '; color: ' + h3Color + '; font-weight: ' + h3Weight + '; letter-spacing: -0.01em; line-height: 1.4; margin: 1.2em 0 ' + hMB + '; }\nh4 { font-family: ' + hFontFamily + '; font-size: ' + h4Size + '; color: ' + h4Color + '; font-weight: ' + h4Weight + '; line-height: 1.5; margin: 1em 0 ' + hMB + '; }\np  { color: ' + pColor + '; line-height: ' + pLH + '; margin: ' + pMargin + '; }\na  { color: ' + linkColor + '; text-decoration: ' + linkDec + '; text-underline-offset: 2px; }\ncode { background: ' + codeBG + '; color: ' + codeColor + '; padding: 0.15em 0.45em; border-radius: 4px; font-family: ' + codeFont + '; font-size: 0.85em; }\npre  { background: ' + preBG + '; padding: 1.1em 1.25em; border-radius: 8px; overflow-x: auto; margin: 1.2em 0; border: 1px solid #e7e2db; }\npre code { background: none; padding: 0; color: #3c3733; font-size: 0.88em; }\nblockquote { border-left: ' + bqBorder + '; color: ' + bqColor + '; padding: ' + bqPad + '; margin: ' + bqMargin + '; background: #f7f5f2; border-radius: 0 6px 6px 0; }\nblockquote p { margin: 0; color: inherit; }\nul, ol { padding-left: 1.6em; margin: 0.5em 0 1.1em; }\nli { margin-bottom: 0.3em; }\nhr { border: none; border-top: 1px solid #ede8e2; margin: 2em 0; }\ntable { border-collapse: collapse; width: 100%; margin: 1.2em 0; font-size: 0.92em; }\nth, td { border: 1px solid #e2ddd6; padding: 7px 12px; text-align: left; }\nth { background: #f4f1ed; font-weight: 600; }\ntr:nth-child(even) td { background: #fafaf8; }\nimg { max-width: 100%; border-radius: 8px; }\n';
+  return '\nbody {\n  font-family: ' + fontFamily + ';\n  font-size: ' + baseSize + ';\n  color: ' + color + ';\n  line-height: ' + lineHeight + ';\n  background-color: ' + bgColor + ';\n  max-width: 720px;\n  margin: 0 auto;\n  padding: 40px 48px 60px;\n  -webkit-font-smoothing: antialiased;\n}\nh1 { font-family: ' + hFontFamily + '; font-size: ' + h1Size + '; color: ' + h1Color + '; font-weight: ' + h1Weight + '; letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 ' + hMB + '; }\nh2 { font-family: ' + hFontFamily + '; font-size: ' + h2Size + '; color: ' + h2Color + '; font-weight: ' + h2Weight + '; letter-spacing: -0.015em; line-height: 1.3; margin: 1.4em 0 ' + hMB + '; padding-bottom: 0.3em; border-bottom: 1px solid #ede8e2; }\nh3 { font-family: ' + hFontFamily + '; font-size: ' + h3Size + '; color: ' + h3Color + '; font-weight: ' + h3Weight + '; letter-spacing: -0.01em; line-height: 1.4; margin: 1.2em 0 ' + hMB + '; }\nh4 { font-family: ' + hFontFamily + '; font-size: ' + h4Size + '; color: ' + h4Color + '; font-weight: ' + h4Weight + '; line-height: 1.5; margin: 1em 0 ' + hMB + '; }\np  { color: ' + pColor + '; line-height: ' + pLH + '; margin: ' + pMargin + '; }\na  { color: ' + linkColor + '; text-decoration: ' + linkDec + '; text-underline-offset: 2px; }\ncode { background: ' + codeBG + '; color: ' + codeColor + '; padding: 0.15em 0.45em; border-radius: 4px; font-family: ' + codeFont + '; font-size: 0.85em; }\npre  { background: ' + preBG + '; padding: 1.1em 1.25em; border-radius: 8px; overflow-x: auto; margin: 1.2em 0; border: 1px solid #e7e2db; }\npre code { background: none; padding: 0; color: #3c3733; font-size: 0.88em; }\nblockquote { border-left: ' + bqBorder + '; color: ' + bqColor + '; padding: ' + bqPad + '; margin: ' + bqMargin + '; background: ' + bqBg + '; border-radius: 0 6px 6px 0; }\nblockquote p { margin: 0; color: inherit; }\nul, ol { padding-left: 1.6em; margin: 0.5em 0 1.1em; }\nli { margin-bottom: 0.3em; }\nhr { border: none; border-top: 1px solid #ede8e2; margin: 2em 0; }\ntable { border-collapse: collapse; width: 100%; margin: 1.2em 0; font-size: 0.92em; }\nth, td { border: 1px solid #e2ddd6; padding: 7px 12px; text-align: left; }\nth { background: #f4f1ed; font-weight: 600; }\ntr:nth-child(even) td { background: #fafaf8; }\nimg { max-width: 100%; border-radius: 8px; }\n';
 }
 
 function buildExportHTML() {

package/public/sdocs-styles.js

@@ -55,6 +55,7 @@ const CTRL_CSS_MAP = {
   'ctrl-code-color':       { cssVar: '--md-code-color' },
   'ctrl-bq-border-color':  { cssVar: '--md-bq-border', compound: 'bq-border' },
   'ctrl-bq-bw-num':        { cssVar: '--md-bq-border', compound: 'bq-border' },
+  'ctrl-bq-bg':            { cssVar: '--md-bq-bg' },
   'ctrl-bq-size-num':      { cssVar: '--md-bq-size', suffix: 'em' },
   'ctrl-bq-color':         { cssVar: '--md-bq-color' },
   'ctrl-list-spacing-num': { cssVar: '--md-list-spacing', suffix: 'em' },
@@ -170,6 +171,7 @@ function collectStyles(values, overriddenColors) {
     blockquote: {
       borderColor: gv('ctrl-bq-border-color'),
       borderWidth: gn('ctrl-bq-bw-num'),
+      background:  gv('ctrl-bq-bg'),
       fontSize:    gn('ctrl-bq-size-num'),
       color:       gv('ctrl-bq-color'),
     },
@@ -257,6 +259,7 @@ function stylesToControls(styles) {
   const bq = styles.blockquote || {};
   if (bq.borderColor) controls['ctrl-bq-border-color'] = bq.borderColor;
   if (bq.borderWidth) controls['ctrl-bq-bw-num'] = bq.borderWidth;
+  if (bq.background)  controls['ctrl-bq-bg'] = bq.background;
   if (bq.fontSize)    controls['ctrl-bq-size-num'] = bq.fontSize;
   if (bq.color)       controls['ctrl-bq-color'] = bq.color;
 
@@ -276,7 +279,7 @@ function stylesToControls(styles) {
 // ═══════════════════════════════════════════════════════
 
 var STANDALONE_COLOR_IDS = [
-  'ctrl-bg-color','ctrl-link-color','ctrl-code-bg','ctrl-code-color','ctrl-bq-border-color','ctrl-bq-color',
+  'ctrl-bg-color','ctrl-link-color','ctrl-code-bg','ctrl-code-color','ctrl-bq-border-color','ctrl-bq-bg','ctrl-bq-color',
 ];
 
 var CASCADE_COLOR_IDS = Object.keys(COLOR_VAR_MAP);
@@ -341,6 +344,7 @@ function parseThemeColorBlock(block) {
   }
   if (block.blockquote) {
     if (block.blockquote.borderColor) { colors['ctrl-bq-border-color'] = block.blockquote.borderColor; overridden.add('ctrl-bq-border-color'); }
+    if (block.blockquote.background)  { colors['ctrl-bq-bg'] = block.blockquote.background; overridden.add('ctrl-bq-bg'); }
     if (block.blockquote.color)       { colors['ctrl-bq-color'] = block.blockquote.color; overridden.add('ctrl-bq-color'); }
   }
 
@@ -397,6 +401,10 @@ function collectThemeColors(colorValues, overriddenSet) {
     if (!block.blockquote) block.blockquote = {};
     block.blockquote.borderColor = colorValues['ctrl-bq-border-color'];
   }
+  if (overriddenSet.has('ctrl-bq-bg')) {
+    if (!block.blockquote) block.blockquote = {};
+    block.blockquote.background = colorValues['ctrl-bq-bg'];
+  }
   if (overriddenSet.has('ctrl-bq-color')) {
     if (!block.blockquote) block.blockquote = {};
     block.blockquote.color = colorValues['ctrl-bq-color'];
@@ -438,6 +446,7 @@ function collectStylesDual(values, lightOverridden, darkOverridden, lightColors,
       borderWidth: gn('ctrl-bq-bw-num'),
       fontSize:    gn('ctrl-bq-size-num'),
     },
+
   };
 
   styles.list = {
@@ -525,6 +534,79 @@ stylesToControls = function(styles) {
   };
 };
 
+// ═══════════════════════════════════════════════════════
+//  STRIP STYLE DEFAULTS (for shorter URLs)
+// ═══════════════════════════════════════════════════════
+
+// Default values matching HTML control defaults in index.html.
+// When a style value equals its default, it can be omitted from serialization
+// because stylesToControls / the browser already falls back to these defaults.
+var STYLE_DEFAULTS = {
+  fontFamily: 'Inter',
+  baseFontSize: 16,
+  lineHeight: 1.75,
+  headers: {
+    fontFamily: 'inherit',
+    scale: 1.0,
+    marginBottom: 0.4,
+  },
+  h1: { fontSize: 2.1, fontWeight: 700 },
+  h2: { fontSize: 1.55, fontWeight: 600 },
+  h3: { fontSize: 1.2, fontWeight: 600 },
+  h4: { fontSize: 1.0, fontWeight: 600 },
+  p: { lineHeight: 1.75, marginBottom: 1.1 },
+  link: { decoration: 'underline' },
+  code: { font: 'JetBrains Mono' },
+  blockquote: { borderWidth: 3, fontSize: 1.0 },
+  list: { spacing: 0.3, indent: 1.6 },
+};
+
+function numEq(a, b) {
+  var na = typeof a === 'number' ? a : parseFloat(a);
+  var nb = typeof b === 'number' ? b : parseFloat(b);
+  if (isNaN(na) || isNaN(nb)) return false;
+  return Math.abs(na - nb) < 0.001;
+}
+
+/**
+ * stripStyleDefaults(styles)
+ * Returns a new styles object with default-valued properties removed.
+ * light/dark color blocks are preserved as-is (they have no static defaults).
+ * Empty sub-objects are removed entirely.
+ */
+function stripStyleDefaults(styles) {
+  if (!styles || typeof styles !== 'object') return styles;
+  var result = {};
+  for (var key in styles) {
+    if (!styles.hasOwnProperty(key)) continue;
+    var val = styles[key];
+    var def = STYLE_DEFAULTS[key];
+
+    // light/dark theme color blocks — always keep
+    if (key === 'light' || key === 'dark') {
+      result[key] = val;
+      continue;
+    }
+
+    if (typeof val === 'object' && val !== null) {
+      var sub = {};
+      var defObj = (typeof def === 'object' && def !== null) ? def : {};
+      for (var sk in val) {
+        if (!val.hasOwnProperty(sk)) continue;
+        var sv = val[sk];
+        var sd = defObj[sk];
+        if (sd !== undefined && (sv === sd || String(sv) === String(sd) || numEq(sv, sd))) continue;
+        sub[sk] = sv;
+      }
+      if (Object.keys(sub).length > 0) result[key] = sub;
+    } else {
+      if (def !== undefined && (val === def || String(val) === String(def) || numEq(val, def))) continue;
+      result[key] = val;
+    }
+  }
+  return result;
+}
+
 // ═══════════════════════════════════════════════════════
 //  EXPORTS
 // ═══════════════════════════════════════════════════════
@@ -544,6 +626,8 @@ exports.collectStylesDual     = collectStylesDual;
 exports.collectThemeColors    = collectThemeColors;
 exports.parseThemeColorBlock  = parseThemeColorBlock;
 exports.stylesToControls      = stylesToControls;
+exports.STYLE_DEFAULTS        = STYLE_DEFAULTS;
+exports.stripStyleDefaults    = stripStyleDefaults;
 
 // UMD tail: in Node (tests) this writes to module.exports; in the browser
 // it creates window.SDocStyles.  We use this pattern instead of ES modules

package/public/sdocs-theme.js

@@ -55,16 +55,18 @@ const LIGHT_DEFAULTS = {
   codeColor:     '#6b21a8',
   linkColor:     '#2563eb',
   bqBorderColor: '#2563eb',
+  bqBg:          '#f7f5f2',
   bqColor:       '#6b6560',
 };
 
 const DARK_DEFAULTS = {
-  bgColor:       '#1c1a17',
+  bgColor:       '#2c2a26',
   colorDefault:  '#e7e5e2',
   codeBg:        '#1a1816',
   codeColor:     '#b8a99a',
   linkColor:     '#60a5fa',
   bqBorderColor: '#60a5fa',
+  bqBg:          '#252320',
   bqColor:       '#a8a29e',
 };
 
@@ -142,6 +144,7 @@ function loadThemeColors(theme) {
     'ctrl-code-bg':         defaults.codeBg,
     'ctrl-code-color':      defaults.codeColor,
     'ctrl-bq-border-color': defaults.bqBorderColor,
+    'ctrl-bq-bg':           defaults.bqBg,
     'ctrl-bq-color':        defaults.bqColor,
   };
   for (var ctrlId in standaloneMap) {
@@ -192,6 +195,7 @@ function updateDefaultColors() {
     'ctrl-code-bg':         defaults.codeBg,
     'ctrl-code-color':      defaults.codeColor,
     'ctrl-bq-border-color': defaults.bqBorderColor,
+    'ctrl-bq-bg':           defaults.bqBg,
     'ctrl-bq-color':        defaults.bqColor,
   };
   for (const [ctrlId, val] of Object.entries(standaloneMap)) {
@@ -216,6 +220,7 @@ function getStandaloneDefault(ctrlId) {
     'ctrl-code-bg':         d.codeBg,
     'ctrl-code-color':      d.codeColor,
     'ctrl-bq-border-color': d.bqBorderColor,
+    'ctrl-bq-bg':           d.bqBg,
     'ctrl-bq-color':        d.bqColor,
   };
   return map[ctrlId];
@@ -247,6 +252,7 @@ S.getStandaloneDefault = getStandaloneDefault;
 S.updateDefaultColors = updateDefaultColors;
 S.toggleTheme = toggleTheme;
 S.switchThemeAndUpdate = switchThemeAndUpdate;
+S.getPreferredTheme = getPreferredTheme;
 S.saveCurrentThemeColors = saveCurrentThemeColors;
 S.loadThemeColors = loadThemeColors;
 S.updateThemeTabs = updateThemeTabs;

package/public/sw.js

@@ -0,0 +1,106 @@
+// Service worker — stale-while-revalidate + version-gated cache bust
+var CACHE_NAME = 'sdocs-cache';
+
+var APP_SHELL = [
+  '/',
+  '/public/css/tokens.css',
+  '/public/css/layout.css',
+  '/public/css/rendered.css',
+  '/public/css/panel.css',
+  '/public/css/write.css',
+  '/public/css/mobile.css',
+  '/public/sdocs-yaml.js',
+  '/public/sdocs-styles.js',
+  '/public/sdocs-state.js',
+  '/public/sdocs-theme.js',
+  '/public/sdocs-controls.js',
+  '/public/sdocs-export.js',
+  '/public/sdocs-write.js',
+  '/public/sdocs-app.js',
+  '/public/vendor/marked.min.js',
+  '/public/fonts/inter-400.woff2',
+  '/public/fonts/inter-500.woff2',
+  '/public/fonts/inter-600.woff2',
+  '/public/default.md',
+];
+
+// Pre-cache app shell on install
+self.addEventListener('install', function (e) {
+  e.waitUntil(
+    caches.open(CACHE_NAME).then(function (cache) {
+      return cache.addAll(APP_SHELL);
+    }).then(function () {
+      return self.skipWaiting();
+    })
+  );
+});
+
+// Claim clients on activate
+self.addEventListener('activate', function (e) {
+  e.waitUntil(self.clients.claim());
+});
+
+// Stale-while-revalidate for same-origin, cache-first for fonts
+self.addEventListener('fetch', function (e) {
+  var url = new URL(e.request.url);
+
+  if (e.request.method !== 'GET') return;
+
+  // Version-check always hits network
+  if (url.pathname === '/version-check') return;
+
+  // Google Fonts: cache-first (they're immutable)
+  if (url.hostname === 'fonts.googleapis.com' || url.hostname === 'fonts.gstatic.com') {
+    e.respondWith(
+      caches.match(e.request).then(function (cached) {
+        if (cached) return cached;
+        return fetch(e.request).then(function (response) {
+          var clone = response.clone();
+          caches.open(CACHE_NAME).then(function (cache) { cache.put(e.request, clone); });
+          return response;
+        });
+      })
+    );
+    return;
+  }
+
+  // Same-origin: stale-while-revalidate
+  // Return cached immediately, fetch in background to update cache
+  if (url.origin === self.location.origin) {
+    e.respondWith(
+      caches.open(CACHE_NAME).then(function (cache) {
+        return cache.match(e.request).then(function (cached) {
+          var networkFetch = fetch(e.request).then(function (response) {
+            if (response.ok) {
+              cache.put(e.request, response.clone());
+            }
+            return response;
+          }).catch(function () {
+            return cached; // offline fallback
+          });
+
+          return cached || networkFetch;
+        });
+      })
+    );
+    return;
+  }
+});
+
+// Version check: if server version differs, purge and re-cache.
+// No reload — stale-while-revalidate ensures next navigation gets fresh content.
+self.addEventListener('message', function (e) {
+  if (e.data && e.data.type === 'check-update' && e.data.version) {
+    fetch('/version-check').then(function (res) {
+      return res.json();
+    }).then(function (data) {
+      if (data.version !== e.data.version) {
+        caches.delete(CACHE_NAME).then(function () {
+          return caches.open(CACHE_NAME).then(function (cache) {
+            return cache.addAll(APP_SHELL);
+          });
+        });
+      }
+    }).catch(function () { /* offline — ignore */ });
+  }
+});