@bendyline/squisq-formats 2.8.15 → 2.8.17

package/dist/{chunk-S5VXWSRR.js → chunk-PIEDORQL.js}

@@ -70,6 +70,7 @@ import {
 import { VIEWPORT_PRESETS } from "@bendyline/squisq/schemas";
 import {
   buildPreviewDoc,
+  coverRepeatsLeadingBlock,
   createTemplateContext,
   docToMarkdown,
   expandCoverBlock,
@@ -78,7 +79,8 @@ import {
   isGeometryBoundTemplate,
   isTemplateBlock,
   resolvePersistentLayers,
-  resolveThemeForDoc
+  resolveThemeForDoc,
+  shapePath
 } from "@bendyline/squisq/doc";
 import { splitIconMarkers as splitIconMarkers3 } from "@bendyline/squisq/icon-marker";
 import {
@@ -89,11 +91,24 @@ import {
 
 // src/pptx/pictureLayers.ts
 import { svgSourceFromBytes } from "@bendyline/squisq/markdown";
-function buildImageShape(img, shapeId, left, top, maxWidth, maxHeight, hyperlinkRelId, svgRelId) {
+function buildImageShape(img, shapeId, left, top, maxWidth, maxHeight, hyperlinkRelId, svgRelId, srcRect = "") {
   const name = escapeXml(img.alt || "Picture");
   const descr = img.alt ? ` descr="${escapeXml(img.alt)}"` : "";
   const link = hyperlinkRelId ? `<a:hlinkClick r:id="${hyperlinkRelId}"/>` : "";
-  return `<p:pic><p:nvPicPr>` + (link ? `<p:cNvPr id="${shapeId}" name="${name}"${descr}>${link}</p:cNvPr>` : `<p:cNvPr id="${shapeId}" name="${name}"${descr}/>`) + `<p:cNvPicPr><a:picLocks noChangeAspect="1"/></p:cNvPicPr><p:nvPr/></p:nvPicPr><p:blipFill>` + blipXml(img.relId, svgRelId) + `<a:stretch><a:fillRect/></a:stretch></p:blipFill><p:spPr><a:xfrm><a:off x="${left}" y="${top}"/><a:ext cx="${maxWidth}" cy="${maxHeight}"/></a:xfrm><a:prstGeom prst="rect"><a:avLst/></a:prstGeom></p:spPr></p:pic>`;
+  return `<p:pic><p:nvPicPr>` + (link ? `<p:cNvPr id="${shapeId}" name="${name}"${descr}>${link}</p:cNvPr>` : `<p:cNvPr id="${shapeId}" name="${name}"${descr}/>`) + `<p:cNvPicPr><a:picLocks noChangeAspect="1"/></p:cNvPicPr><p:nvPr/></p:nvPicPr><p:blipFill>` + blipXml(img.relId, svgRelId) + srcRect + `<a:stretch><a:fillRect/></a:stretch></p:blipFill><p:spPr><a:xfrm><a:off x="${left}" y="${top}"/><a:ext cx="${maxWidth}" cy="${maxHeight}"/></a:xfrm><a:prstGeom prst="rect"><a:avLst/></a:prstGeom></p:spPr></p:pic>`;
+}
+function fitPicture(box, size, fit) {
+  if (!size || size.width <= 0 || size.height <= 0 || fit === "fill" || box.height <= 0)
+    return { rect: box, srcRect: "" };
+  if (fit !== "cover") return { rect: fitCentered(box, size.width, size.height), srcRect: "" };
+  const image = size.width / size.height;
+  const frame = box.width / box.height;
+  if (Math.abs(image - frame) < 1e-3) return { rect: box, srcRect: "" };
+  const edge = Math.round((image > frame ? 1 - frame / image : 1 - image / frame) / 2 * 1e5);
+  return {
+    rect: box,
+    srcRect: image > frame ? `<a:srcRect l="${edge}" r="${edge}"/>` : `<a:srcRect t="${edge}" b="${edge}"/>`
+  };
 }
 function fitCentered(area, width, height) {
   const scale = Math.min(area.width / width, area.height / height);
@@ -448,9 +463,30 @@ function cssGradientToString(gradient) {
 // src/pptx/drawingXml.ts
 function officeTypeface(family, fallback) {
   const resolved = resolveFontFamily(family, fallback);
-  const first = resolved.split(",")[0]?.trim().replace(/^['"]|['"]$/g, "");
-  return first || fallback;
-}
+  const names = resolved.split(",").map((name) => name.trim().replace(/^['"]|['"]$/g, "")).filter(Boolean);
+  const named = names.find((name) => !GENERIC_FONT_FAMILIES.has(name.toLowerCase()));
+  if (named) return named;
+  const kind = names.map((name) => name.toLowerCase());
+  if (kind.includes("monospace") || kind.includes("ui-monospace")) return "Consolas";
+  if (kind.includes("serif") || kind.includes("ui-serif")) return "Georgia";
+  return names.length ? "Segoe UI" : fallback;
+}
+var GENERIC_FONT_FAMILIES = /* @__PURE__ */ new Set([
+  "system-ui",
+  "-apple-system",
+  "blinkmacsystemfont",
+  "ui-sans-serif",
+  "ui-serif",
+  "ui-monospace",
+  "ui-rounded",
+  "sans-serif",
+  "serif",
+  "monospace",
+  "cursive",
+  "fantasy",
+  "emoji",
+  "math"
+]);
 function solidColorXml(color) {
   const alpha = color.alpha < 1e5 ? `<a:alpha val="${color.alpha}"/>` : "";
   return `<a:solidFill><a:srgbClr val="${color.hex}">${alpha}</a:srgbClr></a:solidFill>`;
@@ -506,13 +542,17 @@ function patternFillXml(pattern, ground) {
 function buildLayerShape(layer, shapeId) {
   const rect = toEmuRect(resolveLayerRect(layer.position, 100, 100));
   const geometry = layer.content.shape === "circle" ? "ellipse" : layer.content.shape === "line" ? "line" : layer.content.borderRadius ? "roundRect" : "rect";
+  const box = resolveLayerRect(layer.position, 100, 100);
+  const shorter = Math.min(box.width, box.height);
+  const radius = Math.min(shorter / 2, Math.max(0, layer.content.borderRadius ?? 0));
+  const adjust = geometry === "roundRect" && shorter > 0 ? `<a:avLst><a:gd name="adj" fmla="val ${Math.round(radius / shorter * 1e5)}"/></a:avLst>` : "<a:avLst/>";
   const fill = layer.content.shape === "line" ? "<a:noFill/>" : layer.content.pattern ? patternFillXml(layer.content.pattern) : fillXml(layer.content.fill, layer.content.fillOpacity, layer.content.gradient);
   const stroke = lineXml(
     layer.content.stroke ?? (layer.content.shape === "line" ? "#ffffff" : void 0),
     layer.content.strokeWidth ?? (layer.content.shape === "line" ? 2 : void 0),
     layer.content.borderStyle
   );
-  return `<p:sp><p:nvSpPr><p:cNvPr id="${shapeId}" name="${escapeXml(layer.id)}"/><p:cNvSpPr/><p:nvPr/></p:nvSpPr><p:spPr><a:xfrm><a:off x="${rect.x}" y="${rect.y}"/><a:ext cx="${rect.width}" cy="${rect.height}"/></a:xfrm><a:prstGeom prst="${geometry}"><a:avLst/></a:prstGeom>` + fill + stroke + `</p:spPr></p:sp>`;
+  return `<p:sp><p:nvSpPr><p:cNvPr id="${shapeId}" name="${escapeXml(layer.id)}"/><p:cNvSpPr/><p:nvPr/></p:nvSpPr><p:spPr><a:xfrm><a:off x="${rect.x}" y="${rect.y}"/><a:ext cx="${rect.width}" cy="${rect.height}"/></a:xfrm><a:prstGeom prst="${geometry}">${adjust}</a:prstGeom>` + fill + stroke + `</p:spPr></p:sp>`;
 }
 
 // src/pptx/backdrop.ts
@@ -751,6 +791,235 @@ function planDeckBackdrops(blocks) {
   return { master: { base: masterBase, overlays: masterOverlays }, layouts, slides };
 }
 
+// src/pptx/pathGeometry.ts
+var ARITY = {
+  M: 2,
+  L: 2,
+  H: 1,
+  V: 1,
+  C: 6,
+  S: 4,
+  Q: 4,
+  T: 2,
+  A: 7,
+  Z: 0
+};
+function arcToCubics(x0, y0, rx, ry, rotation, largeArc, sweep, x, y) {
+  if (x0 === x && y0 === y || !Number.isFinite(rx + ry)) return [];
+  rx = Math.abs(rx);
+  ry = Math.abs(ry);
+  if (rx === 0 || ry === 0) return [{ op: "L", x, y }];
+  const phi = rotation * Math.PI / 180;
+  const [cos, sin] = [Math.cos(phi), Math.sin(phi)];
+  const dx = (x0 - x) / 2;
+  const dy = (y0 - y) / 2;
+  const x1 = cos * dx + sin * dy;
+  const y1 = -sin * dx + cos * dy;
+  const lambda = x1 * x1 / (rx * rx) + y1 * y1 / (ry * ry);
+  if (lambda > 1) {
+    rx *= Math.sqrt(lambda);
+    ry *= Math.sqrt(lambda);
+  }
+  const numerator = rx * rx * ry * ry - rx * rx * y1 * y1 - ry * ry * x1 * x1;
+  const denominator = rx * rx * y1 * y1 + ry * ry * x1 * x1;
+  const factor = (largeArc === sweep ? -1 : 1) * Math.sqrt(Math.max(0, numerator / (denominator || 1)));
+  const cxp = factor * rx * y1 / ry;
+  const cyp = -factor * ry * x1 / rx;
+  const cx = cos * cxp - sin * cyp + (x0 + x) / 2;
+  const cy = sin * cxp + cos * cyp + (y0 + y) / 2;
+  const angle = (ux, uy, vx, vy) => {
+    const turn = Math.atan2(ux * vy - uy * vx, ux * vx + uy * vy);
+    return turn;
+  };
+  const start = angle(1, 0, (x1 - cxp) / rx, (y1 - cyp) / ry);
+  let delta = angle((x1 - cxp) / rx, (y1 - cyp) / ry, (-x1 - cxp) / rx, (-y1 - cyp) / ry);
+  if (!sweep && delta > 0) delta -= 2 * Math.PI;
+  if (sweep && delta < 0) delta += 2 * Math.PI;
+  const pieces = Math.max(1, Math.ceil(Math.abs(delta) / (Math.PI / 2) - 1e-9));
+  const step = delta / pieces;
+  const handle = 4 / 3 * Math.tan(step / 4);
+  const point = (theta) => [
+    cx + rx * Math.cos(theta) * cos - ry * Math.sin(theta) * sin,
+    cy + rx * Math.cos(theta) * sin + ry * Math.sin(theta) * cos
+  ];
+  const tangent = (theta) => [
+    -rx * Math.sin(theta) * cos - ry * Math.cos(theta) * sin,
+    -rx * Math.sin(theta) * sin + ry * Math.cos(theta) * cos
+  ];
+  const segments = [];
+  for (let i = 0; i < pieces; i++) {
+    const from = start + step * i;
+    const to = from + step;
+    const [px, py] = point(from);
+    const [qx, qy] = point(to);
+    const [tx0, ty0] = tangent(from);
+    const [tx1, ty1] = tangent(to);
+    segments.push({
+      op: "C",
+      x1: px + handle * tx0,
+      y1: py + handle * ty0,
+      x2: qx - handle * tx1,
+      y2: qy - handle * ty1,
+      // The last piece ends exactly on the authored endpoint.
+      x: i === pieces - 1 ? x : qx,
+      y: i === pieces - 1 ? y : qy
+    });
+  }
+  return segments;
+}
+function parseSvgPath(d) {
+  const tokens = d.match(/[a-zA-Z]|[-+]?(?:\d+\.?\d*|\.\d+)(?:[eE][-+]?\d+)?/gu);
+  if (!tokens || !/^[Mm]$/u.test(tokens[0])) return null;
+  const segments = [];
+  let [cx, cy] = [0, 0];
+  let [startX, startY] = [0, 0];
+  let control;
+  let index = 0;
+  while (index < tokens.length) {
+    const command = tokens[index++];
+    const upper = command.toUpperCase();
+    const arity = ARITY[upper];
+    if (arity === void 0 || !/^[a-zA-Z]$/u.test(command)) return null;
+    const relative = command !== upper;
+    if (upper === "Z") {
+      segments.push({ op: "Z" });
+      [cx, cy] = [startX, startY];
+      control = void 0;
+      continue;
+    }
+    let first = true;
+    while (first || index < tokens.length && !/^[a-zA-Z]$/u.test(tokens[index])) {
+      const numbers = tokens.slice(index, index + arity).map(Number);
+      if (numbers.length < arity || numbers.some((value) => !Number.isFinite(value))) return null;
+      index += arity;
+      const [ox, oy] = relative ? [cx, cy] : [0, 0];
+      let next;
+      switch (upper) {
+        case "M": {
+          [cx, cy] = [ox + numbers[0], oy + numbers[1]];
+          if (first) {
+            segments.push({ op: "M", x: cx, y: cy });
+            [startX, startY] = [cx, cy];
+          } else segments.push({ op: "L", x: cx, y: cy });
+          break;
+        }
+        case "L":
+          [cx, cy] = [ox + numbers[0], oy + numbers[1]];
+          segments.push({ op: "L", x: cx, y: cy });
+          break;
+        case "H":
+          cx = ox + numbers[0];
+          segments.push({ op: "L", x: cx, y: cy });
+          break;
+        case "V":
+          cy = oy + numbers[0];
+          segments.push({ op: "L", x: cx, y: cy });
+          break;
+        case "C":
+        case "S": {
+          const smooth = upper === "S";
+          const x1 = smooth ? control?.kind === "C" ? 2 * cx - control.x : cx : ox + numbers[0];
+          const y1 = smooth ? control?.kind === "C" ? 2 * cy - control.y : cy : oy + numbers[1];
+          const rest = numbers.slice(smooth ? 0 : 2);
+          const [x2, y2, x, y] = [ox + rest[0], oy + rest[1], ox + rest[2], oy + rest[3]];
+          segments.push({ op: "C", x1, y1, x2, y2, x, y });
+          next = { kind: "C", x: x2, y: y2 };
+          [cx, cy] = [x, y];
+          break;
+        }
+        case "Q":
+        case "T": {
+          const smooth = upper === "T";
+          const x1 = smooth ? control?.kind === "Q" ? 2 * cx - control.x : cx : ox + numbers[0];
+          const y1 = smooth ? control?.kind === "Q" ? 2 * cy - control.y : cy : oy + numbers[1];
+          const rest = numbers.slice(smooth ? 0 : 2);
+          const [x, y] = [ox + rest[0], oy + rest[1]];
+          segments.push({ op: "Q", x1, y1, x, y });
+          next = { kind: "Q", x: x1, y: y1 };
+          [cx, cy] = [x, y];
+          break;
+        }
+        case "A": {
+          const [x, y] = [ox + numbers[5], oy + numbers[6]];
+          segments.push(
+            ...arcToCubics(
+              cx,
+              cy,
+              numbers[0],
+              numbers[1],
+              numbers[2],
+              numbers[3] !== 0,
+              numbers[4] !== 0,
+              x,
+              y
+            )
+          );
+          [cx, cy] = [x, y];
+          break;
+        }
+      }
+      control = next;
+      first = false;
+    }
+  }
+  return segments;
+}
+function pathBounds(segments) {
+  const xs = [];
+  const ys = [];
+  for (const segment of segments) {
+    if (segment.op === "Z") continue;
+    xs.push(segment.x);
+    ys.push(segment.y);
+    if (segment.op === "C" || segment.op === "Q") {
+      xs.push(segment.x1);
+      ys.push(segment.y1);
+    }
+    if (segment.op === "C") {
+      xs.push(segment.x2);
+      ys.push(segment.y2);
+    }
+  }
+  if (!xs.length) return null;
+  const [x, y] = [Math.min(...xs), Math.min(...ys)];
+  return { x, y, width: Math.max(...xs) - x, height: Math.max(...ys) - y };
+}
+function isStraightLine(segments) {
+  const points = segments.filter((segment) => segment.op !== "Z");
+  if (points.length < 2 || points.length !== segments.length) return false;
+  if (points.some((segment) => segment.op === "C" || segment.op === "Q")) return false;
+  const first = points[0];
+  const last = points[points.length - 1];
+  const [dx, dy] = [last.x - first.x, last.y - first.y];
+  const length = Math.hypot(dx, dy);
+  if (length === 0) return false;
+  return points.every((segment) => {
+    const point = segment;
+    return Math.abs((point.x - first.x) * dy - (point.y - first.y) * dx) / length < 0.5;
+  });
+}
+function customGeometryXml(segments, bounds, scale, filled) {
+  const unit = (value, origin) => Math.round((value - origin) * scale);
+  const pt = (x, y) => `<a:pt x="${unit(x, bounds.x)}" y="${unit(y, bounds.y)}"/>`;
+  const body = segments.map((segment) => {
+    switch (segment.op) {
+      case "M":
+        return `<a:moveTo>${pt(segment.x, segment.y)}</a:moveTo>`;
+      case "L":
+        return `<a:lnTo>${pt(segment.x, segment.y)}</a:lnTo>`;
+      case "C":
+        return `<a:cubicBezTo>${pt(segment.x1, segment.y1)}${pt(segment.x2, segment.y2)}${pt(segment.x, segment.y)}</a:cubicBezTo>`;
+      case "Q":
+        return `<a:quadBezTo>${pt(segment.x1, segment.y1)}${pt(segment.x, segment.y)}</a:quadBezTo>`;
+      case "Z":
+        return "<a:close/>";
+    }
+  }).join("");
+  const width = Math.max(1, Math.round(bounds.width * scale));
+  const height = Math.max(1, Math.round(bounds.height * scale));
+  return `<a:custGeom><a:avLst/><a:gdLst/><a:ahLst/><a:cxnLst/><a:rect l="0" t="0" r="r" b="b"/><a:pathLst><a:path w="${width}" h="${height}"${filled ? "" : ' fill="none"'}>${body}</a:path></a:pathLst></a:custGeom>`;
+}
+
 // src/pptx/layerText.ts
 import { splitIconMarkers as splitIconMarkers2 } from "@bendyline/squisq/icon-marker";
 
@@ -1130,7 +1399,8 @@ function buildLayerTextShape(layer, shapeId, maxBottom, listIndentPx, textScale
   const rect = toEmuRect(virtualRect);
   const align = style.textAlign === "center" ? "ctr" : style.textAlign === "right" ? "r" : "l";
   const inset = Math.max(0, Math.round(padding * EMU_PER_CANVAS_PX));
-  const bodyPr = `<a:bodyPr wrap="square" anchor="${vertical}" vertOverflow="clip" horzOverflow="clip" lIns="${inset}" rIns="${inset}" tIns="${inset}" bIns="${inset}"><a:noAutofit/></a:bodyPr>`;
+  const unbreakable = !visibleBox && sourceText.trim() !== "" && sourceText.split("\n").every((line) => !/\s/u.test(line.trim()));
+  const bodyPr = `<a:bodyPr wrap="${unbreakable ? "none" : "square"}" anchor="${vertical}" vertOverflow="clip" horzOverflow="${unbreakable ? "overflow" : "clip"}" lIns="${inset}" rIns="${inset}" tIns="${inset}" bIns="${inset}"><a:noAutofit/></a:bodyPr>`;
   const paragraphs = layer.content.paragraphs || blockGaps ? buildStructuredParagraphs(paragraphSource, renderedStyle, align, {
     // A list with no marker column of its own hangs its bullets by the
     // player's list indent.
@@ -1366,13 +1636,18 @@ async function docToPptx(doc, options = {}) {
       Math.max(1, expanded.length + 1),
       VIEWPORT_PRESETS.landscape
     );
-    slideBlocks.push({
-      id: "cover-block",
-      startTime: -1,
-      duration: 0,
-      audioSegment: -1,
-      layers: expandCoverBlock(doc.startBlock, coverContext)
-    });
+    const coverLayers = expandCoverBlock(doc.startBlock, coverContext);
+    if (coverRepeatsLeadingBlock(doc) && expanded[0] && expanded[0].id === doc.blocks[0]?.id) {
+      expanded[0] = { ...expanded[0], layers: coverLayers };
+    } else {
+      slideBlocks.push({
+        id: "cover-block",
+        startTime: -1,
+        duration: 0,
+        audioSegment: -1,
+        layers: coverLayers
+      });
+    }
   }
   slideBlocks.push(...expanded);
   if (slideBlocks.length === 0) {
@@ -1652,7 +1927,7 @@ function buildLayerSlideXml(block, ctx, plan) {
   }
   const textScale = isGeometryBoundTemplate(block.template) ? 1 : estimateSlideTextScale(layers);
   const units = mergeTextFlows(layers, textScale);
-  const textLayerY = units.filter(({ layer }) => layer.type === "text").map(({ layer }) => resolvePositionValue(layer.position.y, 1080));
+  const textBoxes = units.filter(({ layer }) => layer.type === "text").map(({ layer }) => resolveLayerRect(layer.position, 1920, 1));
   for (const layer of layers) {
     if (layer.type !== "text") continue;
     for (const run of splitIconMarkers3(layer.content.text ?? "")) {
@@ -1662,8 +1937,11 @@ function buildLayerSlideXml(block, ctx, plan) {
   for (let index = 0; index < units.length; index++) {
     if ((index & 31) === 0) ctx.signal?.throwIfAborted();
     const { layer, listIndentPx } = units[index];
-    const currentY = layer.type === "text" ? resolvePositionValue(layer.position.y, 1080) : void 0;
-    const nextTextY = currentY === void 0 ? void 0 : textLayerY.filter((candidate) => candidate > currentY + 1).sort((a, b) => a - b)[0];
+    const current = layer.type === "text" ? resolveLayerRect(layer.position, 1920, 1) : void 0;
+    const currentY = current?.y;
+    const nextTextY = current === void 0 ? void 0 : textBoxes.filter(
+      (candidate) => candidate.y > current.y + 1 && candidate.x < current.x + current.width - TEXT_COLUMN_OVERLAP_PX && candidate.x + candidate.width > current.x + TEXT_COLUMN_OVERLAP_PX
+    ).map((candidate) => candidate.y).sort((a, b) => a - b)[0];
     const textBottom = nextTextY === void 0 || currentY === void 0 ? void 0 : Math.max(currentY + 1, nextTextY - 8);
     shapes.push(
       ...layer.type === "text" ? [buildLayerTextShape(layer, ctx.allocShapeId(), textBottom, listIndentPx, textScale)] : convertLayerToShapes(layer, ctx, textBottom)
@@ -1688,10 +1966,24 @@ function convertLayerToShapes(layer, ctx, textBottom) {
       const data = svg ? void 0 : ctx.images?.get(layer.content.src);
       if (data) {
         const image = ctx.addImage(layer.content.src, data, layer.content.alt);
-        const rect = toEmuRect(resolveLayerRect(layer.position, 1920, 1080));
+        const { rect, srcRect } = fitPicture(
+          toEmuRect(resolveLayerRect(layer.position, 1920, 1080)),
+          readImageDimensions(data),
+          layer.content.fit
+        );
         const embedded = ctx.embeddedImages.find((candidate) => candidate.relId === image);
         return [
-          buildImageShape(embedded, ctx.allocShapeId(), rect.x, rect.y, rect.width, rect.height)
+          buildImageShape(
+            embedded,
+            ctx.allocShapeId(),
+            rect.x,
+            rect.y,
+            rect.width,
+            rect.height,
+            null,
+            void 0,
+            srcRect
+          )
         ];
       }
       return [
@@ -1891,46 +2183,74 @@ function treeItemsToText(items, depth = 0) {
   }
   return lines.filter(Boolean).join("\n");
 }
+function pathLineXml(layer) {
+  const { stroke, strokeWidth } = layer.content;
+  if (stroke === "none" || stroke === "transparent" || strokeWidth === 0)
+    return "<a:ln><a:noFill/></a:ln>";
+  const color = parseCssColor(stroke, "FFFFFF");
+  const width = Math.max(1, Math.round((strokeWidth ?? 2) * EMU_PER_CANVAS_PX));
+  const head = markerXml("headEnd", layer.content.startMarker);
+  const tail = markerXml("tailEnd", layer.content.endMarker);
+  const dash = dashXml(layer.content.borderStyle, layer.content.dasharray);
+  return `<a:ln w="${width}">${solidColorXml(color)}${dash}${head}${tail}</a:ln>`;
+}
+var TEXT_COLUMN_OVERLAP_PX = 8;
 function buildPathLayerShapes(layer, ctx) {
+  let d = layer.content.d;
   if (layer.content.shapeKind) {
-    const shape = {
-      id: layer.id,
-      type: "shape",
-      position: layer.position,
-      content: {
-        shape: layer.content.shapeKind === "circle" ? "circle" : "rect",
-        fill: layer.content.fill,
-        fillOpacity: layer.content.fillOpacity,
-        gradient: layer.content.gradient,
-        stroke: layer.content.stroke,
-        strokeWidth: layer.content.strokeWidth,
-        borderStyle: layer.content.borderStyle
-      }
-    };
-    return [buildLayerShape(shape, ctx.allocShapeId())];
-  }
-  const numbers = layer.content.d.match(/-?\d+(?:\.\d+)?/g)?.map(Number);
-  if (!numbers || numbers.length < 4) return [];
-  const x1 = numbers[0];
-  const y1 = numbers[1];
-  const x2 = numbers[numbers.length - 2];
-  const y2 = numbers[numbers.length - 1];
+    const box = resolveLayerRect(layer.position, 100, 100);
+    const named = shapePath(layer.content.shapeKind, box.x, box.y, box.width, box.height);
+    if (!named) {
+      const shape = {
+        id: layer.id,
+        type: "shape",
+        position: layer.position,
+        content: {
+          shape: layer.content.shapeKind === "circle" ? "circle" : "rect",
+          fill: layer.content.fill,
+          fillOpacity: layer.content.fillOpacity,
+          gradient: layer.content.gradient,
+          stroke: layer.content.stroke,
+          strokeWidth: layer.content.strokeWidth,
+          borderStyle: layer.content.borderStyle
+        }
+      };
+      return [buildLayerShape(shape, ctx.allocShapeId())];
+    }
+    d = named;
+  }
+  const segments = parseSvgPath(d);
+  const bounds = segments ? pathBounds(segments) : null;
+  if (!segments || !bounds) return [];
+  const { fill, gradient, fillOpacity } = layer.content;
+  const filled = !!gradient || !!fill && fill !== "none" && fill !== "transparent";
+  const name = `<p:nvSpPr><p:cNvPr id="${ctx.allocShapeId()}" name="${escapeXml(layer.id)}"/><p:cNvSpPr/><p:nvPr/></p:nvSpPr>`;
+  if (!filled && isStraightLine(segments)) {
+    const points = segments.filter(
+      (segment) => segment.op === "M" || segment.op === "L"
+    );
+    const from = points[0];
+    const to = points[points.length - 1];
+    const rect2 = toEmuRect({
+      x: Math.min(from.x, to.x),
+      y: Math.min(from.y, to.y),
+      width: Math.max(1, Math.abs(to.x - from.x)),
+      height: Math.max(1, Math.abs(to.y - from.y))
+    });
+    const flipH = to.x < from.x ? ' flipH="1"' : "";
+    const flipV = to.y < from.y ? ' flipV="1"' : "";
+    return [
+      `<p:sp>${name}<p:spPr><a:xfrm${flipH}${flipV}><a:off x="${rect2.x}" y="${rect2.y}"/><a:ext cx="${rect2.width}" cy="${rect2.height}"/></a:xfrm><a:prstGeom prst="line"><a:avLst/></a:prstGeom><a:noFill/>` + pathLineXml(layer) + `</p:spPr></p:sp>`
+    ];
+  }
   const rect = toEmuRect({
-    x: Math.min(x1, x2),
-    y: Math.min(y1, y2),
-    width: Math.max(1, Math.abs(x2 - x1)),
-    height: Math.max(1, Math.abs(y2 - y1))
+    x: bounds.x,
+    y: bounds.y,
+    width: Math.max(1, bounds.width),
+    height: Math.max(1, bounds.height)
   });
-  const flipH = x2 < x1 ? ' flipH="1"' : "";
-  const flipV = y2 < y1 ? ' flipV="1"' : "";
-  const stroke = parseCssColor(layer.content.stroke, "FFFFFF");
-  const width = Math.max(1, Math.round((layer.content.strokeWidth ?? 2) * EMU_PER_CANVAS_PX));
-  const head = markerXml("headEnd", layer.content.startMarker);
-  const tail = markerXml("tailEnd", layer.content.endMarker);
-  const dash = dashXml(layer.content.borderStyle, layer.content.dasharray);
-  const shapeId = ctx.allocShapeId();
   return [
-    `<p:sp><p:nvSpPr><p:cNvPr id="${shapeId}" name="${escapeXml(layer.id)}"/><p:cNvSpPr/><p:nvPr/></p:nvSpPr><p:spPr><a:xfrm${flipH}${flipV}><a:off x="${rect.x}" y="${rect.y}"/><a:ext cx="${rect.width}" cy="${rect.height}"/></a:xfrm><a:prstGeom prst="line"><a:avLst/></a:prstGeom><a:noFill/><a:ln w="${width}">${solidColorXml(stroke)}${dash}${head}${tail}</a:ln></p:spPr></p:sp>`
+    `<p:sp>${name}<p:spPr><a:xfrm><a:off x="${rect.x}" y="${rect.y}"/><a:ext cx="${rect.width}" cy="${rect.height}"/></a:xfrm>` + customGeometryXml(segments, bounds, EMU_PER_CANVAS_PX, filled) + (filled ? fillXml(fill, fillOpacity, gradient) : "<a:noFill/>") + pathLineXml(layer) + `</p:spPr></p:sp>`
   ];
 }
 function textLayerForPlaceholder(position, text, ctx) {

package/dist/{chunk-ZJERBWTB.js → chunk-WPLCWAN3.js}

@@ -28,7 +28,7 @@ import {
 
 // src/epub/export.ts
 import JSZip from "jszip";
-import { resolveFontFamily } from "@bendyline/squisq/schemas";
+import { contrastRatio, isHex, resolveFontFamily } from "@bendyline/squisq/schemas";
 import { resolveThemeForDoc } from "@bendyline/squisq/doc";
 import { isHtmlLineBreak, readFrontmatterThemeId, sanitizeUrl } from "@bendyline/squisq/markdown";
 async function markdownDocToEpub(authoredDoc, options = {}) {
@@ -669,14 +669,20 @@ ${navItems}
 </body>
 </html>`;
 }
+function readsOnPaper(color) {
+  return !!color && isHex(color) && contrastRatio(color, "#ffffff") >= 4.5;
+}
 function generateStylesheet(themeId, doc, registry, iconFonts = []) {
   let themeVars = "";
   if (themeId) {
     const theme = resolveThemeForDoc(doc, themeId, registry);
+    const ink = [theme.colors.primary, theme.colors.secondary, theme.colors.highlight].find(
+      (color) => readsOnPaper(color)
+    );
     themeVars = `
-  --epub-bg: ${theme.colors.background};
-  --epub-text: ${theme.colors.text};
-  --epub-primary: ${theme.colors.primary};
+  --epub-bg: ${theme.colors.background};${readsOnPaper(theme.colors.text) ? `
+  --epub-text: ${theme.colors.text};` : ""}${ink ? `
+  --epub-primary: ${ink};` : ""}
   --epub-heading-font: ${resolveFontFamily(theme.typography.titleFont, "serif")};
   --epub-body-font: ${resolveFontFamily(theme.typography.bodyFont, "sans-serif")};`;
   }