sdocs-dev 1.0.0 → 1.1.0

package/public/sdocs-theme.js

@@ -49,6 +49,7 @@ function populateFontSelect(sel, includeInherit) {
 // ── Dark mode ──────────────────────────────────
 
 const LIGHT_DEFAULTS = {
+  bgColor:       '#ffffff',
   colorDefault:  '#1c1917',
   codeBg:        '#f4f1ed',
   codeColor:     '#6b21a8',
@@ -58,6 +59,7 @@ const LIGHT_DEFAULTS = {
 };
 
 const DARK_DEFAULTS = {
+  bgColor:       '#1c1a17',
   colorDefault:  '#e7e5e2',
   codeBg:        '#1a1816',
   codeColor:     '#b8a99a',
@@ -70,6 +72,10 @@ function getThemeDefaults() {
   return document.documentElement.dataset.theme === 'dark' ? DARK_DEFAULTS : LIGHT_DEFAULTS;
 }
 
+function getThemeDefaultsFor(theme) {
+  return theme === 'dark' ? DARK_DEFAULTS : LIGHT_DEFAULTS;
+}
+
 function getColorDefault() {
   return getThemeDefaults().colorDefault;
 }
@@ -90,14 +96,87 @@ function updateThemeIcon(theme) {
 
 function applyTheme(theme) {
   document.documentElement.dataset.theme = theme;
+  S.activeTheme = theme;
   localStorage.setItem('sdocs-theme', theme);
   updateThemeIcon(theme);
 }
 
+// ── Per-theme color save/load ──────────────────────
+
+function saveCurrentThemeColors() {
+  var theme = S.activeTheme;
+  var colors = S.themeColors[theme];
+  // Save all 13 color control values
+  SDocStyles.ALL_COLOR_IDS.forEach(function(ctrlId) {
+    var el = document.getElementById(ctrlId);
+    if (el) colors[ctrlId] = el.value;
+  });
+}
+
+function loadThemeColors(theme) {
+  var colors = S.themeColors[theme];
+  var overridden = S.themeOverridden[theme];
+  var defaults = getThemeDefaultsFor(theme);
+
+  // Cascade root first
+  if (overridden.has('ctrl-color')) {
+    S.setColorValue('ctrl-color', colors['ctrl-color'], true);
+  } else {
+    S.setColorValue('ctrl-color', defaults.colorDefault, false);
+  }
+
+  // Then cascade children that are overridden
+  var cascadeIds = Object.keys(SDocStyles.COLOR_VAR_MAP);
+  cascadeIds.forEach(function(ctrlId) {
+    if (ctrlId === 'ctrl-color') return; // already handled
+    if (overridden.has(ctrlId)) {
+      S.setColorValue(ctrlId, colors[ctrlId], true);
+    }
+    // Non-overridden cascade children are already set by cascade from parent
+  });
+
+  // Standalone colors
+  var standaloneMap = {
+    'ctrl-bg-color':        defaults.bgColor,
+    'ctrl-link-color':      defaults.linkColor,
+    'ctrl-code-bg':         defaults.codeBg,
+    'ctrl-code-color':      defaults.codeColor,
+    'ctrl-bq-border-color': defaults.bqBorderColor,
+    'ctrl-bq-color':        defaults.bqColor,
+  };
+  for (var ctrlId in standaloneMap) {
+    var el = document.getElementById(ctrlId);
+    if (!el) continue;
+    if (overridden.has(ctrlId)) {
+      el.value = colors[ctrlId];
+    } else {
+      el.value = standaloneMap[ctrlId];
+    }
+    var allVals = S.readAllControlValues();
+    SDocStyles.controlToCssVars(ctrlId, el.value, allVals)
+      .forEach(function(a) { S.setStyleVar(a.cssVar, a.value); });
+  }
+}
+
+function updateThemeTabs(theme) {
+  var lightTab = document.getElementById('theme-tab-light');
+  var darkTab = document.getElementById('theme-tab-dark');
+  if (lightTab) lightTab.classList.toggle('active', theme === 'light');
+  if (darkTab) darkTab.classList.toggle('active', theme === 'dark');
+}
+
+function switchThemeAndUpdate(theme) {
+  if (theme === S.activeTheme) return;
+  saveCurrentThemeColors();
+  applyTheme(theme);
+  loadThemeColors(theme);
+  updateThemeTabs(theme);
+  S.syncAll('controls');
+}
+
 function toggleTheme() {
-  const current = document.documentElement.dataset.theme;
-  applyTheme(current === 'dark' ? 'light' : 'dark');
-  updateDefaultColors();
+  var current = S.activeTheme;
+  switchThemeAndUpdate(current === 'dark' ? 'light' : 'dark');
 }
 
 function updateDefaultColors() {
@@ -108,6 +187,7 @@ function updateDefaultColors() {
   }
   // Update standalone color defaults for reset buttons
   const standaloneMap = {
+    'ctrl-bg-color':        defaults.bgColor,
     'ctrl-link-color':      defaults.linkColor,
     'ctrl-code-bg':         defaults.codeBg,
     'ctrl-code-color':      defaults.codeColor,
@@ -131,6 +211,7 @@ function updateDefaultColors() {
 function getStandaloneDefault(ctrlId) {
   const d = getThemeDefaults();
   const map = {
+    'ctrl-bg-color':        d.bgColor,
     'ctrl-link-color':      d.linkColor,
     'ctrl-code-bg':         d.codeBg,
     'ctrl-code-color':      d.codeColor,
@@ -142,12 +223,12 @@ function getStandaloneDefault(ctrlId) {
 
 // ── Init at load time ──────────────────────────────────
 
-applyTheme(getPreferredTheme());
+var initTheme = getPreferredTheme();
+applyTheme(initTheme);
 
 window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
   if (!localStorage.getItem('sdocs-theme')) {
-    applyTheme(e.matches ? 'dark' : 'light');
-    updateDefaultColors();
+    switchThemeAndUpdate(e.matches ? 'dark' : 'light');
   }
 });
 
@@ -160,9 +241,14 @@ populateFontSelect(document.getElementById('ctrl-h-font-family'), true);
 S.GOOGLE_FONTS = GOOGLE_FONTS;
 S.loadGoogleFont = loadGoogleFont;
 S.getThemeDefaults = getThemeDefaults;
+S.getThemeDefaultsFor = getThemeDefaultsFor;
 S.getColorDefault = getColorDefault;
 S.getStandaloneDefault = getStandaloneDefault;
 S.updateDefaultColors = updateDefaultColors;
 S.toggleTheme = toggleTheme;
+S.switchThemeAndUpdate = switchThemeAndUpdate;
+S.saveCurrentThemeColors = saveCurrentThemeColors;
+S.loadThemeColors = loadThemeColors;
+S.updateThemeTabs = updateThemeTabs;
 
 })();

package/public/sdocs-yaml.js

@@ -19,30 +19,33 @@ function parseInlineObject(str) {
   return obj;
 }
 
-function parseSimpleYaml(str) {
+function parseBlock(lines, startIdx, indent) {
   const result = {};
-  const lines = str.split('\n');
-  let i = 0;
-  while (i < lines.length) {
-    const line = lines[i];
-    const km = line.match(/^(\w[\w-]*):\s*(.*)/);
-    if (!km) { i++; continue; }
-    const key = km[1], rest = km[2].trim();
+  let i = startIdx;
+  const prefix = new RegExp('^' + ' '.repeat(indent));
+  const deeper = new RegExp('^' + ' '.repeat(indent + 2));
+  while (i < lines.length && prefix.test(lines[i])) {
+    const nl = lines[i].substring(indent);
+    const nm = nl.match(/^(\w[\w-]*):\s*(.*)/);
+    if (!nm) { i++; continue; }
+    const key = nm[1], rest = nm[2].trim();
     if (rest.startsWith('{')) {
       result[key] = parseInlineObject(rest); i++;
-    } else if (rest === '') {
-      const nested = {}; i++;
-      while (i < lines.length && /^  /.test(lines[i])) {
-        const nl = lines[i].trim();
-        const nm = nl.match(/^(\w[\w-]*):\s*(.*)/);
-        if (nm) nested[nm[1]] = nm[2].trim().startsWith('{')
-          ? parseInlineObject(nm[2].trim()) : parseScalar(nm[2].trim());
-        i++;
-      }
-      result[key] = nested;
-    } else { result[key] = parseScalar(rest); i++; }
+    } else if (rest === '' && i + 1 < lines.length && deeper.test(lines[i + 1])) {
+      i++;
+      var sub = parseBlock(lines, i, indent + 2);
+      result[key] = sub.obj;
+      i = sub.nextIdx;
+    } else {
+      result[key] = parseScalar(rest); i++;
+    }
   }
-  return result;
+  return { obj: result, nextIdx: i };
+}
+
+function parseSimpleYaml(str) {
+  const lines = str.split('\n');
+  return parseBlock(lines, 0, 0).obj;
 }
 
 function parseFrontMatter(text) {
@@ -52,6 +55,13 @@ function parseFrontMatter(text) {
   return { meta: parseSimpleYaml(m[1]), body: text.slice(m[0].length) };
 }
 
+function hasNestedObjects(obj) {
+  for (const v of Object.values(obj)) {
+    if (typeof v === 'object' && v !== null) return true;
+  }
+  return false;
+}
+
 function serializeFrontMatter(meta) {
   const lines = ['---'];
   for (const [k, v] of Object.entries(meta)) {
@@ -59,8 +69,21 @@ function serializeFrontMatter(meta) {
       lines.push(`${k}:`);
       for (const [sk, sv] of Object.entries(v)) {
         if (typeof sv === 'object' && sv !== null) {
-          const inner = Object.entries(sv).map(([a,b]) => `${a}: ${JSON.stringify(b)}`).join(', ');
-          lines.push(`  ${sk}: { ${inner} }`);
+          // If sub-object contains nested objects (3 levels), serialize as block
+          if (hasNestedObjects(sv)) {
+            lines.push(`  ${sk}:`);
+            for (const [a, b] of Object.entries(sv)) {
+              if (typeof b === 'object' && b !== null) {
+                const inner = Object.entries(b).map(([c,d]) => `${c}: ${JSON.stringify(d)}`).join(', ');
+                lines.push(`    ${a}: { ${inner} }`);
+              } else {
+                lines.push(`    ${a}: ${JSON.stringify(b)}`);
+              }
+            }
+          } else {
+            const inner = Object.entries(sv).map(([a,b]) => `${a}: ${JSON.stringify(b)}`).join(', ');
+            lines.push(`  ${sk}: { ${inner} }`);
+          }
         } else { lines.push(`  ${sk}: ${JSON.stringify(sv)}`); }
       }
     } else { lines.push(`${k}: ${JSON.stringify(v)}`); }