sdocs-dev 1.2.0 → 1.3.0

package/public/sdocs-slugify.js

@@ -0,0 +1,12 @@
+// sdocs-slugify.js — Slugify heading text into URL-safe IDs
+// Shared by sdocs-app.js (browser) and test/test-slugify.js (Node)
+(function (exports) {
+'use strict';
+
+function slugify(text) {
+  return text.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, '').replace(/-+/g, '-').replace(/^-|-$/g, '');
+}
+
+exports.slugify = slugify;
+
+})(typeof module !== 'undefined' && module.exports ? module.exports : (window.SDocSlugify = {}));

package/public/sdocs-state.js

@@ -8,6 +8,14 @@ window.SDocs = {
   currentBody: '',
   currentMeta: {},
 
+  // Runtime-only metadata (path, fullPath) passed via &local= URL param.
+  // Stripped from the URL on load so it isn't in anything the user copies/shares.
+  localMeta: {},
+
+  // Per-doc overrides for the file-info card. Set from `styles.fileinfo` in
+  // YAML front matter; emitted back via collectStyles so they round-trip.
+  fileinfoStyles: {},
+
   // Per-theme color state
   activeTheme: 'light',
   themeColors: { light: {}, dark: {} },
@@ -51,6 +59,12 @@ SDocs.contentAreaEl = document.getElementById('content-area');
 SDocs.setStyleVar = function(cssVar, value) {
   SDocs.renderedEl.style.setProperty(cssVar, value);
   if (SDocs.writeEl) SDocs.writeEl.style.setProperty(cssVar, value);
+  // File-info card is a sibling of #rendered, so it doesn't inherit vars set
+  // on #rendered. Mirror the relevant block-cascade vars to it directly.
+  var ficEl = document.getElementById('file-info-card');
+  if (ficEl && /^--md-(fic-|block-)/.test(cssVar)) {
+    ficEl.style.setProperty(cssVar, value);
+  }
   if (cssVar === '--md-bg') {
     SDocs.contentAreaEl.style.setProperty('background-color', value);
   }

package/public/sdocs-styles.js

@@ -11,21 +11,32 @@ const COLOR_DEFAULT = '#1c1917';
 
 // Control ID → CSS variable name (color controls only)
 const COLOR_VAR_MAP = {
-  'ctrl-color':      '--md-color',
-  'ctrl-h-color':    '--md-h-color',
-  'ctrl-h1-color':   '--md-h1-color',
-  'ctrl-h2-color':   '--md-h2-color',
-  'ctrl-h3-color':   '--md-h3-color',
-  'ctrl-h4-color':   '--md-h4-color',
-  'ctrl-p-color':    '--md-p-color',
-  'ctrl-list-color': '--md-list-color',
+  'ctrl-color':       '--md-color',
+  'ctrl-h-color':     '--md-h-color',
+  'ctrl-h1-color':    '--md-h1-color',
+  'ctrl-h2-color':    '--md-h2-color',
+  'ctrl-h3-color':    '--md-h3-color',
+  'ctrl-h4-color':    '--md-h4-color',
+  'ctrl-p-color':     '--md-p-color',
+  'ctrl-list-color':  '--md-list-color',
+  // Block cascade
+  'ctrl-block-bg':    '--md-block-bg',
+  'ctrl-block-text':  '--md-block-text',
+  'ctrl-code-bg':     ['--md-code-bg', '--md-pre-bg'],
+  'ctrl-code-color':  '--md-code-color',
+  'ctrl-bq-bg':       '--md-bq-bg',
+  'ctrl-bq-color':    '--md-bq-color',
+  'ctrl-chart-bg':    '--md-chart-bg',
+  'ctrl-chart-text':  '--md-chart-text',
 };
 
 // Cascade tree: parent → direct children
 const COLOR_CASCADE = {
-  'ctrl-color':   ['ctrl-h-color', 'ctrl-p-color'],
-  'ctrl-h-color': ['ctrl-h1-color', 'ctrl-h2-color', 'ctrl-h3-color', 'ctrl-h4-color'],
-  'ctrl-p-color': ['ctrl-list-color'],
+  'ctrl-color':      ['ctrl-h-color', 'ctrl-p-color'],
+  'ctrl-h-color':    ['ctrl-h1-color', 'ctrl-h2-color', 'ctrl-h3-color', 'ctrl-h4-color'],
+  'ctrl-p-color':    ['ctrl-list-color'],
+  'ctrl-block-bg':   ['ctrl-code-bg', 'ctrl-bq-bg', 'ctrl-chart-bg'],
+  'ctrl-block-text': ['ctrl-code-color', 'ctrl-bq-color', 'ctrl-chart-text'],
 };
 
 // Control ID → { cssVar, suffix?, compound? }
@@ -51,15 +62,13 @@ const CTRL_CSS_MAP = {
   'ctrl-link-color':       { cssVar: '--md-link-color' },
   'ctrl-link-decoration':  { cssVar: '--md-link-decoration' },
   'ctrl-code-font':        { cssVar: '--md-code-font' },
-  'ctrl-code-bg':          { cssVar: ['--md-code-bg', '--md-pre-bg'] },
-  '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' },
   'ctrl-list-indent-num':  { cssVar: '--md-list-indent', suffix: 'em' },
+  'ctrl-chart-accent':     { cssVar: '--md-chart-accent' },
+  'ctrl-chart-palette':    { cssVar: '--md-chart-palette' },
 };
 
 // Range ↔ Number input pairs
@@ -80,6 +89,93 @@ const RANGE_NUM_PAIRS = [
   ['ctrl-list-indent-range',  'ctrl-list-indent-num'],
 ];
 
+// ═══════════════════════════════════════════════════════
+//  HSL COLOR UTILITIES
+// ═══════════════════════════════════════════════════════
+
+function hexToHsl(hex) {
+  if (!hex || hex.charAt(0) !== '#') return null;
+  var r = parseInt(hex.slice(1, 3), 16) / 255;
+  var g = parseInt(hex.slice(3, 5), 16) / 255;
+  var b = parseInt(hex.slice(5, 7), 16) / 255;
+  var max = Math.max(r, g, b), min = Math.min(r, g, b);
+  var h, s, l = (max + min) / 2;
+  if (max === min) { h = s = 0; }
+  else {
+    var d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+    else if (max === g) h = ((b - r) / d + 2) / 6;
+    else h = ((r - g) / d + 4) / 6;
+  }
+  return [h * 360, s * 100, l * 100];
+}
+
+function hslToHex(h, s, l) {
+  h = ((h % 360) + 360) % 360;
+  s = Math.max(0, Math.min(100, s)) / 100;
+  l = Math.max(0, Math.min(100, l)) / 100;
+  var c = (1 - Math.abs(2 * l - 1)) * s;
+  var x = c * (1 - Math.abs((h / 60) % 2 - 1));
+  var m = l - c / 2;
+  var r, g, b;
+  if (h < 60)       { r = c; g = x; b = 0; }
+  else if (h < 120) { r = x; g = c; b = 0; }
+  else if (h < 180) { r = 0; g = c; b = x; }
+  else if (h < 240) { r = 0; g = x; b = c; }
+  else if (h < 300) { r = x; g = 0; b = c; }
+  else              { r = c; g = 0; b = x; }
+  var toH = function(v) { var h = Math.round((v + m) * 255).toString(16); return h.length < 2 ? '0' + h : h; };
+  return '#' + toH(r) + toH(g) + toH(b);
+}
+
+/**
+ * invertLightness(hex)
+ * Inverts a color's lightness for the opposite theme.
+ * Light colors (L>50) become dark, dark colors become light.
+ * Keeps hue and saturation, mirrors lightness around 50%.
+ * Slightly biased: dark bgs get very dark (L≈10-20), light text gets bright (L≈80-90).
+ */
+/**
+ * invertLightness(hex)
+ * Generates a dark-theme counterpart for a light-theme color.
+ *
+ * Strategy: colors that look "right" in light mode get adapted for dark mode.
+ *   - Very light colors (L>65): page/block backgrounds → make very dark
+ *   - Very dark colors (L<20): already dark, likely intentional → keep as-is
+ *   - Dark-ish colors (20<L<45): body text, headings → make light
+ *   - Mid-range (45-65): accent colors → moderate shift
+ */
+function invertLightness(hex) {
+  var hsl = hexToHsl(hex);
+  if (!hsl) return hex;
+  var h = hsl[0], s = hsl[1], l = hsl[2];
+  var invL, invS;
+
+  if (l > 80) {
+    // Very light background → very dark
+    invL = 10 + (100 - l) * 0.3;  // L95→11, L85→14, L80→16
+    invS = s * 0.7;
+  } else if (l > 65) {
+    // Light background/accent → dark
+    invL = 12 + (100 - l) * 0.4;  // L70→24, L65→26
+    invS = s * 0.75;
+  } else if (l < 20) {
+    // Already very dark → keep as-is (intentional dark bg like code blocks)
+    return hex;
+  } else if (l < 40) {
+    // Dark text → make light for dark theme readability
+    invL = 65 + (40 - l) * 0.7;   // L10→86, L20→79, L35→68
+    invS = s * 0.8;
+  } else {
+    // Mid-range accent → moderate inversion
+    invL = 100 - l;
+    invS = s * 0.85;
+  }
+
+  return hslToHex(h, Math.max(0, invS), Math.max(0, Math.min(100, invL)));
+}
+
 // ═══════════════════════════════════════════════════════
 //  PURE FUNCTIONS
 // ═══════════════════════════════════════════════════════
@@ -91,7 +187,11 @@ const RANGE_NUM_PAIRS = [
 function controlToCssVars(ctrlId, value, allValues) {
   // Color controls go through the cascade system, not CTRL_CSS_MAP
   if (COLOR_VAR_MAP[ctrlId]) {
-    return [{ cssVar: COLOR_VAR_MAP[ctrlId], value: value }];
+    var varName = COLOR_VAR_MAP[ctrlId];
+    if (Array.isArray(varName)) {
+      return varName.map(function(cv) { return { cssVar: cv, value: value }; });
+    }
+    return [{ cssVar: varName, value: value }];
   }
 
   const entry = CTRL_CSS_MAP[ctrlId];
@@ -165,15 +265,11 @@ function collectStyles(values, overriddenColors) {
     link: { color: gv('ctrl-link-color'), decoration: gv('ctrl-link-decoration') },
     code: {
       font:       gv('ctrl-code-font').replace(/['"]/g, '').split(',')[0].trim(),
-      background: gv('ctrl-code-bg'),
-      color:      gv('ctrl-code-color'),
     },
     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'),
     },
   };
 
@@ -193,6 +289,25 @@ function collectStyles(values, overriddenColors) {
   if (overriddenColors.has('ctrl-p-color'))    styles.p.color = gv('ctrl-p-color');
   if (overriddenColors.has('ctrl-list-color')) styles.list.color = gv('ctrl-list-color');
 
+  // Block cascade colors
+  if (overriddenColors.has('ctrl-block-bg') || overriddenColors.has('ctrl-block-text')) {
+    styles.blocks = {};
+    if (overriddenColors.has('ctrl-block-bg'))   styles.blocks.background = gv('ctrl-block-bg');
+    if (overriddenColors.has('ctrl-block-text')) styles.blocks.color = gv('ctrl-block-text');
+  }
+  if (overriddenColors.has('ctrl-code-bg'))    styles.code.background = gv('ctrl-code-bg');
+  if (overriddenColors.has('ctrl-code-color')) styles.code.color = gv('ctrl-code-color');
+  if (overriddenColors.has('ctrl-bq-bg'))      styles.blockquote.background = gv('ctrl-bq-bg');
+  if (overriddenColors.has('ctrl-bq-color'))   styles.blockquote.color = gv('ctrl-bq-color');
+
+  // Chart styles
+  var chartObj = {};
+  if (overriddenColors.has('ctrl-chart-accent')) chartObj.accent = gv('ctrl-chart-accent');
+  if (gv('ctrl-chart-palette') && gv('ctrl-chart-palette') !== 'monochrome') chartObj.palette = gv('ctrl-chart-palette');
+  if (overriddenColors.has('ctrl-chart-bg'))    chartObj.background = gv('ctrl-chart-bg');
+  if (overriddenColors.has('ctrl-chart-text'))  chartObj.textColor = gv('ctrl-chart-text');
+  if (Object.keys(chartObj).length) styles.chart = chartObj;
+
   return styles;
 }
 
@@ -251,17 +366,22 @@ function stylesToControls(styles) {
   if (lk.color)      controls['ctrl-link-color'] = lk.color;
   if (lk.decoration) controls['ctrl-link-decoration'] = lk.decoration;
 
+  // Blocks cascade parent
+  const bl = styles.blocks || {};
+  if (bl.background) { controls['ctrl-block-bg'] = bl.background; overridden.add('ctrl-block-bg'); }
+  if (bl.color)      { controls['ctrl-block-text'] = bl.color; overridden.add('ctrl-block-text'); }
+
   const cd = styles.code || {};
   if (cd.font)       controls['ctrl-code-font'] = cd.font;
-  if (cd.background) controls['ctrl-code-bg'] = cd.background;
-  if (cd.color)      controls['ctrl-code-color'] = cd.color;
+  if (cd.background) { controls['ctrl-code-bg'] = cd.background; overridden.add('ctrl-code-bg'); }
+  if (cd.color)      { controls['ctrl-code-color'] = cd.color; overridden.add('ctrl-code-color'); }
 
   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.background)  { controls['ctrl-bq-bg'] = bq.background; overridden.add('ctrl-bq-bg'); }
   if (bq.fontSize)    controls['ctrl-bq-size-num'] = bq.fontSize;
-  if (bq.color)       controls['ctrl-bq-color'] = bq.color;
+  if (bq.color)       { controls['ctrl-bq-color'] = bq.color; overridden.add('ctrl-bq-color'); }
 
   const ll = styles.list || {};
   if (ll.spacing) controls['ctrl-list-spacing-num'] = ll.spacing;
@@ -271,6 +391,12 @@ function stylesToControls(styles) {
     overridden.add('ctrl-list-color');
   }
 
+  const ch = styles.chart || {};
+  if (ch.accent)     { controls['ctrl-chart-accent'] = ch.accent; overridden.add('ctrl-chart-accent'); }
+  if (ch.palette)    controls['ctrl-chart-palette'] = ch.palette;
+  if (ch.background) { controls['ctrl-chart-bg'] = ch.background; overridden.add('ctrl-chart-bg'); }
+  if (ch.textColor)  { controls['ctrl-chart-text'] = ch.textColor; overridden.add('ctrl-chart-text'); }
+
   return { controls, overriddenColors: overridden };
 }
 
@@ -279,7 +405,9 @@ 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-bg','ctrl-bq-color',
+  'ctrl-bg-color','ctrl-link-color',
+  'ctrl-bq-border-color',
+  'ctrl-chart-accent',
 ];
 
 var CASCADE_COLOR_IDS = Object.keys(COLOR_VAR_MAP);
@@ -291,249 +419,46 @@ var ALL_COLOR_IDS = CASCADE_COLOR_IDS.concat(STANDALONE_COLOR_IDS);
 // ═══════════════════════════════════════════════════════
 
 /**
- * parseThemeColorBlock(block)
- * Extracts { colors: {ctrlId: val}, overridden: Set } from a light:/dark: sub-object.
- * The block is an object like { color: "#1a1a2e", h1: { color: "#c0392b" }, link: { color: "#2563eb" } }
+ * parseDarkBlock(block)
+ * Extracts { ctrlId: colorValue } from a dark: sub-object in YAML front matter.
  */
-function parseThemeColorBlock(block) {
-  if (!block) return { colors: {}, overridden: new Set() };
+function parseDarkBlock(block) {
+  if (!block) return {};
   var colors = {};
-  var overridden = new Set();
 
-  // Background color
-  if (block.background) {
-    colors['ctrl-bg-color'] = block.background;
-    overridden.add('ctrl-bg-color');
-  }
+  if (block.background) colors['ctrl-bg-color'] = block.background;
+  if (block.color) colors['ctrl-color'] = block.color;
 
-  // Top-level color (cascade root)
-  if (block.color) {
-    colors['ctrl-color'] = block.color;
-    overridden.add('ctrl-color');
-  }
-
-  // Cascade colors nested in sub-objects
-  if (block.headers && block.headers.color) {
-    colors['ctrl-h-color'] = block.headers.color;
-    overridden.add('ctrl-h-color');
-  }
+  if (block.headers && block.headers.color) colors['ctrl-h-color'] = block.headers.color;
   ['h1','h2','h3','h4'].forEach(function(t) {
     var obj = block[t];
-    if (obj && obj.color) {
-      colors['ctrl-' + t + '-color'] = obj.color;
-      overridden.add('ctrl-' + t + '-color');
-    }
+    if (obj && obj.color) colors['ctrl-' + t + '-color'] = obj.color;
   });
-  if (block.p && block.p.color) {
-    colors['ctrl-p-color'] = block.p.color;
-    overridden.add('ctrl-p-color');
-  }
-  if (block.list && block.list.color) {
-    colors['ctrl-list-color'] = block.list.color;
-    overridden.add('ctrl-list-color');
-  }
+  if (block.p && block.p.color) colors['ctrl-p-color'] = block.p.color;
+  if (block.list && block.list.color) colors['ctrl-list-color'] = block.list.color;
+  if (block.link && block.link.color) colors['ctrl-link-color'] = block.link.color;
 
-  // Standalone colors
-  if (block.link && block.link.color) {
-    colors['ctrl-link-color'] = block.link.color;
-    overridden.add('ctrl-link-color');
+  if (block.blocks) {
+    if (block.blocks.background) colors['ctrl-block-bg'] = block.blocks.background;
+    if (block.blocks.color) colors['ctrl-block-text'] = block.blocks.color;
   }
   if (block.code) {
-    if (block.code.background) { colors['ctrl-code-bg'] = block.code.background; overridden.add('ctrl-code-bg'); }
-    if (block.code.color)      { colors['ctrl-code-color'] = block.code.color; overridden.add('ctrl-code-color'); }
+    if (block.code.background) colors['ctrl-code-bg'] = block.code.background;
+    if (block.code.color) colors['ctrl-code-color'] = block.code.color;
   }
   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'); }
-  }
-
-  return { colors: colors, overridden: overridden };
-}
-
-/**
- * collectThemeColors(colorValues, overriddenSet)
- * Builds the YAML sub-object for one theme (only emits overridden colors).
- */
-function collectThemeColors(colorValues, overriddenSet) {
-  var block = {};
-  if (overriddenSet.has('ctrl-bg-color'))   block.background = colorValues['ctrl-bg-color'];
-  if (overriddenSet.has('ctrl-color'))      block.color = colorValues['ctrl-color'];
-
-  // Heading colors
-  var hasHColor = overriddenSet.has('ctrl-h-color');
-  if (hasHColor) {
-    if (!block.headers) block.headers = {};
-    block.headers.color = colorValues['ctrl-h-color'];
-  }
-  ['h1','h2','h3','h4'].forEach(function(t) {
-    var id = 'ctrl-' + t + '-color';
-    if (overriddenSet.has(id)) {
-      if (!block[t]) block[t] = {};
-      block[t].color = colorValues[id];
-    }
-  });
-
-  // Paragraph and list
-  if (overriddenSet.has('ctrl-p-color')) {
-    if (!block.p) block.p = {};
-    block.p.color = colorValues['ctrl-p-color'];
-  }
-  if (overriddenSet.has('ctrl-list-color')) {
-    if (!block.list) block.list = {};
-    block.list.color = colorValues['ctrl-list-color'];
-  }
-
-  // Standalone colors
-  if (overriddenSet.has('ctrl-link-color')) {
-    if (!block.link) block.link = {};
-    block.link.color = colorValues['ctrl-link-color'];
-  }
-  if (overriddenSet.has('ctrl-code-bg')) {
-    if (!block.code) block.code = {};
-    block.code.background = colorValues['ctrl-code-bg'];
-  }
-  if (overriddenSet.has('ctrl-code-color')) {
-    if (!block.code) block.code = {};
-    block.code.color = colorValues['ctrl-code-color'];
-  }
-  if (overriddenSet.has('ctrl-bq-border-color')) {
-    if (!block.blockquote) block.blockquote = {};
-    block.blockquote.borderColor = colorValues['ctrl-bq-border-color'];
+    if (block.blockquote.borderColor) colors['ctrl-bq-border-color'] = block.blockquote.borderColor;
+    if (block.blockquote.background) colors['ctrl-bq-bg'] = block.blockquote.background;
+    if (block.blockquote.color) colors['ctrl-bq-color'] = block.blockquote.color;
   }
-  if (overriddenSet.has('ctrl-bq-bg')) {
-    if (!block.blockquote) block.blockquote = {};
-    block.blockquote.background = colorValues['ctrl-bq-bg'];
+  if (block.chart) {
+    if (block.chart.background) colors['ctrl-chart-bg'] = block.chart.background;
+    if (block.chart.textColor) colors['ctrl-chart-text'] = block.chart.textColor;
   }
-  if (overriddenSet.has('ctrl-bq-color')) {
-    if (!block.blockquote) block.blockquote = {};
-    block.blockquote.color = colorValues['ctrl-bq-color'];
-  }
-
-  return block;
-}
-
-/**
- * collectStylesDual(values, lightOverridden, darkOverridden, lightColors, darkColors)
- * Builds full styles object with light:/dark: keys for colors, shared non-color props at top level.
- */
-function collectStylesDual(values, lightOverridden, darkOverridden, lightColors, darkColors) {
-  var gv = function(id) { return values[id] || ''; };
-  var gn = function(id) { return parseFloat(values[id]) || 0; };
-
-  var styles = {
-    fontFamily:   gv('ctrl-font-family').replace(/['"]/g, '').split(',')[0].trim(),
-    baseFontSize: gn('ctrl-base-size-num'),
-    lineHeight:   gn('ctrl-line-height-num'),
-    headers: {
-      fontFamily:   gv('ctrl-h-font-family').replace(/['"]/g, '').split(',')[0].trim(),
-      scale:        gn('ctrl-h-scale-num'),
-      marginBottom: gn('ctrl-h-mb-num'),
-    },
-    h1: { fontSize: gn('ctrl-h1-size-num'), fontWeight: parseInt(gv('ctrl-h1-weight')) || 0 },
-    h2: { fontSize: gn('ctrl-h2-size-num'), fontWeight: parseInt(gv('ctrl-h2-weight')) || 0 },
-    h3: { fontSize: gn('ctrl-h3-size-num'), fontWeight: parseInt(gv('ctrl-h3-weight')) || 0 },
-    h4: { fontSize: gn('ctrl-h4-size-num'), fontWeight: parseInt(gv('ctrl-h4-weight')) || 0 },
-    p: {
-      lineHeight:   gn('ctrl-p-lh-num'),
-      marginBottom: gn('ctrl-p-mb-num'),
-    },
-    link: { decoration: gv('ctrl-link-decoration') },
-    code: {
-      font: gv('ctrl-code-font').replace(/['"]/g, '').split(',')[0].trim(),
-    },
-    blockquote: {
-      borderWidth: gn('ctrl-bq-bw-num'),
-      fontSize:    gn('ctrl-bq-size-num'),
-    },
-
-  };
 
-  styles.list = {
-    spacing: gn('ctrl-list-spacing-num'),
-    indent:  gn('ctrl-list-indent-num'),
-  };
-
-  // Build theme color blocks
-  var lightBlock = collectThemeColors(lightColors, lightOverridden);
-  var darkBlock  = collectThemeColors(darkColors, darkOverridden);
-
-  // Only emit light/dark blocks if they have content
-  if (Object.keys(lightBlock).length > 0) styles.light = lightBlock;
-  if (Object.keys(darkBlock).length > 0)  styles.dark = darkBlock;
-
-  return styles;
+  return colors;
 }
 
-/**
- * stylesToControls(styles) — extended version
- * Detects styles.light/styles.dark and returns per-theme data when present.
- */
-var _origStylesToControls = stylesToControls;
-
-stylesToControls = function(styles) {
-  if (!styles) return { controls: {}, overriddenColors: new Set(), hasThemeColors: false };
-
-  var hasThemeColors = !!(styles.light || styles.dark);
-
-  if (!hasThemeColors) {
-    var result = _origStylesToControls(styles);
-    result.hasThemeColors = false;
-    return result;
-  }
-
-  // Parse non-color controls from top level (same as original, but skip colors)
-  var controls = {};
-  var overridden = new Set();
-
-  if (styles.fontFamily)   controls['ctrl-font-family'] = styles.fontFamily;
-  if (styles.baseFontSize) controls['ctrl-base-size-num'] = styles.baseFontSize;
-  if (styles.lineHeight)   controls['ctrl-line-height-num'] = styles.lineHeight;
-
-  var h = styles.headers || {};
-  if (h.fontFamily)   controls['ctrl-h-font-family'] = h.fontFamily;
-  if (h.scale)        controls['ctrl-h-scale-num'] = h.scale;
-  if (h.marginBottom) controls['ctrl-h-mb-num'] = h.marginBottom;
-
-  ['h1', 'h2', 'h3', 'h4'].forEach(function(t) {
-    var hs = styles[t] || {};
-    if (hs.fontSize)   controls['ctrl-' + t + '-size-num'] = hs.fontSize;
-    if (hs.fontWeight) controls['ctrl-' + t + '-weight'] = String(hs.fontWeight);
-  });
-
-  var p = styles.p || {};
-  if (p.lineHeight)   controls['ctrl-p-lh-num'] = p.lineHeight;
-  if (p.marginBottom) controls['ctrl-p-mb-num'] = p.marginBottom;
-
-  var lk = styles.link || {};
-  if (lk.decoration) controls['ctrl-link-decoration'] = lk.decoration;
-
-  var cd = styles.code || {};
-  if (cd.font) controls['ctrl-code-font'] = cd.font;
-
-  var bq = styles.blockquote || {};
-  if (bq.borderWidth) controls['ctrl-bq-bw-num'] = bq.borderWidth;
-  if (bq.fontSize)    controls['ctrl-bq-size-num'] = bq.fontSize;
-
-  var ll = styles.list || {};
-  if (ll.spacing) controls['ctrl-list-spacing-num'] = ll.spacing;
-  if (ll.indent)  controls['ctrl-list-indent-num'] = ll.indent;
-
-  // Parse per-theme color blocks
-  var lightParsed = parseThemeColorBlock(styles.light);
-  var darkParsed  = parseThemeColorBlock(styles.dark);
-
-  return {
-    controls: controls,
-    overriddenColors: overridden,
-    hasThemeColors: true,
-    lightColors: lightParsed.colors,
-    lightOverridden: lightParsed.overridden,
-    darkColors: darkParsed.colors,
-    darkOverridden: darkParsed.overridden,
-  };
-};
-
 // ═══════════════════════════════════════════════════════
 //  STRIP STYLE DEFAULTS (for shorter URLs)
 // ═══════════════════════════════════════════════════════
@@ -619,12 +544,13 @@ exports.RANGE_NUM_PAIRS = RANGE_NUM_PAIRS;
 exports.STANDALONE_COLOR_IDS = STANDALONE_COLOR_IDS;
 exports.ALL_COLOR_IDS        = ALL_COLOR_IDS;
 
+exports.hexToHsl              = hexToHsl;
+exports.hslToHex              = hslToHex;
 exports.controlToCssVars      = controlToCssVars;
 exports.cascadeColor          = cascadeColor;
+exports.invertLightness       = invertLightness;
 exports.collectStyles         = collectStyles;
-exports.collectStylesDual     = collectStylesDual;
-exports.collectThemeColors    = collectThemeColors;
-exports.parseThemeColorBlock  = parseThemeColorBlock;
+exports.parseDarkBlock        = parseDarkBlock;
 exports.stylesToControls      = stylesToControls;
 exports.STYLE_DEFAULTS        = STYLE_DEFAULTS;
 exports.stripStyleDefaults    = stripStyleDefaults;

package/public/sdocs-theme.js

@@ -89,7 +89,7 @@ function getPreferredTheme() {
 }
 
 const SUN_ICON = '<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"/>';
-const MOON_ICON = '<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/>';
+const MOON_ICON = '<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" stroke-width="1.5"/>';
 
 function updateThemeIcon(theme) {
   const icon = document.getElementById('icon-theme');
@@ -120,32 +120,35 @@ function loadThemeColors(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);
-  }
+  // Cascade roots: text color and block bg/text
+  var cascadeRoots = [
+    ['ctrl-color', defaults.colorDefault],
+    ['ctrl-block-bg', defaults.codeBg],
+    ['ctrl-block-text', defaults.bqColor],
+  ];
+  cascadeRoots.forEach(function(pair) {
+    var id = pair[0], def = pair[1];
+    if (overridden.has(id)) {
+      S.setColorValue(id, colors[id], true);
+    } else {
+      S.setColorValue(id, def, false);
+    }
+  });
 
-  // Then cascade children that are overridden
+  // Then cascade children that are overridden (overrides the parent cascade)
   var cascadeIds = Object.keys(SDocStyles.COLOR_VAR_MAP);
   cascadeIds.forEach(function(ctrlId) {
-    if (ctrlId === 'ctrl-color') return; // already handled
+    if (ctrlId === 'ctrl-color' || ctrlId === 'ctrl-block-bg' || ctrlId === 'ctrl-block-text') return;
     if (overridden.has(ctrlId)) {
       S.setColorValue(ctrlId, colors[ctrlId], true);
     }
-    // Non-overridden cascade children are already set by cascade from parent
   });
 
-  // Standalone colors
+  // Standalone colors (not in cascade)
   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-bg':           defaults.bqBg,
-    'ctrl-bq-color':        defaults.bqColor,
   };
   for (var ctrlId in standaloneMap) {
     var el = document.getElementById(ctrlId);
@@ -217,11 +220,10 @@ function getStandaloneDefault(ctrlId) {
   const map = {
     'ctrl-bg-color':        d.bgColor,
     'ctrl-link-color':      d.linkColor,
-    '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,
+    'ctrl-block-bg':        d.codeBg,
+    'ctrl-block-text':      d.bqColor,
+    'ctrl-chart-accent':    '#3b82f6',
   };
   return map[ctrlId];
 }