@hajimism/dek 0.3.3 → 0.4.0

package/src/core/pptx-text.ts

@@ -1,40 +1,65 @@
 /// <reference lib="dom" />
 // What a PPTX takes from a slide as the browser drew it: each line of the text in its HTML flow,
-// where it was laid out and how it was set, so PowerPoint can set it there again; and the slide
-// drawn with that text taken out, as the picture under it.
+// where it was laid out and how it was set, so PowerPoint can set it there again; each block's
+// text as it is written, for a shape to set as paragraphs; and the slide drawn with that text
+// taken out, as the picture under it.
 
-import type { PptxRun, PptxTextBox } from "./pptx-package.ts";
-
-/** A run as the page measures it: the element that owns its text, for its font to be looked up. */
-type MeasuredRun = Omit<PptxRun, "font"> & { owner: number };
-
-type MeasuredBox = Omit<PptxTextBox, "runs"> & { runs: MeasuredRun[] };
+import type { PptxBlockText, PptxMeasuredBox, PptxMeasuredRun } from "./pptx-plan.ts";
+import type { Box } from "./slide-measure.ts";
 
 export type PptxPageTexts = {
-  boxes: MeasuredBox[];
-  /** How many elements own text, marked `data-dek-pptx-font="<n>"` for their fonts. */
-  owners: number;
-  /** The alternative texts the slide's pictures carry, for the slide's picture as a whole. */
-  description: string;
+  boxes: PptxMeasuredBox[];
+  /** The text of each block a box is in, when it is set in plain lines left to right. */
+  blocks: PptxBlockText[];
+  /** Text the picture keeps, and the shadows of text it does not, by the element they are of. */
+  drawn: Array<{ node: number; extent: Box }>;
 };
 
-/** The attribute that marks each element owning measured text, by its number. */
+/** The attribute that marks each element owning measured text, by its node. */
 export const PPTX_OWNER_ATTR = "data-dek-pptx-font";
 
 /**
  * Measures every text in the slide's HTML flow, line by line, then hides it from the drawing with
  * a highlight, which changes no layout, so a shot taken next is the picture under the text. What
  * is not measured stays drawn: SVG, decoration under `aria-hidden`, what a pseudo-element draws,
- * text a transform rotates or skews, text with no fill of its own, and every text's shadow.
+ * text a transform rotates or skews, text with no fill of its own, and every text's shadow; the
+ * text and the shadows among these are reported as drawn. Each element is known by the number
+ * `measurePptxPaintInPage` marked it with, which runs first. Each run says the `font-family` it
+ * was set in, for the theme's fonts to be found.
  *
  * Runs in the page, shipped by `page.evaluate`, so it references nothing outside itself.
  */
 export function measurePptxTextsInPage(): PptxPageTexts {
   const slide = document.querySelector("#deck > .slide");
   if (!(slide instanceof HTMLElement)) {
-    return { boxes: [], owners: 0, description: "" };
+    return { boxes: [], blocks: [], drawn: [] };
   }
+  /**
+   * The element's number, as `measurePptxPaintInPage` marked it; -1 for the slide; and for one it
+   * did not mark, which it did not reach or did not run for, a number below -1 of its own, so
+   * each owner of text still has its own font.
+   */
+  const unmarked = new Map<Element, number>();
+  const nodeOf = (el: Element): number => {
+    const marked = el.getAttribute("data-dek-pptx-node");
+    if (marked !== null) {
+      return Number(marked);
+    }
+    if (el === slide) {
+      return -1;
+    }
+    const known = unmarked.get(el) ?? -2 - unmarked.size;
+    unmarked.set(el, known);
+    return known;
+  };
   const origin = slide.getBoundingClientRect();
+  const local = (rect: Box): Box => ({
+    left: rect.left - origin.left,
+    top: rect.top - origin.top,
+    right: rect.right - origin.left,
+    bottom: rect.bottom - origin.top,
+  });
+  const drawn: PptxPageTexts["drawn"] = [];
 
   const canvas = document.createElement("canvas");
   canvas.width = 1;
@@ -50,6 +75,8 @@ export function measurePptxTextsInPage(): PptxPageTexts {
     let found = { rgb: [0, 0, 0] as [number, number, number], alpha: 0 };
     if (paint) {
       paint.clearRect(0, 0, 1, 1);
+      // A value the canvas cannot read leaves its fill as it was: nothing, not the last color.
+      paint.fillStyle = "rgba(0, 0, 0, 0)";
       paint.fillStyle = value;
       paint.fillRect(0, 0, 1, 1);
       const [r = 0, g = 0, b = 0, a = 0] = paint.getImageData(0, 0, 1, 1).data;
@@ -60,17 +87,30 @@ export function measurePptxTextsInPage(): PptxPageTexts {
   };
 
   /**
-   * How much the element and what it is in, up to the slide, scale it; none when one of them
-   * rotates or skews it, or scales it unevenly, which a text box cannot follow.
+   * How much the element and what it is in, up to the slide, scale it, by `transform` and
+   * `scale`; none when one of them rotates or skews it, scales it unevenly, or `zoom` sets it at
+   * another size than its computed lengths say, which a text box cannot follow.
    */
   const scaleOf = (el: Element): number | undefined => {
+    const set = (value: string) => value !== "none" && value !== "";
     let scale = 1;
     for (
       let node: Element | null = el;
       node && node !== slide.parentElement;
       node = node.parentElement
     ) {
-      const transform = getComputedStyle(node).transform;
+      const style = getComputedStyle(node);
+      if (set(style.rotate) || (style.zoom !== "" && Number(style.zoom) !== 1)) {
+        return undefined;
+      }
+      if (set(style.scale)) {
+        const [x = Number.NaN, y = x, z = 1] = style.scale.split(/\s+/).map(Number);
+        if (!(x > 0) || Math.abs(x - y) > 1e-6 || z !== 1) {
+          return undefined;
+        }
+        scale *= x;
+      }
+      const transform = style.transform;
       if (transform === "none" || transform === "") {
         continue;
       }
@@ -98,6 +138,15 @@ export function measurePptxTextsInPage(): PptxPageTexts {
     return opacity;
   };
 
+  /** How far a shadow list reaches past the text: every length in it, added up, at most. */
+  const reachOf = (value: string): number =>
+    value === "none"
+      ? 0
+      : (value.match(/-?\d*\.?\d+px/g) ?? []).reduce(
+          (sum, length) => sum + Math.abs(Number.parseFloat(length) || 0),
+          0,
+        );
+
   /** The nearest element around `el` laid out as a block of its own, `el` included. */
   const blockOf = (el: Element): Element => {
     for (let node: Element | null = el; node; node = node.parentElement) {
@@ -150,11 +199,21 @@ export function measurePptxTextsInPage(): PptxPageTexts {
     right: number;
     bottom: number;
     block: Element;
-    run: MeasuredRun;
+    run: PptxMeasuredRun;
   };
   const fragments: Fragment[] = [];
   const ranges: Range[] = [];
-  const owners = new Map<Element, number>();
+  const owners = new Set<Element>();
+  /** Each measured text's run, with its white space as written, for its block's paragraph. */
+  const written = new Map<
+    Text,
+    {
+      run: PptxMeasuredRun;
+      spaces: "collapsed" | "lines" | "kept";
+      transform: string;
+      lang: string;
+    }
+  >();
   const segmenter = new Intl.Segmenter(undefined, { granularity: "grapheme" });
 
   const walker = document.createTreeWalker(slide, NodeFilter.SHOW_TEXT);
@@ -164,7 +223,7 @@ export function measurePptxTextsInPage(): PptxPageTexts {
     if (!parent || !/[^ \t\n\r\f]/.test(text.data)) {
       continue;
     }
-    if (parent.closest('svg, script, style, template, [aria-hidden="true"]')) {
+    if (parent.closest("svg, script, style, template")) {
       continue;
     }
     const style = getComputedStyle(parent);
@@ -174,16 +233,40 @@ export function measurePptxTextsInPage(): PptxPageTexts {
     const fill = rgba(style.webkitTextFillColor || style.color);
     const opacity = opacityOf(parent);
     const scale = scaleOf(parent);
-    if (fill.alpha === 0 || opacity === 0 || scale === undefined) {
+    if (opacity === 0) {
+      continue;
+    }
+    // What is not set again stays drawn, and so does every shadow of what is.
+    const shadow = reachOf(style.textShadow);
+    if (
+      shadow > 0 ||
+      fill.alpha === 0 ||
+      scale === undefined ||
+      parent.closest('[aria-hidden="true"]')
+    ) {
+      const whole = document.createRange();
+      whole.selectNodeContents(text);
+      const bounds = whole.getBoundingClientRect();
+      drawn.push({
+        node: nodeOf(parent),
+        extent: local({
+          left: bounds.left - shadow,
+          top: bounds.top - shadow,
+          right: bounds.right + shadow,
+          bottom: bounds.bottom + shadow,
+        }),
+      });
+    }
+    if (fill.alpha === 0 || scale === undefined || parent.closest('[aria-hidden="true"]')) {
       continue;
     }
     const block = blockOf(parent);
-    const owner = owners.get(parent) ?? owners.size;
-    owners.set(parent, owner);
+    const owner = nodeOf(parent);
+    owners.add(parent);
     const weight = Number(style.fontWeight);
     const letterSpacing =
       style.letterSpacing === "normal" ? 0 : Number.parseFloat(style.letterSpacing);
-    const run: MeasuredRun = {
+    const run: PptxMeasuredRun = {
       text: "",
       size: Number.parseFloat(style.fontSize) * scale,
       bold: weight >= 600,
@@ -193,9 +276,13 @@ export function measurePptxTextsInPage(): PptxPageTexts {
       alpha: Math.round(fill.alpha * opacity * 1000) / 1000,
       letterSpacing: (Number.isFinite(letterSpacing) ? letterSpacing : 0) * scale,
       owner,
+      family: style.fontFamily,
     };
     const collapse = !/^(pre|pre-wrap|break-spaces)$/.test(style.whiteSpace);
     const lang = parent.closest("[lang]")?.getAttribute("lang") ?? "";
+    // `pre-line` collapses spaces as `normal` does, and keeps each newline as a break.
+    const spaces = !collapse ? "kept" : style.whiteSpace === "pre-line" ? "lines" : "collapsed";
+    written.set(text, { run, spaces, transform: style.textTransform, lang });
 
     // The lines the text is drawn on, each the graphemes on it and the box they cover.
     const range = document.createRange();
@@ -262,8 +349,8 @@ export function measurePptxTextsInPage(): PptxPageTexts {
 
   // Pieces of one line in one block that sit together are one box, a run each; a gap wider than
   // a space, such as the padding of a chip, starts another.
-  const boxes: MeasuredBox[] = [];
-  let open: { box: MeasuredBox; block: Element; right: number } | undefined;
+  const boxes: PptxMeasuredBox[] = [];
+  let open: { box: PptxMeasuredBox; block: Element; right: number } | undefined;
   for (const fragment of fragments) {
     const height = fragment.bottom - fragment.top;
     const gap = open ? fragment.left - open.right : Number.POSITIVE_INFINITY;
@@ -297,7 +384,8 @@ export function measurePptxTextsInPage(): PptxPageTexts {
     }
     // A box starts at its first glyph: a space it would start with is not set.
     const start = Number.isFinite(fragment.ink) ? fragment.ink : fragment.left;
-    const box: MeasuredBox = {
+    const box: PptxMeasuredBox = {
+      block: nodeOf(fragment.block),
       x: start - origin.left,
       y: fragment.top - origin.top,
       width: Math.max(0, fragment.right - start),
@@ -320,8 +408,8 @@ export function measurePptxTextsInPage(): PptxPageTexts {
     box.runs = box.runs.filter((run) => run.text !== "");
   }
 
-  for (const [el, owner] of owners) {
-    el.setAttribute("data-dek-pptx-font", String(owner));
+  for (const el of owners) {
+    el.setAttribute("data-dek-pptx-font", String(nodeOf(el)));
   }
   const style = document.createElement("style");
   style.textContent =
@@ -329,25 +417,94 @@ export function measurePptxTextsInPage(): PptxPageTexts {
   document.head.append(style);
   CSS.highlights.set("dek-pptx", new Highlight(...ranges));
 
-  const described = [...slide.querySelectorAll("img[alt], [aria-label], svg > title")].flatMap(
-    (el) => {
-      if (el.closest('[aria-hidden="true"]')) {
-        return [];
-      }
-      const said =
-        (el.tagName.toLowerCase() === "title"
-          ? el.textContent
-          : (el.getAttribute("alt") ?? el.getAttribute("aria-label"))) ?? "";
-      return said.trim() === "" ? [] : [said.trim()];
+  const blocks = [...new Set(fragments.map((fragment) => fragment.block))].flatMap(
+    (block): PptxBlockText[] => {
+      const text = paragraphOf(block);
+      return text ? [text] : [];
     },
   );
-  return {
-    boxes: boxes.filter((box) => box.runs.length > 0),
-    owners: owners.size,
-    description: described.join(" / "),
-  };
+  return { boxes: boxes.filter((box) => box.runs.length > 0), blocks, drawn };
+
+  /**
+   * A block's text as it is written, in runs, a `<br>` as a line break; none when it is not set
+   * in plain lines left to right, which a paragraph could not set again.
+   */
+  function paragraphOf(block: Element): PptxBlockText | undefined {
+    const style = getComputedStyle(block);
+    if (style.writingMode !== "horizontal-tb" || style.direction !== "ltr") {
+      return undefined;
+    }
+    const runs: PptxMeasuredRun[] = [];
+    const walk = document.createTreeWalker(block, NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT);
+    for (let node = walk.nextNode(); node; node = walk.nextNode()) {
+      if (node instanceof HTMLBRElement && blockOf(node) === block) {
+        const last = runs.at(-1);
+        if (last) {
+          last.text = `${last.text.replace(/ +$/, "")}\n`;
+        }
+        continue;
+      }
+      const facts = node instanceof Text ? written.get(node) : undefined;
+      if (
+        !facts ||
+        !(node instanceof Text) ||
+        node.parentElement === null ||
+        blockOf(node.parentElement) !== block
+      ) {
+        continue;
+      }
+      let piece =
+        facts.spaces === "collapsed"
+          ? node.data.replace(/[ \t\n\r\f]+/g, " ")
+          : facts.spaces === "lines"
+            ? node.data.replace(/[ \t\r\f]*\n[ \t\r\f]*/g, "\n").replace(/[ \t\r\f]+/g, " ")
+            : node.data;
+      const before = runs.at(-1)?.text ?? "";
+      if (facts.spaces !== "kept" && (before === "" || / $|\n$/.test(before))) {
+        piece = piece.replace(/^ /, "");
+      }
+      piece = transformText(piece, facts.transform, facts.lang);
+      const last = runs.at(-1);
+      if (last && sameStyle(last, facts.run)) {
+        last.text += piece;
+      } else if (piece !== "") {
+        runs.push({ ...facts.run, text: piece });
+      }
+    }
+    const last = runs.at(-1);
+    if (last) {
+      last.text = last.text.replace(/[ \t\n\r\f]+$/, "");
+    }
+    const kept = runs.filter((run) => run.text !== "");
+    if (kept.length === 0) {
+      return undefined;
+    }
+    const rect = block.getBoundingClientRect();
+    const scale = scaleOf(block) ?? 1;
+    const px = (value: string) => (Number.parseFloat(value) || 0) * scale;
+    const align = style.textAlign;
+    return {
+      node: nodeOf(block),
+      runs: kept,
+      align: /center/.test(align)
+        ? "center"
+        : align === "right" || align === "end"
+          ? "right"
+          : align === "justify"
+            ? "justify"
+            : "left",
+      lineHeight: Number.parseFloat(style.lineHeight) * scale,
+      content: local({
+        left: rect.left + px(style.borderLeftWidth) + px(style.paddingLeft),
+        top: rect.top + px(style.borderTopWidth) + px(style.paddingTop),
+        right: rect.right - px(style.borderRightWidth) - px(style.paddingRight),
+        bottom: rect.bottom - px(style.borderBottomWidth) - px(style.paddingBottom),
+      }),
+      textIndent: px(style.textIndent),
+    };
+  }
 
-  function sameStyle(a: MeasuredRun, b: MeasuredRun): boolean {
+  function sameStyle(a: PptxMeasuredRun, b: PptxMeasuredRun): boolean {
     return (
       a.owner === b.owner &&
       a.size === b.size &&

package/src/core/pptx-theme.ts

@@ -0,0 +1,222 @@
+import type { PptxFill, PptxPaint, PptxTheme, PptxThemeFont } from "./pptx-package.ts";
+
+// What of a slide's look becomes PowerPoint's own rather than its picture's, from the computed
+// values a page reports: the deck's theme, from the tokens most slides have, and a slide's
+// background, when PowerPoint paints it as the browser did. Nothing here touches a page.
+
+/** What one slide says of the deck's theme: its color tokens, and the fonts its font tokens are. */
+export type PptxPageTheme = {
+  colors: PptxTheme["colors"];
+  fonts: Partial<Record<"title" | "body", PptxThemeFont>>;
+};
+
+/**
+ * The deck's theme: each token as most slides have it, the first slide's on a tie, so a slide
+ * that sets a token of its own keeps it to itself. Fonts only when both font tokens are known.
+ */
+export function deckTheme(pages: PptxPageTheme[]): PptxTheme {
+  const colors: PptxTheme["colors"] = {};
+  for (const token of ["fg", "bg", "muted", "accent"] as const) {
+    const color = mostOf(
+      pages.map((page) => page.colors[token]),
+      (color) => color.join(),
+    );
+    if (color) {
+      colors[token] = color;
+    }
+  }
+  const title = mostOf(
+    pages.map((page) => page.fonts.title),
+    (font) => font.family,
+  );
+  const body = mostOf(
+    pages.map((page) => page.fonts.body),
+    (font) => font.family,
+  );
+  return title && body ? { colors, fonts: { title, body } } : { colors };
+}
+
+/** The value most of `values` are, by `key`; the first of them on a tie. */
+function mostOf<T>(values: Array<T | undefined>, key: (value: T) => string): T | undefined {
+  const counts = new Map<string, { value: T; count: number }>();
+  for (const value of values) {
+    if (value !== undefined) {
+      const seen = counts.get(key(value)) ?? { value, count: 0 };
+      seen.count += 1;
+      counts.set(key(value), seen);
+    }
+  }
+  let most: { value: T; count: number } | undefined;
+  for (const seen of counts.values()) {
+    if (!most || seen.count > most.count) {
+      most = seen;
+    }
+  }
+  return most?.value;
+}
+
+/**
+ * A slide's background as PowerPoint paints it, from its computed `background-color` and
+ * `background-image`: one opaque color, or one linear gradient along an axis whose stops are
+ * opaque sRGB colors at lengths CSS and DrawingML place alike. None for anything else, which
+ * stays in the slide's picture: an image, a radial or repeating gradient, a diagonal, a hint,
+ * a color space other than sRGB, a stop the page shows through, a second layer.
+ */
+export function slideBackground(
+  background: { paint: PptxPaint; image: string },
+  size: { width: number; height: number },
+): PptxFill | undefined {
+  const image = background.image.trim();
+  if (image === "none") {
+    return background.paint.alpha === 1 ? { kind: "solid", paint: background.paint } : undefined;
+  }
+  const layers = splitTopLevel(image);
+  const gradient = layers.length === 1 ? /^linear-gradient\((.*)\)$/s.exec(image)?.[1] : undefined;
+  if (gradient === undefined) {
+    return undefined;
+  }
+  const args = splitTopLevel(gradient);
+  const first = args[0] ?? "";
+  const direction = cssAngle(first);
+  if (/\bin\s/.test(first) || (direction === undefined && !colorOf(first))) {
+    return undefined;
+  }
+  // CSS's 0deg points up and turns clockwise; DrawingML's 0 points right, and turns so too.
+  const css = direction ?? 180;
+  const turned = ((css % 360) + 360) % 360;
+  if (Math.abs(turned / 90 - Math.round(turned / 90)) > 1e-6) {
+    return undefined;
+  }
+  const along = Math.round(turned / 90) % 2 === 0 ? size.height : size.width;
+  const stops = placeStops(direction === undefined ? args : args.slice(1), along);
+  if (!stops || stops.length < 2 || stops.some((stop) => stop.at < 0 || stop.at > 1)) {
+    return undefined;
+  }
+  return { kind: "linear", angle: (Math.round(turned) + 270) % 360, stops };
+}
+
+/** A gradient's direction in CSS degrees, or none when the argument is not one. */
+function cssAngle(arg: string): number | undefined {
+  const sides: Record<string, number> = { top: 0, right: 90, bottom: 180, left: 270 };
+  const side = /^to\s+(top|right|bottom|left)$/.exec(arg)?.[1];
+  if (side !== undefined) {
+    return sides[side];
+  }
+  const angle = /^(-?[\d.]+)(deg|turn|rad|grad)$/.exec(arg);
+  if (!angle) {
+    return undefined;
+  }
+  const per: Record<string, number> = { deg: 1, turn: 360, rad: 180 / Math.PI, grad: 0.9 };
+  return Number(angle[1]) * (per[angle[2] ?? "deg"] ?? 1);
+}
+
+/**
+ * The stops at 0..1 along the gradient, as CSS places them: the first at the start and the
+ * last at the end unless placed, one behind another moved up to it, and the unplaced spread
+ * evenly between their neighbors. None when a stop is not an opaque color, or a hint or a
+ * length is there that DrawingML has no place for.
+ */
+function placeStops(
+  args: string[],
+  along: number,
+): Array<{ at: number; paint: PptxPaint }> | undefined {
+  const stops: Array<{ at: number | undefined; paint: PptxPaint }> = [];
+  for (const arg of args) {
+    const color = colorOf(arg);
+    if (!color) {
+      return undefined;
+    }
+    const lengths = arg.slice(color.written.length).trim().split(/\s+/).filter(Boolean);
+    if (lengths.length > 2 || color.paint.alpha !== 1) {
+      return undefined;
+    }
+    const at = lengths.map((length) => lengthAt(length, along));
+    if (at.some((each) => each === undefined)) {
+      return undefined;
+    }
+    if (at.length === 0) {
+      stops.push({ at: undefined, paint: color.paint });
+    }
+    for (const each of at) {
+      stops.push({ at: each, paint: color.paint });
+    }
+  }
+  const [head, tail] = [stops[0], stops.at(-1)];
+  if (head && head.at === undefined) {
+    head.at = 0;
+  }
+  if (tail && tail.at === undefined) {
+    tail.at = 1;
+  }
+  let furthest = Number.NEGATIVE_INFINITY;
+  for (const stop of stops) {
+    if (stop.at !== undefined) {
+      stop.at = Math.max(stop.at, furthest);
+      furthest = stop.at;
+    }
+  }
+  for (let index = 0; index < stops.length; index++) {
+    if (stops[index]?.at !== undefined) {
+      continue;
+    }
+    const from = index - 1;
+    let to = index;
+    while (stops[to]?.at === undefined) {
+      to++;
+    }
+    const start = stops[from]?.at ?? 0;
+    const end = stops[to]?.at ?? 1;
+    for (let gap = index; gap < to; gap++) {
+      const stop = stops[gap];
+      if (stop) {
+        stop.at = start + ((end - start) * (gap - from)) / (to - from);
+      }
+    }
+  }
+  return stops.map((stop) => ({ at: stop.at ?? 0, paint: stop.paint }));
+}
+
+function lengthAt(length: string, along: number): number | undefined {
+  const value = /^(-?[\d.]+)(%|px)$/.exec(length);
+  if (!value) {
+    return undefined;
+  }
+  const number = Number(value[1]);
+  return value[2] === "%" ? number / 100 : along > 0 ? number / along : undefined;
+}
+
+/** A stop's color as Chromium writes an sRGB one, `rgb()` or `rgba()`, and what it took. */
+function colorOf(arg: string): { paint: PptxPaint; written: string } | undefined {
+  const match =
+    /^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)(?:\s*[,/]\s*([\d.]+%?))?\s*\)/.exec(arg);
+  if (!match) {
+    return undefined;
+  }
+  const [written, r = "0", g = "0", b = "0", a = "1"] = match;
+  const alpha = a.endsWith("%") ? Number(a.slice(0, -1)) / 100 : Number(a);
+  const channel = (value: string) => Math.max(0, Math.min(255, Math.round(Number(value))));
+  return {
+    paint: { color: [channel(r), channel(g), channel(b)], alpha },
+    written,
+  };
+}
+
+/** The arguments of a function, split at the commas outside any parentheses. */
+function splitTopLevel(text: string): string[] {
+  const args: string[] = [];
+  let depth = 0;
+  let start = 0;
+  for (let at = 0; at < text.length; at++) {
+    const char = text[at];
+    if (char === "(") {
+      depth++;
+    } else if (char === ")") {
+      depth--;
+    } else if (char === "," && depth === 0) {
+      args.push(text.slice(start, at).trim());
+      start = at + 1;
+    }
+  }
+  args.push(text.slice(start).trim());
+  return args;
+}