@diagrammo/dgmo 0.87.0 → 0.88.0

package/dist/chunk-WXPBP4IT.js

@@ -0,0 +1,438 @@
+import {
+  renderInlineText
+} from "./chunk-S7W75MIM.js";
+import {
+  BOX_H,
+  BOX_W,
+  COMMENT_W,
+  PAIR_GAP,
+  layoutBracket,
+  wrapText
+} from "./chunk-ABP5BUD6.js";
+import {
+  layoutInlineHeader
+} from "./chunk-3DOQOXXI.js";
+import {
+  TITLE_FONT_SIZE,
+  TITLE_FONT_WEIGHT,
+  TITLE_Y
+} from "./chunk-VLC6WNRD.js";
+import {
+  renderIntegratedLegend
+} from "./chunk-LHL6HDUL.js";
+import {
+  getLegendExtent,
+  getMaxLegendReservedHeight
+} from "./chunk-FM3WAVB6.js";
+import {
+  FONT_FAMILY
+} from "./chunk-ICLB27PZ.js";
+import {
+  LEGEND_GROUP_GAP
+} from "./chunk-RH2PROYG.js";
+import {
+  measureText
+} from "./chunk-KAO7JL4I.js";
+import {
+  resolveTagColor,
+  tagAttrKey
+} from "./chunk-L5AFONQU.js";
+import {
+  contrastText,
+  getSeriesColors,
+  mix,
+  shapeFill,
+  themeBaseBg
+} from "./chunk-7HWY4QAJ.js";
+import {
+  resolveColor
+} from "./chunk-2M4IGSCY.js";
+
+// src/bracket/renderer.ts
+import * as d3Selection from "d3-selection";
+var PADDING = 16;
+var TITLE_BAND = 40;
+var HALF_SPAN = (BOX_H + PAIR_GAP) / 2;
+var COMMENT_LH = 15;
+var LEGEND_POSITION = {
+  placement: "top-center",
+  titleRelation: "below-title"
+};
+function clip(s, maxW, fs, bold) {
+  if (measureText(s, fs, { bold }) <= maxW) return s;
+  let lo = 0;
+  let hi = s.length;
+  while (lo < hi) {
+    const mid = Math.ceil((lo + hi) / 2);
+    if (measureText(s.slice(0, mid) + "\u2026", fs, { bold }) <= maxW) lo = mid;
+    else hi = mid - 1;
+  }
+  return lo <= 0 ? "" : s.slice(0, lo) + "\u2026";
+}
+function paintForAccent(palette, isDark, accent, fillMode) {
+  const base = themeBaseBg(palette, isDark);
+  return {
+    accent,
+    ink: palette.text,
+    muted: mix(palette.text, base, 52),
+    // Loser / TBD outlines + connectors are ink-based (not the pale border) so
+    // they stay legible on top of a colored, shaded column band.
+    hair: mix(palette.text, base, 34),
+    wire: mix(palette.text, base, 30),
+    track: mix(palette.border, base, 55),
+    // §1.9 fill family rides through shapeFill: solid ⇒ raw accent,
+    // outline ⇒ theme base bg (accent stays on the stroke), absent ⇒ 25% tint.
+    tint: shapeFill(palette, accent, isDark, { mode: fillMode })
+  };
+}
+function paintFor(palette, isDark, sideColor, fillMode) {
+  const accent = sideColor && resolveColor(sideColor, palette) || sideColor || getSeriesColors(palette)[0];
+  return paintForAccent(palette, isDark, accent, fillMode);
+}
+function resolveBracketLegend(parsed, palette) {
+  const activeTag = parsed.activeTag;
+  const activeGroup = activeTag ? parsed.tagGroups.find((g) => tagAttrKey(g.name) === tagAttrKey(activeTag)) : void 0;
+  const legendGroups = activeGroup && !parsed.noLegend ? [
+    {
+      name: activeGroup.name,
+      entries: activeGroup.entries.map((e) => ({
+        value: e.value,
+        color: resolveColor(e.color, palette) ?? e.color
+      }))
+    }
+  ] : [];
+  return { activeGroup, legendGroups };
+}
+function bracketExportDimensions(parsed, palette) {
+  const layout = layoutBracket(parsed);
+  const width = layout.width + PADDING * 2;
+  const titleH = parsed.title ? TITLE_BAND : 0;
+  const { legendGroups } = resolveBracketLegend(parsed, palette);
+  const legendReserve = legendGroups.length > 0 ? getMaxLegendReservedHeight(
+    { groups: legendGroups, position: LEGEND_POSITION, mode: "export" },
+    width
+  ) + LEGEND_GROUP_GAP : 0;
+  const height = titleH + legendReserve + PADDING + layout.height + PADDING;
+  return { width, height };
+}
+function renderBracket(container, parsed, palette, isDark, exportDims) {
+  d3Selection.select(container).selectAll(":not([data-d3-tooltip])").remove();
+  if (parsed.error) return;
+  const layout = layoutBracket(parsed);
+  const width = exportDims?.width ?? container.clientWidth;
+  const height = exportDims?.height ?? container.clientHeight;
+  if (width <= 0 || height <= 0) return;
+  const showTitle = !!parsed.title;
+  const titleH = showTitle ? TITLE_BAND : 0;
+  const exportMode = exportDims !== void 0;
+  const seedByName = /* @__PURE__ */ new Map();
+  for (const s of parsed.seeds)
+    if (!seedByName.has(s.name)) seedByName.set(s.name, s.seed);
+  const activeTag = parsed.activeTag;
+  const activeKey = activeTag ? tagAttrKey(activeTag) : null;
+  const tagValueOf = (name) => {
+    if (!name || !activeKey) return null;
+    const meta = parsed.competitorMeta.get(name);
+    return meta?.[activeKey] ?? null;
+  };
+  const tagColorOf = (name) => {
+    if (!name || !activeTag) return null;
+    const meta = parsed.competitorMeta.get(name);
+    if (!meta || !activeKey || !meta[activeKey]) return null;
+    const c = resolveTagColor(meta, [...parsed.tagGroups], activeTag);
+    return c ? resolveColor(c, palette) ?? c : null;
+  };
+  const { activeGroup, legendGroups } = resolveBracketLegend(parsed, palette);
+  const legendReserve = legendGroups.length > 0 ? getMaxLegendReservedHeight(
+    { groups: legendGroups, position: LEGEND_POSITION, mode: "preview" },
+    width
+  ) + LEGEND_GROUP_GAP : 0;
+  const inlineRequested = parsed.legendInline === true;
+  const legendExtent = inlineRequested && legendGroups.length > 0 ? getLegendExtent(
+    {
+      groups: legendGroups,
+      position: {
+        placement: "top-center",
+        titleRelation: "inline-with-title"
+      },
+      mode: exportMode ? "export" : "preview"
+    },
+    { activeGroup: activeGroup?.name ?? null },
+    width
+  ) : { width: 0, height: 0 };
+  const header = layoutInlineHeader({
+    requested: inlineRequested,
+    title: parsed.title ?? "",
+    hasLegend: legendGroups.length > 0,
+    legendWidth: legendExtent.width,
+    legendHeight: legendExtent.height,
+    containerWidth: width,
+    titleBandHeight: titleH,
+    legendReserve,
+    titleBaselineY: TITLE_Y,
+    titleFontSize: TITLE_FONT_SIZE
+  });
+  const svg = d3Selection.select(container).append("svg").attr("width", width).attr("height", height).attr("viewBox", `0 0 ${width} ${height}`).attr("preserveAspectRatio", "xMidYMin meet").attr("xmlns", "http://www.w3.org/2000/svg").attr("class", "dgmo-bracket").attr("role", "img").attr(
+    "aria-label",
+    `Tournament bracket${parsed.title ? ` \u2014 ${parsed.title}` : ""}${layout.champion ? `, champion ${layout.champion}` : ""}`
+  ).style("font-family", FONT_FAMILY);
+  if (showTitle) {
+    const t = svg.append("text").attr("class", "chart-title").attr("x", header.titleX).attr("y", TITLE_Y).attr("text-anchor", header.titleAnchor).attr("fill", palette.text).attr("font-family", FONT_FAMILY).attr("font-size", TITLE_FONT_SIZE).attr("font-weight", TITLE_FONT_WEIGHT).text(parsed.title);
+    if (parsed.titleLineNumber !== null)
+      t.attr("data-line-number", parsed.titleLineNumber);
+  }
+  const areaY = (header.inline ? titleH : titleH + legendReserve) + PADDING;
+  const areaX = PADDING;
+  const areaW = Math.max(1, width - PADDING * 2);
+  const areaH = Math.max(1, height - areaY - PADDING);
+  const scale = Math.min(1, areaW / layout.width, areaH / layout.height);
+  const offsetX = areaX + (areaW - layout.width * scale) / 2;
+  const offsetY = areaY;
+  const root = svg.append("g").attr("class", "dgmo-bracket-body").attr("transform", `translate(${offsetX},${offsetY}) scale(${scale})`);
+  if (legendGroups.length > 0) {
+    const legendG = svg.append("g").attr("class", "dgmo-bracket-legend").attr(
+      "transform",
+      header.inline ? `translate(${header.legendX}, ${header.legendY})` : `translate(0, ${titleH})`
+    );
+    renderIntegratedLegend(legendG, {
+      groups: legendGroups,
+      palette: {
+        bg: palette.bg,
+        surface: palette.surface,
+        text: palette.text,
+        textMuted: palette.textMuted,
+        primary: palette.primary
+      },
+      isDark,
+      width,
+      mode: exportMode ? "export" : "preview",
+      position: {
+        placement: "top-center",
+        titleRelation: header.inline ? "inline-with-title" : "below-title"
+      },
+      activeGroup: activeGroup?.name ?? null
+    });
+  }
+  const baseAccent = parsed.accentColor ?? resolveColor("blue", palette) ?? getSeriesColors(palette)[0];
+  const fillMode = parsed.fillMode;
+  const basePaint = paintForAccent(palette, isDark, baseAccent, fillMode);
+  const sideColorByLabel = /* @__PURE__ */ new Map();
+  for (const s of parsed.sides) sideColorByLabel.set(s.label, s.color);
+  const sideBarH = layout.sideLabels.length ? 30 : 0;
+  const bandTop = sideBarH + 2;
+  const roundY = sideBarH + 24;
+  for (const col of layout.columns) {
+    if (!col.color) continue;
+    const covered = layout.sideLabels.some(
+      (s) => col.x >= s.x0 && col.x <= s.x1
+    );
+    const top = covered ? bandTop : 2;
+    const c = resolveColor(col.color, palette) ?? col.color;
+    root.append("rect").attr("x", col.x - BOX_W / 2 - 10).attr("y", top).attr("width", BOX_W + 20).attr("height", Math.max(0, layout.height - top)).attr("rx", 10).attr(
+      "fill",
+      fillMode === "outline" ? themeBaseBg(palette, isDark) : mix(c, palette.bg, isDark ? 12 : 8)
+    ).call((sel) => {
+      if (fillMode === "outline")
+        sel.attr("stroke", mix(c, palette.bg, 35)).attr("stroke-width", 1);
+    });
+  }
+  for (const s of layout.sideLabels) {
+    const c = s.color ? resolveColor(s.color, palette) ?? s.color : basePaint.accent;
+    root.append("rect").attr("x", s.x0 - 8).attr("y", 2).attr("width", s.x1 - s.x0 + 16).attr("height", 24).attr("rx", 8).attr(
+      "fill",
+      fillMode === "outline" ? themeBaseBg(palette, isDark) : mix(c, palette.bg, isDark ? 20 : 14)
+    ).attr("stroke", fillMode === "outline" ? c : mix(c, palette.bg, 55)).attr("stroke-width", 1);
+    root.append("text").attr("x", (s.x0 + s.x1) / 2).attr("y", 18).attr("text-anchor", "middle").attr("font-size", 13).attr("font-weight", "bold").attr("letter-spacing", 0.3).attr("fill", c).text(clip(s.label, s.x1 - s.x0, 13, true));
+  }
+  for (const col of layout.columns) {
+    const c = col.color ? resolveColor(col.color, palette) ?? col.color : basePaint.muted;
+    const covered = layout.sideLabels.some(
+      (s) => col.x >= s.x0 && col.x <= s.x1
+    );
+    root.append("text").attr("x", col.x).attr("y", covered ? roundY : 22).attr("text-anchor", "middle").attr("font-size", covered ? 14 : 15).attr("font-weight", "bold").attr("fill", c).attr("letter-spacing", 0.4).text(clip(col.label, BOX_W + 20, covered ? 14 : 15, true));
+  }
+  for (const m of layout.matches) {
+    drawConnector(root, m, m.topFrom, m.y - HALF_SPAN, basePaint);
+    drawConnector(root, m, m.botFrom, m.y + HALF_SPAN, basePaint);
+  }
+  for (const m of layout.matches) {
+    const sidePaint = m.side && sideColorByLabel.get(m.side) ? paintFor(palette, isDark, sideColorByLabel.get(m.side), fillMode) : basePaint;
+    const topSeed = seedByName.get(m.top ?? "") ?? null;
+    const botSeed = seedByName.get(m.bot ?? "") ?? null;
+    let homeName = m.home;
+    if (!homeName && topSeed !== null && botSeed !== null) {
+      homeName = topSeed <= botSeed ? m.top : m.bot;
+    }
+    const [wSeed, lSeed] = m.winner === "top" ? [topSeed, botSeed] : m.winner === "bot" ? [botSeed, topSeed] : [null, null];
+    const isUpset = wSeed !== null && lSeed !== null && wSeed > lSeed && !m.isChampionship;
+    const scoreParts = m.score ? m.score.split(/[-–]/).map((p) => p.trim()) : null;
+    const winScore = scoreParts?.length === 2 ? scoreParts[0] : "";
+    const loseScore = scoreParts?.length === 2 ? scoreParts[1] : "";
+    const champWinner = m.isChampionship ? layout.champion : null;
+    const mkInfo = (side, name) => {
+      const isWinner = m.winner === side;
+      const isLoser = m.winner !== null && m.winner !== side;
+      return {
+        isWinner,
+        isLoser,
+        pending: m.pending,
+        isChampion: champWinner !== null && isWinner,
+        score: isWinner ? winScore : isLoser ? loseScore : "",
+        seed: seedByName.get(name ?? "") ?? null,
+        tagColor: tagColorOf(name),
+        tagValue: tagValueOf(name),
+        isHome: homeName !== null && homeName === name
+      };
+    };
+    drawBox(
+      root,
+      m.x,
+      m.y - HALF_SPAN,
+      m.top,
+      mkInfo("top", m.top),
+      sidePaint,
+      palette,
+      isDark,
+      m,
+      activeKey,
+      fillMode
+    );
+    drawBox(
+      root,
+      m.x,
+      m.y + HALF_SPAN,
+      m.bot,
+      mkInfo("bot", m.bot),
+      sidePaint,
+      palette,
+      isDark,
+      m,
+      activeKey,
+      fillMode
+    );
+    if (isUpset) drawUpset(root, m, sidePaint);
+    if (m.commentary.length) drawCommentary(root, m, palette);
+  }
+}
+function drawConnector(g, m, from, toCy, paint) {
+  if (!from) return;
+  const parentLeft = m.x - BOX_W / 2;
+  const parentRight = m.x + BOX_W / 2;
+  const childIsLeft = from.x < m.x;
+  const childEdge = childIsLeft ? from.x + BOX_W / 2 : from.x - BOX_W / 2;
+  const parentEdge = childIsLeft ? parentLeft : parentRight;
+  const midX = (childEdge + parentEdge) / 2;
+  const vLo = Math.min(from.yA, from.yB, toCy);
+  const vHi = Math.max(from.yA, from.yB, toCy);
+  const d = from.yA !== from.yB ? `M ${childEdge} ${from.yA} H ${midX} M ${childEdge} ${from.yB} H ${midX} M ${midX} ${vLo} V ${vHi} M ${midX} ${toCy} H ${parentEdge}` : `M ${childEdge} ${from.y} H ${midX} V ${toCy} H ${parentEdge}`;
+  g.append("path").attr("d", d).attr("fill", "none").attr("stroke", paint.wire).attr("stroke-width", 1.5);
+}
+function drawBox(g, cx, cy, name, info, sidePaint, palette, isDark, m, activeKey, fillMode) {
+  const x = cx - BOX_W / 2;
+  const y = cy - BOX_H / 2;
+  const paint = info.tagColor ? paintForAccent(palette, isDark, info.tagColor, fillMode) : sidePaint;
+  const cell = g.append("g").attr("class", "dgmo-bracket-box");
+  if (m.lineNumber !== null) cell.attr("data-line-number", m.lineNumber);
+  if (activeKey && info.tagValue)
+    cell.attr(`data-tag-${activeKey}`, info.tagValue.toLowerCase());
+  const isTBD = name === null;
+  let fill = "none";
+  let stroke = paint.hair;
+  let sw = 1.25;
+  let dash = null;
+  let textColor = paint.ink;
+  let weight = "bold";
+  if (info.isChampion) {
+    fill = paint.tint;
+    stroke = paint.accent;
+    sw = 3;
+    weight = "bold";
+  } else if (isTBD) {
+    fill = paint.track;
+    dash = "4 4";
+    textColor = paint.muted;
+    weight = "normal";
+  } else if (info.isWinner) {
+    fill = paint.tint;
+    stroke = paint.accent;
+    sw = 2;
+    weight = "bold";
+  } else if (info.isLoser) {
+    stroke = paint.hair;
+    textColor = paint.muted;
+    weight = "normal";
+  } else if (info.pending) {
+    stroke = mix(paint.accent, paint.hair, 50);
+  }
+  const onSolid = fillMode === "solid" && (info.isChampion || info.isWinner) ? contrastText(
+    paint.tint,
+    palette.textOnFillLight,
+    palette.textOnFillDark
+  ) : null;
+  if (onSolid) textColor = onSolid;
+  const gutterColor = onSolid ?? paint.muted;
+  const rect = cell.append("rect").attr("x", x).attr("y", y).attr("width", BOX_W).attr("height", BOX_H).attr("rx", 6).attr("fill", fill).attr("stroke", stroke).attr("stroke-width", sw);
+  if (dash) rect.attr("stroke-dasharray", dash);
+  let leftPad = 11;
+  if (info.seed !== null) {
+    cell.append("text").attr("x", x + 9).attr("y", cy + 4).attr("text-anchor", "start").attr("font-size", 10).attr("font-weight", "bold").attr("fill", gutterColor).text(info.seed);
+    leftPad = 9 + Math.max(12, measureText(String(info.seed), 10, { bold: true })) + 6;
+  }
+  let rightPad = 11;
+  if (info.score) rightPad += 20;
+  if (info.isHome) {
+    drawHome(cell, x + BOX_W - rightPad - 6, cy, gutterColor);
+    rightPad += 16;
+  }
+  cell.append("text").attr("x", x + leftPad).attr("y", cy + 4).attr("text-anchor", "start").attr("font-size", 12.5).attr("font-weight", weight).attr("fill", textColor).text(
+    clip(
+      isTBD ? "TBD" : name,
+      BOX_W - leftPad - rightPad,
+      12.5,
+      weight === "bold"
+    )
+  );
+  if (info.score) {
+    cell.append("text").attr("x", x + BOX_W - 11).attr("y", cy + 4).attr("text-anchor", "end").attr("font-size", 12).attr("font-weight", info.isWinner ? "bold" : "normal").attr("fill", info.isWinner ? textColor : gutterColor).text(info.score);
+  }
+}
+function drawHome(cell, hx, cy, color) {
+  const s = 5;
+  const yTop = cy - s - 1;
+  const d = `M ${hx - s} ${cy - 1} L ${hx} ${yTop} L ${hx + s} ${cy - 1} L ${hx + s} ${cy + s} L ${hx - s} ${cy + s} Z`;
+  cell.append("path").attr("d", d).attr("fill", "none").attr("stroke", color).attr("stroke-width", 1.2).attr("stroke-linejoin", "round");
+}
+function drawUpset(g, m, paint) {
+  g.append("text").attr("x", m.x + BOX_W / 2).attr("y", m.y - HALF_SPAN - BOX_H / 2 - 4).attr("text-anchor", "end").attr("font-size", 9).attr("font-weight", "bold").attr("letter-spacing", 0.6).attr("fill", paint.accent).text("UPSET");
+}
+function drawCommentary(g, m, palette) {
+  const x = m.x - BOX_W / 2 + 2;
+  let y = m.y + HALF_SPAN + BOX_H / 2 + 13;
+  const muted = mix(palette.text, palette.bg, 45);
+  const bulletW = measureText("\u2022 ", 11);
+  const emit = (line, lx) => {
+    const t = g.append("text").attr("x", lx).attr("y", y).attr("text-anchor", "start").attr("font-size", 11).attr("font-style", "italic").attr("fill", muted);
+    renderInlineText(t, line, palette, 11);
+    y += COMMENT_LH;
+  };
+  for (const raw of m.commentary) {
+    const isBullet = raw.startsWith("\u2022 ");
+    if (isBullet) {
+      const body = raw.slice(2);
+      wrapText(body, COMMENT_W - bulletW, 11).forEach(
+        (line, i) => i === 0 ? emit(`\u2022 ${line}`, x) : emit(line, x + bulletW)
+      );
+    } else {
+      for (const line of wrapText(raw, COMMENT_W, 11)) emit(line, x);
+    }
+  }
+}
+function renderBracketForExport(container, parsed, palette, isDark, exportDims) {
+  renderBracket(container, parsed, palette, isDark, exportDims);
+}
+
+export {
+  bracketExportDimensions,
+  renderBracket,
+  renderBracketForExport
+};

package/dist/index.js

@@ -14,7 +14,8 @@ import {
 } from "./chunk-Z6DXWULM.js";
 import {
   render
-} from "./chunk-PJQZWJ5I.js";
+} from "./chunk-VW52W5F6.js";
+import "./chunk-ABP5BUD6.js";
 import {
   renderErrorCard
 } from "./chunk-D4M25W6R.js";
@@ -37,7 +38,7 @@ import "./chunk-KMU65FYM.js";
 import "./chunk-EPDBWATV.js";
 import "./chunk-7UDAIP6W.js";
 import "./chunk-2CW5ZTNH.js";
-import "./chunk-LPXC4I4R.js";
+import "./chunk-JLETTWUJ.js";
 import "./chunk-YRYKTYMQ.js";
 import "./chunk-24YPR5EH.js";
 import {

package/dist/{renderer-NX4YKWCJ.js → renderer-RNCYODNF.js}

@@ -1,7 +1,7 @@
 import {
   buildTagLaneRowList,
   renderGantt
-} from "./chunk-AGO3PFGS.js";
+} from "./chunk-MVCPO6LI.js";
 import "./chunk-YRYKTYMQ.js";
 import "./chunk-24YPR5EH.js";
 import "./chunk-XCKNFFKM.js";

package/dist/{renderer-3CTUWCO7.js → renderer-TPOZOAXR.js}

@@ -3,12 +3,12 @@ import {
   focusEventLine,
   renderEventLine,
   renderEventLineForExport
-} from "./chunk-FBKPSU3A.js";
+} from "./chunk-5LD7SHXO.js";
 import "./chunk-NPWVOFB3.js";
 import "./chunk-R2K5L4UA.js";
 import "./chunk-S7W75MIM.js";
 import "./chunk-Z6DXWULM.js";
-import "./chunk-LPXC4I4R.js";
+import "./chunk-JLETTWUJ.js";
 import "./chunk-YRYKTYMQ.js";
 import "./chunk-24YPR5EH.js";
 import "./chunk-XCKNFFKM.js";

package/dist/{renderer-ELYPDPNF.js → renderer-XUPLAO4B.js}

@@ -2,9 +2,10 @@ import {
   bracketExportDimensions,
   renderBracket,
   renderBracketForExport
-} from "./chunk-Q2U5635V.js";
+} from "./chunk-WXPBP4IT.js";
 import "./chunk-S7W75MIM.js";
 import "./chunk-Z6DXWULM.js";
+import "./chunk-ABP5BUD6.js";
 import "./chunk-3DOQOXXI.js";
 import "./chunk-VLC6WNRD.js";
 import "./chunk-LHL6HDUL.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diagrammo/dgmo",
-  "version": "0.87.0",
+  "version": "0.88.0",
   "description": "DGMO diagram markup language — parser, renderer, and color system",
   "license": "MIT",
   "author": "Diagrammo LLC",