@cfasim-ui/docs 0.4.6 → 0.4.7

package/charts/ChartMenu/download.ts

@@ -7,16 +7,81 @@ export function downloadBlob(blob: Blob, name: string) {
   URL.revokeObjectURL(url);
 }
 
-export function saveSvg(svg: SVGSVGElement, filename: string) {
+/** Inherited CSS properties propagated onto the cloned SVG root so text and
+ *  `currentColor` strokes render with the same color/typography as the
+ *  live chart when the SVG is opened standalone or rasterized to PNG. */
+const ROOT_INHERITED_PROPS = [
+  "color",
+  "font-family",
+  "font-size",
+  "font-weight",
+] as const;
+
+/** Presentation attributes that may contain `var(--…)` references. The
+ *  fallback inside `var(--name, #fff)` is the only thing that renders when
+ *  the custom property is undefined outside the page context — so we
+ *  resolve them against the document's CSS custom properties before
+ *  serializing. */
+const VAR_RESOLVABLE_ATTRS = ["fill", "stroke"] as const;
+
+/** Resolve a single `var(--name)` or `var(--name, fallback)` expression.
+ *  Looks the name up on `document.documentElement` (where theme tokens are
+ *  declared); falls back to the in-expression fallback, then the original
+ *  expression if neither resolves. */
+function resolveVarExpression(expr: string): string {
+  const match = expr.match(
+    /^\s*var\(\s*(--[\w-]+)\s*(?:,\s*([^)]*?)\s*)?\)\s*$/,
+  );
+  if (!match) return expr;
+  const [, name, fallback] = match;
+  const value = window
+    .getComputedStyle(document.documentElement)
+    .getPropertyValue(name)
+    .trim();
+  if (value) return value;
+  if (fallback) return fallback.trim();
+  return expr;
+}
+
+/** Clone `svg` and inline the styles that don't survive a standalone render:
+ *  inherited `color`/`font-*` on the root (so `currentColor` and unset
+ *  font-family resolve), and any `var(--…)` references in fill/stroke
+ *  attributes resolved against the document. */
+export function prepareSvgForExport(svg: SVGSVGElement): SVGSVGElement {
   const clone = svg.cloneNode(true) as SVGSVGElement;
   clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+
+  const rootComputed = window.getComputedStyle(svg);
+  const rootStyleParts: string[] = [];
+  for (const prop of ROOT_INHERITED_PROPS) {
+    const value = rootComputed.getPropertyValue(prop);
+    if (value) rootStyleParts.push(`${prop}: ${value}`);
+  }
+  const existingRootStyle = clone.getAttribute("style") ?? "";
+  clone.setAttribute(
+    "style",
+    [existingRootStyle, ...rootStyleParts].filter(Boolean).join("; "),
+  );
+
+  for (const target of clone.querySelectorAll<SVGElement>("*")) {
+    for (const attr of VAR_RESOLVABLE_ATTRS) {
+      const raw = target.getAttribute(attr);
+      if (!raw || !raw.includes("var(")) continue;
+      target.setAttribute(attr, resolveVarExpression(raw));
+    }
+  }
+
+  return clone;
+}
+
+export function saveSvg(svg: SVGSVGElement, filename: string) {
+  const clone = prepareSvgForExport(svg);
   const xml = new XMLSerializer().serializeToString(clone);
   downloadBlob(new Blob([xml], { type: "image/svg+xml" }), `${filename}.svg`);
 }
 
 export function savePng(svg: SVGSVGElement, filename: string) {
-  const clone = svg.cloneNode(true) as SVGSVGElement;
-  clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+  const clone = prepareSvgForExport(svg);
   const xml = new XMLSerializer().serializeToString(clone);
   const svgBlob = new Blob([xml], { type: "image/svg+xml;charset=utf-8" });
   const url = URL.createObjectURL(svgBlob);

package/charts/_shared/ChartAnnotations.vue

@@ -39,10 +39,6 @@ const LINE_HEIGHT_RATIO = 1.2;
 // of the first text line (between baseline and cap-height). Lands on the
 // x-height middle for most fonts.
 const FIRST_LINE_CENTER_RATIO = 0.35;
-// Nudge the start of the curve a few pixels in the offset direction so
-// it doesn't sit directly on top of axis lines or gridlines at the
-// anchor.
-const START_NUDGE_PX = 3;
 
 interface TextRun {
   text: string;
@@ -66,6 +62,10 @@ interface RenderedAnnotation {
   lineWidth: number;
   lineDash?: string;
   arrow: boolean;
+  // Inline arrow geometry. Rendered as a triangle with explicit fill so it
+  // renders correctly in Safari (which doesn't support `context-stroke` on
+  // SVG markers). Present only when an arrow should be drawn.
+  arrowTip?: { x: number; y: number; angle: number };
   rule?: { x1: number; y1: number; x2: number; y2: number };
 }
 
@@ -138,10 +138,12 @@ const items = computed<RenderedAnnotation[]>(() => {
 
     let rule: RenderedAnnotation["rule"];
     let pointerPath = "";
+    let arrowTip: RenderedAnnotation["arrowTip"];
+    const wantArrow = !isRule && (a.arrow ?? true);
     if (isRule && props.bounds) {
       rule = computeRule(pointer, projected.x, projected.y, props.bounds);
     } else {
-      pointerPath = buildPointerPath(
+      const built = buildPointerPath(
         projected.x,
         projected.y,
         labelX,
@@ -149,6 +151,8 @@ const items = computed<RenderedAnnotation[]>(() => {
         fontSize,
         pointer as "curved" | "straight" | "none",
       );
+      pointerPath = built.path;
+      if (wantArrow && built.arrow) arrowTip = built.arrow;
     }
 
     out.push({
@@ -166,7 +170,8 @@ const items = computed<RenderedAnnotation[]>(() => {
       lineColor,
       lineWidth,
       lineDash,
-      arrow: !isRule && (a.arrow ?? true),
+      arrow: wantArrow,
+      arrowTip,
       rule,
     });
   }
@@ -216,6 +221,15 @@ function computeRule(
  *   label so the endpoint reads as pointing at the first line — not at
  *   the bottom of a multi-line block.
  */
+interface PointerGeom {
+  path: string;
+  // Tip position and rotation (degrees) for the inline arrow head. The
+  // arrow points opposite the path's start tangent — matching the look of
+  // `marker-start` with `orient="auto-start-reverse"`, but rendered as a
+  // plain triangle so the color works in Safari.
+  arrow?: { x: number; y: number; angle: number };
+}
+
 function buildPointerPath(
   ax: number,
   ay: number,
@@ -223,8 +237,8 @@ function buildPointerPath(
   ly: number,
   fontSize: number,
   pointer: "curved" | "straight" | "none",
-): string {
-  if (pointer === "none") return "";
+): PointerGeom {
+  if (pointer === "none") return { path: "" };
   const dx = lx - ax;
   const dy = ly - ay;
 
@@ -243,53 +257,49 @@ function buildPointerPath(
     const segDx = lx - ax;
     const segDy = ey - ay;
     const len = Math.hypot(segDx, segDy);
-    if (len <= ANCHOR_GAP_PX + LABEL_GAP_PX) return "";
+    if (len <= ANCHOR_GAP_PX + LABEL_GAP_PX) return { path: "" };
     const ux = segDx / len;
     const uy = segDy / len;
     const sx = ax + ux * ANCHOR_GAP_PX;
     const sy = ay + uy * ANCHOR_GAP_PX;
     const ex = lx - ux * LABEL_GAP_PX;
     const eyClamped = ey - uy * LABEL_GAP_PX;
-    return `M${sx},${sy} L${ex},${eyClamped}`;
+    // Arrow points back toward the anchor (opposite of (ux, uy)).
+    const angle = (Math.atan2(-uy, -ux) * 180) / Math.PI;
+    return {
+      path: `M${sx},${sy} L${ex},${eyClamped}`,
+      arrow: { x: sx, y: sy, angle },
+    };
   }
 
   const adjDy = targetY - ay;
 
   // Skip the curve if one dimension is too small to clear its gap.
   if (Math.abs(adjDy) <= ANCHOR_GAP_PX || Math.abs(dx) <= LABEL_GAP_PX) {
-    return "";
+    return { path: "" };
   }
 
   const xDir = Math.sign(dx);
   const yDir = Math.sign(adjDy);
-  // Nudge the start horizontally toward the label so the line doesn't
-  // sit on top of axis/grid lines passing through the anchor.
-  const sx = ax + xDir * START_NUDGE_PX;
+  // Start the curve directly above/below the anchor so the arrow head
+  // lines up with the data point rather than sitting off to one side.
+  const sx = ax;
   const sy = ay + yDir * ANCHOR_GAP_PX;
   const ex = lx - xDir * LABEL_GAP_PX;
   const ey = targetY;
-  // Control sits at (sx, targetY) so the curve emerges from the nudged
-  // start tangent vertically and lands on the label horizontally —
-  // a clean quarter-arc shape.
-  return `M${sx},${sy} Q${sx},${targetY} ${ex},${ey}`;
+  // Control sits at (sx, targetY) so the curve emerges from the start
+  // tangent vertically and lands on the label horizontally —
+  // a clean quarter-arc shape. The start tangent is (0, yDir), so the
+  // arrow points (0, -yDir) — straight up when yDir=1, down when yDir=-1.
+  const angle = yDir > 0 ? -90 : 90;
+  return {
+    path: `M${sx},${sy} Q${sx},${targetY} ${ex},${ey}`,
+    arrow: { x: sx, y: sy, angle },
+  };
 }
 </script>
 
 <template>
-  <defs>
-    <marker
-      id="chart-annotation-arrow"
-      viewBox="0 0 8 8"
-      refX="7"
-      refY="4"
-      markerWidth="6"
-      markerHeight="6"
-      orient="auto-start-reverse"
-      markerUnits="userSpaceOnUse"
-    >
-      <path d="M0,0 L8,4 L0,8 Z" fill="context-stroke" />
-    </marker>
-  </defs>
   <g class="chart-annotations" pointer-events="none">
     <template v-for="(item, i) in items" :key="i">
       <line
@@ -308,11 +318,21 @@ function buildPointerPath(
         :d="item.pointerPath"
         fill="none"
         :stroke="item.lineColor"
-        :style="{ color: item.lineColor }"
         :stroke-width="item.lineWidth"
         :stroke-dasharray="item.lineDash"
         stroke-linecap="round"
-        :marker-start="item.arrow ? 'url(#chart-annotation-arrow)' : undefined"
+      />
+      <!--
+        Inline arrow head. Drawn as an explicit triangle (not via
+        `<marker>`) because Safari does not implement `context-stroke` on
+        marker fills, so a shared marker rendered as black instead of the
+        line color.
+      -->
+      <polygon
+        v-if="item.arrowTip"
+        points="0,0 -6,-3 -6,3"
+        :fill="item.lineColor"
+        :transform="`translate(${item.arrowTip.x} ${item.arrowTip.y}) rotate(${item.arrowTip.angle})`"
       />
       <text
         :x="item.textX"

package/index.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.4.6",
+  "version": "0.4.7",
   "package": "@cfasim-ui/docs",
   "content": {
     "components": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfasim-ui/docs",
-  "version": "0.4.6",
+  "version": "0.4.7",
   "description": "LLM-friendly component and chart documentation for cfasim-ui",
   "license": "Apache-2.0",
   "repository": {