@graphty/graph-io 0.3.48 → 0.3.50

package/dist/chunks/{emit-CD8xnY8s.js → emit-7Jkpg0yd.js}

@@ -1,4 +1,5 @@
-import { a as STYLE_ISSUE, i as num6, l as canonEnum, W as CSS_COLORS, u as StyleNotes, d as canonicalFor, p as plainCell, Q as evalContinuous, R as numberOf, e as degreeValues, L as refSource, C as STYLE_PROPERTIES, O as resolveRules, P as matches } from "./block-Cu22ewuS.js";
+import { i as num6, a as canonEnum, b as STYLE_ISSUE, d as canonColor, _ as CSS_COLORS, h as StyleNotes, C as canonicalFor, p as plainCell, W as evalContinuous, X as numberOf, D as degreeValues, Q as refSource, w as STYLE_PROPERTIES, U as resolveRules, V as matches } from "./block-yl0f_qLO.js";
+import { d as canonBends, c as canonNodeOffsets, a as flattenQuadSpline } from "./bends-BGXjv_U4.js";
 const STYLE_WORK_BUDGET = 2e8;
 class StyleBudget {
   #used = { node: 0, edge: 0 };
@@ -41,6 +42,7 @@ const CYJS_PROPERTY_DEFAULTS = /* @__PURE__ */ new Map([
   ["background-opacity", "1"],
   ["opacity", "1"],
   ["border-color", "rgb(0,0,0)"],
+  ["border-opacity", "1"],
   ["border-width", "0px"],
   ["border-style", "solid"],
   ["shape", "ellipse"],
@@ -56,6 +58,8 @@ const CYJS_PROPERTY_DEFAULTS = /* @__PURE__ */ new Map([
   ["display", "element"],
   ["text-valign", "top"],
   ["text-halign", "center"],
+  ["text-wrap", "none"],
+  ["text-max-width", "9999px"],
   ["line-color", "rgb(153,153,153)"],
   ["line-style", "solid"],
   ["target-arrow-shape", "none"],
@@ -74,6 +78,7 @@ const CYJS_DEFAULT_STYLESHEET = [
     selector: ":parent",
     style: {
       shape: "rectangle",
+      padding: "10px",
       "background-color": "rgb(238,238,238)",
       "border-color": "rgb(204,204,204)",
       "border-width": "1px"
@@ -96,6 +101,239 @@ const CYJS_DEFAULT_STYLESHEET = [
     style: { "background-color": "rgb(204,225,249)", "border-color": "rgb(174,200,229)" }
   }
 ];
+const PIECES = 16;
+const text = (property) => ({ property, type: "text" });
+const color = (property) => ({ property, type: "color" });
+const CYJS_FACE_PROPERTIES = [
+  ["background-image", text("_bgImage")],
+  ["background-fit", text("_bgFit")],
+  ["background-width", text("_bgWidth")],
+  ["background-height", text("_bgHeight")],
+  ["background-width-relative-to", text("_bgWidthRel")],
+  ["background-height-relative-to", text("_bgHeightRel")],
+  ["background-position-x", text("_bgPosX")],
+  ["background-position-y", text("_bgPosY")],
+  ["background-offset-x", text("_bgOffX")],
+  ["background-offset-y", text("_bgOffY")],
+  ["background-repeat", text("_bgRepeat")],
+  ["background-clip", text("_bgClip")],
+  ["background-image-smoothing", text("_bgSmooth")],
+  ["background-image-opacity", text("_bgOpacity")],
+  ["pie-size", text("_pieSize")],
+  ["pie-hole", text("_pieHole")],
+  ["pie-start-angle", text("_pieStart")],
+  ["stripe-size", text("_stripeSize")],
+  ["stripe-direction", text("_stripeDir")],
+  ...Array.from({ length: PIECES }, (_, k) => [
+    [`pie-${String(k + 1)}-background-color`, color(`_pieC${String(k + 1)}`)],
+    [`pie-${String(k + 1)}-background-size`, text(`_pieS${String(k + 1)}`)],
+    [`pie-${String(k + 1)}-background-opacity`, text(`_pieO${String(k + 1)}`)],
+    [`stripe-${String(k + 1)}-background-color`, color(`_stripeC${String(k + 1)}`)],
+    [`stripe-${String(k + 1)}-background-size`, text(`_stripeS${String(k + 1)}`)],
+    [`stripe-${String(k + 1)}-background-opacity`, text(`_stripeO${String(k + 1)}`)]
+  ]).flat()
+];
+function measure(word) {
+  const m = /^(-?(?:\d+(?:\.\d+)?|\.\d+)(?:e[+-]?\d+)?)\s*([a-z%]*)$/i.exec((word ?? "").trim());
+  return m === null ? null : [Number(m[1]), m[2].toLowerCase()];
+}
+const r6 = (v) => Math.round(v * 1e6) / 1e6;
+function length(word, of) {
+  const m = measure(word);
+  if (m === null) {
+    return null;
+  }
+  let out = null;
+  if (m[1] === "%") {
+    out = of === null ? null : m[0] / 100 * of;
+  } else if (m[1] === "px" || m[1] === "") {
+    out = m[0];
+  }
+  return out === null || out < 0 ? null : r6(out);
+}
+function paddingPixels(word) {
+  const x = Number.parseFloat(word ?? "");
+  if (!Number.isFinite(x) || x <= 0) {
+    return 0;
+  }
+  return (word ?? "").trim().endsWith("%") ? x / 100 : x;
+}
+function fraction(word) {
+  const m = measure(word);
+  if (m === null) {
+    return null;
+  }
+  if (m[1] === "%") {
+    return r6(m[0] / 100);
+  }
+  return m[1] === "" ? r6(m[0]) : null;
+}
+function firstImage(word) {
+  const first = (word ?? "").trim().split(/\s+/)[0] ?? "";
+  const unwrapped = /^url\((['"]?)(.*)\1\)$/.exec(first)?.[2] ?? first;
+  return unwrapped === "" || unwrapped === "none" ? null : unwrapped;
+}
+function degrees(word) {
+  const m = measure(word);
+  if (m === null) {
+    return null;
+  }
+  if (m[1] !== "rad" && m[1] !== "deg" && m[1] !== "") {
+    return null;
+  }
+  const deg = m[1] === "rad" ? m[0] * 180 / Math.PI : m[0];
+  return r6((deg % 360 + 360) % 360);
+}
+function pieces(words, prefix, i) {
+  const colors = [];
+  const sizes = [];
+  const opacities = [];
+  for (let k = 1; k <= PIECES; k++) {
+    const m = measure(words.get(`${prefix}S${String(k)}`)?.[i]);
+    const size = m !== null && (m[1] === "%" || m[1] === "") ? r6(m[0] / 100) : null;
+    if (size === null || size <= 0) {
+      continue;
+    }
+    colors.push(words.get(`${prefix}C${String(k)}`)?.[i] ?? "#000000");
+    sizes.push(String(size));
+    const o = Number(words.get(`${prefix}O${String(k)}`)?.[i] ?? "1");
+    opacities.push(String(Number.isFinite(o) ? Math.max(0, Math.min(1, o)) : 1));
+  }
+  if (colors.length === 0) {
+    return null;
+  }
+  return {
+    colors: colors.join(" "),
+    sizes: sizes.join(" "),
+    opacities: opacities.every((o) => o === "1") ? null : opacities.join(" ")
+  };
+}
+function combineFace(n, words, values) {
+  const col = (property) => values[property] ??= new Array(n).fill(null);
+  const num = (property, i) => {
+    const v = values[property]?.[i];
+    return typeof v === "number" ? v : null;
+  };
+  for (let i = 0; i < n; i++) {
+    const el = {
+      word: (part) => words.get(part)?.[i] ?? null,
+      put: (property, value) => {
+        col(property)[i] = value;
+      },
+      // Cytoscape.js's default node is 30 x 30
+      w: num("width", i) ?? 30,
+      h: num("height", i) ?? 30
+    };
+    faceImage(el);
+    const pie = pieces(words, "_pie", i);
+    if (pie !== null) {
+      facePie(el, pie);
+    }
+    const stripe = pieces(words, "_stripe", i);
+    if (stripe !== null) {
+      faceStripes(el, stripe);
+    }
+  }
+}
+function faceImage(el) {
+  const image = firstImage(el.word("_bgImage"));
+  if (image === null) {
+    return;
+  }
+  el.put("image", image);
+  const fit = el.word("_bgFit") ?? "none";
+  el.put("imageFit", ["none", "contain", "cover"].includes(fit) ? fit : "none");
+  imageSize(el);
+  imagePlace(el);
+  imageLook(el);
+}
+function imageSize(el) {
+  const pad = paddingPixels(el.word("_padding"));
+  const of = (rel, side) => rel === "inner" ? side : side + 2 * pad;
+  const tiled = ["repeat", "repeat-x", "repeat-y"].includes(el.word("_bgRepeat") ?? "");
+  const bw = tiled ? null : length(el.word("_bgWidth"), of(el.word("_bgWidthRel"), el.w));
+  const bh = tiled ? null : length(el.word("_bgHeight"), of(el.word("_bgHeightRel"), el.h));
+  if (bw !== null) {
+    el.put("imageWidth", bw);
+  }
+  if (bh !== null) {
+    el.put("imageHeight", bh);
+  }
+  if (bw === null !== (bh === null)) {
+    el.put("imageAutoSize", "natural");
+  }
+}
+function imagePlace(el) {
+  const px = fraction(el.word("_bgPosX"));
+  const py = fraction(el.word("_bgPosY"));
+  if (px !== null && px >= 0) {
+    el.put("imagePositionX", px);
+  }
+  if (py !== null && py >= 0) {
+    el.put("imagePositionY", py);
+  }
+  const ox = length(el.word("_bgOffX"), el.w);
+  const oy = length(el.word("_bgOffY"), el.h);
+  if (ox !== null) {
+    el.put("imageOffsetX", ox);
+  }
+  if (oy !== null) {
+    el.put("imageOffsetY", oy);
+  }
+}
+function imageLook(el) {
+  const repeat = el.word("_bgRepeat");
+  if (repeat !== null && ["repeat", "repeat-x", "repeat-y", "no-repeat"].includes(repeat)) {
+    el.put("imageRepeat", repeat);
+  }
+  const clip = el.word("_bgClip");
+  if (clip !== null) {
+    el.put("imageClip", clip === "none" ? "none" : "node");
+  }
+  const smooth = el.word("_bgSmooth");
+  if (smooth === "yes" || smooth === "no") {
+    el.put("imageSmoothing", smooth === "yes");
+  }
+  const opacity = Number(el.word("_bgOpacity") ?? Number.NaN);
+  if (Number.isFinite(opacity)) {
+    el.put("imageOpacity", Math.max(0, Math.min(1, opacity)));
+  }
+}
+function facePie(el, pie) {
+  el.put("pieColors", pie.colors);
+  el.put("pieSizes", pie.sizes);
+  if (pie.opacities !== null) {
+    el.put("pieOpacities", pie.opacities);
+  }
+  const size = el.word("_pieSize");
+  const px = measure(size)?.[1] === "px" ? length(size, null) : null;
+  const r = px === null ? fraction(size) : px / Math.min(el.w, el.h);
+  if (r !== null) {
+    el.put("pieRadius", r6(r));
+  }
+  const hole = fraction(el.word("_pieHole"));
+  if (hole !== null && hole >= 0 && hole <= 1) {
+    el.put("pieHole", hole);
+  }
+  const start = degrees(el.word("_pieStart"));
+  if (start !== null) {
+    el.put("pieRotation", start);
+  }
+}
+function faceStripes(el, stripe) {
+  el.put("stripeColors", stripe.colors);
+  el.put("stripeSizes", stripe.sizes);
+  if (stripe.opacities !== null) {
+    el.put("stripeOpacities", stripe.opacities);
+  }
+  if (el.word("_stripeDir") === "righward") {
+    el.put("stripeDirection", "right");
+  }
+  const size = fraction(el.word("_stripeSize"));
+  if (size !== null && size >= 0) {
+    el.put("stripeSize", size);
+  }
+}
 const NODE_SHAPES = [
   "rectangle",
   "roundrectangle",
@@ -166,7 +404,7 @@ const FONT_WEIGHTS = [
   800,
   900
 ];
-const CURVES = [
+const CYJS_CURVE_STYLES = [
   "bezier",
   "unbundled-bezier",
   "haystack",
@@ -195,18 +433,230 @@ const LABEL = [
   ["font-style", { property: "labelItalic", type: "enum", enums: ["italic", "normal", "oblique"] }],
   ["visibility", { property: "_visibility", type: "enum", enums: ["hidden", "visible"] }],
   ["display", { property: "_display", type: "enum", enums: ["element", "none"] }],
-  ["opacity", { property: "opacity", type: "zeroOne" }]
+  ["opacity", { property: "opacity", type: "zeroOne" }],
+  ["text-transform", { property: "_transform", type: "enum", enums: ["none", "uppercase", "lowercase"] }],
+  ["text-wrap", { property: "_wrap", type: "enum", enums: ["none", "wrap", "ellipsis"] }],
+  ["text-overflow-wrap", { property: "_overflowWrap", type: "enum", enums: ["whitespace", "anywhere"] }],
+  // how the lines line up; `auto` follows the horizontal alignment (`combineLabelText`)
+  ["text-justification", { property: "_justification", type: "enum", enums: ["auto", "left", "center", "right"] }],
+  // a width only `text-wrap: wrap` wraps at, so it is combined with the wrap afterward (`combineParts`)
+  ["text-max-width", { property: "_maxWidth", type: "size" }],
+  // the outline and the background box draw only with a width and an opacity (`combineLabelDress`)
+  ["text-outline-color", { property: "_outlineColor", type: "color" }],
+  ["text-outline-width", { property: "_outlineWidth", type: "size" }],
+  ["text-outline-opacity", { property: "_outlineOpacity", type: "zeroOne" }],
+  ["text-background-color", { property: "_backgroundColor", type: "color" }],
+  ["text-background-opacity", { property: "_backgroundOpacity", type: "zeroOne" }],
+  ["text-background-padding", { property: "_backgroundPadding", type: "size" }],
+  [
+    "text-background-shape",
+    {
+      property: "_backgroundShape",
+      type: "enum",
+      enums: ["rectangle", "round-rectangle", "roundrectangle", "circle"]
+    }
+  ],
+  ["text-rotation", { property: "_rotation", type: "text" }],
+  // the words' own opacity, drawn times the element's (`combineLabelOpacity`)
+  ["text-opacity", { property: "_textOpacity", type: "zeroOne" }],
+  // the label moved right and down by this many pixels from where its alignment puts it, a node's and an edge's
+  ["text-margin-x", { property: "labelOffsetX", type: "signedSize" }],
+  ["text-margin-y", { property: "labelOffsetY", type: "signedSize" }],
+  // the line round the label's box draws only with a width and an opacity above 0 (`combineLabelDress`)
+  ["text-border-color", { property: "_textBorderColor", type: "color" }],
+  ["text-border-width", { property: "_textBorderWidth", type: "size" }],
+  ["text-border-opacity", { property: "_textBorderOpacity", type: "zeroOne" }],
+  [
+    "text-border-style",
+    { property: "_textBorderStyle", type: "enum", enums: ["solid", "dotted", "dashed", "double"] }
+  ]
+];
+const GRADIENT_DIRECTIONS = [
+  "to-bottom",
+  "to-top",
+  "to-left",
+  "to-right",
+  "to-bottom-right",
+  "to-bottom-left",
+  "to-top-right",
+  "to-top-left",
+  "to-right-bottom",
+  "to-left-bottom",
+  "to-right-top",
+  "to-left-top"
 ];
+const EM_PX = 16;
+function cyjsPointsToNeutral(text2) {
+  const n = text2.trim().split(/[\s,]+/).map(Number);
+  if (n.length < 6 || n.length % 2 !== 0 || !n.every((v) => Number.isFinite(v))) {
+    return null;
+  }
+  const pairs = [];
+  for (let i = 0; i < n.length; i += 2) {
+    pairs.push(`${String(round6(n[i]))},${String(round6(-n[i + 1]))}`);
+  }
+  return pairs.join(" ");
+}
+function neutralPointsToCyjs(points) {
+  const n = points.trim().split(/[\s,]+/).map(Number);
+  if (n.length < 6 || n.length % 2 !== 0 || !n.every((v) => Number.isFinite(v))) {
+    return null;
+  }
+  const pairs = [];
+  for (let i = 0; i < n.length; i += 2) {
+    pairs.push(`${String(round6(n[i]))} ${String(round6(-n[i + 1]))}`);
+  }
+  return pairs.join(" ");
+}
+const round6 = (v) => Math.round(v * 1e6) / 1e6 + 0;
+function fittedHeptagon() {
+  const corners = Array.from({ length: 7 }, (_, i) => {
+    const angle = Math.PI / 2 + 2 * Math.PI * i / 7;
+    return [Math.cos(angle), Math.sin(angle)];
+  });
+  const [x0, x1] = [Math.min(...corners.map(([x]) => x)), Math.max(...corners.map(([x]) => x))];
+  const [y0, y1] = [Math.min(...corners.map(([, y]) => y)), Math.max(...corners.map(([, y]) => y))];
+  return corners.map(([x, y]) => `${round6(2 * (x - x0) / (x1 - x0) - 1)},${round6(2 * (y - y0) / (y1 - y0) - 1)}`).join(" ");
+}
+const CYJS_POLYGON_SHAPES = /* @__PURE__ */ new Map([
+  ["heptagon", fittedHeptagon()],
+  ["round-heptagon", fittedHeptagon()],
+  ["tag", "-1,-1 0.25,-1 1,0 0.25,1 -1,1"],
+  ["round-tag", "-1,-1 0.25,-1 1,0 0.25,1 -1,1"]
+]);
+const CYJS_ROUND_SHAPES = /* @__PURE__ */ new Set([
+  "round-triangle",
+  "round-diamond",
+  "round-pentagon",
+  "round-hexagon",
+  "round-octagon"
+]);
+function cyjsPolygonShapes(values) {
+  const { shape } = values;
+  const pointsOf = (v) => typeof v === "string" && v.startsWith("other:") ? CYJS_POLYGON_SHAPES.get(v.slice("other:".length)) : void 0;
+  if (Array.isArray(shape)) {
+    const col = shape;
+    if (!col.some((v) => pointsOf(v) !== void 0)) {
+      return;
+    }
+    const points = Array.isArray(values.shapePoints) ? [...values.shapePoints] : new Array(col.length).fill(null);
+    values.shape = col.map((v, i) => {
+      const p2 = pointsOf(v);
+      if (p2 === void 0) {
+        return v;
+      }
+      points[i] = p2;
+      return polygonOf(v);
+    });
+    values.shapePoints = points;
+    return;
+  }
+  const p = pointsOf(shape);
+  if (p !== void 0) {
+    values.shape = polygonOf(shape);
+    values.shapePoints = p;
+  }
+}
+function polygonOf(shape) {
+  return typeof shape === "string" && shape.startsWith("other:round-") ? "other:round-polygon" : "polygon";
+}
+const GRADIENT_KINDS = /* @__PURE__ */ new Map([
+  ["solid", "none"],
+  ["linear-gradient", "linear"],
+  ["radial-gradient", "radial"]
+]);
+function wordsOutsideParens(text2) {
+  const closes = new Array(text2.length + 1).fill(false);
+  for (let i2 = text2.length - 1; i2 >= 0; i2--) {
+    closes[i2] = text2[i2] === ")" || text2[i2] !== "(" && closes[i2 + 1];
+  }
+  const words = [];
+  let start = 0;
+  let i = 0;
+  while (i < text2.length) {
+    if (!/\s/.test(text2[i])) {
+      i++;
+      continue;
+    }
+    let end = i + 1;
+    while (end < text2.length && /\s/.test(text2[end])) {
+      end++;
+    }
+    if (!closes[end]) {
+      words.push(text2.slice(start, i));
+      start = end;
+    }
+    i = end;
+  }
+  words.push(text2.slice(start));
+  return words;
+}
+function gradientColors(text2, site) {
+  const hexes = [];
+  for (const token of wordsOutsideParens(text2.trim())) {
+    const c = token === "" ? null : canonColor(token, "css", site);
+    if (c === null) {
+      return void 0;
+    }
+    hexes.push(c.color);
+  }
+  return hexes.join(" ");
+}
+function gradientStopColors(text2, site) {
+  return gradientColors(text2, site)?.split(" ") ?? [];
+}
+function gradientStops(text2) {
+  const stops = text2.trim().split(/\s+/).map((t) => t.endsWith("%") ? Number.parseFloat(t) / 100 : Number.parseFloat(t));
+  return stops.every((n) => Number.isFinite(n)) ? stops.map((n) => num6(n)).join(" ") : void 0;
+}
+const HALVED = /* @__PURE__ */ new Set(["fanSpacing", "outerBorderOffset"]);
 const CYJS_NODE_PROPERTIES = new Map([
   ["background-color", { property: "fill", type: "color" }],
   ["background-opacity", { property: "fillOpacity", type: "zeroOne" }],
   ["border-color", { property: "borderColor", type: "color" }],
+  // the rings are drawn at their own opacity times the node's (`combineNodeOpacity`)
+  ["border-opacity", { property: "_ringOpacity", type: "zeroOne" }],
   ["border-width", { property: "borderWidth", type: "size" }],
   ["border-style", { property: "borderStyle", type: "enum", enums: ["solid", "dotted", "dashed", "double"] }],
+  // the dashes a dashed border is drawn with and their ends, which decide how it looks (`combineDashes`)
+  ["border-dash-pattern", { property: "_dashPattern", type: "text" }],
+  ["border-cap", { property: "_dashCap", type: "enum", enums: ["butt", "round", "square"] }],
+  // where the border sits against the node's outline: across it, inside it or outside it
+  ["border-position", { property: "borderPosition", type: "enum", enums: ["center", "inside", "outside"] }],
+  ["outline-color", { property: "outerBorderColor", type: "color" }],
+  ["outline-opacity", { property: "_outlineRingOpacity", type: "zeroOne" }],
+  ["outline-width", { property: "outerBorderWidth", type: "size" }],
+  ["outline-style", { property: "outerBorderStyle", type: "enum", enums: ["solid", "dotted", "dashed", "double"] }],
+  ["outline-offset", { property: "outerBorderOffset", type: "size" }],
+  ["underlay-color", { property: "underlayColor", type: "color" }],
+  ["underlay-opacity", { property: "underlayOpacity", type: "zeroOne" }],
+  ["underlay-padding", { property: "underlayPadding", type: "size" }],
+  ["underlay-shape", { property: "underlayShape", type: "enum", enums: NODE_SHAPES }],
+  ["underlay-corner-radius", { property: "underlayCornerRadius", type: "size" }],
+  ["overlay-color", { property: "overlayColor", type: "color" }],
+  ["overlay-opacity", { property: "overlayOpacity", type: "zeroOne" }],
+  ["overlay-padding", { property: "overlayPadding", type: "size" }],
+  ["overlay-shape", { property: "overlayShape", type: "enum", enums: NODE_SHAPES }],
+  ["overlay-corner-radius", { property: "overlayCornerRadius", type: "size" }],
   ["shape", { property: "shape", type: "enum", enums: NODE_SHAPES }],
+  ["shape-polygon-points", { property: "shapePoints", type: "text" }],
   ["corner-radius", { property: "cornerRadius", type: "size" }],
   ["width", { property: "width", type: "nodeSize" }],
   ["height", { property: "height", type: "nodeSize" }],
+  // a node is drawn this much larger on every side (`nodeSizes`)
+  ["padding", { property: "_padding", type: "text" }],
+  // how a compound parent is sized round its children (`groupBoxes`)
+  [
+    "padding-relative-to",
+    { property: "_paddingOf", type: "enum", enums: ["width", "height", "average", "min", "max"] }
+  ],
+  ["min-width", { property: "_minWidth", type: "text" }],
+  ["min-height", { property: "_minHeight", type: "text" }],
+  ["min-width-bias-left", { property: "_biasLeft", type: "text" }],
+  ["min-width-bias-right", { property: "_biasRight", type: "text" }],
+  ["min-height-bias-top", { property: "_biasTop", type: "text" }],
+  ["min-height-bias-bottom", { property: "_biasBottom", type: "text" }],
+  ["compound-sizing-wrt-labels", { property: "_compoundLabels", type: "enum", enums: ["include", "exclude"] }],
   [
     "text-valign",
     { property: "_valign", type: "enum", enums: ["top", "top-inside", "center", "bottom", "bottom-inside"] }
@@ -215,30 +665,108 @@ const CYJS_NODE_PROPERTIES = new Map([
     "text-halign",
     { property: "_halign", type: "enum", enums: ["left", "left-inside", "center", "right", "right-inside"] }
   ],
+  // the fill's gradient, combined afterward into `fill`, `fillGradient`, `fillGradientAngle` and the other
+  // `fillGradient*` properties
+  [
+    "background-fill",
+    { property: "_backgroundFill", type: "enum", enums: ["solid", "linear-gradient", "radial-gradient"] }
+  ],
+  ["background-gradient-stop-colors", { property: "_backgroundStops", type: "text" }],
+  ["background-gradient-stop-positions", { property: "_backgroundPositions", type: "text" }],
+  ["background-gradient-direction", { property: "_backgroundDirection", type: "enum", enums: GRADIENT_DIRECTIONS }],
+  ...CYJS_FACE_PROPERTIES,
   ...LABEL
 ]);
 const CYJS_EDGE_PROPERTIES = new Map([
   ["line-color", { property: "color", type: "color" }],
   ["width", { property: "width", type: "nodeSize" }],
   ["line-style", { property: "lineStyle", type: "enum", enums: ["solid", "dotted", "dashed"] }],
+  // the dashes a dashed line is drawn with and their ends, which decide how it looks (`combineDashes`)
+  ["line-dash-pattern", { property: "_dashPattern", type: "text" }],
+  ["line-cap", { property: "_dashCap", type: "enum", enums: ["butt", "round", "square"] }],
+  // the line's own opacity, combined afterward into `opacity`, which the line is drawn at
+  ["line-opacity", { property: "_lineOpacity", type: "zeroOne" }],
+  ["line-outline-width", { property: "outlineWidth", type: "size" }],
+  ["line-fill", { property: "gradientKind", type: "enum", enums: ["solid", "linear-gradient", "radial-gradient"] }],
+  ["line-gradient-stop-colors", { property: "gradientColors", type: "text" }],
+  ["line-gradient-stop-positions", { property: "gradientStops", type: "text" }],
+  ["line-outline-color", { property: "outlineColor", type: "color" }],
+  ["underlay-color", { property: "underlayColor", type: "color" }],
+  ["underlay-opacity", { property: "underlayOpacity", type: "zeroOne" }],
+  ["underlay-padding", { property: "underlayPadding", type: "size" }],
+  ["overlay-color", { property: "overlayColor", type: "color" }],
+  ["overlay-opacity", { property: "overlayOpacity", type: "zeroOne" }],
+  ["overlay-padding", { property: "overlayPadding", type: "size" }],
   ["target-arrow-shape", { property: "targetArrow", type: "enum", enums: ARROWS }],
   ["source-arrow-shape", { property: "sourceArrow", type: "enum", enums: ARROWS }],
   ["target-arrow-color", { property: "targetArrowColor", type: "color" }],
   ["source-arrow-color", { property: "sourceArrowColor", type: "color" }],
+  ["mid-target-arrow-shape", { property: "midTargetArrow", type: "enum", enums: ARROWS }],
+  ["mid-source-arrow-shape", { property: "midSourceArrow", type: "enum", enums: ARROWS }],
+  ["mid-target-arrow-color", { property: "midTargetArrowColor", type: "color" }],
+  ["mid-source-arrow-color", { property: "midSourceArrowColor", type: "color" }],
+  // filled or hollow: combined with the shape afterward (`combineParts`), a hollow triangle being `triangle-open`
   ["target-arrow-fill", { property: "_targetArrowFill", type: "enum", enums: ["filled", "hollow"] }],
   ["source-arrow-fill", { property: "_sourceArrowFill", type: "enum", enums: ["filled", "hollow"] }],
-  ["curve-style", { property: "curved", type: "enum", enums: CURVES }],
+  ["mid-target-arrow-fill", { property: "_midTargetArrowFill", type: "enum", enums: ["filled", "hollow"] }],
+  ["mid-source-arrow-fill", { property: "_midSourceArrowFill", type: "enum", enums: ["filled", "hollow"] }],
+  ["curve-style", { property: "curved", type: "enum", enums: CYJS_CURVE_STYLES }],
+  // a route's settings, read by the routes (`edgeRoutes`) as Cytoscape.js spells them
+  ["segment-distances", { property: "_segmentDistances", type: "text" }],
+  ["segment-weights", { property: "_segmentWeights", type: "text" }],
+  ["control-point-distances", { property: "_controlPointDistances", type: "text" }],
+  ["control-point-weights", { property: "_controlPointWeights", type: "text" }],
+  ["taxi-direction", { property: "_taxiDirection", type: "text" }],
+  ["taxi-turn", { property: "_taxiTurn", type: "text" }],
+  ["taxi-turn-min-distance", { property: "_taxiTurnMinDistance", type: "size" }],
+  ["edge-distances", { property: "_edgeDistances", type: "text" }],
+  ["loop-direction", { property: "_loopDirection", type: "text" }],
+  ["loop-sweep", { property: "_loopSweep", type: "text" }],
+  ["segment-radii", { property: "_segmentRadii", type: "text" }],
+  ["taxi-radius", { property: "_taxiRadius", type: "text" }],
+  ["radius-type", { property: "_radiusType", type: "text" }],
+  // where the ends meet the nodes, read with the routes (`edgePorts`)
+  ["source-endpoint", { property: "_sourceEndpoint", type: "text" }],
+  ["target-endpoint", { property: "_targetEndpoint", type: "text" }],
+  ["source-distance-from-node", { property: "sourceNodeGap", type: "size" }],
+  ["target-distance-from-node", { property: "targetNodeGap", type: "size" }],
+  // a bundle's control points are this far apart, so the curves' middles half of it (see cyjsNeutral)
+  ["control-point-step-size", { property: "fanSpacing", type: "size" }],
   ["arrow-scale", { property: "arrowSize", type: "positive" }],
   ["source-label", { property: "sourceLabel", type: "text" }],
   ["target-label", { property: "targetLabel", type: "text" }],
+  ["source-text-offset", { property: "sourceLabelOffset", type: "size" }],
+  ["target-text-offset", { property: "targetLabelOffset", type: "size" }],
+  ["source-text-margin-x", { property: "sourceLabelOffsetX", type: "signedSize" }],
+  ["source-text-margin-y", { property: "sourceLabelOffsetY", type: "signedSize" }],
+  ["target-text-margin-x", { property: "targetLabelOffsetX", type: "signedSize" }],
+  ["target-text-margin-y", { property: "targetLabelOffsetY", type: "signedSize" }],
+  // an angle, or autorotate along the line, which the routes work out (`autorotateLabels`)
+  ["source-text-rotation", { property: "_sourceRotation", type: "text" }],
+  ["target-text-rotation", { property: "_targetRotation", type: "text" }],
   ...LABEL
 ]);
 function cyjsProperties(target) {
   return target === "node" ? CYJS_NODE_PROPERTIES : CYJS_EDGE_PROPERTIES;
 }
+const CYJS_ALIASES = /* @__PURE__ */ new Map([
+  ["content", "label"],
+  ["control-point-distance", "control-point-distances"],
+  ["control-point-weight", "control-point-weights"],
+  ["segment-distance", "segment-distances"],
+  ["segment-weight", "segment-weights"],
+  ["segment-radius", "segment-radii"],
+  ["edge-text-rotation", "text-rotation"],
+  ["padding-left", "padding"],
+  ["padding-right", "padding"],
+  ["padding-top", "padding"],
+  ["padding-bottom", "padding"]
+]);
+function cyjsAliasOf(dashed) {
+  return CYJS_ALIASES.get(dashed) ?? dashed;
+}
 function cyjsPropertyName(name) {
-  const dashed = name.replaceAll(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
-  return dashed === "content" ? "label" : dashed;
+  return cyjsAliasOf(name.replaceAll(/[A-Z]/g, (c) => `-${c.toLowerCase()}`));
 }
 const CYJS_THROWS = "throws";
 const NUM = String.raw`[-+]?(?:(?:\d+|\d*\.\d+)(?:[Ee][+-]?\d+)?)`;
@@ -361,8 +889,8 @@ function isFontChar(c) {
 function isSpace$1(c) {
   return /\s/.test(c);
 }
-function allOf(text, test) {
-  return Array.from(text).every(test);
+function allOf(text2, test) {
+  return Array.from(text2).every(test);
 }
 function firstFontPart(part) {
   let a = 0;
@@ -401,13 +929,14 @@ function parseFlat(spec, raw, rendered = false) {
       return ok ? { kind: "number", value: x, units: null, str: String(x) } : null;
     }
     case "size":
+    case "signedSize":
     case "nodeSize":
       return parseSizeValue(spec, value, raw);
     case "text":
       return { kind: "word", value: String(value), str: String(value) };
     case "fontFamily": {
-      const text = String(value);
-      return isFontFamily(text) ? { kind: "word", value: text, str: text } : null;
+      const text2 = String(value);
+      return isFontFamily(text2) ? { kind: "word", value: text2, str: text2 } : null;
     }
     case "fontWeight":
     case "enum": {
@@ -433,21 +962,21 @@ function parseColorValue(value) {
 }
 function parseSizeValue(spec, value, raw) {
   let units = "px";
-  let text = value;
+  let text2 = value;
   if (typeof value === "string") {
     const m = NUMBER_UNITS.exec(value);
     if (m === null) {
       units = null;
     } else {
-      text = m[1];
+      text2 = m[1];
       units = m.at(2) === "em" ? "em" : "px";
     }
   }
-  const x = Number.parseFloat(String(text));
+  const x = Number.parseFloat(String(text2));
   if (Number.isNaN(x)) {
     return spec.type === "nodeSize" && raw === "label" ? { kind: "word", value: "label", str: "label" } : null;
   }
-  return x < 0 ? null : { kind: "number", value: x, units, str: `${String(x)}${units ?? ""}` };
+  return x < 0 && spec.type !== "signedSize" ? null : { kind: "number", value: x, units, str: `${String(x)}${units ?? ""}` };
 }
 function splitArgs(inner) {
   const out = [];
@@ -518,7 +1047,7 @@ function parseMapData(spec, value, mode) {
   if (mode === "bypass") {
     return null;
   }
-  const numeric = spec.type === "zeroOne" || spec.type === "positive" || spec.type === "size" || spec.type === "nodeSize";
+  const numeric = spec.type === "zeroOne" || spec.type === "positive" || spec.type === "size" || spec.type === "signedSize" || spec.type === "nodeSize";
   if (spec.type !== "color" && !numeric) {
     return null;
   }
@@ -579,51 +1108,71 @@ function applyCyjsMapper(spec, m, data) {
   }
   return null;
 }
+function colorNeutral(v, site) {
+  if (v.rgb.some((c) => !Number.isFinite(c) || c < 0 || c > 255)) {
+    site.notes.add(STYLE_ISSUE.BAD_VALUE, site.target, site.property, {
+      sample: v.str,
+      element: site.element
+    });
+    return void 0;
+  }
+  return `#${v.rgb.map((c) => Math.round(c).toString(16).padStart(2, "0")).join("")}`;
+}
 function cyjsNeutral(spec, v, site) {
   switch (v.kind) {
-    case "color": {
-      if (v.rgb.some((c) => !Number.isFinite(c) || c < 0 || c > 255)) {
-        site.notes.add(STYLE_ISSUE.BAD_VALUE, site.target, site.property, {
-          sample: v.str,
-          element: site.element
-        });
-        return void 0;
-      }
-      return `#${v.rgb.map((c) => Math.round(c).toString(16).padStart(2, "0")).join("")}`;
-    }
+    case "color":
+      return colorNeutral(v, site);
     case "number":
-      if (v.units === "em") {
-        site.notes.add(STYLE_ISSUE.BAD_VALUE, site.target, site.property, {
-          sample: v.str,
-          element: site.element
-        });
-        return void 0;
-      }
-      return num6(v.value);
+      return num6((HALVED.has(spec.property) ? v.value / 2 : v.value) * (v.units === "em" ? EM_PX : 1));
   }
   const word = v.value;
   switch (spec.property) {
     case "width":
     case "height":
-      site.notes.add(STYLE_ISSUE.BAD_VALUE, site.target, site.property, { sample: v.str, element: site.element });
+      if (site.target === "edge") {
+        site.notes.add(STYLE_ISSUE.BAD_VALUE, site.target, site.property, {
+          sample: v.str,
+          element: site.element
+        });
+      }
       return void 0;
     case "label":
     case "sourceLabel":
     case "targetLabel":
     case "labelFont":
       return String(word);
+    case "gradientKind":
+      return GRADIENT_KINDS.get(String(word)) ?? void 0;
+    case "gradientColors":
+      return gradientColors(String(word), site);
+    case "gradientStops":
+      return gradientStops(String(word));
     case "labelItalic":
       return word === "italic" || word === "oblique";
     case "curved":
       return !STRAIGHT.has(String(word));
-    case "shape":
+    case "shapePoints":
+      return cyjsPointsToNeutral(String(word)) ?? void 0;
+    case "underlayShape":
+    case "overlayShape":
       return canonEnum("shape", String(word), "cytoscape-js", site) ?? void 0;
+    case "shape": {
+      const polygon = String(word).toLowerCase();
+      if (polygon === "polygon") {
+        return "polygon";
+      }
+      return CYJS_POLYGON_SHAPES.has(polygon) || CYJS_ROUND_SHAPES.has(polygon) ? `other:${polygon}` : canonEnum("shape", String(word), "cytoscape-js", site) ?? void 0;
+    }
     case "borderStyle":
       return canonEnum("borderStyle", String(word), "cytoscape-js", site) ?? void 0;
+    case "outerBorderStyle":
+      return word === "double" ? "solid" : canonEnum("borderStyle", String(word), "cytoscape-js", site) ?? void 0;
     case "lineStyle":
       return canonEnum("lineStyle", String(word), "cytoscape-js", site) ?? void 0;
     case "sourceArrow":
     case "targetArrow":
+    case "midSourceArrow":
+    case "midTargetArrow":
       return canonEnum("arrow", String(word), "cytoscape-js", site) ?? void 0;
     case "labelWeight":
       return canonEnum("weight", String(word), "cytoscape-js", site) ?? void 0;
@@ -642,6 +1191,236 @@ function cyjsRendered(target, name, str, site) {
   }
   return cyjsNeutral(spec, v, site);
 }
+function cyjsDashLook(dash, width, cap) {
+  const pairs = dash.length % 2 === 1 ? [...dash, ...dash] : [...dash];
+  const grow = cap === "butt" ? 0 : width;
+  const on = pairs.filter((_, i) => i % 2 === 0).map((d) => Math.max(0, d) + grow);
+  const off = pairs.filter((_, i) => i % 2 === 1).map((d) => Math.max(0, d - grow));
+  const sum = (xs) => xs.reduce((a, b) => a + b, 0);
+  if (sum(off) <= 0.1 * (sum(on) + sum(off))) {
+    return "solid";
+  }
+  if (on.every((d) => d <= Math.max(1, width) * 1.5)) {
+    return "dotted";
+  }
+  return Math.max(...on) >= 2 * Math.min(...on) ? "dash-dot" : "dashed";
+}
+function lengths(text2) {
+  const out = text2.trim().split(/\s+/).map((t) => Number.parseFloat(t));
+  return out.every((n) => Number.isFinite(n)) ? out : [];
+}
+function radians(text2) {
+  const t = text2.trim();
+  const x = Number.parseFloat(t);
+  return t.endsWith("deg") ? x * Math.PI / 180 : x;
+}
+function outlinePoint(node, toward) {
+  const [cx, cy] = node.center;
+  const dx = toward[0] - cx;
+  const dy = toward[1] - cy;
+  const [hw, hh] = [node.size[0] / 2, node.size[1] / 2];
+  if (dx === 0 && dy === 0 || hw <= 0 || hh <= 0) {
+    return node.center;
+  }
+  const t = node.ellipse ? 1 / Math.hypot(dx / hw, dy / hh) : Math.min(axisReach(dx, hw), axisReach(dy, hh));
+  return [cx + dx * t, cy + dy * t];
+}
+function axisReach(d, half) {
+  return d === 0 ? Infinity : half / Math.abs(d);
+}
+function measureLine(edge, src, tgt) {
+  const a0 = outlinePoint(src, tgt.center);
+  const b0 = outlinePoint(tgt, src.center);
+  const dx = b0[0] - a0[0];
+  const dy = b0[1] - a0[1];
+  const l = Math.hypot(dx, dy) || 1;
+  const normal = [-dy / l, dx / l];
+  return edge.edgeDistances === "node-position" ? { a: src.center, b: tgt.center, normal } : { a: a0, b: b0, normal };
+}
+function offsetPoints(line, weights, distances) {
+  const n = Math.min(weights.length, distances.length);
+  return Array.from({ length: n }, (_, s) => {
+    const w = weights[s];
+    const d = distances[s];
+    return [
+      line.a[0] * (1 - w) + line.b[0] * w + line.normal[0] * d,
+      line.a[1] * (1 - w) + line.b[1] * w + line.normal[1] * d
+    ];
+  });
+}
+function taxiPoints(edge, src, tgt) {
+  const body = edge.edgeDistances !== "node-position";
+  const [x1, y1] = src.center;
+  const [x2, y2] = tgt.center;
+  const [srcW, srcH] = src.size;
+  const [tgtW, tgtH] = tgt.size;
+  const pdx = x2 - x1;
+  const pdy = y2 - y1;
+  const dx = towardZero(pdx, body ? (srcW + tgtW) / 2 : 0);
+  const dy = towardZero(pdy, body ? (srcH + tgtH) / 2 : 0);
+  const raw = edge.taxiDirection ?? "auto";
+  const vertical = raw === "auto" ? Math.abs(dx) <= Math.abs(dy) : raw === "vertical" || raw === "upward" || raw === "downward";
+  const [along, pl] = vertical ? [dy, pdy] : [dx, pdx];
+  const { d, l, sgn, forced } = taxiTurn(edge, raw, along, pl);
+  const minD = edge.taxiTurnMinDistance ?? 10;
+  const tooClose = (v) => Math.abs(v) < minD || Math.abs(v) >= Math.abs(l);
+  if ((tooClose(d) || tooClose(Math.abs(l) - Math.abs(d))) && !forced) {
+    return taxiFallback(vertical, { x1, y1, x2, y2, pl, pdx, pdy }, src.size, tgt.size);
+  }
+  const srcAlong = vertical ? srcH : srcW;
+  const out = body ? srcAlong / 2 * sgn : 0;
+  if (vertical) {
+    const y = y1 + d + out;
+    return [
+      [x1, y],
+      [x2, y]
+    ];
+  }
+  const x = x1 + d + out;
+  return [
+    [x, y1],
+    [x, y2]
+  ];
+}
+function towardZero(v, gap) {
+  return v > 0 ? Math.max(v - gap, 0) : Math.min(v + gap, 0);
+}
+function taxiTurn(edge, raw, along, pl) {
+  const explicit = raw !== "auto" && raw !== "vertical" && raw !== "horizontal";
+  const turnText = (edge.taxiTurn ?? "50%").trim();
+  const percent = turnText.endsWith("%");
+  const turn = percent ? Number.parseFloat(turnText) / 100 : Number.parseFloat(turnText);
+  const forced = !(explicit && (percent || turn < 0)) && runsAgainst(raw, pl);
+  const sgn = forced ? -Math.sign(pl) : Math.sign(pl);
+  const l = forced ? sgn * Math.abs(along) : along;
+  if (percent) {
+    return { d: (turn < 0 ? 1 + turn : turn) * l, l, sgn, forced };
+  }
+  return { d: (turn < 0 ? l : 0) + turn * sgn, l, sgn, forced };
+}
+function runsAgainst(raw, pl) {
+  return raw === "downward" && pl < 0 || raw === "upward" && pl > 0 || raw === "leftward" && pl > 0 || raw === "rightward" && pl < 0;
+}
+function taxiFallback(vertical, p, srcSize, tgtSize) {
+  const { x1, y1, x2, y2, pl, pdx, pdy } = p;
+  const midX = (x1 + x2) / 2;
+  const midY = (y1 + y2) / 2;
+  if (vertical) {
+    if (Math.abs(pl) <= srcSize[1] / 2) {
+      return [
+        [midX, y1],
+        [midX, y2]
+      ];
+    }
+    if (Math.abs(pdx) <= tgtSize[0] / 2) {
+      return [
+        [x1, midY],
+        [x2, midY]
+      ];
+    }
+    return [[x1, y2]];
+  }
+  if (Math.abs(pl) <= srcSize[0] / 2) {
+    return [
+      [x1, midY],
+      [x2, midY]
+    ];
+  }
+  if (Math.abs(pdy) <= tgtSize[1] / 2) {
+    return [
+      [midX, y1],
+      [midX, y2]
+    ];
+  }
+  return [[x2, y1]];
+}
+function splinePoints(src, tgt, controls) {
+  const start = outlinePoint(src, controls[0]);
+  const end = outlinePoint(tgt, controls.at(-1) ?? tgt.center);
+  return flattenQuadSpline([start, ...controls, end], 0).slice(1, -1);
+}
+function cyjsRoute(edge, src, tgt, loopIndex) {
+  const style = edge.curveStyle;
+  if (style === "haystack") {
+    return null;
+  }
+  if (src === tgt) {
+    return loopRoute(edge, src, loopIndex);
+  }
+  let points = [];
+  if (style.endsWith("segments")) {
+    const distances = lengths(edge.segmentDistances ?? "20");
+    const weights = lengths(edge.segmentWeights ?? "0.5");
+    points = offsetPoints(measureLine(edge, src, tgt), weights, distances);
+  } else if (style.endsWith("taxi")) {
+    points = taxiPoints(edge, src, tgt);
+  } else if (style === "unbundled-bezier") {
+    const distances = lengths(edge.controlPointDistances ?? String(edge.controlPointStepSize ?? 40));
+    const weights = lengths(edge.controlPointWeights ?? "0.5");
+    const controls = offsetPoints(measureLine(edge, src, tgt), weights, distances);
+    points = controls.length === 0 ? [] : splinePoints(src, tgt, controls);
+  }
+  if (points.length > 0 && style.startsWith("round-")) {
+    const radii = lengths((style === "round-taxi" ? edge.taxiRadius : edge.segmentRadii) ?? "15");
+    const types = (edge.radiusType ?? "arc-radius").trim().split(/\s+/);
+    const start = outlinePoint(src, points[0]);
+    const end = outlinePoint(tgt, points.at(-1) ?? tgt.center);
+    points = roundedCorners([start, ...points, end], radii, types).slice(1, -1);
+  }
+  return points.length === 0 ? null : canonBends(src.center, tgt.center, points, true);
+}
+const ARC_STEPS = 8;
+function roundedCorners(line, radii, types) {
+  const out = [line[0]];
+  for (let i = 1; i < line.length - 1; i++) {
+    const [p, a, b] = [line[i], line[i - 1], line[i + 1]];
+    const r = radii[Math.min(i - 1, radii.length - 1)] ?? 15;
+    const arc = (types[Math.min(i - 1, types.length - 1)] ?? "arc-radius") !== "influence-radius";
+    const l1 = Math.hypot(a[0] - p[0], a[1] - p[1]);
+    const l2 = Math.hypot(b[0] - p[0], b[1] - p[1]);
+    const u1 = [(a[0] - p[0]) / l1, (a[1] - p[1]) / l1];
+    const u2 = [(b[0] - p[0]) / l2, (b[1] - p[1]) / l2];
+    const angle = Math.acos(Math.max(-1, Math.min(1, u1[0] * u2[0] + u1[1] * u2[1])));
+    const half = angle / 2;
+    const rounds = r > 0 && l1 > 0 && l2 > 0;
+    if (!rounds || Math.abs(Math.PI - angle) < 1e-6) {
+      out.push(p);
+      continue;
+    }
+    const limit = Math.min(l1 / 2, l2 / 2);
+    const back = Math.min(limit, arc ? r / Math.tan(half) : r);
+    const radius = back * Math.tan(half);
+    const bis = [u1[0] + u2[0], u1[1] + u2[1]];
+    const bl = Math.hypot(bis[0], bis[1]);
+    const reach = Math.hypot(back, radius);
+    const c = [p[0] + bis[0] / bl * reach, p[1] + bis[1] / bl * reach];
+    const from = Math.atan2(p[1] + u1[1] * back - c[1], p[0] + u1[0] * back - c[0]);
+    const to = Math.atan2(p[1] + u2[1] * back - c[1], p[0] + u2[0] * back - c[0]);
+    let sweep = to - from;
+    sweep -= 2 * Math.PI * Math.round(sweep / (2 * Math.PI));
+    for (let k = 0; k <= ARC_STEPS; k++) {
+      const t = from + sweep * k / ARC_STEPS;
+      out.push([c[0] + Math.cos(t) * radius, c[1] + Math.sin(t) * radius]);
+    }
+  }
+  out.push(line.at(-1) ?? line[0]);
+  return out;
+}
+function loopRoute(edge, node, loopIndex) {
+  const unbundled = edge.curveStyle === "unbundled-bezier";
+  const dist = unbundled ? lengths(edge.controlPointDistances ?? "").at(0) ?? Number.NaN : edge.controlPointStepSize ?? 40;
+  const dir = radians(edge.loopDirection ?? "-45deg");
+  const sweep = radians(edge.loopSweep ?? "-90deg");
+  if (!Number.isFinite(dist + dir + sweep)) {
+    return null;
+  }
+  const angle = dir - Math.PI / 2;
+  const reach = 1.4 * dist * (loopIndex / 3 + 1);
+  const [cx, cy] = node.center;
+  const at = (a) => [cx + Math.cos(a) * reach, cy + Math.sin(a) * reach];
+  const points = splinePoints(node, node, [at(angle - sweep / 2), at(angle + sweep / 2)]);
+  return canonNodeOffsets(node.center, node.box, points, true);
+}
 const CYJS_STATES = /* @__PURE__ */ new Set([
   "selected",
   "unselected",
@@ -688,8 +1467,8 @@ function isSpace(c) {
   return c !== void 0 && /\s/.test(c);
 }
 class Cursor {
-  constructor(text) {
-    this.text = text;
+  constructor(text2) {
+    this.text = text2;
     this.pos = 0;
   }
   /**
@@ -832,8 +1611,8 @@ function cleanMeta(raw) {
   }
   return out;
 }
-function splitOp(text) {
-  let op = text;
+function splitOp(text2) {
+  let op = text2;
   let not = false;
   let ci = false;
   if (op.includes("!")) {
@@ -1070,17 +1849,17 @@ function metaToken(c, i) {
   const { op: base, not, ci } = splitOp(op.text);
   return checkToken(c.spaceEnd(end) + 2, { type: "meta", field, op: base, not, ci, value });
 }
-function isBlank(text) {
-  return /^\s*$/.test(text.length > 1024 ? text.slice(0, 1024) : text) && text.trim() === "";
+function isBlank(text2) {
+  return /^\s*$/.test(text2.length > 1024 ? text2.slice(0, 1024) : text2) && text2.trim() === "";
 }
-function parseCyjsSelector(text) {
-  if (typeof text !== "string" || isBlank(text)) {
+function parseCyjsSelector(text2) {
+  if (typeof text2 !== "string" || isBlank(text2)) {
     return { queries: [], invalid: false };
   }
-  if (text.length > MAX_SELECTOR_LENGTH) {
+  if (text2.length > MAX_SELECTOR_LENGTH) {
     return { queries: [], invalid: true };
   }
-  const c = new Cursor(text);
+  const c = new Cursor(text2);
   const first = { checks: [] };
   const b = { queries: [first], subject: null, edgeCount: 0, compoundCount: 0, counts: [] };
   let current = first;
@@ -1098,7 +1877,7 @@ function parseCyjsSelector(text) {
       current = next;
     }
     c.pos = tok.end;
-    if (c.spaceEnd(c.pos) >= text.length) {
+    if (c.spaceEnd(c.pos) >= text2.length) {
       break;
     }
   }
@@ -1108,22 +1887,22 @@ function parseCyjsSelector(text) {
 }
 const LINE = /[\n\r\u2028\u2029]/;
 const SPACE = /\s/;
-function stripComments(text) {
+function stripComments(text2) {
   let out = "";
   let from = 0;
   for (; ; ) {
-    const open = text.indexOf("/*", from);
+    const open = text2.indexOf("/*", from);
     if (open < 0) {
       break;
     }
-    const close = text.indexOf("*/", open + 3);
+    const close = text2.indexOf("*/", open + 3);
     if (close < 0) {
       break;
     }
-    out += text.slice(from, open);
+    out += text2.slice(from, open);
     from = close + 2;
   }
-  return out + text.slice(from);
+  return out + text2.slice(from);
 }
 function skipSpace(s, i) {
   let j = i;
@@ -1180,8 +1959,8 @@ function nextNonSpace(s) {
   }
   return next;
 }
-function parseCyjsStylesheetText(text) {
-  const s = stripComments(text);
+function parseCyjsStylesheetText(text2) {
+  const s = stripComments(text2);
   const entries = [];
   let pos = 0;
   while (skipSpace(s, pos) < s.length) {
@@ -1282,14 +2061,14 @@ function parentsOf(nodes, ids) {
     if (raw === void 0 || raw === null) {
       continue;
     }
-    const text = typeof raw === "number" && !Number.isNaN(raw) ? String(raw) : raw;
-    const p = typeof text === "string" ? ids.get(text) : void 0;
+    const text2 = typeof raw === "number" && !Number.isNaN(raw) ? String(raw) : raw;
+    const p = typeof text2 === "string" ? ids.get(text2) : void 0;
     if (p === void 0 || p < 0) {
       nodes[i].overrides.set("parent", void 0);
       continue;
     }
     if (typeof raw === "number") {
-      nodes[i].overrides.set("parent", text);
+      nodes[i].overrides.set("parent", text2);
     }
     if (rootOf(p) === i) {
       nodes[i].overrides.set("parent", void 0);
@@ -1413,11 +2192,11 @@ function edgeEnds(e, ids, overrides) {
   const ends = [];
   for (const field of ["source", "target"]) {
     const raw = e.data[field];
-    const text = typeof raw === "number" && !Number.isNaN(raw) ? String(raw) : raw;
+    const text2 = typeof raw === "number" && !Number.isNaN(raw) ? String(raw) : raw;
     if (typeof raw === "number") {
-      overrides.set(field, text);
+      overrides.set(field, text2);
     }
-    const at = typeof text === "string" ? ids.get(text) : void 0;
+    const at = typeof text2 === "string" ? ids.get(text2) : void 0;
     if (at !== void 0) {
       ends.push(at);
     }
@@ -1971,6 +2750,16 @@ const POSITIONS = /* @__PURE__ */ new Map([
   ["bottom,center", "bottom"],
   ["bottom,right", "bottom-right"]
 ]);
+const INSIDE_POSITIONS = /* @__PURE__ */ new Map([
+  ["top,left", "inside-top-left"],
+  ["top,center", "inside-top"],
+  ["top,right", "inside-top-right"],
+  ["center,left", "inside-left"],
+  ["center,right", "inside-right"],
+  ["bottom,left", "inside-bottom-left"],
+  ["bottom,center", "inside-bottom"],
+  ["bottom,right", "inside-bottom-right"]
+]);
 function evaluateCytoscapeJs(input) {
   const notes = input.notes ?? new StyleNotes();
   const budget = input.budget ?? new StyleBudget();
@@ -2016,8 +2805,8 @@ function evaluateCytoscapeJs(input) {
     notes.add(STYLE_ISSUE.SELECTOR, null, "selector", { count: deep, sample: "nested too deep" });
   }
   const matcher = new Matcher(graph, notes);
-  const node = evaluateTarget("node", graph, sheet, matcher, input, notes, budget);
-  const edge = evaluateTarget("edge", graph, sheet, matcher, input, notes, budget);
+  const node = evaluateTarget("node", graph, sheet, matcher, input, { notes, budget, nodes: null });
+  const edge = evaluateTarget("edge", graph, sheet, matcher, input, { notes, budget, nodes: node });
   return { node, edge, graph };
 }
 function outputOrder(kind, graph, snapshot, notes) {
@@ -2069,7 +2858,8 @@ function cellsOf(cells, name, n) {
   }
   return c;
 }
-function evaluateTarget(kind, graph, sheet, matcher, input, notes, budget) {
+function evaluateTarget(kind, graph, sheet, matcher, input, env) {
+  const { notes, budget } = env;
   const els = kind === "node" ? graph.nodes : graph.edges;
   const spend = (ops) => {
     budget.spend(kind, ops);
@@ -2087,6 +2877,20 @@ function evaluateTarget(kind, graph, sheet, matcher, input, notes, budget) {
     forceLoopCurves(graph, cells.get("curve-style"));
   }
   const drawn = drawnValues(kind, els, cells, order, input.rendered, notes, spend);
+  if (kind === "edge" && input.toolDefaults !== false) {
+    const read = { kind, els, cells, order, rendered: input.rendered, notes };
+    const curves = drawnColumn(read, "curve-style", CURVE_PART);
+    noArrowsOnHaystacks(curves, drawn);
+    if (env.nodes !== null) {
+      edgeRoutes(graph, read, curves, env.nodes, drawn);
+    }
+  }
+  if (kind === "node") {
+    const read = { kind, els, cells, order, rendered: input.rendered, notes };
+    nodeSizes(graph, read, drawn);
+    groupBoxes(graph, read, drawn);
+    mixedLabelPlaces(graph, read, drawn);
+  }
   if (kind === "edge") {
     straightenUnpairedBeziers(graph, curveStyles(graph, cells, input.rendered), coreToOut, drawn.curved);
   }
@@ -2191,7 +2995,7 @@ function drawnValues(kind, els, cells, order, rendered, notes, spend) {
     if (spec.property.startsWith("_")) {
       words.set(
         spec.property,
-        col.map((v) => typeof v === "string" ? v : null)
+        col.map((v) => typeof v === "string" || typeof v === "number" ? String(v) : null)
       );
       continue;
     }
@@ -2204,6 +3008,9 @@ function drawnValues(kind, els, cells, order, rendered, notes, spend) {
     });
   }
   combineParts(kind, out, words, values, notes);
+  if (kind === "node") {
+    cyjsPolygonShapes(values);
+  }
   const drawn = {};
   for (const [p, col] of Object.entries(values)) {
     if (col.some((v) => v !== null)) {
@@ -2293,7 +3100,7 @@ function forceLoopCurves(graph, col) {
 function entryProperties(entry, kind, specs, notes, notCarried) {
   const out = [];
   for (const [name0, value] of entry.properties) {
-    const name = entry.dashOnly ? dashOnlyName(name0) : cyjsPropertyName(name0);
+    const name = entry.dashOnly ? cyjsAliasOf(name0) : cyjsPropertyName(name0);
     const spec = specs.get(name);
     if (spec === void 0) {
       if (kind === "node" && !CYJS_EDGE_ONLY.has(name) && !entry.tool) {
@@ -2312,22 +3119,38 @@ function entryProperties(entry, kind, specs, notes, notCarried) {
   }
   return out;
 }
-function dashOnlyName(name) {
-  return name === "content" ? "label" : name;
-}
 const CYJS_EDGE_ONLY = /* @__PURE__ */ new Set([
   "line-color",
   "line-style",
+  "line-outline-width",
+  "line-outline-color",
+  "line-fill",
+  "line-gradient-stop-colors",
+  "line-gradient-stop-positions",
   "target-arrow-shape",
   "source-arrow-shape",
   "target-arrow-color",
   "source-arrow-color",
+  "mid-target-arrow-shape",
+  "mid-source-arrow-shape",
+  "mid-target-arrow-color",
+  "mid-source-arrow-color",
   "target-arrow-fill",
   "source-arrow-fill",
   "curve-style",
   "arrow-scale",
   "source-label",
-  "target-label"
+  "target-label",
+  "source-text-offset",
+  "target-text-offset",
+  "source-text-margin-x",
+  "source-text-margin-y",
+  "target-text-margin-x",
+  "target-text-margin-y",
+  "source-text-rotation",
+  "target-text-rotation",
+  "source-distance-from-node",
+  "target-distance-from-node"
 ]);
 function matchList(sel, kind, n, matcher, ix) {
   if (sel.queries.length === 0) {
@@ -2408,84 +3231,757 @@ function neutralOfCell(spec, name, c, site) {
   return cyjsNeutral(spec, flat, site);
 }
 function combineParts(kind, n, words, values, notes) {
+  const whole = [...values.opacity ?? new Array(n).fill(null)];
+  combineLabelOpacity(n, words, values);
+  if (kind === "node") {
+    combineNodeOpacity(n, words, values);
+  }
   const va = words.get("_valign");
   const ha = words.get("_halign");
   if (kind === "node" && (va !== void 0 || ha !== void 0)) {
-    values.labelPosition = Array.from(
+    values.labelPosition = Array.from({ length: n }, (_, i) => labelPosition(va?.[i] ?? null, ha?.[i] ?? null));
+  }
+  const wrap = words.get("_wrap");
+  const maxWidth = words.get("_maxWidth");
+  const overflow = words.get("_overflowWrap");
+  if (wrap !== void 0) {
+    const cut = (i) => wrap[i] === "wrap" || wrap[i] === "ellipsis";
+    values.labelWrapWidth = Array.from(
       { length: n },
-      (_, i) => labelPosition(va?.[i] ?? null, ha?.[i] ?? null, (sample) => {
-        notes.add(STYLE_ISSUE.UNKNOWN_VALUE, kind, "labelPosition", { sample, element: i });
-      })
+      (_, i) => cut(i) && typeof maxWidth?.[i] === "string" ? Number(maxWidth[i]) : null
     );
+    if (wrap.includes("ellipsis")) {
+      values.labelWrapEllipsis = wrap.map((w) => w === "ellipsis" ? true : null);
+    }
+    if (overflow?.includes("anywhere") === true) {
+      values.labelWrapAnywhere = wrap.map((w, i) => w === "wrap" && overflow[i] === "anywhere" ? true : null);
+    }
   }
+  if (kind === "node") {
+    combineFace(n, words, values);
+    combineBackgroundGradient(n, words, values, notes);
+  } else {
+    combineArrowFills(n, words, values, notes);
+    combineLineOpacity(n, words.get("_lineOpacity"), values);
+  }
+  combineDashes(kind, n, words, values);
+  combineLabelText(kind, n, words, values);
+  combineLabelDress(kind, n, words, values, notes, whole);
+  combineVisibility(kind, n, words, values);
+}
+function combineLabelOpacity(n, words, values) {
+  const text2 = words.get("_textOpacity");
+  const whole = values.opacity;
+  if (text2 === void 0 && whole === void 0) {
+    return;
+  }
+  const col = new Array(n).fill(null);
+  for (let i = 0; i < n; i++) {
+    const t = text2?.[i] ?? null;
+    const o = whole?.[i];
+    const v = Math.round((t === null ? 1 : Number(t)) * (typeof o === "number" ? o : 1) * 1e6) / 1e6;
+    col[i] = v === 1 || !Number.isFinite(v) ? null : v;
+  }
+  values.labelOpacity = col;
+}
+function combineNodeOpacity(n, words, values) {
+  const whole = values.opacity;
+  for (const [part, p] of [
+    ["_ringOpacity", "borderOpacity"],
+    ["_outlineRingOpacity", "outerBorderOpacity"]
+  ]) {
+    const own = words.get(part);
+    if (own === void 0 && whole === void 0) {
+      continue;
+    }
+    values[p] = Array.from({ length: n }, (_, i) => {
+      const a = own?.[i] ?? null;
+      const o = whole?.[i];
+      const v = Math.round((a === null ? 1 : Number(a)) * (typeof o === "number" ? o : 1) * 1e6) / 1e6;
+      return v === 1 || !Number.isFinite(v) ? null : v;
+    });
+  }
+}
+function combineDashes(kind, n, words, values) {
+  const lines = kind === "edge" ? [["lineStyle", "width", 3, "6 3", true]] : [
+    ["borderStyle", "borderWidth", 0, "4 2", true],
+    ["outerBorderStyle", "outerBorderWidth", 0, "4 2", false]
+  ];
+  for (const [style, width, fallback, pattern, own] of lines) {
+    const col = values[style];
+    if (col !== void 0) {
+      dashColumn(col, n, values[width], { fallback, pattern }, own ? words : null);
+    }
+  }
+}
+function dashColumn(col, n, widths, drawn, words) {
+  for (let i = 0; i < n; i++) {
+    if (col[i] !== "dashed") {
+      continue;
+    }
+    const w = widths?.[i];
+    const look = dashedLook(words, i, drawn.pattern, typeof w === "number" ? w : drawn.fallback);
+    if (look !== null) {
+      col[i] = look;
+    }
+  }
+}
+function dashedLook(words, i, pattern, width) {
+  const dashes = (words?.get("_dashPattern")?.[i] ?? pattern).split(/[\s,[\]]+/).filter((t) => t !== "").map((t) => Number.parseFloat(t));
+  if (dashes.length === 0 || !dashes.every((d) => Number.isFinite(d))) {
+    return null;
+  }
+  return cyjsDashLook(dashes, width, words?.get("_dashCap")?.[i] ?? "butt");
+}
+function columnOf(values, property, n) {
+  let column = values[property];
+  if (column === void 0) {
+    column = new Array(n).fill(null);
+    values[property] = column;
+  }
+  return column;
+}
+function combineVisibility(kind, n, words, values) {
   const vis = words.get("_visibility");
   const disp = words.get("_display");
-  if (vis !== void 0 || disp !== void 0) {
-    const col = new Array(n).fill(null);
-    for (let i = 0; i < n; i++) {
-      const a = vis?.[i] ?? null;
-      const b = disp?.[i] ?? null;
-      if (a === null && b === null) {
-        continue;
+  if (vis === void 0 && disp === void 0) {
+    return;
+  }
+  const col = new Array(n).fill(null);
+  for (let i = 0; i < n; i++) {
+    const a = vis?.[i] ?? null;
+    const b = disp?.[i] ?? null;
+    if (a === null && b === null) {
+      continue;
+    }
+    const keptInvisible = kind === "node" && a === "hidden" && b !== "none";
+    col[i] = keptInvisible || a !== "hidden" && b !== "none";
+    if (keptInvisible) {
+      for (const p of ["opacity", "borderOpacity", "outerBorderOpacity", "labelOpacity"]) {
+        columnOf(values, p, n)[i] = 0;
+      }
+      columnOf(values, "label", n)[i] = "";
+    }
+  }
+  values.visible = col;
+}
+function combineLabelText(kind, n, words, values) {
+  transformLabels(n, words.get("_transform"), values.label);
+  const justification = words.get("_justification");
+  if (justification !== void 0 && kind === "edge") {
+    combineEdgeJustification(n, justification, words.get("_wrap"), values);
+  } else if (justification !== void 0) {
+    const halign = words.get("_halign");
+    const AUTO = {
+      left: "right",
+      right: "left",
+      "left-inside": "left",
+      "right-inside": "right"
+    };
+    values.labelTextAlign = justification.map((j, i) => {
+      if (j === null) {
+        return null;
       }
-      col[i] = a !== "hidden" && b !== "none";
+      return j === "auto" ? AUTO[halign?.[i] ?? "center"] ?? "center" : j;
+    });
+  }
+  const rotations = [
+    ["_rotation", "labelRotation"],
+    ["_sourceRotation", "sourceLabelRotation"],
+    ["_targetRotation", "targetLabelRotation"]
+  ];
+  for (const [part, property] of rotations) {
+    const rotation = words.get(part);
+    if (rotation !== void 0) {
+      values[property] = rotation.map((r) => r === null ? null : cyjsAngleDegrees(r));
     }
-    values.visible = col;
   }
-  if (kind === "edge") {
-    hollowArrows("target", words.get("_targetArrowFill"), values, notes);
-    hollowArrows("source", words.get("_sourceArrowFill"), values, notes);
+}
+function transformLabels(n, transform, label) {
+  if (transform === void 0 || label === void 0) {
+    return;
+  }
+  for (let i = 0; i < n; i++) {
+    const text2 = label[i];
+    if (typeof text2 === "string" && transform[i] === "uppercase") {
+      label[i] = text2.toUpperCase();
+    } else if (typeof text2 === "string" && transform[i] === "lowercase") {
+      label[i] = text2.toLowerCase();
+    }
+  }
+}
+function combineEdgeJustification(n, justification, wrap, values) {
+  const SHIFT = { left: -0.5, right: 0.5 };
+  for (let i = 0; i < n; i++) {
+    const shift = wrap?.[i] === "wrap" ? SHIFT[justification[i] ?? ""] : void 0;
+    if (shift !== void 0) {
+      columnOf(values, "labelShiftX", n)[i] = shift;
+    }
   }
 }
-function openArrows(setting, parts) {
-  for (const end of ["target", "source"]) {
-    let fill;
-    for (const p of parts) {
-      if (p.spec.property === `_${end}ArrowFill`) {
-        fill = p.parsed;
+function combineLabelDress(kind, n, words, values, notes, whole) {
+  const num = (part, i, fallback) => {
+    const v = words.get(part)?.[i];
+    return v === null || v === void 0 ? fallback : Number(v);
+  };
+  const col = (p) => values[p] ??= new Array(n).fill(null);
+  const outlined = words.has("_outlineWidth");
+  const boxed = words.has("_backgroundOpacity");
+  const bordered = words.has("_textBorderWidth") && words.has("_textBorderOpacity");
+  const at = (v) => typeof v === "number" ? v : 1;
+  const faded = (v) => {
+    const r = Math.round(v * 1e6) / 1e6;
+    return r < 1 ? r : null;
+  };
+  for (let i = 0; i < n && (outlined || boxed || bordered); i++) {
+    const width = num("_outlineWidth", i, 0);
+    const outlineOpacity = num("_outlineOpacity", i, 1);
+    if (outlined && width > 0 && outlineOpacity > 0) {
+      col("labelOutlineColor")[i] = words.get("_outlineColor")?.[i] ?? "#000000";
+      col("labelOutlineWidth")[i] = 2 * width;
+      col("labelOutlineOpacity")[i] = faded(outlineOpacity * at(values.labelOpacity?.[i]));
+    }
+    const boxOpacity = num("_backgroundOpacity", i, 0);
+    const box = boxed && boxOpacity > 0;
+    if (box) {
+      col("labelBackground")[i] = words.get("_backgroundColor")?.[i] ?? "#000000";
+      col("labelBackgroundOpacity")[i] = faded(boxOpacity * at(whole[i]));
+    }
+    const border = bordered && labelBorder(kind, i, words, col, notes, at(whole[i]));
+    if (box || border) {
+      labelBoxShape(kind, i, words, col, notes);
+    }
+  }
+}
+function labelBoxShape(kind, i, words, col, notes) {
+  const padding = words.get("_backgroundPadding")?.[i];
+  col("labelPadding")[i] = padding === null || padding === void 0 ? 0 : Number(padding);
+  col("labelLineHeight")[i] = 1;
+  const shape = words.get("_backgroundShape")?.[i];
+  if (shape === "round-rectangle" || shape === "roundrectangle") {
+    col("labelCornerRadius")[i] = 2;
+  } else if (shape === "circle") {
+    notes.add(STYLE_ISSUE.APPROXIMATED, kind, "labelBackground", { sample: "circle", element: i });
+  }
+}
+function labelBorder(kind, i, words, col, notes, whole) {
+  const num = (part) => Number(words.get(part)?.[i] ?? 0);
+  const [width, opacity] = [num("_textBorderWidth"), num("_textBorderOpacity")];
+  if (!(width > 0 && opacity > 0)) {
+    return false;
+  }
+  const style = words.get("_textBorderStyle")?.[i] ?? "solid";
+  col("labelBorderColor")[i] = words.get("_textBorderColor")?.[i] ?? "#000000";
+  col("labelBorderWidth")[i] = style === "double" ? width / 4 : width;
+  const drawn = Math.round(opacity * whole * 1e6) / 1e6;
+  col("labelBorderOpacity")[i] = drawn < 1 ? drawn : null;
+  if (style === "dotted" || style === "dashed" || style === "double") {
+    notes.add(STYLE_ISSUE.APPROXIMATED, kind, "labelBorderColor", { sample: style, element: i });
+  }
+  return true;
+}
+function lineDegrees(a, b) {
+  const dx = b[0] - a[0];
+  const angle = Math.atan((b[1] - a[1]) / dx);
+  const turn = (dx === 0 ? Math.abs(angle) : angle) * 180 / Math.PI;
+  return Number.isFinite(turn) ? Math.round((turn % 360 + 360) % 360 * 1e6) / 1e6 + 0 : 0;
+}
+function cyjsAngleDegrees(text2) {
+  const t = text2.trim();
+  if (t === "none" || t === "autorotate") {
+    return 0;
+  }
+  const m = /^(-?(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?)(deg|rad)?$/i.exec(t);
+  if (m === null) {
+    return null;
+  }
+  const x = Number(m[1]);
+  const deg = m[2]?.toLowerCase() === "deg" ? x : x * 180 / Math.PI;
+  return Math.round((deg % 360 + 360) % 360 * 1e6) / 1e6 + 0;
+}
+function combineLineOpacity(n, line, values) {
+  if (line === void 0) {
+    return;
+  }
+  const whole = values.opacity;
+  values.opacity = Array.from({ length: n }, (_, i) => {
+    const a = line[i] === null ? null : Number(line[i]);
+    const b = whole?.[i];
+    if (a === null || !Number.isFinite(a)) {
+      return b ?? null;
+    }
+    return Math.round(a * (typeof b === "number" ? b : 1) * 1e6) / 1e6;
+  });
+}
+const GRADIENT_ANGLES = /* @__PURE__ */ new Map([
+  ["to-bottom", 90],
+  ["to-top", 270],
+  ["to-left", 180],
+  ["to-right", 0],
+  ["to-bottom-right", 45],
+  ["to-right-bottom", 45],
+  ["to-bottom-left", 135],
+  ["to-left-bottom", 135],
+  ["to-top-right", 315],
+  ["to-right-top", 315],
+  ["to-top-left", 225],
+  ["to-left-top", 225]
+]);
+function combineBackgroundGradient(n, words, values, notes) {
+  const fill = words.get("_backgroundFill");
+  if (fill === void 0) {
+    return;
+  }
+  const stops = words.get("_backgroundStops");
+  const positions = words.get("_backgroundPositions");
+  const direction = words.get("_backgroundDirection");
+  const col = (name) => values[name] ??= new Array(n).fill(null);
+  for (let i = 0; i < n; i++) {
+    const radial = fill[i] === "radial-gradient";
+    if (fill[i] !== "linear-gradient" && !radial) {
+      continue;
+    }
+    const colors = gradientStopColors(stops?.[i] ?? "#999", {
+      notes,
+      target: "node",
+      property: "fill",
+      element: i
+    });
+    if (colors.length < 2) {
+      continue;
+    }
+    col("fill")[i] = colors[0];
+    col("fillGradient")[i] = colors.at(-1) ?? null;
+    if (colors.length > 2) {
+      col("fillGradientColors")[i] = colors.join(" ");
+    }
+    const placed = gradientStops(positions?.[i] ?? "");
+    if (placed?.split(" ").length === colors.length) {
+      col("fillGradientStops")[i] = placed;
+    }
+    if (radial) {
+      col("fillGradientKind")[i] = "radial";
+    } else {
+      col("fillGradientAngle")[i] = GRADIENT_ANGLES.get(direction?.[i] ?? "to-bottom") ?? 90;
+    }
+  }
+}
+const ROUTE_PARTS = [
+  ["segmentDistances", "segment-distances", { property: "_segmentDistances", type: "text" }],
+  ["segmentWeights", "segment-weights", { property: "_segmentWeights", type: "text" }],
+  ["controlPointDistances", "control-point-distances", { property: "_controlPointDistances", type: "text" }],
+  ["controlPointWeights", "control-point-weights", { property: "_controlPointWeights", type: "text" }],
+  ["controlPointStepSize", "control-point-step-size", { property: "_controlPointStepSize", type: "size" }],
+  ["taxiDirection", "taxi-direction", { property: "_taxiDirection", type: "text" }],
+  ["taxiTurn", "taxi-turn", { property: "_taxiTurn", type: "text" }],
+  ["taxiTurnMinDistance", "taxi-turn-min-distance", { property: "_taxiTurnMinDistance", type: "size" }],
+  ["edgeDistances", "edge-distances", { property: "_edgeDistances", type: "text" }],
+  ["loopDirection", "loop-direction", { property: "_loopDirection", type: "text" }],
+  ["loopSweep", "loop-sweep", { property: "_loopSweep", type: "text" }],
+  ["segmentRadii", "segment-radii", { property: "_segmentRadii", type: "text" }],
+  ["taxiRadius", "taxi-radius", { property: "_taxiRadius", type: "text" }],
+  ["radiusType", "radius-type", { property: "_radiusType", type: "text" }]
+];
+function edgeRoutes(graph, read, curves, nodes, values) {
+  const words = new Map(ROUTE_PARTS.map(([key, name, spec]) => [key, drawnColumn(read, name, spec)]));
+  const nodeAt = /* @__PURE__ */ new Map();
+  nodes.elements.forEach((el, k) => {
+    if (el !== null) {
+      nodeAt.set(el, k);
+    }
+  });
+  const geometry = (core) => routeNode(graph.nodes[core], nodeAt, nodes);
+  const turned = [
+    ["labelRotation", drawnColumn(read, "text-rotation", TEXT_PART)],
+    ["sourceLabelRotation", drawnColumn(read, "source-text-rotation", TEXT_PART)],
+    ["targetLabelRotation", drawnColumn(read, "target-text-rotation", TEXT_PART)]
+  ];
+  const ends = [drawnColumn(read, "source-endpoint", TEXT_PART), drawnColumn(read, "target-endpoint", TEXT_PART)];
+  const loops = /* @__PURE__ */ new Map();
+  const n = read.order.length;
+  let routed = null;
+  for (let k = 0; k < n; k++) {
+    const e = read.order[k];
+    const between = edgeNodes(graph, e, geometry);
+    if (between === null) {
+      continue;
+    }
+    const { src, tgt, loop } = between;
+    if (!loop) {
+      autorotateLabels(values, turned, k, n, lineDegrees(src.center, tgt.center));
+    }
+    const edge = routeSettings(words, k, curves[k]);
+    const bends = cyjsRoute(edge, src, tgt, loop ? nextLoopIndex(loops, graph.source[e], edge) : 0);
+    if (bends !== null) {
+      routed ??= values.bends ?? new Array(n).fill(null);
+      routed[k] = bends;
+      columnOf(values, "curved", n)[k] = false;
+    }
+    if (!loop) {
+      edgePorts(edge.curveStyle, [ends[0][k], ends[1][k]], [src, tgt], (p, port) => {
+        columnOf(values, p, n)[k] = port;
+      });
+    }
+  }
+  if (routed !== null) {
+    values.bends = routed;
+  }
+}
+function routeNode(el, nodeAt, nodes) {
+  const k = nodeAt.get(el);
+  const pos = el.json.position;
+  if (k === void 0 || !isObject(pos) || typeof pos.x !== "number" || typeof pos.y !== "number") {
+    return null;
+  }
+  const num = (p, fallback) => {
+    const v = nodes.values[p]?.[k];
+    return typeof v === "number" ? v : fallback;
+  };
+  const [w, h, bw] = [num("width", 30), num("height", 30), num("borderWidth", 0)];
+  return {
+    center: [pos.x, pos.y],
+    size: [w + bw, h + bw],
+    box: [w, h],
+    ellipse: (nodes.values.shape?.[k] ?? "ellipse") === "ellipse"
+  };
+}
+function edgeNodes(graph, e, geometry) {
+  if (e < 0) {
+    return null;
+  }
+  const loop = graph.source[e] === graph.target[e];
+  const src = geometry(graph.source[e]);
+  const tgt = loop ? src : geometry(graph.target[e]);
+  return src === null || tgt === null ? null : { src, tgt, loop };
+}
+function autorotateLabels(values, turned, k, n, degrees2) {
+  for (const [property, column] of turned) {
+    if (column[k] === "autorotate") {
+      columnOf(values, property, n)[k] = degrees2;
+    }
+  }
+}
+function nextLoopIndex(loops, source, edge) {
+  const key = `${String(source)} ${String(edge.loopDirection)} ${String(edge.loopSweep)}`;
+  const index = loops.get(key) ?? 0;
+  loops.set(key, index + 1);
+  return index;
+}
+function edgePorts(curve, words, nodes, put) {
+  if (curve === "taxi" || curve === "round-taxi") {
+    return;
+  }
+  ["sourcePort", "targetPort"].forEach((p, a) => {
+    const port = curve === "haystack" ? "0,0" : endpointPort(String(words[a] ?? ""), nodes[a]);
+    if (port !== null) {
+      put(p, port);
+    }
+  });
+}
+function endpointPort(text2, node) {
+  const t = text2.trim();
+  if (t === "inside-to-node") {
+    return "0,0";
+  }
+  const parts = t.split(/\s+/);
+  const [w, h] = node.size;
+  const r62 = (v) => String(Math.round(v * 1e6) / 1e6 + 0);
+  const fraction2 = (part, size) => {
+    const m2 = /^(-?(?:\d+(?:\.\d*)?|\.\d+))(%|px)?$/.exec(part);
+    if (m2 === null || Number.isNaN(size) || size <= 0) {
+      return null;
+    }
+    const px = m2[2] === "%" ? Number(m2[1]) / 100 * size : Number(m2[1]);
+    return px / (size / 2);
+  };
+  if (parts.length === 2) {
+    const [x, y] = [fraction2(parts[0], w), fraction2(parts[1], h)];
+    return x === null || y === null ? null : `${r62(x)},${r62(-y)}`;
+  }
+  const m = /^(-?(?:\d+(?:\.\d*)?|\.\d+))(deg|rad)$/.exec(t);
+  if (m === null) {
+    return null;
+  }
+  const turn = m[2] === "deg" ? Number(m[1]) * Math.PI / 180 : Number(m[1]);
+  const [dx, dy] = [Math.sin(turn) / (w / 2), Math.cos(turn) / (h / 2)];
+  const reach = node.ellipse ? Math.hypot(dx, dy) : Math.max(Math.abs(dx), Math.abs(dy));
+  return reach > 0 ? `${r62(dx / reach)},${r62(dy / reach)}` : null;
+}
+function routeSettings(words, k, curve) {
+  const text2 = (key) => {
+    const v = words.get(key)?.[k];
+    return v === null || v === void 0 ? null : String(v);
+  };
+  const num = (key) => {
+    const v = text2(key);
+    return v === null ? null : Number(v);
+  };
+  return {
+    curveStyle: String(curve ?? "haystack"),
+    segmentDistances: text2("segmentDistances"),
+    segmentWeights: text2("segmentWeights"),
+    controlPointDistances: text2("controlPointDistances"),
+    controlPointWeights: text2("controlPointWeights"),
+    controlPointStepSize: num("controlPointStepSize"),
+    taxiDirection: text2("taxiDirection"),
+    taxiTurn: text2("taxiTurn"),
+    taxiTurnMinDistance: num("taxiTurnMinDistance"),
+    edgeDistances: text2("edgeDistances"),
+    loopDirection: text2("loopDirection"),
+    loopSweep: text2("loopSweep"),
+    segmentRadii: text2("segmentRadii"),
+    taxiRadius: text2("taxiRadius"),
+    radiusType: text2("radiusType")
+  };
+}
+const TEXT_PART = { property: "_text", type: "text" };
+function nodeSizes(graph, read, values) {
+  const padding = drawnColumn(read, "padding", TEXT_PART);
+  const toLabel = ["width", "height"].map((p) => drawnColumn(read, p, SIZE_PART));
+  const n = read.order.length;
+  const col = (p) => values[p] ??= new Array(n).fill(null);
+  for (let k = 0; k < n; k++) {
+    const core = read.order[k];
+    const pad = core < 0 || graph.children[core].length > 0 ? 0 : paddingOf(padding[k]);
+    const fitted = toLabel.map((c) => c[k] === "label");
+    if (fitted[0] || fitted[1]) {
+      col("labelFit")[k] = "bounds";
+      col("labelPaddingX")[k] = pad;
+      col("labelPaddingY")[k] = pad;
+      ["width", "height"].forEach((p, a) => {
+        const v = values[p]?.[k];
+        const side = typeof v === "number" ? v : 30;
+        col(p)[k] = fitted[a] ? 0 : side + 2 * pad;
+      });
+      continue;
+    }
+    if (pad <= 0) {
+      continue;
+    }
+    for (const p of ["width", "height"]) {
+      const v = values[p]?.[k];
+      col(p)[k] = (typeof v === "number" ? v : 30) + 2 * pad;
+    }
+  }
+}
+const PADDING_OF_PART = {
+  property: "_paddingOf",
+  type: "enum",
+  enums: ["width", "height", "average", "min", "max"]
+};
+const LABELS_PART = { property: "_compoundLabels", type: "enum", enums: ["include", "exclude"] };
+function measureOf(text2) {
+  if (typeof text2 !== "string" && typeof text2 !== "number") {
+    return null;
+  }
+  const value = Number.parseFloat(String(text2));
+  return Number.isFinite(value) ? { value, percent: String(text2).trim().endsWith("%") } : null;
+}
+function biasShare(near2, far, min) {
+  const percent = (text2) => {
+    const m = measureOf(text2);
+    if (m === null || m.value <= 0) {
+      return 0;
+    }
+    return m.percent ? m.value : m.value * 100 / min;
+  };
+  const a = percent(near2);
+  const total = a + percent(far);
+  return total > 0 ? a / total : null;
+}
+function groupBoxes(graph, read, values) {
+  const word = (name, spec = TEXT_PART) => drawnColumn(read, name, spec);
+  const padding = word("padding");
+  const paddingOf2 = word("padding-relative-to", PADDING_OF_PART);
+  const labels = word("compound-sizing-wrt-labels", LABELS_PART);
+  const axes = [
+    { min: word("min-width"), near: word("min-width-bias-left"), far: word("min-width-bias-right") },
+    { min: word("min-height"), near: word("min-height-bias-top"), far: word("min-height-bias-bottom") }
+  ];
+  const names = [
+    ["groupMinWidth", "groupMinWidthBiasLeft"],
+    ["groupMinHeight", "groupMinHeightBiasTop"]
+  ];
+  const n = read.order.length;
+  const put = (p, k, v) => {
+    const column = values[p] ?? new Array(n).fill(null);
+    values[p] = column;
+    column[k] = v;
+  };
+  for (let k = 0; k < n; k++) {
+    const core = read.order[k];
+    if (core < 0 || graph.children[core].length === 0) {
+      continue;
+    }
+    for (const [p, v] of groupPaddingValues(padding[k], paddingOf2[k])) {
+      put(p, k, v);
+    }
+    put("groupIncludeLabels", k, labels[k] !== "exclude");
+    axes.forEach((axis, a) => {
+      for (const [p, v] of groupMinValues(axis.min[k], axis.near[k], axis.far[k], names[a])) {
+        put(p, k, v);
       }
+    });
+  }
+}
+function groupPaddingValues(padding, of) {
+  const pad = measureOf(padding);
+  if (pad?.percent !== true) {
+    return [["groupPadding", Math.max(0, pad?.value ?? 0)]];
+  }
+  return [
+    ["groupPaddingRatio", Math.max(0, pad.value / 100)],
+    ["groupPaddingOf", typeof of === "string" ? of : "width"]
+  ];
+}
+function groupMinValues(min, near2, far, names) {
+  const m = measureOf(min);
+  if (m === null || m.percent || m.value <= 0) {
+    return [];
+  }
+  const share = biasShare(near2, far, m.value);
+  return share === null ? [[names[0], m.value]] : [
+    [names[0], m.value],
+    [names[1], share]
+  ];
+}
+const VALIGN_PART = {
+  property: "_valign",
+  type: "enum",
+  enums: ["top", "top-inside", "center", "bottom", "bottom-inside"]
+};
+const HALIGN_PART = {
+  property: "_halign",
+  type: "enum",
+  enums: ["left", "left-inside", "center", "right", "right-inside"]
+};
+function pinnedAxis(align, half, pad) {
+  const near2 = /^(left|top)/.test(align);
+  if (!near2 && !/^(right|bottom)/.test(align)) {
+    return { offset: 0, shift: 0 };
+  }
+  const side = near2 ? -1 : 1;
+  return align.endsWith("-inside") ? { offset: side * (half - 2 * pad), shift: -side / 2 } : { offset: side * half, shift: side / 2 };
+}
+function mixedLabelPlaces(graph, read, values) {
+  const va = drawnColumn(read, "text-valign", VALIGN_PART);
+  const ha = drawnColumn(read, "text-halign", HALIGN_PART);
+  const padding = drawnColumn(read, "padding", TEXT_PART);
+  const n = read.order.length;
+  const col = (p) => values[p] ??= new Array(n).fill(null);
+  for (let k = 0; k < n; k++) {
+    const v = typeof va[k] === "string" ? String(va[k]) : "top";
+    const h = typeof ha[k] === "string" ? String(ha[k]) : "center";
+    const inside = v.endsWith("-inside") || h.endsWith("-inside");
+    const outside = v === "top" || v === "bottom" || h === "left" || h === "right";
+    if (!inside || !outside) {
+      continue;
     }
-    const shape = setting.get(`${end}Arrow`);
-    const open = shape === void 0 ? void 0 : OPEN_ARROWS.get(shape);
-    if (fill?.kind === "word" && fill.value === "hollow" && open !== void 0) {
-      setting.set(`${end}Arrow`, open);
+    if (values.labelFit?.[k] !== void 0 && values.labelFit[k] !== null) {
+      read.notes.add(STYLE_ISSUE.APPROXIMATED, "node", "labelPosition", { sample: `${v} ${h}`, element: k });
+      continue;
     }
+    const core = read.order[k];
+    const pad = core < 0 || graph.children[core].length > 0 ? 0 : paddingOf(padding[k]);
+    const size = (p) => {
+      const s = values[p]?.[k];
+      return typeof s === "number" ? s : 30 + 2 * pad;
+    };
+    const x = pinnedAxis(h, size("width") / 2, pad);
+    const y = pinnedAxis(v, size("height") / 2, pad);
+    const add = (p, d) => {
+      const was = values[p]?.[k];
+      col(p)[k] = (typeof was === "number" ? was : 0) + d;
+    };
+    col("labelPosition")[k] = "center";
+    add("labelOffsetX", x.offset);
+    add("labelOffsetY", y.offset);
+    col("labelShiftX")[k] = x.shift;
+    col("labelShiftY")[k] = y.shift;
+  }
+}
+const SIZE_PART = { property: "_size", type: "nodeSize" };
+function paddingOf(text2) {
+  if (typeof text2 !== "string") {
+    return 0;
+  }
+  const x = Number.parseFloat(text2);
+  if (!Number.isFinite(x) || x <= 0) {
+    return 0;
   }
+  return text2.trim().endsWith("%") ? x / 100 : x;
 }
-const OPEN_ARROWS = /* @__PURE__ */ new Map([
+const CURVE_PART = { property: "_curve", type: "enum", enums: CYJS_CURVE_STYLES };
+function noArrowsOnHaystacks(curves, values) {
+  const n = curves.length;
+  for (const p of ["targetArrow", "sourceArrow"]) {
+    const col = values[p];
+    if (col === void 0) {
+      continue;
+    }
+    for (let i = 0; i < n; i++) {
+      if ((curves[i] ?? "haystack") === "haystack" && col[i] !== null) {
+        col[i] = "none";
+      }
+    }
+  }
+}
+const HOLLOW_ARROWS = /* @__PURE__ */ new Map([
   ["triangle", "triangle-open"],
+  ["diamond", "diamond-open"],
   ["circle", "circle-open"],
-  ["diamond", "diamond-open"]
+  ["square", "other:open-square"]
 ]);
-function hollowArrows(end, fill, values, notes) {
-  const shapes = values[`${end}Arrow`];
-  if (fill === void 0 || shapes === void 0) {
-    return;
+function hollowArrowsOfRule(set, all) {
+  for (const p of all) {
+    const shapeProp = /^_(\w+Arrow)Fill$/.exec(p.spec.property)?.[1];
+    const shape = shapeProp === void 0 ? void 0 : set[shapeProp];
+    if (shapeProp === void 0 || shape === void 0 || p.parsed.kind !== "word") {
+      continue;
+    }
+    const open = HOLLOW_ARROWS.get(shape);
+    if (open !== void 0 && p.parsed.value === "hollow") {
+      set[shapeProp] = open;
+    }
   }
-  for (let i = 0; i < shapes.length; i++) {
-    const shape = shapes[i];
-    if (fill[i] !== "hollow" || shape === null || shape === "none") {
+}
+function combineArrowFills(n, words, values, notes) {
+  for (const p of ["targetArrow", "sourceArrow", "midTargetArrow", "midSourceArrow"]) {
+    const fill = words.get(`_${p}Fill`);
+    const shapes = values[p];
+    if (fill === void 0 || shapes === void 0) {
       continue;
     }
-    const open = OPEN_ARROWS.get(shape);
-    if (open === void 0) {
-      notes.add(STYLE_ISSUE.NOT_CARRIED, "edge", `${end}-arrow-fill`, {
-        sample: `hollow ${String(shape)}`,
-        element: i
-      });
-    } else {
-      shapes[i] = open;
+    for (let i = 0; i < n; i++) {
+      const shape = shapes[i];
+      if (fill[i] !== "hollow" || shape === null || shape === "none") {
+        continue;
+      }
+      const open = HOLLOW_ARROWS.get(shape);
+      if (open !== void 0) {
+        shapes[i] = open;
+      } else if (!String(shape).includes("open")) {
+        const property = p.replaceAll(/[A-Z]/g, (c) => `-${c.toLowerCase()}`).replace("-arrow", "-arrow-fill");
+        notes.add(STYLE_ISSUE.NOT_CARRIED, "edge", property, { sample: `hollow ${String(shape)}`, element: i });
+      }
     }
   }
 }
-function labelPosition(v, h, note) {
+function labelPosition(v, h) {
   if (v === null && h === null) {
     return null;
   }
+  const vIn = (v ?? "").endsWith("-inside");
+  const hIn = (h ?? "").endsWith("-inside");
   const vv = (v ?? "top").replace("-inside", "");
   const hh = (h ?? "center").replace("-inside", "");
-  if ((v ?? "").endsWith("-inside") || (h ?? "").endsWith("-inside")) {
-    note(`${v ?? ""} ${h ?? ""}`);
+  if (vIn || hIn) {
+    const vOut = vv !== "center" && !vIn;
+    const hOut = hh !== "center" && !hIn;
+    if (!vOut && !hOut) {
+      return INSIDE_POSITIONS.get(`${vv},${hh}`) ?? null;
+    }
+    return POSITIONS.get(`${vIn ? "center" : vv},${hIn ? "center" : hh}`) ?? null;
   }
   return POSITIONS.get(`${vv},${hh}`) ?? null;
 }
@@ -2522,7 +4018,7 @@ function buildRules(kind, applied, core, input, truth, env) {
   const rules = collapse(ctx, drafts);
   return { rules, columns, rawColumns: [...raw] };
 }
-function draftOf(ctx, entry, list, props, parts) {
+function draftOf(ctx, entry, list, props, all) {
   const setting = /* @__PURE__ */ new Map();
   const mapping = /* @__PURE__ */ new Map();
   let flattened = false;
@@ -2550,8 +4046,12 @@ function draftOf(ctx, entry, list, props, parts) {
       mapping.set(p.spec.property, mapperMapping(ctx, entry, list, p));
     }
   }
-  openArrows(setting, parts);
   const set = Object.fromEntries(setting);
+  if (ctx.kind === "node") {
+    cyjsPolygonShapes(set);
+  } else {
+    hollowArrowsOfRule(set, all);
+  }
   const map = Object.fromEntries(mapping);
   const hasMap = mapping.size > 0;
   const rule = () => {
@@ -2982,7 +4482,8 @@ const SHAPES_TO_CYJS = /* @__PURE__ */ new Map([
   ["octagon", "octagon"],
   ["parallelogram", "rhomboid"],
   ["star", "star"],
-  ["vee", "vee"]
+  ["vee", "vee"],
+  ["polygon", "polygon"]
 ]);
 const ARROWS_TO_CYJS = /* @__PURE__ */ new Map([
   ["none", "none"],
@@ -2993,6 +4494,17 @@ const ARROWS_TO_CYJS = /* @__PURE__ */ new Map([
   ["circle", "circle"],
   ["square", "square"]
 ]);
+const LINE_FILLS = /* @__PURE__ */ new Map([
+  ["none", "solid"],
+  ["linear", "linear-gradient"],
+  ["radial", "radial-gradient"]
+]);
+const ARROW_PROPERTY = {
+  sourceArrow: "source-arrow-shape",
+  targetArrow: "target-arrow-shape",
+  midSourceArrow: "mid-source-arrow-shape",
+  midTargetArrow: "mid-target-arrow-shape"
+};
 const ARROWS_OPEN = /* @__PURE__ */ new Map([
   ["triangle-open", "triangle"],
   ["diamond-open", "diamond"],
@@ -3008,12 +4520,27 @@ function toCyjs(target, property, value) {
   switch (property) {
     case "visible":
       return exact({ display: value === false ? "none" : "element" });
+    case "shapePoints":
+      return pointsToCyjs(String(value));
     case "labelItalic":
       return exact({ "font-style": value === true ? "italic" : "normal" });
     case "curved":
       return exact({ "curve-style": value === true ? "unbundled-bezier" : "straight" });
     case "labelPosition":
       return labelPositionToCyjs(String(value));
+    case "fanSpacing":
+    case "labelWrapWidth":
+      return ifNumber(value, (v) => numberToCyjs(property, v));
+    case "gradientKind":
+      return gradientKindToCyjs(String(value));
+    case "gradientStops":
+      return exact({
+        "line-gradient-stop-positions": String(value).trim().split(/\s+/).map((s) => `${num6(Number(s) * 100)}%`).join(" ")
+      });
+    case "outerBorderOffset":
+      return ifNumber(value, (v) => exact({ "outline-offset": num6(v * 2) }));
+    case "outerBorderStyle":
+      return outerBorderStyleToCyjs(String(value));
     case "shape":
       return enumToCyjs("shape", String(value), SHAPES_TO_CYJS, specs);
     case "borderStyle":
@@ -3022,30 +4549,90 @@ function toCyjs(target, property, value) {
       return lineStyleToCyjs(String(value));
     case "sourceArrow":
     case "targetArrow":
-      return arrowToCyjs(
-        property === "sourceArrow" ? "source-arrow-shape" : "target-arrow-shape",
-        String(value),
-        specs
-      );
+    case "midSourceArrow":
+    case "midTargetArrow":
+      return arrowToCyjs(ARROW_PROPERTY[property], String(value), specs);
     case "labelFont":
       return isFontFamily(String(value)) ? exact({ "font-family": String(value) }) : null;
+    // a label's box draws only at an opacity above 0, which is 0 unset
+    case "labelBackground":
+      return exact({ "text-background-color": String(value), "text-background-opacity": 1 });
+    // the outline is drawn as a stroke twice text-outline-width (see the reader)
+    case "labelOutlineColor":
+      return exact({ "text-outline-color": String(value) });
+    case "labelOutlineWidth":
+      return ifNumber(value, (v) => exact({ "text-outline-width": num6(v / 2) }));
+    case "labelPadding":
+      return ifNumber(value, (v) => exact({ "text-background-padding": v }));
+    // the line round a label's box draws only at an opacity above 0, which is 0 unset
+    case "labelBorderColor":
+      return exact({ "text-border-color": String(value), "text-border-opacity": 1 });
+    case "labelBorderWidth":
+      return ifNumber(value, (v) => exact({ "text-border-width": v, "text-border-opacity": 1 }));
+    default:
+      return groupToCyjs(property, value) ?? propertyToCyjs(property, value, specs);
+  }
+}
+function groupToCyjs(property, value) {
+  const percent = (v) => `${num6(v * 100)}%`;
+  switch (property) {
+    case "groupPadding":
+      return ifNumber(value, (v) => exact({ padding: `${num6(v)}px` }));
+    case "groupPaddingRatio":
+      return ifNumber(value, (v) => exact({ padding: percent(v) }));
+    case "groupPaddingOf":
+      return exact({ "padding-relative-to": String(value) });
+    case "groupMinWidth":
+      return ifNumber(value, (v) => exact({ "min-width": `${num6(v)}px` }));
+    case "groupMinHeight":
+      return ifNumber(value, (v) => exact({ "min-height": `${num6(v)}px` }));
+    case "groupMinWidthBiasLeft":
+      return ifNumber(
+        value,
+        (v) => exact({ "min-width-bias-left": percent(v), "min-width-bias-right": percent(1 - v) })
+      );
+    case "groupMinHeightBiasTop":
+      return ifNumber(
+        value,
+        (v) => exact({ "min-height-bias-top": percent(v), "min-height-bias-bottom": percent(1 - v) })
+      );
+    case "groupIncludeLabels":
+      return exact({ "compound-sizing-wrt-labels": value === false ? "exclude" : "include" });
     default:
-      return propertyToCyjs(property, value, specs);
+      return null;
   }
 }
+function ifNumber(value, write) {
+  return typeof value === "number" ? write(value) : null;
+}
+function gradientKindToCyjs(kind) {
+  const fill = LINE_FILLS.get(kind);
+  return fill === void 0 ? null : exact({ "line-fill": fill });
+}
+function outerBorderStyleToCyjs(style) {
+  const written2 = borderStyleToCyjs(style);
+  return written2 === null ? null : { ...written2, props: { "outline-style": written2.props["border-style"] } };
+}
+function pointsToCyjs(points) {
+  const written2 = neutralPointsToCyjs(points);
+  return written2 === null ? null : exact({ "shape-polygon-points": written2 });
+}
+function numberToCyjs(property, value) {
+  return property === "fanSpacing" ? exact({ "control-point-step-size": num6(value * 2) }) : exact({ "text-wrap": "wrap", "text-max-width": value });
+}
 function exact(props) {
   return { props, approximate: false };
 }
 function near(props) {
   return { props, approximate: true };
 }
-function labelPositionToCyjs(text) {
-  if (text === "inside-top") {
-    return near({ "text-valign": "top", "text-halign": "center" });
-  }
-  const v = ["top", "bottom"].find((x) => text.startsWith(x)) ?? "center";
-  const h = ["left", "right"].find((x) => text.endsWith(x)) ?? "center";
-  return exact({ "text-valign": v, "text-halign": h });
+function labelPositionToCyjs(text2) {
+  const inside = text2.startsWith("inside-");
+  const side = inside ? text2.slice("inside-".length) : text2;
+  const v = ["top", "bottom"].find((x) => side.startsWith(x)) ?? "center";
+  const h = ["left", "right"].find((x) => side.endsWith(x)) ?? "center";
+  const of = (a) => inside && a !== "center" ? `${a}-inside` : a;
+  return exact({ "text-valign": of(v), "text-halign": of(h) });
 }
 function enumToCyjs(name, value, table, specs) {
   const cy = table.get(value);
@@ -3475,13 +5062,81 @@ function exactness(e, rules) {
     const src = refSource(target, n, extracted.columns[target], extracted.features[target]);
     const rows = new Array(n).fill(null);
     for (const property of STYLE_PROPERTIES[target].keys()) {
-      const want = resolveRules(rules, target, property, src);
-      addBypasses(rows, target, property, want, drawn[target].values[property]);
+      const want2 = resolveRules(rules, target, property, src);
+      addBypasses(rows, target, property, want2, drawn[target].values[property]);
+    }
+    const want = (p) => resolveRules(rules, target, p, src);
+    if (target === "node") {
+      labelSizedBypasses(rows, want, drawn.node.values);
+    }
+    labelOpacityBypasses(rows, want, drawn[target].values);
+    const parts = [
+      ["labelBackgroundOpacity", "text-background-opacity", "opacity", "labelBackground"],
+      ["labelBorderOpacity", "text-border-opacity", "opacity", "labelBorderWidth"],
+      ["labelOutlineOpacity", "text-outline-opacity", "labelOpacity", "labelOutlineWidth"]
+    ];
+    if (target === "node") {
+      parts.push(
+        ["borderOpacity", "border-opacity", "opacity", null],
+        ["outerBorderOpacity", "outline-opacity", "opacity", null]
+      );
+    }
+    for (const part of parts) {
+      partOpacityBypasses(rows, want, drawn[target].values, part);
     }
     out[target] = rows;
   }
   return out;
 }
+function labelOpacityBypasses(rows, want, got) {
+  const label = want("labelOpacity");
+  const whole = want("opacity");
+  const at = (v) => typeof v === "number" ? v : 1;
+  for (let i = 0; i < rows.length; i++) {
+    const [l, o] = [at(label[i]), at(whole[i])];
+    const rewritten = rows[i]?.opacity !== void 0;
+    if (l === at(got.labelOpacity?.[i]) && !rewritten || Number.isNaN(o) || o <= 0) {
+      continue;
+    }
+    if (l === o && rewritten) {
+      continue;
+    }
+    if (l <= o) {
+      rows[i] = { ...rows[i], "text-opacity": num6(l / o) };
+    } else if (l > 0) {
+      rows[i] = { ...rows[i], opacity: num6(l), "line-opacity": num6(o / l), "text-opacity": 1 };
+    }
+  }
+}
+function partOpacityBypasses(rows, want, got, part) {
+  const [property, name, by, drawnBy] = part;
+  const own = want(property);
+  const whole = want(by);
+  const shown = drawnBy === null ? null : want(drawnBy);
+  const at = (v) => typeof v === "number" ? v : 1;
+  for (let i = 0; i < rows.length; i++) {
+    if (shown !== null && shown[i] === null) {
+      continue;
+    }
+    const [r, o] = [at(own[i]), at(whole[i])];
+    const rewritten = rows[i]?.opacity !== void 0 || rows[i]?.["text-opacity"] !== void 0;
+    if (r === at(got[property]?.[i]) && !rewritten || Number.isNaN(o) || o <= 0 || r > o) {
+      continue;
+    }
+    rows[i] = { ...rows[i], [name]: num6(r / o) };
+  }
+}
+function labelSizedBypasses(rows, want, got) {
+  const fit = want("labelFit");
+  for (const p of ["width", "height"]) {
+    const size = want(p);
+    for (let i = 0; i < rows.length; i++) {
+      if (fit[i] === "bounds" && size[i] === 0 && !(got.labelFit?.[i] === "bounds" && got[p]?.[i] === 0)) {
+        rows[i] = { ...rows[i], [p]: "label" };
+      }
+    }
+  }
+}
 function addBypasses(rows, target, property, want, got) {
   for (let i = 0; i < rows.length; i++) {
     const w = want[i];
@@ -3513,4 +5168,4 @@ export {
   evaluateCytoscapeJs as e,
   toCytoscapeStylesheet as t
 };
-//# sourceMappingURL=emit-CD8xnY8s.js.map
+//# sourceMappingURL=emit-7Jkpg0yd.js.map