mixdog 0.9.174 → 1.0.0

package/src/runtime/office/authoring/pptx-html-measure.mjs

@@ -42,7 +42,8 @@ function extractSlide(index) {
     };
   };
   const rel = (r) => ({ x: r.left - base.left, y: r.top - base.top, w: r.width, h: r.height });
-  const visible = (el, cs) => cs.display !== 'none' && cs.visibility !== 'hidden' && el.getBoundingClientRect().width > 0;
+  const visible = (el, cs) =>
+    cs.display !== 'none' && cs.visibility !== 'hidden' && el.getBoundingClientRect().width > 0;
   const hasOwnText = (el) => [...el.childNodes].some((node) => node.nodeType === 3 && node.textContent.trim());
   const family = (value) =>
     value
@@ -87,10 +88,15 @@ function extractSlide(index) {
     if (cs.mixBlendMode && cs.mixBlendMode !== 'normal') reasons.push('mix-blend-mode');
     // A rotated box of text is read upright by the caller and turned natively; anything else turned is drawn.
     if (turn(cs)) reasons.push('transform');
-    if (['Top', 'Right', 'Bottom', 'Left'].some((s) => px(cs[`border${s}Width`]) > 0 && !['solid', 'none', 'hidden'].includes(cs[`border${s}Style`]))) {
+    if (
+      ['Top', 'Right', 'Bottom', 'Left'].some(
+        (s) => px(cs[`border${s}Width`]) > 0 && !['solid', 'none', 'hidden'].includes(cs[`border${s}Style`])
+      )
+    ) {
       reasons.push('border-style');
     }
-    if (set(cs.boxShadow) && (/inset/.test(cs.boxShadow) || cs.boxShadow.split(/,(?![^(]*\))/).length > 1)) reasons.push('box-shadow');
+    if (set(cs.boxShadow) && (/inset/.test(cs.boxShadow) || cs.boxShadow.split(/,(?![^(]*\))/).length > 1))
+      reasons.push('box-shadow');
     for (const which of ['::before', '::after']) {
       const p = getComputedStyle(el, which);
       if (p.content && p.content !== 'none' && p.content !== 'normal' && p.display !== 'none') reasons.push(which);
@@ -101,7 +107,9 @@ function extractSlide(index) {
       const r = el.getBoundingClientRect();
       const s = slide.getBoundingClientRect();
       const past = r.left < s.left - 0.5 || r.top < s.top - 0.5 || r.right > s.right + 0.5 || r.bottom > s.bottom + 0.5;
-      const bordered = ['Top', 'Right', 'Bottom', 'Left'].some((side) => px(cs[`border${side}Width`]) > 0 && !['none', 'hidden'].includes(cs[`border${side}Style`]));
+      const bordered = ['Top', 'Right', 'Bottom', 'Left'].some(
+        (side) => px(cs[`border${side}Width`]) > 0 && !['none', 'hidden'].includes(cs[`border${side}Style`])
+      );
       const rounded = px(cs.borderTopLeftRadius) > 0 && color(cs.backgroundColor);
       if (past && (bordered || rounded)) reasons.push('bleed');
     }
@@ -190,8 +198,7 @@ function extractSlide(index) {
     for (let node = walker.nextNode(); node; node = walker.nextNode()) {
       const ps = getComputedStyle(node.parentElement);
       // An inline run with its own background is a marker highlight.
-      const highlight =
-        node.parentElement !== el && ps.display.startsWith('inline') ? color(ps.backgroundColor) : null;
+      const highlight = node.parentElement !== el && ps.display.startsWith('inline') ? color(ps.backgroundColor) : null;
       const style = {
         hl: highlight ? highlight.hex : null,
         font: family(ps.fontFamily),
@@ -299,9 +306,16 @@ function extractSlide(index) {
     const ink = color(cs.color);
     let markup = new XMLSerializer().serializeToString(clone);
     if (ink) markup = markup.replace(/currentColor/g, `#${ink.hex}`);
-    if (/pathLength=/.test(markup)) notes.push('pathLength in <svg> is not honoured by the rasterizer; write dash lengths in user units.');
+    if (/pathLength=/.test(markup))
+      notes.push('pathLength in <svg> is not honoured by the rasterizer; write dash lengths in user units.');
     const holder = el.closest('[data-alt]');
-    items.push({ kind: 'svg', box: rel(r), markup, alt: holder ? holder.getAttribute('data-alt') : '', alpha: opacityOf(el) });
+    items.push({
+      kind: 'svg',
+      box: rel(r),
+      markup,
+      alt: holder ? holder.getAttribute('data-alt') : '',
+      alpha: opacityOf(el),
+    });
   }
 
   function picture(el, cs) {
@@ -320,7 +334,9 @@ function extractSlide(index) {
     });
   }
 
-  const speakerNotes = [...slide.querySelectorAll('aside.notes')].map((aside) => aside.innerText.trim()).filter(Boolean);
+  const speakerNotes = [...slide.querySelectorAll('aside.notes')]
+    .map((aside) => aside.innerText.trim())
+    .filter(Boolean);
 
   function walk(el) {
     if (el.matches('aside.notes')) return;
@@ -364,9 +380,12 @@ function extractSlide(index) {
             : null,
       });
       if (rich.includes('mix-blend-mode') || rich.includes('backdrop-filter')) {
-        notes.push(`${rich.includes('mix-blend-mode') ? 'mix-blend-mode' : 'backdrop-filter'} on <${tag}> is drawn without the layers behind it.`);
+        notes.push(
+          `${rich.includes('mix-blend-mode') ? 'mix-blend-mode' : 'backdrop-filter'} on <${tag}> is drawn without the layers behind it.`
+        );
       }
-      if (turn(cs) && el.children.length) notes.push(`transform on <${tag}> with children: the children are placed as drawn but set upright.`);
+      if (turn(cs) && el.children.length)
+        notes.push(`transform on <${tag}> with children: the children are placed as drawn but set upright.`);
     }
     const own = el === slide || rich.length ? { rect: null, lines: [] } : paint(el, cs);
     if (el.dataset.chart) {
@@ -428,7 +447,10 @@ function isolateCapture(id) {
       : `html, body { background: transparent !important; }
          section.slide, section.slide * { visibility: hidden !important; }
          ${target} { visibility: visible !important; color: transparent !important; -webkit-text-fill-color: transparent !important; text-shadow: none !important; }
-         ${target.split(', ').map((s) => `${s} *`).join(', ')} { visibility: hidden !important; }`;
+         ${target
+           .split(', ')
+           .map((s) => `${s} *`)
+           .join(', ')} { visibility: hidden !important; }`;
 }
 
 // Shows one slide at a time whatever the deck's own CSS does with the others.
@@ -475,17 +497,22 @@ async function captureRichPaint(page, slideBox, ids) {
     for (const id of ids) {
       await page.evaluate(isolateCapture, id);
       // Runtimes with Uint8Array.fromBase64 get a plain Uint8Array back, whose toString is not base64.
-      const shot = Buffer.from(await page.screenshot({
-        clip: { x: slideBox.x, y: slideBox.y, width: HTML_CANVAS.width, height: HTML_CANVAS.height },
-        omitBackground: true,
-        type: 'png',
-      }));
+      const shot = Buffer.from(
+        await page.screenshot({
+          clip: { x: slideBox.x, y: slideBox.y, width: HTML_CANVAS.width, height: HTML_CANVAS.height },
+          omitBackground: true,
+          type: 'png',
+        })
+      );
       // A shot the element covers edge to edge comes back without an alpha channel: it is the whole page.
       const { channels } = await sharp(shot).stats();
       const alpha = channels[3];
       if (alpha && alpha.max === 0) continue;
       if (!alpha || alpha.min === 255) {
-        out.set(id, { png: shot.toString('base64'), draw: { x: 0, y: 0, w: HTML_CANVAS.width, h: HTML_CANVAS.height } });
+        out.set(id, {
+          png: shot.toString('base64'),
+          draw: { x: 0, y: 0, w: HTML_CANVAS.width, h: HTML_CANVAS.height },
+        });
         continue;
       }
       const { data, info } = await sharp(shot).trim({ threshold: 0 }).png().toBuffer({ resolveWithObject: true });
@@ -493,7 +520,12 @@ async function captureRichPaint(page, slideBox, ids) {
       const top = -(info.trimOffsetTop || 0);
       out.set(id, {
         png: data.toString('base64'),
-        draw: { x: left / CAPTURE_SCALE, y: top / CAPTURE_SCALE, w: info.width / CAPTURE_SCALE, h: info.height / CAPTURE_SCALE },
+        draw: {
+          x: left / CAPTURE_SCALE,
+          y: top / CAPTURE_SCALE,
+          w: info.width / CAPTURE_SCALE,
+          h: info.height / CAPTURE_SCALE,
+        },
       });
     }
   } finally {
@@ -544,7 +576,10 @@ export async function measureHtmlDeck(html, { sourcePath, shotPath, timeoutMs =
       throw new Error(`Unknown data-icon: ${hint.join(' ')}`);
     }
     const count = await page.$$eval('section.slide', (sections) => sections.length);
-    if (!count) throw new Error('The HTML holds no <section class="slide">; every page is one section.slide on a 1920×1080 canvas.');
+    if (!count)
+      throw new Error(
+        'The HTML holds no <section class="slide">; every page is one section.slide on a 1920×1080 canvas.'
+      );
     const slides = [];
     const shots = [];
     const notes = [];
@@ -568,7 +603,11 @@ export async function measureHtmlDeck(html, { sourcePath, shotPath, timeoutMs =
       if (findings.length) geometry.push({ slide: index + 1, findings });
       const drawn = await captureRichPaint(page, box, measured.captures);
       const items = measured.items
-        .map((item) => (item.kind === 'capture' ? (drawn.get(item.id) ? { ...item, ...drawn.get(item.id) } : null) : item))
+        .map((item) => {
+          if (item.kind !== 'capture') return item;
+          const paint = drawn.get(item.id);
+          return paint ? { ...item, ...paint } : null;
+        })
         .filter(Boolean);
       slides.push({ bg: measured.bg, items, notes: measured.speakerNotes });
     }

package/src/runtime/office/authoring/pptx-html-runner.mjs

@@ -75,10 +75,9 @@ export async function runPptxHtmlAuthoring(html, output, { target, signal = null
     htmlText: measure.slides.map((slide) => {
       // The browser draws no chart, so a non-text item over one would read the PPTX bars as its own ink.
       const charts = slide.items.filter((item) => item.kind === 'chart').map((item) => item.box);
-      const overChart = (b) => charts.some((c) => b.x < c.x + c.w && c.x < b.x + b.w && b.y < c.y + c.h && c.y < b.y + b.h);
-      return slide.items
-        .map(driftTarget)
-        .filter((target) => target && (target.align !== 'box' || !overChart(target)));
+      const overChart = (b) =>
+        charts.some((c) => b.x < c.x + c.w && c.x < b.x + b.w && b.y < c.y + c.h && c.y < b.y + b.h);
+      return slide.items.map(driftTarget).filter((target) => target && (target.align !== 'box' || !overChart(target)));
     }),
     htmlSource: artifacts.source,
     geometry: measure.geometry,
@@ -99,8 +98,18 @@ function driftTarget(item) {
     if (item.kind === 'rect' && !item.fill && !item.stroke) return null;
     const name = item.alt ? `${DRIFT_LABEL[item.kind]} ${item.alt}` : DRIFT_LABEL[item.kind];
     // A box's outline is its most distinct colour (a white disc ringed in navy on white paper); else its fill.
-    const ink = item.kind === 'rect' ? item.stroke?.hex || (item.fill && item.fill.a > 0.9 ? item.fill.hex : null) : null;
-    return { text: name.length > 24 ? `${name.slice(0, 24)}…` : name, align: 'box', x: b.x, y: b.y, w: b.w, h: b.h, pad: 3, ink };
+    const solidFill = item.fill && item.fill.a > 0.9 ? item.fill.hex : null;
+    const ink = item.kind === 'rect' ? item.stroke?.hex || solidFill : null;
+    return {
+      text: name.length > 24 ? `${name.slice(0, 24)}…` : name,
+      align: 'box',
+      x: b.x,
+      y: b.y,
+      w: b.w,
+      h: b.h,
+      pad: 3,
+      ink,
+    };
   }
   // The glyph boxes of tight display type reach past the element into its neighbours; the element's own
   // content box bounds the read so a neighbour's ink is never taken for this item's.
@@ -116,7 +125,16 @@ function driftTarget(item) {
   const w = Math.max(1, item.box.w - item.inset.l - item.inset.r);
   const pad = item.frame ? Math.max(0, Math.min(3, item.inset.l, item.inset.r, item.inset.t, item.inset.b)) : 3;
   const ink = item.lines[0]?.runs[0]?.style.color?.hex;
-  return { text: text.length > 24 ? `${text.slice(0, 24)}…` : text, align: item.align, x, y: top, w, h: bottom - top, pad, ink };
+  return {
+    text: text.length > 24 ? `${text.slice(0, 24)}…` : text,
+    align: item.align,
+    x,
+    y: top,
+    w,
+    h: bottom - top,
+    pad,
+    ink,
+  };
 }
 
 async function canvasPixels(sharp, path) {
@@ -142,8 +160,14 @@ function inkBounds(image, region, pad = region.pad ?? 3) {
     const key = (image.data[i] << 16) | (image.data[i + 1] << 8) | image.data[i + 2];
     counts.set(key, (counts.get(key) || 0) + 1);
   };
-  for (let x = x0; x <= x1; x += 1) count(x, y0), count(x, y1);
-  for (let y = y0; y <= y1; y += 1) count(x0, y), count(x1, y);
+  for (let x = x0; x <= x1; x += 1) {
+    count(x, y0);
+    count(x, y1);
+  }
+  for (let y = y0; y <= y1; y += 1) {
+    count(x0, y);
+    count(x1, y);
+  }
   const [bg, bgCount] = [...counts.entries()].sort((a, b) => b[1] - a[1])[0];
   // A drawn item on a surround that is not one colour (a band, a gradient, a picture) has no edge to read.
   const border = 2 * (x1 - x0 + 1) + 2 * (y1 - y0 + 1);
@@ -152,7 +176,8 @@ function inkBounds(image, region, pad = region.pad ?? 3) {
   // With the text colour known, ink is what stands nearer to it than half the background's distance, so a
   // gradient or picture behind the words is never read as ink; otherwise, what departs from the background.
   const inkRgb = region.ink ? [0, 2, 4].map((k) => parseInt(region.ink.slice(k, k + 2), 16)) : null;
-  const dist = (i, [cr, cg, cb]) => Math.abs(image.data[i] - cr) + Math.abs(image.data[i + 1] - cg) + Math.abs(image.data[i + 2] - cb);
+  const dist = (i, [cr, cg, cb]) =>
+    Math.abs(image.data[i] - cr) + Math.abs(image.data[i + 1] - cg) + Math.abs(image.data[i + 2] - cb);
   const bgToInk = inkRgb ? Math.abs(r0 - inkRgb[0]) + Math.abs(g0 - inkRgb[1]) + Math.abs(b0 - inkRgb[2]) : 0;
   // A box's fill may sit close to the page (a white panel on paper); its known colour still separates it.
   const known = inkRgb && bgToInk > (region.align === 'box' ? 12 : 90);
@@ -160,7 +185,10 @@ function inkBounds(image, region, pad = region.pad ?? 3) {
   // low that a neighbour's soft shadow reads as the item.
   const departure = region.align === 'box' ? 60 : 90;
   const isInk = known ? (i) => dist(i, inkRgb) < bgToInk / 2 : (i) => dist(i, [r0, g0, b0]) > departure;
-  let l = Infinity, t = Infinity, r = -1, b = -1;
+  let l = Infinity,
+    t = Infinity,
+    r = -1,
+    b = -1;
   for (let y = y0; y <= y1; y += 1) {
     for (let x = x0; x <= x1; x += 1) {
       const i = at(x, y);
@@ -175,7 +203,30 @@ function inkBounds(image, region, pad = region.pad ?? 3) {
   return r < 0 ? null : { l, t, r, b };
 }
 
-export const HTML_DRIFT_PX = 3;
+const HTML_DRIFT_PX = 3;
+
+// A drawn item counts only when both of its edges moved: together is a move, apart is a resize.
+// One edge alone is the reading of a faint edge, not the item.
+function axisDrift(lo, hi) {
+  if (Math.abs(lo) <= 1 || Math.abs(hi) <= 1) return { move: 0, grow: 0 };
+  return Math.sign(lo) === Math.sign(hi)
+    ? { move: Math.sign(lo) * Math.min(Math.abs(lo), Math.abs(hi)), grow: 0 }
+    : { move: 0, grow: hi - lo };
+}
+
+// How a drawn item's ink bounds moved between two renders, or null when it stayed within the threshold.
+function boxDrift(a, b, text, threshold) {
+  const x = axisDrift(b.l - a.l, b.r - a.r);
+  const y = axisDrift(b.t - a.t, b.b - a.b);
+  if (![x.move, y.move, x.grow, y.grow].some((v) => Math.abs(v) > threshold)) return null;
+  return {
+    text,
+    dx: x.move,
+    dy: y.move,
+    ...(x.grow ? { dw: x.grow } : {}),
+    ...(y.grow ? { dh: y.grow } : {}),
+  };
+}
 
 /**
  * How far each item moved between the HTML and PowerPoint's render, in px of the HTML canvas: vertically
@@ -204,28 +255,31 @@ export async function measureHtmlDrift(htmlShots, htmlText, renderedImages, thre
       const b = inkBounds(pptx, target);
       if (!a || !b) continue;
       if (target.align === 'box') {
-        // A drawn item counts only when both of its edges moved: together is a move, apart is a resize.
-        // One edge alone is the reading of a faint edge, not the item.
-        const axis = (lo, hi) => {
-          if (Math.abs(lo) <= 1 || Math.abs(hi) <= 1) return { move: 0, grow: 0 };
-          return Math.sign(lo) === Math.sign(hi)
-            ? { move: Math.sign(lo) * Math.min(Math.abs(lo), Math.abs(hi)), grow: 0 }
-            : { move: 0, grow: hi - lo };
-        };
-        const x = axis(b.l - a.l, b.r - a.r);
-        const y = axis(b.t - a.t, b.b - a.b);
-        if ([x.move, y.move, x.grow, y.grow].some((v) => Math.abs(v) > threshold)) {
-          moved.push({ text: target.text, dx: x.move, dy: y.move, ...(x.grow ? { dw: x.grow } : {}), ...(y.grow ? { dh: y.grow } : {}) });
-        }
+        const drift = boxDrift(a, b, target.text, threshold);
+        if (drift) moved.push(drift);
         continue;
       }
-      const dy = Math.round(((b.t - a.t) + (b.b - a.b)) / 2);
-      const dx = target.align === 'center' ? Math.round(((b.l - a.l) + (b.r - a.r)) / 2) : target.align === 'right' ? b.r - a.r : b.l - a.l;
+      const dy = Math.round((b.t - a.t + (b.b - a.b)) / 2);
+      let dx = b.l - a.l;
+      if (target.align === 'center') dx = Math.round((b.l - a.l + (b.r - a.r)) / 2);
+      else if (target.align === 'right') dx = b.r - a.r;
       if (Math.abs(dy) > threshold || Math.abs(dx) > threshold) moved.push({ text: target.text, dx, dy });
     }
-    if (moved.length) pages.push({ page: image.page, items: moved.sort((p, q) => Math.max(Math.abs(q.dy), Math.abs(q.dx)) - Math.max(Math.abs(p.dy), Math.abs(p.dx))) });
+    if (moved.length)
+      pages.push({
+        page: image.page,
+        items: moved.sort(
+          (p, q) => Math.max(Math.abs(q.dy), Math.abs(q.dx)) - Math.max(Math.abs(p.dy), Math.abs(p.dx))
+        ),
+      });
   }
-  return { code: 'html_render_drift', threshold, unit: 'px on the 1920 × 1080 HTML canvas', pages, ...(skipped.length ? { unreadPages: skipped } : {}) };
+  return {
+    code: 'html_render_drift',
+    threshold,
+    unit: 'px on the 1920 × 1080 HTML canvas',
+    pages,
+    ...(skipped.length ? { unreadPages: skipped } : {}),
+  };
 }
 
 // One image per page: the HTML the author wrote on the left, the PPTX PowerPoint drew on the right.

package/src/runtime/office/authoring/pptx-script-normalize.mjs

@@ -187,11 +187,11 @@ export function mergeAccentSeries(xml) {
     ? ser.replace(/<c:invertIfNegative\b[^>]*\/>/, (tag) => `${tag}${points}`)
     : ser.replace(/<\/c:spPr>/, (tag) => `${tag}${points}`);
   const bar = chart[0]
-    .replace(overlay, '')
-    .replace(base, ser)
+    .replace(overlay, () => '')
+    .replace(base, () => ser)
     .replace('<c:grouping val="stacked"/>', '<c:grouping val="clustered"/>')
     .replace(/<c:overlap val="[^"]*"\/>/, '');
-  return { xml: String(xml).replace(chart[0], bar), changed: true, accent, values: merged };
+  return { xml: String(xml).replace(chart[0], () => bar), changed: true, accent, values: merged };
 }
 
 // The workbook behind the chart: one value column, the accent row holding its real value.
@@ -386,9 +386,8 @@ async function attachSvgIcons(zip, slidePart, xml) {
     const withSvg = blip.endsWith('/>')
       ? `${blip.slice(0, -2)}>${extension}</a:blip>`
       : blip.replace('</a:blip>', `${extension}</a:blip>`);
-    output = output.replace(
-      picture,
-      picture.replace(blip, withSvg).replace(/(<p:cNvPr\b[^>]*\bname=)"[^"]*"/, '$1"Icon"')
+    output = output.replace(picture, () =>
+      picture.replace(blip, () => withSvg).replace(/(<p:cNvPr\b[^>]*\bname=)"[^"]*"/, '$1"Icon"')
     );
   }
   if (!attached) return { xml: output, attached: 0 };
@@ -432,19 +431,155 @@ export function uniqueShapeIds(xml) {
 // (tickLblSkip after the axis tail, dPt after dLbls, varyColors and marker misplaced). PowerPoint forgives
 // it; Keynote, Google Slides and strict validators read the element as malformed.
 const CHART_CHILD_ORDER = {
-  'c:catAx': ['axId', 'scaling', 'delete', 'axPos', 'majorGridlines', 'minorGridlines', 'title', 'numFmt', 'majorTickMark', 'minorTickMark', 'tickLblPos', 'spPr', 'txPr', 'crossAx', 'crosses', 'crossesAt', 'auto', 'lblAlgn', 'lblOffset', 'tickLblSkip', 'tickMarkSkip', 'noMultiLvlLbl', 'extLst'],
-  'c:dateAx': ['axId', 'scaling', 'delete', 'axPos', 'majorGridlines', 'minorGridlines', 'title', 'numFmt', 'majorTickMark', 'minorTickMark', 'tickLblPos', 'spPr', 'txPr', 'crossAx', 'crosses', 'crossesAt', 'auto', 'lblOffset', 'baseTimeUnit', 'majorUnit', 'majorTimeUnit', 'minorUnit', 'minorTimeUnit', 'extLst'],
-  'c:valAx': ['axId', 'scaling', 'delete', 'axPos', 'majorGridlines', 'minorGridlines', 'title', 'numFmt', 'majorTickMark', 'minorTickMark', 'tickLblPos', 'spPr', 'txPr', 'crossAx', 'crosses', 'crossesAt', 'crossBetween', 'majorUnit', 'minorUnit', 'dispUnits', 'extLst'],
-  'c:barChart': ['barDir', 'grouping', 'varyColors', 'ser', 'dLbls', 'gapWidth', 'overlap', 'serLines', 'axId', 'extLst'],
-  'c:lineChart': ['grouping', 'varyColors', 'ser', 'dLbls', 'dropLines', 'hiLowLines', 'upDownBars', 'marker', 'smooth', 'axId', 'extLst'],
+  'c:catAx': [
+    'axId',
+    'scaling',
+    'delete',
+    'axPos',
+    'majorGridlines',
+    'minorGridlines',
+    'title',
+    'numFmt',
+    'majorTickMark',
+    'minorTickMark',
+    'tickLblPos',
+    'spPr',
+    'txPr',
+    'crossAx',
+    'crosses',
+    'crossesAt',
+    'auto',
+    'lblAlgn',
+    'lblOffset',
+    'tickLblSkip',
+    'tickMarkSkip',
+    'noMultiLvlLbl',
+    'extLst',
+  ],
+  'c:dateAx': [
+    'axId',
+    'scaling',
+    'delete',
+    'axPos',
+    'majorGridlines',
+    'minorGridlines',
+    'title',
+    'numFmt',
+    'majorTickMark',
+    'minorTickMark',
+    'tickLblPos',
+    'spPr',
+    'txPr',
+    'crossAx',
+    'crosses',
+    'crossesAt',
+    'auto',
+    'lblOffset',
+    'baseTimeUnit',
+    'majorUnit',
+    'majorTimeUnit',
+    'minorUnit',
+    'minorTimeUnit',
+    'extLst',
+  ],
+  'c:valAx': [
+    'axId',
+    'scaling',
+    'delete',
+    'axPos',
+    'majorGridlines',
+    'minorGridlines',
+    'title',
+    'numFmt',
+    'majorTickMark',
+    'minorTickMark',
+    'tickLblPos',
+    'spPr',
+    'txPr',
+    'crossAx',
+    'crosses',
+    'crossesAt',
+    'crossBetween',
+    'majorUnit',
+    'minorUnit',
+    'dispUnits',
+    'extLst',
+  ],
+  'c:barChart': [
+    'barDir',
+    'grouping',
+    'varyColors',
+    'ser',
+    'dLbls',
+    'gapWidth',
+    'overlap',
+    'serLines',
+    'axId',
+    'extLst',
+  ],
+  'c:lineChart': [
+    'grouping',
+    'varyColors',
+    'ser',
+    'dLbls',
+    'dropLines',
+    'hiLowLines',
+    'upDownBars',
+    'marker',
+    'smooth',
+    'axId',
+    'extLst',
+  ],
   'c:areaChart': ['grouping', 'varyColors', 'ser', 'dLbls', 'dropLines', 'axId', 'extLst'],
   'c:pieChart': ['varyColors', 'ser', 'dLbls', 'firstSliceAng', 'extLst'],
   'c:doughnutChart': ['varyColors', 'ser', 'dLbls', 'firstSliceAng', 'holeSize', 'extLst'],
 };
 const SERIES_CHILD_ORDER = {
-  'c:barChart': ['idx', 'order', 'tx', 'spPr', 'invertIfNegative', 'pictureOptions', 'dPt', 'dLbls', 'trendline', 'errBars', 'cat', 'val', 'shape', 'extLst'],
-  'c:lineChart': ['idx', 'order', 'tx', 'spPr', 'marker', 'dPt', 'dLbls', 'trendline', 'errBars', 'cat', 'val', 'smooth', 'extLst'],
-  'c:areaChart': ['idx', 'order', 'tx', 'spPr', 'pictureOptions', 'dPt', 'dLbls', 'trendline', 'errBars', 'cat', 'val', 'extLst'],
+  'c:barChart': [
+    'idx',
+    'order',
+    'tx',
+    'spPr',
+    'invertIfNegative',
+    'pictureOptions',
+    'dPt',
+    'dLbls',
+    'trendline',
+    'errBars',
+    'cat',
+    'val',
+    'shape',
+    'extLst',
+  ],
+  'c:lineChart': [
+    'idx',
+    'order',
+    'tx',
+    'spPr',
+    'marker',
+    'dPt',
+    'dLbls',
+    'trendline',
+    'errBars',
+    'cat',
+    'val',
+    'smooth',
+    'extLst',
+  ],
+  'c:areaChart': [
+    'idx',
+    'order',
+    'tx',
+    'spPr',
+    'pictureOptions',
+    'dPt',
+    'dLbls',
+    'trendline',
+    'errBars',
+    'cat',
+    'val',
+    'extLst',
+  ],
   'c:pieChart': ['idx', 'order', 'tx', 'spPr', 'explosion', 'dPt', 'dLbls', 'cat', 'val', 'extLst'],
   'c:doughnutChart': ['idx', 'order', 'tx', 'spPr', 'explosion', 'dPt', 'dLbls', 'cat', 'val', 'extLst'],
 };
@@ -493,10 +628,15 @@ export function orderChartChildren(xml) {
     const pattern = new RegExp(`<${element}>([\\s\\S]*?)</${element}>`, 'g');
     output = output.replace(pattern, (whole, inner) => {
       // A line chart's grouping is required, and pptxgenjs leaves it out.
-      const filled = element === 'c:lineChart' && !/<c:grouping\b/.test(inner) ? `<c:grouping val="standard"/>${inner}` : inner;
+      const filled =
+        element === 'c:lineChart' && !/<c:grouping\b/.test(inner) ? `<c:grouping val="standard"/>${inner}` : inner;
       let body = sortedChildren(filled, order);
       const seriesOrder = SERIES_CHILD_ORDER[element];
-      if (seriesOrder) body = body.replace(/<c:ser>([\s\S]*?)<\/c:ser>/g, (_, series) => `<c:ser>${sortedChildren(series, seriesOrder)}</c:ser>`);
+      if (seriesOrder)
+        body = body.replace(
+          /<c:ser>([\s\S]*?)<\/c:ser>/g,
+          (_, series) => `<c:ser>${sortedChildren(series, seriesOrder)}</c:ser>`
+        );
       const next = `<${element}>${body}</${element}>`;
       if (next !== whole) changed = true;
       return next;