@heycys/gallery 0.1.0 → 0.1.2

package/packs/gallery/kanban/kit.js

@@ -0,0 +1,540 @@
+// gallery/kanban (看板): a view of a table of the document (its manifest's needs hold "tables"; the table's
+// frame carries the key its data-doc-from names, which the table's 视图 › puts on both). Each row of the
+// table is a card, grouped by a column (its settings' `group`, else the column that reads as a status: one
+// named 状态, 进度, 阶段, status…, else the one after the first whose words repeat most), the groups in
+// the order its settings' `order` lists (empty ones too), then any other value as the rows first say it,
+// the cards of a group in the table's order. A card is its row's first cell, the other cells' words under
+// it, and a chip for each link its row holds: one to a document opens it (context.workspace.open: the
+// workbench goes there), one to the web a new tab.
+//
+// The table is the file's whole truth and the reader's: the board writes nothing of its own but its
+// settings. Each gesture asks the page editor through context.table(), one intent, one undo step: a card
+// dragged (DocKit.drag) to another place of its group moves its row, to another group moves it and sets
+// its cell of the grouping column in the same step (set alone where the group has no other card); 新建
+// at a group's foot adds a row after the group's last, its cell of the group set, and opens its title to
+// type in; a card's ✎ sets its first cell, its 🗑 takes the row out. Where the table can take no change
+// (an export, 演示视图, before the page edits, a table the editor's tools do not manage: table().canEdit())
+// the board only shows, and says why where the page edits. Its settings are its own data part
+// (`settings`, JSON), changed by the ⚙ at its head (分组依据, which takes the order of the groups off, as
+// that named the values of the column grouped by before), one undo step each.
+//
+// A card is kept while its row is the same object (context.table() gives a row anew only once it or the
+// header changed) and only the cards whose rows changed are made again, so that a keystroke in a table of
+// 500 rows makes one card and moves none. The words are the page's language.
+
+const WORDS = {
+  zh: {
+    by: (/** @type {string} */ name) => `按“${name}”分组`,
+    group: "分组依据",
+    settings: "设置",
+    none: "（空）",
+    untitled: "无标题",
+    add: "新建",
+    rename: "重命名",
+    remove: "删除",
+    open: "打开",
+    cards: (/** @type {number} */ count) => `${count} 张卡片`,
+    unbound: "这个看板还没有接到表格上：在表格的菜单里选“视图 › 看板”。",
+    unread: "读不到这个看板的表格：它不在页面上了，或者有合并的单元格。",
+    missing: (/** @type {string} */ name) => `找不到列“${name}”：表格的列名改过了吗？`,
+    readOnly: "这张表格有表尾，或者各行的格数不一样，看板改不了它，这里只能看。",
+    empty: "表格里还没有行。",
+  },
+  en: {
+    by: (/** @type {string} */ name) => `Grouped by “${name}”`,
+    group: "Group by",
+    settings: "Settings",
+    none: "(empty)",
+    untitled: "Untitled",
+    add: "New",
+    rename: "Rename",
+    remove: "Delete",
+    open: "Open",
+    cards: (/** @type {number} */ count) => `${count} cards`,
+    unbound: "This board reads no table yet: pick View › Board in a table's menu.",
+    unread: "This board's table cannot be read: it is not on the page, or it has merged cells.",
+    missing: (/** @type {string} */ name) => `No column “${name}”: was the table's column renamed?`,
+    readOnly: "This table has a footer, or rows of other lengths: the board cannot change it, only show it.",
+    empty: "The table has no rows yet.",
+  },
+};
+
+// A column whose name says it is a status, the one a board groups by when its settings name none.
+const STATUS = /状态|進度|进度|阶段|階段|状況|状况|status|stage|state|phase/i;
+
+// How far off the groups a card held is still over them, in pixels.
+const MARGIN = 24;
+
+// The icons of a card's tools and the head's settings (16 × 16, the kit's line weight).
+const ICONS = {
+  gear: '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 4.5h6M12 4.5h1M3 11.5h1M7 11.5h6" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/><circle cx="10.5" cy="4.5" r="1.5" fill="none" stroke="currentColor" stroke-width="1.3"/><circle cx="5.5" cy="11.5" r="1.5" fill="none" stroke="currentColor" stroke-width="1.3"/></svg>',
+  rename: '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M10.5 3.2l2.3 2.3-7 7H3.5v-2.3z" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/></svg>',
+  remove: '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3.5 4.5h9M6.5 4.5V3h3v1.5M5 4.5l.6 8h4.8l.6-8" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round" stroke-linecap="round"/></svg>',
+  page: '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M4.5 2.5h4.5l2.5 2.5v8.5h-7z" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/></svg>',
+  web: '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M6.5 3.5h-3v9h9v-3M9 3h4v4M13 3L7.5 8.5" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+  add: '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 3.5v9M3.5 8h9" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>',
+};
+
+/** The language the page speaks: the UI's where Gallery says it (data-ge-language), else its lang's. */
+function languageOf(/** @type {HTMLElement} */ root) {
+  const ui = root.getAttribute("data-ge-language");
+  return (ui !== null ? ui === "en" : /^en(?:-|$)/i.test(root.lang)) ? "en" : "zh";
+}
+
+/** Words as a cell shows them, its white space one space. */
+const wordsOf = (/** @type {Node | null | undefined} */ node) => (node?.textContent ?? "").replace(/\s+/g, " ").trim();
+
+/** A row's value of a column as the board groups by it: its words ("" for none). */
+const keyOf = (/** @type {DocRow} */ row, /** @type {string} */ column) => {
+  const value = row.values[column];
+  return value === null || value === undefined ? "" : String(value).trim();
+};
+
+/**
+ * What its settings ask (context.readJSON's; {} where none is set): the column to group by ("" for the
+ * one it finds) and the order of the groups.
+ * @param {any} settings
+ */
+function askedOf(settings) {
+  const table = settings !== null && typeof settings === "object" && !Array.isArray(settings) ? settings : {};
+  const group = typeof table.group === "string" ? table.group.trim() : "";
+  const order = typeof table.order === "string" ? table.order.split(/[,，、]/).map((name) => name.trim()).filter(Boolean) : [];
+  return { group, order };
+}
+
+/**
+ * The column a board of `table` groups by when its settings name none: one whose name says it is a
+ * status, else the column after the first holding words (not numbers) whose values repeat most (the
+ * fewest of them), else the second, else the first.
+ * @param {DocTableView} table
+ */
+function groupColumnOf(table) {
+  const [first = null, ...rest] = table.columns;
+  if (rest.length === 0) return first;
+  const named = rest.find((name) => STATUS.test(name));
+  if (named) return named;
+  /** @type {[string, number] | null} */
+  let best = null;
+  for (const name of rest) {
+    if (table.rows.some((row) => typeof row.values[name] === "number")) continue;
+    const kinds = new Set(table.rows.map((row) => keyOf(row, name))).size;
+    if (best === null || kinds < best[1]) best = [name, kinds];
+  }
+  return best ? best[0] : rest[0];
+}
+
+/**
+ * An element of the board, of `kind` (its class gallery-kanban-<kind>).
+ * @template {keyof HTMLElementTagNameMap} K
+ * @param {K} tag
+ * @param {string} kind
+ * @param {string} [text]
+ */
+function made(tag, kind, text) {
+  const node = document.createElement(tag);
+  node.className = `gallery-kanban-${kind}`;
+  if (text !== undefined) node.textContent = text;
+  return node;
+}
+
+/**
+ * A button of an icon and its words for whoever cannot see it.
+ * @param {string} kind
+ * @param {string} icon
+ * @param {string} label
+ * @param {string} [text]
+ */
+function iconButton(kind, icon, label, text) {
+  const button = made("button", kind);
+  button.type = "button";
+  button.title = label;
+  button.setAttribute("aria-label", label);
+  button.innerHTML = icon;
+  if (text !== undefined) button.append(made("span", "words", text));
+  return button;
+}
+
+/**
+ * `parent`'s children made `nodes`, what is there already left in place: where only some are new, each
+ * standing where the one it replaces stood, those alone are put in (a keystroke in the table changes one
+ * card, and the page lays out that much); anything else is the list anew.
+ * @param {Element} parent
+ * @param {Element[]} nodes
+ */
+function put(parent, nodes) {
+  const now = [...parent.children];
+  if (now.length === nodes.length) {
+    const differs = nodes.map((node, at) => node !== now[at]);
+    if (!differs.includes(true)) return;
+    if (nodes.every((node, at) => !differs[at] || !node.isConnected)) {
+      nodes.forEach((node, at) => { if (differs[at]) parent.replaceChild(node, now[at]); });
+      return;
+    }
+  }
+  parent.replaceChildren(...nodes);
+}
+
+/**
+ * The chips of a row's links: each anchor of its cells, a document's (one of `row.links`, which name
+ * them in the same order, by their words) or the web's.
+ * @param {DocRow} row
+ * @returns {{ anchor: HTMLAnchorElement, page: DocRow["links"][number] | null }[]}
+ */
+function linksIn(row) {
+  let next = 0;
+  return [...row.el.querySelectorAll("a[href]")].flatMap((anchor) => {
+    if (!(anchor instanceof HTMLAnchorElement)) return [];
+    const page = row.links[next] && row.links[next].title === wordsOf(anchor) ? row.links[next] : null;
+    if (page) next += 1;
+    return [{ anchor, page }];
+  });
+}
+
+DocKit.component({
+  id: "gallery/kanban",
+  on: ["source", "data", "editable"],
+  mount(host, context) {
+    const language = languageOf(document.documentElement);
+    const words = WORDS[language];
+    const face = made("div", "face");
+    const head = made("div", "head");
+    const caption = made("span", "caption");
+    const gear = iconButton("gear", ICONS.gear, words.settings);
+    gear.setAttribute("aria-expanded", "false");
+    head.append(caption, gear);
+    const strip = made("div", "strip");
+    strip.hidden = true;
+    const groupLabel = made("label", "setting");
+    const groupField = document.createElement("select");
+    groupLabel.append(made("span", "setting-name", words.group), groupField);
+    strip.append(groupLabel);
+    const line = made("p", "line");
+    const board = made("div", "groups");
+    face.append(head, strip, line, board);
+    host.append(face);
+    gear.addEventListener("click", () => {
+      strip.hidden = !strip.hidden;
+      gear.setAttribute("aria-expanded", String(!strip.hidden));
+    }, { signal: context.signal });
+
+    // 分组依据 picked: its settings' group, one undo step (context.editJSON), the order of the groups going
+    // with it, as it named the values of the column grouped by before.
+    const grouping = DocKit.input(groupField, {
+      commit: (value) => void context.editJSON("settings", (draft) => {
+        const settings = draft !== null && typeof draft === "object" && !Array.isArray(draft) ? draft : {};
+        settings.group = value;
+        delete settings.order;
+        return settings;
+      }),
+      signal: context.signal,
+    });
+    let groupOptions = "";
+
+    // Words written only where they change: a keystroke in the table changes one card and nothing else.
+    const write = (/** @type {HTMLElement} */ node, /** @type {string} */ text) => {
+      if (node.textContent !== text) node.textContent = text;
+    };
+    const say = (/** @type {string | null} */ text) => {
+      line.hidden = text === null;
+      write(line, text ?? "");
+    };
+
+    /** @type {Map<DocRow, HTMLLIElement>} */
+    const cards = new Map(); // a row -> its card, while the row is the one context.table() gives
+    /** @type {WeakMap<Element, HTMLTableRowElement>} */
+    const rowOf = new WeakMap(); // a card -> its row's element
+    /** @type {Map<string, { section: HTMLElement, name: HTMLElement, count: HTMLElement, list: HTMLOListElement }>} */
+    const groups = new Map(); // a group's value -> its section
+    /** @type {{ column: string, value: string, known: Set<HTMLTableRowElement> } | null} */
+    let adding = null; // a row asked for by 新建, whose card opens its title to type in once drawn
+    let column = ""; // the column grouped by, as drawn last
+    let editing = false; // a card's title is being typed in
+    /** @type {{ card: HTMLElement, close(): void } | null} */
+    let field = null; // the title typed in, and how it ends
+
+    // The row a card stands for, as the table reads now; null once it is gone.
+    const rowNow = (/** @type {DocTableView} */ table, /** @type {Element | null} */ card) => {
+      const element = card ? rowOf.get(card) : undefined;
+      return element ? table.rows.find((row) => row.el === element) ?? null : null;
+    };
+    // The table, where it takes a change now.
+    const writable = () => {
+      const table = context.table();
+      return table && table.canEdit() ? table : null;
+    };
+
+    const cardOf = (/** @type {DocRow} */ row, /** @type {DocTableView} */ table) => {
+      const kept = cards.get(row);
+      if (kept) return kept;
+      const card = made("li", "card");
+      const hold = made("div", "hold");
+      const title = wordsOf(row.el.cells[0]);
+      const titled = made("span", "title", title || words.untitled);
+      titled.classList.toggle("gallery-kanban-untitled", !title);
+      hold.append(titled);
+      const grouped = table.columns.lastIndexOf(column);
+      const props = [...row.el.cells].flatMap((cell, at) => {
+        const said = wordsOf(cell);
+        if (at === 0 || at === grouped || !said || at >= table.columns.length) return [];
+        const prop = made("span", "prop", said);
+        prop.title = table.columns[at];
+        return [prop];
+      });
+      if (props.length > 0) {
+        const list = made("span", "props");
+        list.append(...props);
+        hold.append(list);
+      }
+      card.append(hold);
+      const links = linksIn(row);
+      if (links.length > 0) {
+        const chips = made("div", "links");
+        for (const { anchor, page } of links) {
+          const chip = made("a", "link");
+          chip.href = anchor.getAttribute("href") ?? "";
+          chip.innerHTML = page ? ICONS.page : ICONS.web;
+          const said = wordsOf(anchor);
+          chip.append(made("span", "words", said && said !== title ? said : words.open));
+          chip.title = said;
+          if (page) chip.dataset.page = page.slug;
+          else {
+            chip.target = "_blank";
+            chip.rel = "noopener noreferrer";
+          }
+          // A document's link opens it where Gallery shows the page; in an exported file it is a link.
+          if (page) chip.addEventListener("click", (event) => {
+            if (context.place !== "document" || !context.workspace) return;
+            event.preventDefault();
+            context.workspace.open({ slug: page.slug, block: page.block });
+          });
+          chips.append(chip);
+        }
+        card.append(chips);
+      }
+      const tools = made("div", "tools");
+      tools.append(iconButton("rename", ICONS.rename, words.rename), iconButton("remove", ICONS.remove, words.remove));
+      card.append(tools);
+      rowOf.set(card, row.el);
+      cards.set(row, card);
+      return card;
+    };
+
+    const groupOf = (/** @type {string} */ value) => {
+      const kept = groups.get(value);
+      if (kept) return kept;
+      const section = made("section", "group");
+      section.dataset.value = value;
+      const top = made("div", "group-head");
+      const name = made("span", "name", value || words.none);
+      const count = made("span", "count");
+      top.append(name, count);
+      const list = made("ol", "cards");
+      const add = iconButton("add", ICONS.add, words.add, words.add);
+      section.append(top, list, add);
+      const group = { section, name, count, list };
+      groups.set(value, group);
+      return group;
+    };
+
+    const drawNow = () => {
+      const table = context.table();
+      const settings = askedOf(context.readJSON("settings"));
+      const canWrite = Boolean(table && table.canEdit());
+      face.toggleAttribute("data-writes", context.canEdit());
+      board.toggleAttribute("data-writes", canWrite);
+      head.hidden = !table;
+      if (!table) {
+        cards.clear();
+        groups.clear();
+        write(caption, "");
+        board.replaceChildren();
+        groupField.replaceChildren();
+        groupOptions = "";
+        return say(host.hasAttribute("data-doc-from") ? words.unread : words.unbound);
+      }
+      const options = table.columns.length > 1 ? table.columns.slice(1) : [...table.columns];
+      const signed = JSON.stringify(options);
+      if (signed !== groupOptions) {
+        groupOptions = signed;
+        groupField.replaceChildren(...options.map((name) => new Option(name, name)));
+      }
+      const wanted = settings.group || groupColumnOf(table);
+      if (wanted === null || !table.columns.includes(wanted)) {
+        cards.clear();
+        groups.clear();
+        write(caption, "");
+        board.replaceChildren();
+        grouping.set(wanted ?? "");
+        return say(wanted === null ? words.empty : words.missing(wanted));
+      }
+      grouping.set(wanted);
+      if (wanted !== column) {
+        column = wanted;
+        cards.clear(); // what a card shows under its title leaves the grouping column out
+      }
+      write(caption, `${words.by(column)} · ${words.cards(table.rows.length)}`);
+      say(context.canEdit() && !canWrite ? words.readOnly : table.rows.length === 0 ? words.empty : null);
+      // The groups: those the settings list, then the rest as the rows say them, the empty value last.
+      /** @type {Map<string, DocRow[]>} */
+      const byValue = new Map(settings.order.map((value) => [value, []]));
+      for (const row of table.rows) {
+        const value = keyOf(row, column);
+        const rows = byValue.get(value);
+        if (rows) rows.push(row);
+        else byValue.set(value, [row]);
+      }
+      const empty = byValue.get("");
+      if (empty && !settings.order.includes("")) {
+        byValue.delete("");
+        byValue.set("", empty);
+      }
+      const live = new Set(table.rows);
+      for (const row of [...cards.keys()]) if (!live.has(row)) cards.delete(row);
+      put(board, [...byValue].map(([value, rows]) => {
+        const group = groupOf(value);
+        if (group.count.textContent !== String(rows.length)) group.count.textContent = String(rows.length);
+        put(group.list, rows.map((row) => cardOf(row, table)));
+        return group.section;
+      }));
+      for (const value of [...groups.keys()]) if (!byValue.has(value)) groups.delete(value);
+      // A card typed in that a change of its row (someone else's) took off: its field goes with it.
+      if (field && !field.card.isConnected) field.close();
+      // A row 新建 asked for, drawn now: its title open to type in.
+      if (adding) {
+        const asked = adding;
+        const fresh = table.rows.find((row) => !asked.known.has(row.el) && keyOf(row, asked.column) === asked.value);
+        if (fresh) {
+          adding = null;
+          const card = cards.get(fresh);
+          if (card) rename(card);
+        }
+      }
+    };
+    const draw = () => context.frame(() => {
+      if (dragging.dragging && !held?.isConnected) dragging.cancel();
+      drawNow();
+    });
+
+    // A card's title typed in: its first cell set (one intent) on Enter or as the field is left;
+    // Escape leaves it as it was.
+    function rename(/** @type {HTMLElement} */ card) {
+      const table = writable();
+      const row = table ? rowNow(table, card) : null;
+      if (!table || !row || editing) return;
+      editing = true;
+      const ends = new AbortController();
+      const input = made("input", "field");
+      input.type = "text";
+      input.value = wordsOf(row.el.cells[0]);
+      input.setAttribute("aria-label", words.rename);
+      card.setAttribute("data-editing", "");
+      card.prepend(input);
+      const close = () => {
+        if (!editing) return;
+        editing = false;
+        field = null;
+        ends.abort();
+        input.remove();
+        card.removeAttribute("data-editing");
+      };
+      field = { card, close };
+      DocKit.input(input, {
+        commit(value) {
+          const now = writable();
+          const target = now ? rowNow(now, card) : null;
+          if (now && target && now.columns.length > 0) now.set(target, now.columns[0], value.trim());
+          close();
+        },
+        signal: ends.signal,
+      });
+      input.addEventListener("blur", close, { signal: ends.signal });
+      context.signal.addEventListener("abort", close, { once: true, signal: ends.signal });
+      input.focus();
+      input.select();
+    }
+
+    board.addEventListener("click", (event) => {
+      const target = event.target instanceof Element ? event.target : null;
+      const button = target?.closest("button");
+      if (!button || !board.contains(button)) return;
+      const table = writable();
+      if (!table) return;
+      if (button.classList.contains("gallery-kanban-add")) {
+        const value = button.closest(".gallery-kanban-group")?.getAttribute("data-value") ?? "";
+        const mates = table.rows.filter((row) => keyOf(row, column) === value);
+        const title = table.columns[0];
+        adding = { column, value, known: new Set(table.rows.map((row) => row.el)) };
+        const values = title === column ? { [column]: value } : { [title]: "", [column]: value };
+        if (!table.add(values, mates.length > 0 ? { after: mates[mates.length - 1] } : {})) adding = null;
+        return;
+      }
+      const card = button.closest(".gallery-kanban-card");
+      if (!(card instanceof HTMLElement)) return;
+      if (button.classList.contains("gallery-kanban-rename")) rename(card);
+      else if (button.classList.contains("gallery-kanban-remove")) {
+        const row = rowNow(table, card);
+        if (row) table.remove(row);
+      }
+    }, { signal: context.signal });
+
+    // A card dragged (DocKit.drag, from its words: its links and buttons are presses): where it would go
+    // is marked as the pointer moves, and on its release over a group the table is asked once. Where a
+    // card dropped at (x, y) goes: nowhere off the groups, past a margin around them; else the group under
+    // it, or the nearest, before the card shown in it whose middle is below the pointer, else at its end.
+    const marker = made("li", "drop");
+    /** @type {HTMLElement | null} */
+    let held = null;
+    /** @param {number} x @param {number} y @param {HTMLElement} item */
+    const spotAt = (x, y, item) => {
+      held = item;
+      const area = board.getBoundingClientRect();
+      if (x < area.left - MARGIN || x > area.right + MARGIN || y < area.top - MARGIN || y > area.bottom + MARGIN) return null;
+      /** @type {{ section: HTMLElement, list: HTMLOListElement } | null} */
+      let group = null;
+      let nearest = Infinity;
+      for (const each of groups.values()) {
+        if (!each.section.isConnected) continue;
+        const { left, right } = each.section.getBoundingClientRect();
+        const far = x < left ? left - x : x > right ? x - right : 0;
+        if (far < nearest) [group, nearest] = [each, far];
+      }
+      if (!group) return null;
+      const next = [...group.list.children].find((card) => {
+        if (card === item || card === marker) return false;
+        const { top, height } = card.getBoundingClientRect();
+        return y < top + height / 2;
+      }) ?? null;
+      return { into: group.list, before: next, value: group.section.getAttribute("data-value") ?? "", card: next };
+    };
+    const dragging = DocKit.drag(board, {
+      items: ".gallery-kanban-card",
+      handle: ".gallery-kanban-hold",
+      enabled: () => !editing && writable() !== null,
+      marker,
+      signal: context.signal,
+      over: spotAt,
+      drop(item, { value, card }) {
+        held = null;
+        const table = writable();
+        const row = table ? rowNow(table, item) : null;
+        if (!table || !row || !table.columns.includes(column)) return;
+        const before = card ? rowNow(table, card) : null;
+        const mates = table.rows.filter((other) => other !== row && keyOf(other, column) === value);
+        const same = keyOf(row, column) === value;
+        const values = same ? undefined : { [column]: value };
+        if (same) {
+          // Where it was: before the card after it in its group, or at the group's end as its last.
+          const own = table.rows.filter((other) => keyOf(other, column) === value);
+          const at = own.indexOf(row);
+          if (before ? own[at + 1] === before : at === own.length - 1) return;
+        }
+        if (before) table.move(row, { before, values });
+        else if (mates.length > 0) table.move(row, { after: mates[mates.length - 1], values });
+        else if (!same) table.set(row, column, value);
+      },
+    });
+
+    drawNow();
+    return { update: draw };
+  },
+});

package/packs/gallery/kanban/preview.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 120"><rect width="240" height="120" rx="8" fill="#f2f4f7"/><rect x="14" y="14" width="66" height="92" rx="7" fill="#e8ebf0"/><rect x="87" y="14" width="66" height="92" rx="7" fill="#e8ebf0"/><rect x="160" y="14" width="66" height="92" rx="7" fill="#e8ebf0"/><rect x="20" y="20" width="30" height="7" rx="3.5" fill="#98a2b3"/><rect x="93" y="20" width="36" height="7" rx="3.5" fill="#2678d8"/><rect x="166" y="20" width="32" height="7" rx="3.5" fill="#2f9e6e"/><rect x="20" y="34" width="54" height="24" rx="5" fill="#ffffff" stroke="#d0d5dd"/><rect x="26" y="41" width="34" height="5" rx="2.5" fill="#475467"/><rect x="26" y="49" width="20" height="4" rx="2" fill="#98a2b3"/><rect x="20" y="63" width="54" height="24" rx="5" fill="#ffffff" stroke="#d0d5dd"/><rect x="26" y="70" width="28" height="5" rx="2.5" fill="#475467"/><rect x="26" y="78" width="22" height="4" rx="2" fill="#98a2b3"/><rect x="93" y="34" width="54" height="24" rx="5" fill="#ffffff" stroke="#d0d5dd"/><rect x="99" y="41" width="38" height="5" rx="2.5" fill="#475467"/><rect x="99" y="49" width="18" height="4" rx="2" fill="#98a2b3"/><rect x="166" y="34" width="54" height="24" rx="5" fill="#ffffff" stroke="#d0d5dd"/><rect x="172" y="41" width="30" height="5" rx="2.5" fill="#475467"/><rect x="172" y="49" width="24" height="4" rx="2" fill="#98a2b3"/><rect x="166" y="63" width="54" height="24" rx="5" fill="#ffffff" stroke="#d0d5dd"/><rect x="172" y="70" width="36" height="5" rx="2.5" fill="#475467"/><rect x="172" y="78" width="16" height="4" rx="2" fill="#98a2b3"/></svg>