sdocs-dev 1.2.0 → 1.3.1

package/public/sdocs-styles.js

@@ -11,75 +11,171 @@ 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',
+  '_sd_ctrl-color':       '--md-color',
+  '_sd_ctrl-h-color':     '--md-h-color',
+  '_sd_ctrl-h1-color':    '--md-h1-color',
+  '_sd_ctrl-h2-color':    '--md-h2-color',
+  '_sd_ctrl-h3-color':    '--md-h3-color',
+  '_sd_ctrl-h4-color':    '--md-h4-color',
+  '_sd_ctrl-p-color':     '--md-p-color',
+  '_sd_ctrl-list-color':  '--md-list-color',
+  // Block cascade
+  '_sd_ctrl-block-bg':    '--md-block-bg',
+  '_sd_ctrl-block-text':  '--md-block-text',
+  '_sd_ctrl-code-bg':     ['--md-code-bg', '--md-pre-bg'],
+  '_sd_ctrl-code-color':  '--md-code-color',
+  '_sd_ctrl-bq-bg':       '--md-bq-bg',
+  '_sd_ctrl-bq-color':    '--md-bq-color',
+  '_sd_ctrl-chart-bg':    '--md-chart-bg',
+  '_sd_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'],
+  '_sd_ctrl-color':      ['_sd_ctrl-h-color', '_sd_ctrl-p-color'],
+  '_sd_ctrl-h-color':    ['_sd_ctrl-h1-color', '_sd_ctrl-h2-color', '_sd_ctrl-h3-color', '_sd_ctrl-h4-color'],
+  '_sd_ctrl-p-color':    ['_sd_ctrl-list-color'],
+  '_sd_ctrl-block-bg':   ['_sd_ctrl-code-bg', '_sd_ctrl-bq-bg', '_sd_ctrl-chart-bg'],
+  '_sd_ctrl-block-text': ['_sd_ctrl-code-color', '_sd_ctrl-bq-color', '_sd_ctrl-chart-text'],
 };
 
 // Control ID → { cssVar, suffix?, compound? }
 // Maps every non-color control to its CSS variable and optional unit suffix
 const CTRL_CSS_MAP = {
-  'ctrl-bg-color':         { cssVar: '--md-bg' },
-  'ctrl-font-family':      { cssVar: '--md-font-family' },
-  'ctrl-base-size-num':    { cssVar: '--md-base-size', suffix: 'px' },
-  'ctrl-line-height-num':  { cssVar: '--md-line-height' },
-  'ctrl-h-font-family':    { cssVar: '--md-h-font-family' },
-  'ctrl-h-scale-num':      { cssVar: '--md-h-scale' },
-  'ctrl-h-mb-num':         { cssVar: '--md-h-margin-bottom', suffix: 'em' },
-  'ctrl-h1-size-num':      { cssVar: '--md-h1-size', suffix: 'em' },
-  'ctrl-h1-weight':        { cssVar: '--md-h1-weight' },
-  'ctrl-h2-size-num':      { cssVar: '--md-h2-size', suffix: 'em' },
-  'ctrl-h2-weight':        { cssVar: '--md-h2-weight' },
-  'ctrl-h3-size-num':      { cssVar: '--md-h3-size', suffix: 'em' },
-  'ctrl-h3-weight':        { cssVar: '--md-h3-weight' },
-  'ctrl-h4-size-num':      { cssVar: '--md-h4-size', suffix: 'em' },
-  'ctrl-h4-weight':        { cssVar: '--md-h4-weight' },
-  'ctrl-p-lh-num':         { cssVar: '--md-p-line-height' },
-  'ctrl-p-mb-num':         { cssVar: '--md-p-margin', template: '0 0 {v}em' },
-  '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' },
+  '_sd_ctrl-bg-color':         { cssVar: '--md-bg' },
+  '_sd_ctrl-font-family':      { cssVar: '--md-font-family' },
+  '_sd_ctrl-base-size-num':    { cssVar: '--md-base-size', suffix: 'px' },
+  '_sd_ctrl-line-height-num':  { cssVar: '--md-line-height' },
+  '_sd_ctrl-h-font-family':    { cssVar: '--md-h-font-family' },
+  '_sd_ctrl-h-scale-num':      { cssVar: '--md-h-scale' },
+  '_sd_ctrl-h-mb-num':         { cssVar: '--md-h-margin-bottom', suffix: 'em' },
+  '_sd_ctrl-h1-size-num':      { cssVar: '--md-h1-size', suffix: 'em' },
+  '_sd_ctrl-h1-weight':        { cssVar: '--md-h1-weight' },
+  '_sd_ctrl-h2-size-num':      { cssVar: '--md-h2-size', suffix: 'em' },
+  '_sd_ctrl-h2-weight':        { cssVar: '--md-h2-weight' },
+  '_sd_ctrl-h3-size-num':      { cssVar: '--md-h3-size', suffix: 'em' },
+  '_sd_ctrl-h3-weight':        { cssVar: '--md-h3-weight' },
+  '_sd_ctrl-h4-size-num':      { cssVar: '--md-h4-size', suffix: 'em' },
+  '_sd_ctrl-h4-weight':        { cssVar: '--md-h4-weight' },
+  '_sd_ctrl-p-lh-num':         { cssVar: '--md-p-line-height' },
+  '_sd_ctrl-p-mb-num':         { cssVar: '--md-p-margin', template: '0 0 {v}em' },
+  '_sd_ctrl-link-color':       { cssVar: '--md-link-color' },
+  '_sd_ctrl-link-decoration':  { cssVar: '--md-link-decoration' },
+  '_sd_ctrl-code-font':        { cssVar: '--md-code-font' },
+  '_sd_ctrl-bq-border-color':  { cssVar: '--md-bq-border', compound: 'bq-border' },
+  '_sd_ctrl-bq-bw-num':        { cssVar: '--md-bq-border', compound: 'bq-border' },
+  '_sd_ctrl-bq-size-num':      { cssVar: '--md-bq-size', suffix: 'em' },
+  '_sd_ctrl-list-spacing-num': { cssVar: '--md-list-spacing', suffix: 'em' },
+  '_sd_ctrl-list-indent-num':  { cssVar: '--md-list-indent', suffix: 'em' },
+  '_sd_ctrl-chart-accent':     { cssVar: '--md-chart-accent' },
+  '_sd_ctrl-chart-palette':    { cssVar: '--md-chart-palette' },
 };
 
 // Range ↔ Number input pairs
 const RANGE_NUM_PAIRS = [
-  ['ctrl-base-size-range',    'ctrl-base-size-num'],
-  ['ctrl-line-height-range',  'ctrl-line-height-num'],
-  ['ctrl-h-scale-range',      'ctrl-h-scale-num'],
-  ['ctrl-h-mb-range',         'ctrl-h-mb-num'],
-  ['ctrl-h1-size-range',      'ctrl-h1-size-num'],
-  ['ctrl-h2-size-range',      'ctrl-h2-size-num'],
-  ['ctrl-h3-size-range',      'ctrl-h3-size-num'],
-  ['ctrl-h4-size-range',      'ctrl-h4-size-num'],
-  ['ctrl-p-lh-range',         'ctrl-p-lh-num'],
-  ['ctrl-p-mb-range',         'ctrl-p-mb-num'],
-  ['ctrl-bq-bw-range',        'ctrl-bq-bw-num'],
-  ['ctrl-bq-size-range',      'ctrl-bq-size-num'],
-  ['ctrl-list-spacing-range', 'ctrl-list-spacing-num'],
-  ['ctrl-list-indent-range',  'ctrl-list-indent-num'],
+  ['_sd_ctrl-base-size-range',    '_sd_ctrl-base-size-num'],
+  ['_sd_ctrl-line-height-range',  '_sd_ctrl-line-height-num'],
+  ['_sd_ctrl-h-scale-range',      '_sd_ctrl-h-scale-num'],
+  ['_sd_ctrl-h-mb-range',         '_sd_ctrl-h-mb-num'],
+  ['_sd_ctrl-h1-size-range',      '_sd_ctrl-h1-size-num'],
+  ['_sd_ctrl-h2-size-range',      '_sd_ctrl-h2-size-num'],
+  ['_sd_ctrl-h3-size-range',      '_sd_ctrl-h3-size-num'],
+  ['_sd_ctrl-h4-size-range',      '_sd_ctrl-h4-size-num'],
+  ['_sd_ctrl-p-lh-range',         '_sd_ctrl-p-lh-num'],
+  ['_sd_ctrl-p-mb-range',         '_sd_ctrl-p-mb-num'],
+  ['_sd_ctrl-bq-bw-range',        '_sd_ctrl-bq-bw-num'],
+  ['_sd_ctrl-bq-size-range',      '_sd_ctrl-bq-size-num'],
+  ['_sd_ctrl-list-spacing-range', '_sd_ctrl-list-spacing-num'],
+  ['_sd_ctrl-list-indent-range',  '_sd_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];
@@ -99,8 +199,8 @@ function controlToCssVars(ctrlId, value, allValues) {
 
   // Compound: bq-border combines color + width
   if (entry.compound === 'bq-border') {
-    const col = allValues['ctrl-bq-border-color'] || '#2563EB';
-    const w = allValues['ctrl-bq-bw-num'] || '3';
+    const col = allValues['_sd_ctrl-bq-border-color'] || '#2563EB';
+    const w = allValues['_sd_ctrl-bq-bw-num'] || '3';
     return [{ cssVar: '--md-bq-border', value: `${w}px solid ${col}` }];
   }
 
@@ -146,52 +246,67 @@ function collectStyles(values, overriddenColors) {
   const gn = id => parseFloat(values[id]) || 0;
 
   const styles = {
-    fontFamily:   gv('ctrl-font-family').replace(/['"]/g, '').split(',')[0].trim(),
-    baseFontSize: gn('ctrl-base-size-num'),
-    lineHeight:   gn('ctrl-line-height-num'),
+    fontFamily:   gv('_sd_ctrl-font-family').replace(/['"]/g, '').split(',')[0].trim(),
+    baseFontSize: gn('_sd_ctrl-base-size-num'),
+    lineHeight:   gn('_sd_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'),
+      fontFamily:   gv('_sd_ctrl-h-font-family').replace(/['"]/g, '').split(',')[0].trim(),
+      scale:        gn('_sd_ctrl-h-scale-num'),
+      marginBottom: gn('_sd_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 },
+    h1: { fontSize: gn('_sd_ctrl-h1-size-num'), fontWeight: parseInt(gv('_sd_ctrl-h1-weight')) || 0 },
+    h2: { fontSize: gn('_sd_ctrl-h2-size-num'), fontWeight: parseInt(gv('_sd_ctrl-h2-weight')) || 0 },
+    h3: { fontSize: gn('_sd_ctrl-h3-size-num'), fontWeight: parseInt(gv('_sd_ctrl-h3-weight')) || 0 },
+    h4: { fontSize: gn('_sd_ctrl-h4-size-num'), fontWeight: parseInt(gv('_sd_ctrl-h4-weight')) || 0 },
     p: {
-      lineHeight:   gn('ctrl-p-lh-num'),
-      marginBottom: gn('ctrl-p-mb-num'),
+      lineHeight:   gn('_sd_ctrl-p-lh-num'),
+      marginBottom: gn('_sd_ctrl-p-mb-num'),
     },
-    link: { color: gv('ctrl-link-color'), decoration: gv('ctrl-link-decoration') },
+    link: { color: gv('_sd_ctrl-link-color'), decoration: gv('_sd_ctrl-link-decoration') },
     code: {
-      font:       gv('ctrl-code-font').replace(/['"]/g, '').split(',')[0].trim(),
-      background: gv('ctrl-code-bg'),
-      color:      gv('ctrl-code-color'),
+      font:       gv('_sd_ctrl-code-font').replace(/['"]/g, '').split(',')[0].trim(),
     },
     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'),
+      borderColor: gv('_sd_ctrl-bq-border-color'),
+      borderWidth: gn('_sd_ctrl-bq-bw-num'),
+      fontSize:    gn('_sd_ctrl-bq-size-num'),
     },
   };
 
   styles.list = {
-    spacing: gn('ctrl-list-spacing-num'),
-    indent:  gn('ctrl-list-indent-num'),
+    spacing: gn('_sd_ctrl-list-spacing-num'),
+    indent:  gn('_sd_ctrl-list-indent-num'),
   };
 
   // Only emit colors that were explicitly overridden
-  if (overriddenColors.has('ctrl-bg-color'))   styles.background = gv('ctrl-bg-color');
-  if (overriddenColors.has('ctrl-color'))      styles.color = gv('ctrl-color');
-  if (overriddenColors.has('ctrl-h-color'))    styles.headers.color = gv('ctrl-h-color');
-  if (overriddenColors.has('ctrl-h1-color'))   styles.h1.color = gv('ctrl-h1-color');
-  if (overriddenColors.has('ctrl-h2-color'))   styles.h2.color = gv('ctrl-h2-color');
-  if (overriddenColors.has('ctrl-h3-color'))   styles.h3.color = gv('ctrl-h3-color');
-  if (overriddenColors.has('ctrl-h4-color'))   styles.h4.color = gv('ctrl-h4-color');
-  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');
+  if (overriddenColors.has('_sd_ctrl-bg-color'))   styles.background = gv('_sd_ctrl-bg-color');
+  if (overriddenColors.has('_sd_ctrl-color'))      styles.color = gv('_sd_ctrl-color');
+  if (overriddenColors.has('_sd_ctrl-h-color'))    styles.headers.color = gv('_sd_ctrl-h-color');
+  if (overriddenColors.has('_sd_ctrl-h1-color'))   styles.h1.color = gv('_sd_ctrl-h1-color');
+  if (overriddenColors.has('_sd_ctrl-h2-color'))   styles.h2.color = gv('_sd_ctrl-h2-color');
+  if (overriddenColors.has('_sd_ctrl-h3-color'))   styles.h3.color = gv('_sd_ctrl-h3-color');
+  if (overriddenColors.has('_sd_ctrl-h4-color'))   styles.h4.color = gv('_sd_ctrl-h4-color');
+  if (overriddenColors.has('_sd_ctrl-p-color'))    styles.p.color = gv('_sd_ctrl-p-color');
+  if (overriddenColors.has('_sd_ctrl-list-color')) styles.list.color = gv('_sd_ctrl-list-color');
+
+  // Block cascade colors
+  if (overriddenColors.has('_sd_ctrl-block-bg') || overriddenColors.has('_sd_ctrl-block-text')) {
+    styles.blocks = {};
+    if (overriddenColors.has('_sd_ctrl-block-bg'))   styles.blocks.background = gv('_sd_ctrl-block-bg');
+    if (overriddenColors.has('_sd_ctrl-block-text')) styles.blocks.color = gv('_sd_ctrl-block-text');
+  }
+  if (overriddenColors.has('_sd_ctrl-code-bg'))    styles.code.background = gv('_sd_ctrl-code-bg');
+  if (overriddenColors.has('_sd_ctrl-code-color')) styles.code.color = gv('_sd_ctrl-code-color');
+  if (overriddenColors.has('_sd_ctrl-bq-bg'))      styles.blockquote.background = gv('_sd_ctrl-bq-bg');
+  if (overriddenColors.has('_sd_ctrl-bq-color'))   styles.blockquote.color = gv('_sd_ctrl-bq-color');
+
+  // Chart styles
+  var chartObj = {};
+  if (overriddenColors.has('_sd_ctrl-chart-accent')) chartObj.accent = gv('_sd_ctrl-chart-accent');
+  if (gv('_sd_ctrl-chart-palette') && gv('_sd_ctrl-chart-palette') !== 'monochrome') chartObj.palette = gv('_sd_ctrl-chart-palette');
+  if (overriddenColors.has('_sd_ctrl-chart-bg'))    chartObj.background = gv('_sd_ctrl-chart-bg');
+  if (overriddenColors.has('_sd_ctrl-chart-text'))  chartObj.textColor = gv('_sd_ctrl-chart-text');
+  if (Object.keys(chartObj).length) styles.chart = chartObj;
 
   return styles;
 }
@@ -207,70 +322,81 @@ function stylesToControls(styles) {
   const controls = {};
   const 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;
+  if (styles.fontFamily)   controls['_sd_ctrl-font-family'] = styles.fontFamily;
+  if (styles.baseFontSize) controls['_sd_ctrl-base-size-num'] = styles.baseFontSize;
+  if (styles.lineHeight)   controls['_sd_ctrl-line-height-num'] = styles.lineHeight;
 
   if (styles.background) {
-    controls['ctrl-bg-color'] = styles.background;
-    overridden.add('ctrl-bg-color');
+    controls['_sd_ctrl-bg-color'] = styles.background;
+    overridden.add('_sd_ctrl-bg-color');
   }
   if (styles.color) {
-    controls['ctrl-color'] = styles.color;
-    overridden.add('ctrl-color');
+    controls['_sd_ctrl-color'] = styles.color;
+    overridden.add('_sd_ctrl-color');
   }
 
   const 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;
+  if (h.fontFamily)   controls['_sd_ctrl-h-font-family'] = h.fontFamily;
+  if (h.scale)        controls['_sd_ctrl-h-scale-num'] = h.scale;
+  if (h.marginBottom) controls['_sd_ctrl-h-mb-num'] = h.marginBottom;
   if (h.color) {
-    controls['ctrl-h-color'] = h.color;
-    overridden.add('ctrl-h-color');
+    controls['_sd_ctrl-h-color'] = h.color;
+    overridden.add('_sd_ctrl-h-color');
   }
 
   ['h1', 'h2', 'h3', 'h4'].forEach(t => {
     const hs = styles[t] || {};
-    if (hs.fontSize)   controls[`ctrl-${t}-size-num`] = hs.fontSize;
-    if (hs.fontWeight) controls[`ctrl-${t}-weight`] = String(hs.fontWeight);
+    if (hs.fontSize)   controls[`_sd_ctrl-${t}-size-num`] = hs.fontSize;
+    if (hs.fontWeight) controls[`_sd_ctrl-${t}-weight`] = String(hs.fontWeight);
     if (hs.color) {
-      controls[`ctrl-${t}-color`] = hs.color;
-      overridden.add(`ctrl-${t}-color`);
+      controls[`_sd_ctrl-${t}-color`] = hs.color;
+      overridden.add(`_sd_ctrl-${t}-color`);
     }
   });
 
   const p = styles.p || {};
-  if (p.lineHeight)   controls['ctrl-p-lh-num'] = p.lineHeight;
-  if (p.marginBottom) controls['ctrl-p-mb-num'] = p.marginBottom;
+  if (p.lineHeight)   controls['_sd_ctrl-p-lh-num'] = p.lineHeight;
+  if (p.marginBottom) controls['_sd_ctrl-p-mb-num'] = p.marginBottom;
   if (p.color) {
-    controls['ctrl-p-color'] = p.color;
-    overridden.add('ctrl-p-color');
+    controls['_sd_ctrl-p-color'] = p.color;
+    overridden.add('_sd_ctrl-p-color');
   }
 
   const lk = styles.link || {};
-  if (lk.color)      controls['ctrl-link-color'] = lk.color;
-  if (lk.decoration) controls['ctrl-link-decoration'] = lk.decoration;
+  if (lk.color)      controls['_sd_ctrl-link-color'] = lk.color;
+  if (lk.decoration) controls['_sd_ctrl-link-decoration'] = lk.decoration;
+
+  // Blocks cascade parent
+  const bl = styles.blocks || {};
+  if (bl.background) { controls['_sd_ctrl-block-bg'] = bl.background; overridden.add('_sd_ctrl-block-bg'); }
+  if (bl.color)      { controls['_sd_ctrl-block-text'] = bl.color; overridden.add('_sd_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.font)       controls['_sd_ctrl-code-font'] = cd.font;
+  if (cd.background) { controls['_sd_ctrl-code-bg'] = cd.background; overridden.add('_sd_ctrl-code-bg'); }
+  if (cd.color)      { controls['_sd_ctrl-code-color'] = cd.color; overridden.add('_sd_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.fontSize)    controls['ctrl-bq-size-num'] = bq.fontSize;
-  if (bq.color)       controls['ctrl-bq-color'] = bq.color;
+  if (bq.borderColor) controls['_sd_ctrl-bq-border-color'] = bq.borderColor;
+  if (bq.borderWidth) controls['_sd_ctrl-bq-bw-num'] = bq.borderWidth;
+  if (bq.background)  { controls['_sd_ctrl-bq-bg'] = bq.background; overridden.add('_sd_ctrl-bq-bg'); }
+  if (bq.fontSize)    controls['_sd_ctrl-bq-size-num'] = bq.fontSize;
+  if (bq.color)       { controls['_sd_ctrl-bq-color'] = bq.color; overridden.add('_sd_ctrl-bq-color'); }
 
   const ll = styles.list || {};
-  if (ll.spacing) controls['ctrl-list-spacing-num'] = ll.spacing;
-  if (ll.indent)  controls['ctrl-list-indent-num'] = ll.indent;
+  if (ll.spacing) controls['_sd_ctrl-list-spacing-num'] = ll.spacing;
+  if (ll.indent)  controls['_sd_ctrl-list-indent-num'] = ll.indent;
   if (ll.color) {
-    controls['ctrl-list-color'] = ll.color;
-    overridden.add('ctrl-list-color');
+    controls['_sd_ctrl-list-color'] = ll.color;
+    overridden.add('_sd_ctrl-list-color');
   }
 
+  const ch = styles.chart || {};
+  if (ch.accent)     { controls['_sd_ctrl-chart-accent'] = ch.accent; overridden.add('_sd_ctrl-chart-accent'); }
+  if (ch.palette)    controls['_sd_ctrl-chart-palette'] = ch.palette;
+  if (ch.background) { controls['_sd_ctrl-chart-bg'] = ch.background; overridden.add('_sd_ctrl-chart-bg'); }
+  if (ch.textColor)  { controls['_sd_ctrl-chart-text'] = ch.textColor; overridden.add('_sd_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',
+  '_sd_ctrl-bg-color','_sd_ctrl-link-color',
+  '_sd_ctrl-bq-border-color',
+  '_sd_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');
-  }
 
-  // Top-level color (cascade root)
-  if (block.color) {
-    colors['ctrl-color'] = block.color;
-    overridden.add('ctrl-color');
-  }
+  if (block.background) colors['_sd_ctrl-bg-color'] = block.background;
+  if (block.color) colors['_sd_ctrl-color'] = block.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['_sd_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['_sd_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['_sd_ctrl-p-color'] = block.p.color;
+  if (block.list && block.list.color) colors['_sd_ctrl-list-color'] = block.list.color;
+  if (block.link && block.link.color) colors['_sd_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['_sd_ctrl-block-bg'] = block.blocks.background;
+    if (block.blocks.color) colors['_sd_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['_sd_ctrl-code-bg'] = block.code.background;
+    if (block.code.color) colors['_sd_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'];
+    if (block.blockquote.borderColor) colors['_sd_ctrl-bq-border-color'] = block.blockquote.borderColor;
+    if (block.blockquote.background) colors['_sd_ctrl-bq-bg'] = block.blockquote.background;
+    if (block.blockquote.color) colors['_sd_ctrl-bq-color'] = block.blockquote.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'];
+  if (block.chart) {
+    if (block.chart.background) colors['_sd_ctrl-chart-bg'] = block.chart.background;
+    if (block.chart.textColor) colors['_sd_ctrl-chart-text'] = block.chart.textColor;
   }
 
-  // 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 (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'];
-  }
-
-  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;