@aiderdesk/aiderdesk 0.61.0-dev → 0.61.0

package/out/renderer/assets/{timeline-definition-YZTLITO2-UoWXE_76.js → timeline-definition-GMOUNBTQ-Bl-MTfK5.js}

@@ -1,65 +1,71 @@
-import { _ as __name, c as getConfig2, l as log, d as select, Y as setupGraphViewbox, $ as isDark, a0 as lighten, a1 as darken, C as __export, a2 as commonDb_exports, z as clear } from "./index-MDHavDF9.js";
-import { d as d3arc } from "./arc-CwESpVYE.js";
+import { _ as __name, D as getConfig, Y as isDark, $ as lighten, a0 as darken, c as getConfig2, l as log, I as selectSvgElement, R as parseFontSize, a1 as setupGraphViewbox, d as select, C as __export, a2 as commonDb_exports, z as clear } from "./index-BL-57WPa.js";
+import { d as d3arc } from "./arc-DfPLteHF.js";
 var parser = (function() {
   var o = /* @__PURE__ */ __name(function(k, v, o2, l) {
     for (o2 = o2 || {}, l = k.length; l--; o2[k[l]] = v) ;
     return o2;
-  }, "o"), $V0 = [6, 8, 10, 11, 12, 14, 16, 17, 20, 21], $V1 = [1, 9], $V2 = [1, 10], $V3 = [1, 11], $V4 = [1, 12], $V5 = [1, 13], $V6 = [1, 16], $V7 = [1, 17];
+  }, "o"), $V0 = [6, 11, 13, 14, 15, 17, 19, 20, 23, 24], $V1 = [1, 12], $V2 = [1, 13], $V3 = [1, 14], $V4 = [1, 15], $V5 = [1, 16], $V6 = [1, 19], $V7 = [1, 20];
   var parser2 = {
     trace: /* @__PURE__ */ __name(function trace() {
     }, "trace"),
     yy: {},
-    symbols_: { "error": 2, "start": 3, "timeline": 4, "document": 5, "EOF": 6, "line": 7, "SPACE": 8, "statement": 9, "NEWLINE": 10, "title": 11, "acc_title": 12, "acc_title_value": 13, "acc_descr": 14, "acc_descr_value": 15, "acc_descr_multiline_value": 16, "section": 17, "period_statement": 18, "event_statement": 19, "period": 20, "event": 21, "$accept": 0, "$end": 1 },
-    terminals_: { 2: "error", 4: "timeline", 6: "EOF", 8: "SPACE", 10: "NEWLINE", 11: "title", 12: "acc_title", 13: "acc_title_value", 14: "acc_descr", 15: "acc_descr_value", 16: "acc_descr_multiline_value", 17: "section", 20: "period", 21: "event" },
-    productions_: [0, [3, 3], [5, 0], [5, 2], [7, 2], [7, 1], [7, 1], [7, 1], [9, 1], [9, 2], [9, 2], [9, 1], [9, 1], [9, 1], [9, 1], [18, 1], [19, 1]],
+    symbols_: { "error": 2, "start": 3, "timeline_header": 4, "document": 5, "EOF": 6, "timeline": 7, "timeline_lr": 8, "timeline_td": 9, "line": 10, "SPACE": 11, "statement": 12, "NEWLINE": 13, "title": 14, "acc_title": 15, "acc_title_value": 16, "acc_descr": 17, "acc_descr_value": 18, "acc_descr_multiline_value": 19, "section": 20, "period_statement": 21, "event_statement": 22, "period": 23, "event": 24, "$accept": 0, "$end": 1 },
+    terminals_: { 2: "error", 6: "EOF", 7: "timeline", 8: "timeline_lr", 9: "timeline_td", 11: "SPACE", 13: "NEWLINE", 14: "title", 15: "acc_title", 16: "acc_title_value", 17: "acc_descr", 18: "acc_descr_value", 19: "acc_descr_multiline_value", 20: "section", 23: "period", 24: "event" },
+    productions_: [0, [3, 3], [4, 1], [4, 1], [4, 1], [5, 0], [5, 2], [10, 2], [10, 1], [10, 1], [10, 1], [12, 1], [12, 2], [12, 2], [12, 1], [12, 1], [12, 1], [12, 1], [21, 1], [22, 1]],
     performAction: /* @__PURE__ */ __name(function anonymous(yytext, yyleng, yylineno, yy, yystate, $$, _$) {
       var $0 = $$.length - 1;
       switch (yystate) {
         case 1:
           return $$[$0 - 1];
-        case 2:
-          this.$ = [];
-          break;
         case 3:
-          $$[$0 - 1].push($$[$0]);
-          this.$ = $$[$0 - 1];
+          yy.setDirection("LR");
           break;
         case 4:
+          yy.setDirection("TD");
+          break;
         case 5:
-          this.$ = $$[$0];
+          this.$ = [];
           break;
         case 6:
+          $$[$0 - 1].push($$[$0]);
+          this.$ = $$[$0 - 1];
+          break;
         case 7:
+        case 8:
+          this.$ = $$[$0];
+          break;
+        case 9:
+        case 10:
           this.$ = [];
           break;
-        case 8:
+        case 11:
           yy.getCommonDb().setDiagramTitle($$[$0].substr(6));
           this.$ = $$[$0].substr(6);
           break;
-        case 9:
+        case 12:
           this.$ = $$[$0].trim();
           yy.getCommonDb().setAccTitle(this.$);
           break;
-        case 10:
-        case 11:
+        case 13:
+        case 14:
           this.$ = $$[$0].trim();
           yy.getCommonDb().setAccDescription(this.$);
           break;
-        case 12:
+        case 15:
           yy.addSection($$[$0].substr(8));
           this.$ = $$[$0].substr(8);
           break;
-        case 15:
+        case 18:
           yy.addTask($$[$0], 0, "");
           this.$ = $$[$0];
           break;
-        case 16:
+        case 19:
           yy.addEvent($$[$0].substr(2));
           this.$ = $$[$0];
           break;
       }
     }, "anonymous"),
-    table: [{ 3: 1, 4: [1, 2] }, { 1: [3] }, o($V0, [2, 2], { 5: 3 }), { 6: [1, 4], 7: 5, 8: [1, 6], 9: 7, 10: [1, 8], 11: $V1, 12: $V2, 14: $V3, 16: $V4, 17: $V5, 18: 14, 19: 15, 20: $V6, 21: $V7 }, o($V0, [2, 7], { 1: [2, 1] }), o($V0, [2, 3]), { 9: 18, 11: $V1, 12: $V2, 14: $V3, 16: $V4, 17: $V5, 18: 14, 19: 15, 20: $V6, 21: $V7 }, o($V0, [2, 5]), o($V0, [2, 6]), o($V0, [2, 8]), { 13: [1, 19] }, { 15: [1, 20] }, o($V0, [2, 11]), o($V0, [2, 12]), o($V0, [2, 13]), o($V0, [2, 14]), o($V0, [2, 15]), o($V0, [2, 16]), o($V0, [2, 4]), o($V0, [2, 9]), o($V0, [2, 10])],
+    table: [{ 3: 1, 4: 2, 7: [1, 3], 8: [1, 4], 9: [1, 5] }, { 1: [3] }, o($V0, [2, 5], { 5: 6 }), o($V0, [2, 2]), o($V0, [2, 3]), o($V0, [2, 4]), { 6: [1, 7], 10: 8, 11: [1, 9], 12: 10, 13: [1, 11], 14: $V1, 15: $V2, 17: $V3, 19: $V4, 20: $V5, 21: 17, 22: 18, 23: $V6, 24: $V7 }, o($V0, [2, 10], { 1: [2, 1] }), o($V0, [2, 6]), { 12: 21, 14: $V1, 15: $V2, 17: $V3, 19: $V4, 20: $V5, 21: 17, 22: 18, 23: $V6, 24: $V7 }, o($V0, [2, 8]), o($V0, [2, 9]), o($V0, [2, 11]), { 16: [1, 22] }, { 18: [1, 23] }, o($V0, [2, 14]), o($V0, [2, 15]), o($V0, [2, 16]), o($V0, [2, 17]), o($V0, [2, 18]), o($V0, [2, 19]), o($V0, [2, 7]), o($V0, [2, 12]), o($V0, [2, 13])],
     defaultActions: {},
     parseError: /* @__PURE__ */ __name(function parseError(str, hash) {
       if (hash.recoverable) {
@@ -494,49 +500,53 @@ var parser = (function() {
           case 1:
             break;
           case 2:
-            return 10;
+            return 13;
           case 3:
             break;
           case 4:
             break;
           case 5:
-            return 4;
+            return 8;
           case 6:
-            return 11;
+            return 9;
           case 7:
-            this.begin("acc_title");
-            return 12;
+            return 7;
           case 8:
+            return 14;
+          case 9:
+            this.begin("acc_title");
+            return 15;
+          case 10:
             this.popState();
             return "acc_title_value";
-          case 9:
+          case 11:
             this.begin("acc_descr");
-            return 14;
-          case 10:
+            return 17;
+          case 12:
             this.popState();
             return "acc_descr_value";
-          case 11:
+          case 13:
             this.begin("acc_descr_multiline");
             break;
-          case 12:
+          case 14:
             this.popState();
             break;
-          case 13:
-            return "acc_descr_multiline_value";
-          case 14:
-            return 17;
           case 15:
-            return 21;
+            return "acc_descr_multiline_value";
           case 16:
             return 20;
           case 17:
-            return 6;
+            return 24;
           case 18:
+            return 23;
+          case 19:
+            return 6;
+          case 20:
             return "INVALID";
         }
       }, "anonymous"),
-      rules: [/^(?:%(?!\{)[^\n]*)/i, /^(?:[^\}]%%[^\n]*)/i, /^(?:[\n]+)/i, /^(?:\s+)/i, /^(?:#[^\n]*)/i, /^(?:timeline\b)/i, /^(?:title\s[^\n]+)/i, /^(?:accTitle\s*:\s*)/i, /^(?:(?!\n||)*[^\n]*)/i, /^(?:accDescr\s*:\s*)/i, /^(?:(?!\n||)*[^\n]*)/i, /^(?:accDescr\s*\{\s*)/i, /^(?:[\}])/i, /^(?:[^\}]*)/i, /^(?:section\s[^:\n]+)/i, /^(?::\s(?:[^:\n]|:(?!\s))+)/i, /^(?:[^#:\n]+)/i, /^(?:$)/i, /^(?:.)/i],
-      conditions: { "acc_descr_multiline": { "rules": [12, 13], "inclusive": false }, "acc_descr": { "rules": [10], "inclusive": false }, "acc_title": { "rules": [8], "inclusive": false }, "INITIAL": { "rules": [0, 1, 2, 3, 4, 5, 6, 7, 9, 11, 14, 15, 16, 17, 18], "inclusive": true } }
+      rules: [/^(?:%(?!\{)[^\n]*)/i, /^(?:[^\}]%%[^\n]*)/i, /^(?:[\n]+)/i, /^(?:\s+)/i, /^(?:#[^\n]*)/i, /^(?:timeline[ \t]+LR\b)/i, /^(?:timeline[ \t]+TD\b)/i, /^(?:timeline\b)/i, /^(?:title\s[^\n]+)/i, /^(?:accTitle\s*:\s*)/i, /^(?:(?!\n||)*[^\n]*)/i, /^(?:accDescr\s*:\s*)/i, /^(?:(?!\n||)*[^\n]*)/i, /^(?:accDescr\s*\{\s*)/i, /^(?:[\}])/i, /^(?:[^\}]*)/i, /^(?:section\s[^:\n]+)/i, /^(?::\s(?:[^:\n]|:(?!\s))+)/i, /^(?:[^#:\n]+)/i, /^(?:$)/i, /^(?:.)/i],
+      conditions: { "acc_descr_multiline": { "rules": [14, 15], "inclusive": false }, "acc_descr": { "rules": [12], "inclusive": false }, "acc_title": { "rules": [10], "inclusive": false }, "INITIAL": { "rules": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 11, 13, 16, 17, 18, 19, 20], "inclusive": true } }
     };
     return lexer2;
   })();
@@ -560,11 +570,14 @@ __export(timelineDb_exports, {
   clear: () => clear2,
   default: () => timelineDb_default,
   getCommonDb: () => getCommonDb,
+  getDirection: () => getDirection,
   getSections: () => getSections,
-  getTasks: () => getTasks
+  getTasks: () => getTasks,
+  setDirection: () => setDirection
 });
 var currentSection = "";
 var currentTaskId = 0;
+var direction = "LR";
 var sections = [];
 var tasks = [];
 var rawTasks = [];
@@ -574,8 +587,15 @@ var clear2 = /* @__PURE__ */ __name(function() {
   tasks.length = 0;
   currentSection = "";
   rawTasks.length = 0;
+  direction = "LR";
   clear();
 }, "clear");
+var setDirection = /* @__PURE__ */ __name(function(dir) {
+  direction = dir;
+}, "setDirection");
+var getDirection = /* @__PURE__ */ __name(function() {
+  return direction;
+}, "getDirection");
 var addSection = /* @__PURE__ */ __name(function(txt) {
   currentSection = txt;
   sections.push(txt);
@@ -634,6 +654,8 @@ var compileTasks = /* @__PURE__ */ __name(function() {
 var timelineDb_default = {
   clear: clear2,
   getCommonDb,
+  getDirection,
+  setDirection,
   addSection,
   getSections,
   getTasks,
@@ -641,7 +663,7 @@ var timelineDb_default = {
   addTaskOrg,
   addEvent
 };
-var MAX_SECTIONS = 12;
+var nodeCount = 0;
 var drawRect = /* @__PURE__ */ __name(function(elem, rectData) {
   const rectElem = elem.append("rect");
   rectElem.attr("x", rectData.x);
@@ -754,12 +776,12 @@ var drawSection = /* @__PURE__ */ __name(function(elem, section, conf) {
   );
 }, "drawSection");
 var taskCount = -1;
-var drawTask = /* @__PURE__ */ __name(function(elem, task, conf) {
+var drawTask = /* @__PURE__ */ __name(function(elem, task, conf, diagramId) {
   const center = task.x + conf.width / 2;
   const g = elem.append("g");
   taskCount++;
   const maxHeight = 300 + 5 * 30;
-  g.append("line").attr("id", "task" + taskCount).attr("x1", center).attr("y1", task.y).attr("x2", center).attr("y2", maxHeight).attr("class", "task-line").attr("stroke-width", "1px").attr("stroke-dasharray", "4 2").attr("stroke", "#666");
+  g.append("line").attr("id", diagramId + "-task" + taskCount).attr("x1", center).attr("y1", task.y).attr("x2", center).attr("y2", maxHeight).attr("class", "task-line").attr("stroke-width", "1px").attr("stroke-dasharray", "4 2").attr("stroke", "#666");
   drawFace(g, {
     cx: center,
     cy: 300 + (5 - task.score) * 30,
@@ -861,8 +883,10 @@ var _drawTextCandidateFunc = /* @__PURE__ */ (function() {
     return conf.textPlacement === "fo" ? byFo : conf.textPlacement === "old" ? byText : byTspan;
   };
 })();
-var initGraphics = /* @__PURE__ */ __name(function(graphics) {
-  graphics.append("defs").append("marker").attr("id", "arrowhead").attr("refX", 5).attr("refY", 2).attr("markerWidth", 6).attr("markerHeight", 4).attr("orient", "auto").append("path").attr("d", "M 0,0 V 4 L6,2 Z");
+var initGraphics = /* @__PURE__ */ __name(function(graphics, id) {
+  nodeCount = 0;
+  taskCount = -1;
+  graphics.append("defs").append("marker").attr("id", id + "-arrowhead").attr("refX", 5).attr("refY", 2).attr("markerWidth", 6).attr("markerHeight", 4).attr("orient", "auto").append("path").attr("d", "M 0,0 V 4 L6,2 Z");
 }, "initGraphics");
 function wrap(text, width) {
   text.each(function() {
@@ -885,8 +909,11 @@ function wrap(text, width) {
   });
 }
 __name(wrap, "wrap");
-var drawNode = /* @__PURE__ */ __name(function(elem, node, fullSection, conf) {
-  const section = fullSection % MAX_SECTIONS - 1;
+var drawNode = /* @__PURE__ */ __name(function(elem, node, fullSection, conf, diagramId, isEvent = false) {
+  const { theme, look } = conf;
+  const isReduxTheme = theme?.includes("redux");
+  const maxSections = conf?.themeVariables?.THEME_COLOR_LIMIT ?? 12;
+  const section = fullSection % maxSections - 1;
   const nodeElem = elem.append("g");
   node.section = section;
   nodeElem.attr(
@@ -902,7 +929,28 @@ var drawNode = /* @__PURE__ */ __name(function(elem, node, fullSection, conf) {
   node.height = Math.max(node.height, node.maxHeight);
   node.width = node.width + 2 * node.padding;
   textElem.attr("transform", "translate(" + node.width / 2 + ", " + node.padding / 2 + ")");
-  defaultBkg(bkgElem, node, section, conf);
+  if (isReduxTheme) {
+    textElem.attr(
+      "transform",
+      `translate(${node.width / 2}, ${isEvent ? node.padding / 2 + 3 : node.padding})`
+    );
+  }
+  defaultBkg(bkgElem, node, section, diagramId, conf);
+  if (look === "neo") {
+    nodeElem.attr("data-look", `neo`);
+    if (isReduxTheme) {
+      const isDark2 = theme.includes("dark");
+      const rootSvgNode = elem.node()?.ownerSVGElement ?? elem.node();
+      const rootSvg = select(rootSvgNode);
+      const svgId = rootSvg.attr("id") ?? "";
+      const dropShadowId = svgId ? `${svgId}-drop-shadow` : "drop-shadow";
+      if (rootSvg.select(`#${dropShadowId}`).empty()) {
+        const existingDefs = rootSvg.select("defs");
+        const defsEl = existingDefs.empty() ? rootSvg.append("defs") : existingDefs;
+        defsEl.append("filter").attr("id", dropShadowId).attr("height", "130%").attr("width", "130%").append("feDropShadow").attr("dx", "4").attr("dy", "4").attr("stdDeviation", 0).attr("flood-opacity", isDark2 ? "0.2" : "0.06").attr("flood-color", isDark2 ? "#FFFFFF" : "#000000");
+      }
+    }
+  }
   return node;
 }, "drawNode");
 var getVirtualNodeHeight = /* @__PURE__ */ __name(function(elem, node, conf) {
@@ -913,13 +961,15 @@ var getVirtualNodeHeight = /* @__PURE__ */ __name(function(elem, node, conf) {
   textElem.remove();
   return bbox.height + fontSize * 1.1 * 0.5 + node.padding;
 }, "getVirtualNodeHeight");
-var defaultBkg = /* @__PURE__ */ __name(function(elem, node, section) {
+var defaultBkg = /* @__PURE__ */ __name(function(elem, node, section, diagramId, config) {
+  const { theme } = config;
+  const r = theme?.includes("redux") ? 0 : 5;
   const rd = 5;
-  elem.append("path").attr("id", "node-" + node.id).attr("class", "node-bkg node-" + node.type).attr(
-    "d",
-    `M0 ${node.height - rd} v${-node.height + 2 * rd} q0,-5 5,-5 h${node.width - 2 * rd} q5,0 5,5 v${node.height - rd} H0 Z`
-  );
-  elem.append("line").attr("class", "node-line-" + section).attr("x1", 0).attr("y1", node.height).attr("x2", node.width).attr("y2", node.height);
+  const d = r > 0 ? `M0 ${node.height - rd} v${-node.height + 2 * rd} q0,-${r},${r},-${r} h${node.width - 2 * rd} q${r},0,${r},${r} v${node.height - rd} H0 Z` : `M0 ${node.height - rd} v${-(node.height - rd)} h${node.width} v${node.height} H0 Z`;
+  elem.append("path").attr("id", diagramId + "-node-" + nodeCount++).attr("class", "node-bkg node-" + node.type).attr("d", d);
+  if (!theme?.includes("redux")) {
+    elem.append("line").attr("class", "node-line-" + section).attr("x1", 0).attr("y1", node.height).attr("x2", node.width).attr("y2", node.height);
+  }
 }, "defaultBkg");
 var svgDraw_default = {
   drawRect,
@@ -937,6 +987,8 @@ var svgDraw_default = {
 };
 var draw = /* @__PURE__ */ __name(function(text, id, version, diagObj) {
   const conf = getConfig2();
+  const { look, theme, themeVariables } = conf;
+  const { useGradient, gradientStart, gradientStop } = themeVariables;
   const LEFT_MARGIN = conf.timeline?.leftMargin ?? 50;
   log.debug("timeline", diagObj.db);
   const securityLevel = conf.securityLevel;
@@ -950,7 +1002,7 @@ var draw = /* @__PURE__ */ __name(function(text, id, version, diagObj) {
   const tasks2 = diagObj.db.getTasks();
   const title = diagObj.db.getCommonDb().getDiagramTitle();
   log.debug("task", tasks2);
-  svgDraw_default.initGraphics(svg);
+  svgDraw_default.initGraphics(svg, id);
   const sections2 = diagObj.db.getSections();
   log.debug("sections", sections2);
   let maxSectionHeight = 0;
@@ -1023,7 +1075,7 @@ var draw = /* @__PURE__ */ __name(function(text, id, version, diagObj) {
       };
       log.debug("sectionNode", sectionNode);
       const sectionNodeWrapper = svg.append("g");
-      const node = svgDraw_default.drawNode(sectionNodeWrapper, sectionNode, sectionNumber, conf);
+      const node = svgDraw_default.drawNode(sectionNodeWrapper, sectionNode, sectionNumber, conf, id);
       log.debug("sectionNode output", node);
       sectionNodeWrapper.attr("transform", `translate(${masterX}, ${sectionBeginY})`);
       masterY += maxSectionHeight + 50;
@@ -1039,7 +1091,8 @@ var draw = /* @__PURE__ */ __name(function(text, id, version, diagObj) {
           maxEventCount,
           maxEventLineLength,
           maxSectionHeight,
-          false
+          false,
+          id
         );
       }
       masterX += 200 * Math.max(tasksForSection.length, 1);
@@ -1059,17 +1112,25 @@ var draw = /* @__PURE__ */ __name(function(text, id, version, diagObj) {
       maxEventCount,
       maxEventLineLength,
       maxSectionHeight,
-      true
+      true,
+      id
     );
   }
   const box = svg.node().getBBox();
   log.debug("bounds", box);
   if (title) {
-    svg.append("text").text(title).attr("x", box.width / 2 - LEFT_MARGIN).attr("font-size", "4ex").attr("font-weight", "bold").attr("y", 20);
+    svg.append("text").text(title).attr("x", look === "neo" ? box.x * 2 + LEFT_MARGIN : box.width / 2 - LEFT_MARGIN).attr("font-size", "4ex").attr("font-weight", "bold").attr("y", 20);
   }
   depthY = hasSections ? maxSectionHeight + maxTaskHeight + 150 : maxTaskHeight + 100;
   const lineWrapper = svg.append("g").attr("class", "lineWrapper");
-  lineWrapper.append("line").attr("x1", LEFT_MARGIN).attr("y1", depthY).attr("x2", box.width + 3 * LEFT_MARGIN).attr("y2", depthY).attr("stroke-width", 4).attr("stroke", "black").attr("marker-end", "url(#arrowhead)");
+  lineWrapper.append("line").attr("x1", LEFT_MARGIN).attr("y1", depthY).attr("x2", box.width + 3 * LEFT_MARGIN).attr("y2", depthY).attr("stroke-width", 4).attr("stroke", "black").attr("marker-end", `url(#${id}-arrowhead)`);
+  if (look === "neo" && useGradient && theme !== "neutral") {
+    const existingDefs = svg.select("defs");
+    const defsEl = existingDefs.empty() ? svg.append("defs") : existingDefs;
+    const gradient = defsEl.append("linearGradient").attr("id", svg.attr("id") + "-gradient").attr("gradientUnits", "objectBoundingBox").attr("x1", "0%").attr("y1", "0%").attr("x2", "100%").attr("y2", "0%");
+    gradient.append("stop").attr("offset", "0%").attr("stop-color", gradientStart).attr("stop-opacity", 1);
+    gradient.append("stop").attr("offset", "100%").attr("stop-color", gradientStop).attr("stop-opacity", 1);
+  }
   setupGraphViewbox(
     void 0,
     svg,
@@ -1077,7 +1138,7 @@ var draw = /* @__PURE__ */ __name(function(text, id, version, diagObj) {
     conf.timeline?.useMaxWidth ?? false
   );
 }, "draw");
-var drawTasks = /* @__PURE__ */ __name(function(diagram2, tasks2, sectionColor, masterX, masterY, maxTaskHeight, conf, maxEventCount, maxEventLineLength, maxSectionHeight, isWithoutSections) {
+var drawTasks = /* @__PURE__ */ __name(function(diagram2, tasks2, sectionColor, masterX, masterY, maxTaskHeight, conf, maxEventCount, maxEventLineLength, maxSectionHeight, isWithoutSections, diagramId) {
   for (const task of tasks2) {
     const taskNode = {
       descr: task.task,
@@ -1089,7 +1150,7 @@ var drawTasks = /* @__PURE__ */ __name(function(diagram2, tasks2, sectionColor,
     };
     log.debug("taskNode", taskNode);
     const taskWrapper = diagram2.append("g").attr("class", "taskWrapper");
-    const node = svgDraw_default.drawNode(taskWrapper, taskNode, sectionColor, conf);
+    const node = svgDraw_default.drawNode(taskWrapper, taskNode, sectionColor, conf, diagramId);
     const taskHeight = node.height;
     log.debug("taskHeight after draw", taskHeight);
     taskWrapper.attr("transform", `translate(${masterX}, ${masterY})`);
@@ -1098,9 +1159,9 @@ var drawTasks = /* @__PURE__ */ __name(function(diagram2, tasks2, sectionColor,
       const lineWrapper = diagram2.append("g").attr("class", "lineWrapper");
       let lineLength = maxTaskHeight;
       masterY += 100;
-      lineLength = lineLength + drawEvents(diagram2, task.events, sectionColor, masterX, masterY, conf);
+      lineLength = lineLength + drawEvents(diagram2, task.events, sectionColor, masterX, masterY, conf, diagramId);
       masterY -= 100;
-      lineWrapper.append("line").attr("x1", masterX + 190 / 2).attr("y1", masterY + maxTaskHeight).attr("x2", masterX + 190 / 2).attr("y2", masterY + maxTaskHeight + 100 + maxEventLineLength + 100).attr("stroke-width", 2).attr("stroke", "black").attr("marker-end", "url(#arrowhead)").attr("stroke-dasharray", "5,5");
+      lineWrapper.append("line").attr("x1", masterX + 190 / 2).attr("y1", masterY + maxTaskHeight).attr("x2", masterX + 190 / 2).attr("y2", masterY + maxTaskHeight + 100 + maxEventLineLength + 100).attr("stroke-width", 2).attr("stroke", "black").attr("marker-end", `url(#${diagramId}-arrowhead)`).attr("stroke-dasharray", "5,5");
     }
     masterX = masterX + 200;
     if (isWithoutSections && !conf.timeline?.disableMulticolor) {
@@ -1109,7 +1170,7 @@ var drawTasks = /* @__PURE__ */ __name(function(diagram2, tasks2, sectionColor,
   }
   masterY = masterY - 10;
 }, "drawTasks");
-var drawEvents = /* @__PURE__ */ __name(function(diagram2, events, sectionColor, masterX, masterY, conf) {
+var drawEvents = /* @__PURE__ */ __name(function(diagram2, events, sectionColor, masterX, masterY, conf, diagramId) {
   let maxEventHeight = 0;
   const eventBeginY = masterY;
   masterY = masterY + 100;
@@ -1124,7 +1185,7 @@ var drawEvents = /* @__PURE__ */ __name(function(diagram2, events, sectionColor,
     };
     log.debug("eventNode", eventNode);
     const eventWrapper = diagram2.append("g").attr("class", "eventWrapper");
-    const node = svgDraw_default.drawNode(eventWrapper, eventNode, sectionColor, conf);
+    const node = svgDraw_default.drawNode(eventWrapper, eventNode, sectionColor, conf, diagramId, true);
     const eventHeight = node.height;
     maxEventHeight = maxEventHeight + eventHeight;
     eventWrapper.attr("transform", `translate(${masterX}, ${masterY})`);
@@ -1138,6 +1199,284 @@ var timelineRenderer_default = {
   }, "setConf"),
   draw
 };
+var NODE_WIDTH = 200;
+var NODE_PADDING = 5;
+var NODE_TOTAL_WIDTH = NODE_WIDTH + NODE_PADDING * 2;
+var EVENT_WIDTH = NODE_WIDTH + 100;
+var EVENT_TOTAL_WIDTH = EVENT_WIDTH + NODE_PADDING * 2;
+var EVENT_SPACING = 10;
+var EVENT_VERTICAL_GAP = 0;
+var SECTION_TASK_GAP = 20;
+var TASK_AXIS_GAP = 20;
+var TASK_VERTICAL_GAP = 30;
+var EVENT_AXIS_GAP = 50;
+var draw2 = /* @__PURE__ */ __name(function(text, id, version, diagObj) {
+  const conf = getConfig2();
+  const LEFT_MARGIN = conf.timeline?.leftMargin ?? 50;
+  log.debug("timeline", diagObj.db);
+  const svg = selectSvgElement(id);
+  svg.append("g");
+  const tasks2 = diagObj.db.getTasks();
+  const title = diagObj.db.getCommonDb().getDiagramTitle();
+  log.debug("task", tasks2);
+  svgDraw_default.initGraphics(svg);
+  const sections2 = diagObj.db.getSections();
+  log.debug("sections", sections2);
+  let maxSectionHeight = 0;
+  let maxTaskHeight = 0;
+  const masterX = 50 + LEFT_MARGIN;
+  let masterY = 50;
+  const contentTopY = masterY;
+  const sectionBeginX = masterX;
+  const leftWidth = NODE_TOTAL_WIDTH + TASK_AXIS_GAP;
+  const rightWidth = EVENT_TOTAL_WIDTH + EVENT_AXIS_GAP;
+  const axisX = sectionBeginX + leftWidth;
+  let sectionNumber = 0;
+  const hasSections = sections2 && sections2.length > 0;
+  const timelineX = hasSections ? axisX : masterX + leftWidth;
+  const sectionWidth = Math.max(50, leftWidth + rightWidth - NODE_PADDING * 2);
+  sections2.forEach(function(section) {
+    const sectionNode = {
+      number: sectionNumber,
+      descr: section,
+      section: sectionNumber,
+      width: sectionWidth,
+      padding: NODE_PADDING,
+      maxHeight: maxSectionHeight
+    };
+    const sectionHeight = svgDraw_default.getVirtualNodeHeight(svg, sectionNode, conf);
+    log.debug("sectionHeight before draw", sectionHeight);
+    maxSectionHeight = Math.max(maxSectionHeight, sectionHeight);
+  });
+  let maxEventStackHeight = 0;
+  log.debug("tasks.length", tasks2.length);
+  for (const [i, task] of tasks2.entries()) {
+    const taskNode = {
+      number: i,
+      descr: task,
+      section: task.section,
+      width: NODE_WIDTH,
+      padding: NODE_PADDING,
+      maxHeight: maxTaskHeight
+    };
+    const taskHeight = svgDraw_default.getVirtualNodeHeight(svg, taskNode, conf);
+    log.debug("taskHeight before draw", taskHeight);
+    maxTaskHeight = Math.max(maxTaskHeight, taskHeight);
+    let maxEventStackHeightTemp = 0;
+    for (const event of task.events) {
+      const eventNode = {
+        descr: event,
+        section: task.section,
+        number: task.section,
+        width: EVENT_WIDTH,
+        padding: NODE_PADDING,
+        maxHeight: 50
+      };
+      maxEventStackHeightTemp += svgDraw_default.getVirtualNodeHeight(svg, eventNode, conf);
+    }
+    if (task.events.length > 0) {
+      maxEventStackHeightTemp += (task.events.length - 1) * EVENT_SPACING;
+    }
+    maxEventStackHeight = Math.max(maxEventStackHeight, maxEventStackHeightTemp) + EVENT_VERTICAL_GAP;
+  }
+  log.debug("maxSectionHeight before draw", maxSectionHeight);
+  log.debug("maxTaskHeight before draw", maxTaskHeight);
+  const taskBlockHeight = Math.max(maxTaskHeight, maxEventStackHeight);
+  const taskSpacing = taskBlockHeight + TASK_VERTICAL_GAP;
+  if (hasSections) {
+    sections2.forEach((section) => {
+      const tasksForSection = tasks2.filter((task) => task.section === section);
+      const sectionNode = {
+        number: sectionNumber,
+        descr: section,
+        section: sectionNumber,
+        width: sectionWidth,
+        padding: NODE_PADDING,
+        maxHeight: maxSectionHeight
+      };
+      log.debug("sectionNode", sectionNode);
+      const sectionNodeWrapper = svg.append("g");
+      const node = svgDraw_default.drawNode(sectionNodeWrapper, sectionNode, sectionNumber, conf);
+      log.debug("sectionNode output", node);
+      const sectionX = timelineX - leftWidth;
+      sectionNodeWrapper.attr("transform", `translate(${sectionX}, ${masterY})`);
+      const taskStartY = masterY + node.height + SECTION_TASK_GAP;
+      if (tasksForSection.length > 0) {
+        drawTasks2(
+          svg,
+          tasksForSection,
+          sectionNumber,
+          timelineX,
+          taskStartY,
+          maxTaskHeight,
+          conf,
+          taskSpacing,
+          false
+        );
+      }
+      const taskCount2 = tasksForSection.length;
+      const sectionHeight = node.height + SECTION_TASK_GAP + taskSpacing * Math.max(taskCount2, 1) - (taskCount2 > 0 ? TASK_VERTICAL_GAP * 2 : 0);
+      masterY += sectionHeight;
+      sectionNumber++;
+    });
+  } else {
+    drawTasks2(
+      svg,
+      tasks2,
+      sectionNumber,
+      timelineX,
+      masterY,
+      maxTaskHeight,
+      conf,
+      taskSpacing,
+      true
+    );
+  }
+  let box = svg.node()?.getBBox();
+  if (!box) {
+    throw new Error("bbox not found");
+  }
+  log.debug("bounds", box);
+  if (title) {
+    svg.append("text").text(title).attr("x", box.width / 2 - LEFT_MARGIN).attr("font-size", "4ex").attr("font-weight", "bold").attr("y", 20);
+    box = svg.node()?.getBBox();
+    if (!box) {
+      throw new Error("bbox not found");
+    }
+    log.debug("bounds after title", box);
+  }
+  const [fontSize] = parseFontSize(conf.fontSize);
+  const arrowTopOffset = (fontSize ?? 16) * 2;
+  const arrowBottomPadding = (fontSize ?? 16) * 0.5 + 20;
+  const lineWrapper = svg.append("g").attr("class", "lineWrapper");
+  lineWrapper.append("line").attr("x1", timelineX).attr("y1", contentTopY - arrowTopOffset).attr("x2", timelineX).attr("y2", box.y + box.height + arrowBottomPadding).attr("stroke-width", 4).attr("stroke", "black").attr("marker-end", "url(#arrowhead)");
+  lineWrapper.lower();
+  setupGraphViewbox(
+    void 0,
+    svg,
+    conf.timeline?.padding ?? 50,
+    conf.timeline?.useMaxWidth ?? false
+  );
+}, "draw");
+var drawTasks2 = /* @__PURE__ */ __name(function(diagram2, tasks2, sectionColor, timelineX, masterY, maxTaskHeight, conf, taskSpacing, isWithoutSections) {
+  for (const task of tasks2) {
+    const taskNode = {
+      descr: task.task,
+      section: sectionColor,
+      number: sectionColor,
+      width: NODE_WIDTH,
+      padding: NODE_PADDING,
+      maxHeight: maxTaskHeight
+    };
+    log.debug("taskNode", taskNode);
+    const taskWrapper = diagram2.append("g").attr("class", "taskWrapper");
+    const node = svgDraw_default.drawNode(taskWrapper, taskNode, sectionColor, conf);
+    const taskHeight = node.height;
+    log.debug("taskHeight after draw", taskHeight);
+    const taskX = timelineX - TASK_AXIS_GAP - node.width;
+    taskWrapper.attr("transform", `translate(${taskX}, ${masterY})`);
+    maxTaskHeight = Math.max(maxTaskHeight, taskHeight);
+    if (task.events && task.events.length > 0) {
+      const eventsStartY = masterY;
+      const eventsX = timelineX + EVENT_AXIS_GAP;
+      drawEvents2(diagram2, task.events, sectionColor, timelineX, eventsX, eventsStartY, conf);
+    }
+    masterY = masterY + taskSpacing;
+    if (isWithoutSections && !conf.timeline?.disableMulticolor) {
+      sectionColor++;
+    }
+  }
+}, "drawTasks");
+var drawEvents2 = /* @__PURE__ */ __name(function(diagram2, events, sectionColor, axisX, eventsX, startY, conf) {
+  let currentY = startY;
+  for (const event of events) {
+    const eventNode = {
+      descr: event,
+      section: sectionColor,
+      number: sectionColor,
+      width: EVENT_WIDTH,
+      padding: NODE_PADDING,
+      maxHeight: 0
+    };
+    log.debug("eventNode", eventNode);
+    const eventWrapper = diagram2.append("g").attr("class", "eventWrapper");
+    const node = svgDraw_default.drawNode(eventWrapper, eventNode, sectionColor, conf);
+    const eventHeight = node.height;
+    eventWrapper.attr("transform", `translate(${eventsX}, ${currentY})`);
+    const lineWrapper = diagram2.append("g").attr("class", "lineWrapper");
+    const lineY = currentY + eventHeight / 2;
+    lineWrapper.append("line").attr("x1", axisX).attr("y1", lineY).attr("x2", eventsX).attr("y2", lineY).attr("stroke-width", 2).attr("stroke", "black").attr("marker-end", "url(#arrowhead)").attr("stroke-dasharray", "5,5");
+    currentY = currentY + eventHeight + EVENT_SPACING;
+  }
+  return currentY - startY;
+}, "drawEvents");
+var timelineRendererVertical_default = {
+  setConf: /* @__PURE__ */ __name(() => {
+  }, "setConf"),
+  draw: draw2
+};
+var genReduxSections = /* @__PURE__ */ __name((options) => {
+  const { theme } = getConfig();
+  const isDarkTheme = theme?.includes("dark");
+  const isColorTheme = theme?.includes("color");
+  const rawSvgId = options.svgId?.replace(/^#/, "") ?? "";
+  const scopedDropShadow = rawSvgId ? `url(#${rawSvgId}-drop-shadow)` : options.dropShadow ?? "none";
+  let sections2 = "";
+  for (let i = 0; i < options.THEME_COLOR_LIMIT; i++) {
+    const sw = `${17 - 3 * i}`;
+    const color = isColorTheme ? options.borderColorArray[i] : options.mainBkg;
+    const stroke = isColorTheme ? options.borderColorArray[i] : options.nodeBorder;
+    sections2 += `
+    .section-${i - 1} rect,
+    .section-${i - 1} path,
+    .section-${i - 1} circle {
+      fill: ${isDarkTheme && isColorTheme ? options.mainBkg : color};
+      stroke: ${stroke};
+      stroke-width: ${options.strokeWidth};
+      filter: ${scopedDropShadow};
+    }
+
+    .section-${i - 1} text {
+      fill: ${options.nodeBorder};
+      font-weight: ${options.fontWeight}
+    }
+
+    .node-icon-${i - 1} {
+      font-size: 40px;
+      color: ${options["cScaleLabel" + i]};
+    }
+
+    .section-edge-${i - 1} {
+      stroke: ${options["cScale" + i]};
+    }
+
+    .edge-depth-${i - 1} {
+      stroke-width: ${sw};
+    }
+
+    .section-${i - 1} line {
+      stroke: ${options["cScaleInv" + i]};
+      stroke-width: 3;
+    }
+
+    .lineWrapper line {
+      stroke: ${options.nodeBorder};
+      stroke-width:${options.strokeWidth}
+    }
+
+    .disabled,
+    .disabled circle,
+    .disabled text {
+      fill: ${options.tertiaryColor ?? "lightgray"};
+    }
+
+    .disabled text {
+      fill: ${options.clusterBorder ?? "#efefef"};
+    }
+    `;
+  }
+  return sections2;
+}, "genReduxSections");
 var genSections = /* @__PURE__ */ __name((options) => {
   let sections2 = "";
   for (let i = 0; i < options.THEME_COLOR_LIMIT; i++) {
@@ -1177,20 +1516,43 @@ var genSections = /* @__PURE__ */ __name((options) => {
     }
 
     .disabled, .disabled circle, .disabled text {
-      fill: lightgray;
+      fill: ${options.tertiaryColor ?? "lightgray"};
     }
     .disabled text {
-      fill: #efefef;
+      fill: ${options.clusterBorder ?? "#efefef"};
     }
     `;
   }
   return sections2;
 }, "genSections");
-var getStyles = /* @__PURE__ */ __name((options) => `
+var getStyles = /* @__PURE__ */ __name((options) => {
+  const { theme } = getConfig();
+  const isReduxTheme = theme?.includes("redux");
+  const isNeutralTheme = theme === "neutral";
+  const rawSvgId = options.svgId?.replace(/^#/, "") ?? "";
+  let gradientSections = "";
+  if (options.useGradient && rawSvgId && options.THEME_COLOR_LIMIT && !isNeutralTheme) {
+    for (let i = 0; i < options.THEME_COLOR_LIMIT; i++) {
+      gradientSections += `
+      .section-${i - 1}[data-look="neo"] rect,
+      .section-${i - 1}[data-look="neo"] path,
+      .section-${i - 1}[data-look="neo"] circle {
+        fill: ${options.mainBkg};
+        stroke: url(#${rawSvgId}-gradient);
+        stroke-width: 2;
+      }
+      .section-${i - 1}[data-look="neo"] line {
+        stroke: url(#${rawSvgId}-gradient);
+        stroke-width: 2;
+      }`;
+    }
+  }
+  return `
   .edge {
     stroke-width: 3;
   }
-  ${genSections(options)}
+  ${isReduxTheme ? genReduxSections(options) : genSections(options)}
+  ${gradientSections}
   .section-root rect, .section-root path, .section-root circle  {
     fill: ${options.git0};
   }
@@ -1209,11 +1571,23 @@ var getStyles = /* @__PURE__ */ __name((options) => `
   .eventWrapper  {
    filter: brightness(120%);
   }
-`, "getStyles");
+`;
+}, "getStyles");
 var styles_default = getStyles;
+var rendererSelector = {
+  setConf: /* @__PURE__ */ __name(() => {
+  }, "setConf"),
+  draw: /* @__PURE__ */ __name((text, id, version, diagObj) => {
+    const direction2 = diagObj?.db?.getDirection?.() ?? "LR";
+    if (direction2 === "TD") {
+      return timelineRendererVertical_default.draw(text, id, version, diagObj);
+    }
+    return timelineRenderer_default.draw(text, id, version, diagObj);
+  }, "draw")
+};
 var diagram = {
   db: timelineDb_exports,
-  renderer: timelineRenderer_default,
+  renderer: rendererSelector,
   parser: timeline_default,
   styles: styles_default
 };