ooxml-ui 0.30.1 → 0.31.0

package/dist/pptx/chart-3d-view-scene-IANLDFIE.mjs

@@ -0,0 +1,1664 @@
+import { widenPieViewModel, buildPerspCamera, createSvgEl, appendChartLegendSvg, renderChartLineSvg, renderChartTextSvg, perspBoxMatrix, pieRimPoint, perspScreenToPlaneY, resolvePieSliceShareValue, perspToScreen, roundDragValue, buildBarChart3DHoverTooltip, isChartInteractionArmed, computePieChartLayout, obliqueBarTaper } from './chunk-X2F6PA2D.mjs';
+import { DEFAULT_PALETTE, shade } from './chunk-7JEMQW6R.mjs';
+
+// src/pptx/render/chart-3d-shading.ts
+var FACE_SHADE_AMOUNT = {
+  front: 0,
+  top: 0.25,
+  right: 0.36,
+  left: 0.36,
+  back: 0.36,
+  bottom: 0.5
+};
+function shadeChart3DFace(baseColor, face) {
+  const amount = FACE_SHADE_AMOUNT[face];
+  return amount === 0 ? baseColor : shade(baseColor, amount);
+}
+function buildChart3DBoxFaceColors(baseColor) {
+  return [
+    shadeChart3DFace(baseColor, "right"),
+    shadeChart3DFace(baseColor, "left"),
+    shadeChart3DFace(baseColor, "top"),
+    shadeChart3DFace(baseColor, "bottom"),
+    shadeChart3DFace(baseColor, "front"),
+    shadeChart3DFace(baseColor, "back")
+  ];
+}
+var NORMAL_SHADE = {
+  box: [0.64, 0.75, 1],
+  cylinder: [0.62, 0.75, 1.07],
+  cone: [0.7, 0.75, 1.16],
+  pyramid: [0.68, 0.75, 1.03]
+};
+var UNDERSIDE_SHADE = 0.5;
+function shadeFamily(shape) {
+  switch (shape) {
+    case "cylinder":
+      return "cylinder";
+    case "cone":
+    case "coneToMax":
+      return "cone";
+    case "pyramid":
+    case "pyramidToMax":
+      return "pyramid";
+    default:
+      return "box";
+  }
+}
+function chart3DNormalShade(shape, nx, ny, nz) {
+  const [cx, cy, cz] = NORMAL_SHADE[shadeFamily(shape)];
+  return cx * nx * nx + (ny >= 0 ? cy : UNDERSIDE_SHADE) * ny * ny + cz * nz * nz;
+}
+
+// src/pptx/render/chart-3d-oblique-shape-mesh.ts
+var ROUND_SEGMENTS = 48;
+function isShapedObliqueBar(bar) {
+  return bar.shape !== "box";
+}
+function obliqueShapeKey(bar, horizontal) {
+  return `${bar.shape}:${bar.taper.bottom.toFixed(4)}:${bar.taper.top.toFixed(4)}:${horizontal ? "h" : "v"}`;
+}
+function buildObliqueShapeGeometry(three, bar, horizontal) {
+  const pointed = bar.shape === "pyramid" || bar.shape === "pyramidToMax";
+  let geometry;
+  if (pointed) {
+    const r = Math.SQRT1_2;
+    const faceted = new three.CylinderGeometry(
+      r * bar.taper.top,
+      r * bar.taper.bottom,
+      1,
+      4
+    ).rotateY(Math.PI / 4);
+    geometry = faceted.toNonIndexed();
+    faceted.dispose();
+    geometry.computeVertexNormals();
+  } else {
+    geometry = new three.CylinderGeometry(
+      0.5 * bar.taper.top,
+      0.5 * bar.taper.bottom,
+      1,
+      ROUND_SEGMENTS
+    );
+  }
+  if (horizontal) {
+    geometry.rotateZ(-Math.PI / 2);
+  }
+  return geometry;
+}
+function shadeObliqueShapeGeometry(three, geometry, bar, scale, viewYaw) {
+  const round = bar.shape !== "pyramid" && bar.shape !== "pyramidToMax";
+  const cos = Math.cos(round ? viewYaw : 0);
+  const sin = Math.sin(round ? viewYaw : 0);
+  const normals = geometry.getAttribute("normal");
+  const count = normals.count;
+  let colors = geometry.getAttribute("color");
+  if (!colors || colors.count !== count) {
+    colors = new three.Float32BufferAttribute(new Float32Array(count * 3), 3);
+    geometry.setAttribute("color", colors);
+  }
+  const base = new three.Color(bar.color);
+  const srgb2 = base.getRGB(new three.Color(), three.SRGBColorSpace);
+  const out = new three.Color();
+  for (let i = 0; i < count; i++) {
+    let nx = normals.getX(i) / Math.max(scale.x, 1e-6);
+    let ny = normals.getY(i) / Math.max(scale.y, 1e-6);
+    let nz = normals.getZ(i) / Math.max(scale.z, 1e-6);
+    const len = Math.hypot(nx, ny, nz) || 1;
+    nx /= len;
+    ny /= len;
+    nz /= len;
+    const f = chart3DNormalShade(bar.shape, nx * cos - nz * sin, ny, nx * sin + nz * cos);
+    out.setRGB(
+      Math.min(1, srgb2.r * f),
+      Math.min(1, srgb2.g * f),
+      Math.min(1, srgb2.b * f),
+      three.SRGBColorSpace
+    );
+    colors.setXYZ(i, out.r, out.g, out.b);
+  }
+  colors.needsUpdate = true;
+}
+
+// src/pptx/render/chart-3d-bar-mesh.ts
+var GRIDLINE_COLOR = 14277081;
+function obliqueToScene(layout, svgWidth, svgHeight, p) {
+  return [layout.origin.x + p[0] - svgWidth / 2, svgHeight / 2 - layout.origin.y + p[1], -p[2]];
+}
+function placeObliqueBarMesh(three, mesh, layout, svgWidth, svgHeight, bar) {
+  mesh.position.set(
+    ...obliqueToScene(layout, svgWidth, svgHeight, [
+      bar.x + bar.w / 2,
+      bar.y + bar.h / 2,
+      bar.z + bar.d / 2
+    ])
+  );
+  mesh.scale.set(Math.max(bar.w, 1e-3), Math.max(bar.h, 1e-3), bar.d);
+  if (!isShapedObliqueBar(bar)) {
+    return;
+  }
+  const key = obliqueShapeKey(bar, layout.horizontal);
+  const data = mesh.userData;
+  if (data.shapeKey !== key) {
+    const previous = mesh.geometry;
+    mesh.geometry = buildObliqueShapeGeometry(three, bar, layout.horizontal);
+    previous.dispose();
+    data.shapeKey = key;
+  }
+  shadeObliqueShapeGeometry(three, mesh.geometry, bar, mesh.scale, Math.atan(layout.shear.x));
+}
+function buildChart3DBarMeshes(three, layout, svgWidth, svgHeight) {
+  const group = new three.Group();
+  const meshes = [];
+  const lineGeometries = [];
+  const materials = [];
+  const points = [];
+  for (const line of layout.gridlines) {
+    points.push(
+      ...obliqueToScene(layout, svgWidth, svgHeight, line.from),
+      ...obliqueToScene(layout, svgWidth, svgHeight, line.to)
+    );
+  }
+  if (points.length > 0) {
+    const lineGeometry = new three.BufferGeometry();
+    lineGeometry.setAttribute("position", new three.Float32BufferAttribute(points, 3));
+    const lineMaterial = new three.LineBasicMaterial({ color: GRIDLINE_COLOR });
+    lineGeometries.push(lineGeometry);
+    materials.push(lineMaterial);
+    group.add(new three.LineSegments(lineGeometry, lineMaterial));
+  }
+  for (const bar of layout.bars) {
+    let mesh;
+    if (isShapedObliqueBar(bar)) {
+      const material = new three.MeshBasicMaterial({ vertexColors: true });
+      materials.push(material);
+      mesh = new three.Mesh(new three.BufferGeometry(), material);
+    } else {
+      const faceMaterials = buildChart3DBoxFaceColors(bar.color).map(
+        (color) => new three.MeshBasicMaterial({ color })
+      );
+      materials.push(...faceMaterials);
+      mesh = new three.Mesh(new three.BoxGeometry(1, 1, 1), faceMaterials);
+    }
+    mesh.userData = { seriesIndex: bar.seriesIndex, categoryIndex: bar.categoryIndex };
+    placeObliqueBarMesh(three, mesh, layout, svgWidth, svgHeight, bar);
+    group.add(mesh);
+    meshes.push(mesh);
+  }
+  return {
+    group,
+    meshes,
+    dispose: () => {
+      for (const geometry of [...lineGeometries, ...meshes.map((m) => m.geometry)]) {
+        geometry.dispose();
+      }
+      for (const material of materials) {
+        material.dispose();
+      }
+    }
+  };
+}
+
+// src/pptx/render/chart-3d-chrome-overlay.ts
+function renderChart3DChromeOverlaySvg(doc, source, box) {
+  const vm = box ? withBoxChromePositions(source) : source;
+  const svg = createSvgEl(doc, "svg", {
+    class: "pptxv-chart-3d-chrome",
+    viewBox: `0 0 ${vm.svgWidth} ${vm.svgHeight}`,
+    preserveAspectRatio: "none"
+  });
+  svg.style.setProperty("width", "100%");
+  svg.style.setProperty("height", "100%");
+  svg.style.setProperty("display", "block");
+  svg.style.setProperty("position", "absolute");
+  svg.style.setProperty("inset", "0");
+  svg.style.setProperty("pointer-events", "none");
+  if (vm.areaFill) {
+    svg.appendChild(
+      createSvgEl(doc, "rect", {
+        x: 0,
+        y: 0,
+        width: vm.svgWidth,
+        height: vm.svgHeight,
+        rx: vm.areaRadius,
+        fill: vm.areaFill
+      })
+    );
+  }
+  if (vm.title) {
+    const title = createSvgEl(doc, "text", {
+      x: vm.titleX,
+      y: vm.titleY,
+      "text-anchor": "middle",
+      "font-size": vm.titleStyle?.fontSize ?? 12,
+      "font-weight": vm.titleStyle?.fontWeight ?? 600,
+      "font-family": vm.titleStyle?.fontFamily,
+      fill: vm.titleStyle?.fill ?? "#1e293b",
+      "data-chart-part": "title"
+    });
+    if (vm.titleRunSpans && vm.titleRunSpans.length > 0) {
+      for (const run of vm.titleRunSpans) {
+        const tspan = createSvgEl(doc, "tspan", {
+          "font-size": run.fontSize,
+          "font-weight": run.fontWeight,
+          "font-style": run.fontStyle,
+          "font-family": run.fontFamily,
+          fill: run.fill
+        });
+        tspan.textContent = run.text;
+        title.appendChild(tspan);
+      }
+    } else {
+      title.textContent = vm.title;
+    }
+    svg.appendChild(title);
+  }
+  if (box) {
+    appendBoxLabels(doc, svg, vm, box.labels);
+    const legend = box.legend ?? vm.legend.map((item) => ({ ...item, lineSwatch: void 0 }));
+    const legendVm = { ...vm, legend: box.reverseLegend ? legend.reverse() : legend };
+    appendChartLegendSvg(doc, svg, legendVm);
+    return svg;
+  }
+  for (const gl of vm.gridlines) {
+    svg.appendChild(renderChartLineSvg(doc, gl));
+  }
+  for (const gl of vm.secondaryGridlines ?? []) {
+    svg.appendChild(renderChartLineSvg(doc, gl));
+  }
+  for (const lbl of vm.axisLabels) {
+    svg.appendChild(renderChartTextSvg(doc, lbl));
+  }
+  for (const lbl of vm.secondaryAxisLabels ?? []) {
+    svg.appendChild(renderChartTextSvg(doc, lbl));
+  }
+  if (vm.zeroLine) {
+    svg.appendChild(renderChartLineSvg(doc, vm.zeroLine));
+  }
+  for (const lbl of vm.categoryLabels) {
+    svg.appendChild(renderChartTextSvg(doc, lbl));
+  }
+  appendChartLegendSvg(doc, svg, vm);
+  return svg;
+}
+var PT = 4 / 3;
+var OBLIQUE_TITLE_BASELINE = 24 * PT;
+var OBLIQUE_LEGEND_BASELINE = 14 * PT;
+function withBoxChromePositions(vm) {
+  const legendBottom = (vm.legendY ?? vm.svgHeight - 8) >= vm.svgHeight / 2;
+  return {
+    ...vm,
+    titleY: OBLIQUE_TITLE_BASELINE,
+    // Legend text sits 3px below `legendY` (see `appendChartLegendSvg`).
+    legendY: legendBottom ? vm.svgHeight - OBLIQUE_LEGEND_BASELINE - 3 : vm.legendY
+  };
+}
+function appendBoxLabels(doc, svg, vm, labels) {
+  const style = vm.axisLabels[0];
+  for (const label of labels) {
+    svg.appendChild(
+      renderChartTextSvg(doc, {
+        kind: "text",
+        x: label.x,
+        y: label.y,
+        text: label.text,
+        fontSize: label.fontSize,
+        fill: style?.fill ?? "#595959",
+        fontFamily: style?.fontFamily,
+        textAnchor: label.anchor,
+        dominantBaseline: label.baseline ?? "central"
+      })
+    );
+  }
+}
+
+// src/pptx/render/chart-3d-interaction.ts
+var CHART_3D_DRAG_THRESHOLD_PX = 3;
+
+// src/pptx/render/chart-3d-mark-interaction.ts
+function partOf(point) {
+  return point ? { role: "dataPoint", seriesIndex: point.seriesIndex, pointIndex: point.pointIndex } : null;
+}
+function attachChart3DMarkInteraction(options) {
+  const { ctx, camera, adapter, chartData } = options;
+  const three = ctx.three;
+  const target = ctx.eventTarget;
+  const raycaster = new three.Raycaster();
+  const far = new three.Vector3();
+  let interactive = ctx.interactive;
+  let press = null;
+  let hoveredTooltip;
+  function pointAt(clientX, clientY) {
+    const rect = target.getBoundingClientRect();
+    if (rect.width <= 0 || rect.height <= 0) {
+      return null;
+    }
+    options.scene.updateMatrixWorld();
+    camera.updateMatrixWorld();
+    const x = (clientX - rect.left) / rect.width * 2 - 1;
+    const y = -((clientY - rect.top) / rect.height) * 2 + 1;
+    raycaster.ray.origin.set(x, y, -1).unproject(camera);
+    far.set(x, y, 1).unproject(camera);
+    raycaster.ray.direction.copy(far).sub(raycaster.ray.origin).normalize();
+    const hit = raycaster.intersectObjects(adapter.targets, false)[0];
+    return hit ? adapter.pointAt(hit) : null;
+  }
+  const onPointerMove = (event) => {
+    if (press?.drag) {
+      const dx = event.clientX - press.startX;
+      const dy = event.clientY - press.startY;
+      if (!press.drag.moved && Math.hypot(dx, dy) < CHART_3D_DRAG_THRESHOLD_PX) {
+        return;
+      }
+      press.drag.moved = true;
+      const k = press.chartPxPerClientPx;
+      const rect = target.getBoundingClientRect();
+      const value2 = press.drag.session.preview(dx * k, dy * k, {
+        x: (event.clientX - rect.left) * k,
+        y: (event.clientY - rect.top) * k
+      });
+      press.lastValue = value2;
+      ctx.requestRender();
+      const part = partOf(press.point);
+      if (part) {
+        ctx.emit({ type: "drag", detail: { part, value: value2, phase: "move" } });
+      }
+      return;
+    }
+    const point = pointAt(event.clientX, event.clientY);
+    const value = point ? adapter.valueOf(point) : void 0;
+    const tooltip = point && value !== void 0 ? buildBarChart3DHoverTooltip(
+      { seriesIndex: point.seriesIndex, categoryIndex: point.pointIndex, value },
+      {
+        categoryLabels: options.categoryLabels,
+        seriesNames: options.seriesNames,
+        numberFormats: chartData.series.map((s) => s.numberFormat)
+      }
+    ) : void 0;
+    if (tooltip !== hoveredTooltip) {
+      hoveredTooltip = tooltip;
+      target.title = tooltip ?? "";
+    }
+  };
+  const onPointerDown = (event) => {
+    if (!interactive) {
+      return;
+    }
+    const point = pointAt(event.clientX, event.clientY);
+    const armed = point !== null && isChartInteractionArmed(target);
+    if (armed) {
+      event.stopPropagation();
+    }
+    const session = armed && point ? adapter.beginDrag(point) : null;
+    if (session) {
+      event.preventDefault();
+      target.setPointerCapture?.(event.pointerId);
+    }
+    const rect = target.getBoundingClientRect();
+    press = {
+      point,
+      drag: session ? { session, moved: false } : null,
+      startX: event.clientX,
+      startY: event.clientY,
+      chartPxPerClientPx: rect.height > 0 ? options.svgHeight / rect.height : 1,
+      lastValue: null
+    };
+  };
+  const onPointerUp = (event) => {
+    const current = press;
+    press = null;
+    if (!current || !interactive) {
+      return;
+    }
+    const part = partOf(current.point);
+    if (current.drag?.moved && current.lastValue !== null && part) {
+      ctx.emit({ type: "drag", detail: { part, value: current.lastValue, phase: "commit" } });
+      return;
+    }
+    const travel = Math.hypot(event.clientX - current.startX, event.clientY - current.startY);
+    if (travel < CHART_3D_DRAG_THRESHOLD_PX) {
+      ctx.emit({ type: "select", part });
+    }
+  };
+  const onPointerLeave = () => {
+    if (hoveredTooltip !== void 0) {
+      hoveredTooltip = void 0;
+      target.title = "";
+    }
+  };
+  target.addEventListener("pointermove", onPointerMove);
+  target.addEventListener("pointerdown", onPointerDown);
+  target.addEventListener("pointerup", onPointerUp);
+  target.addEventListener("pointerleave", onPointerLeave);
+  return {
+    setInteractive(on) {
+      interactive = on;
+      if (!on) {
+        press = null;
+      }
+    },
+    setSelectedPart(part) {
+      adapter.highlight(
+        part?.role === "dataPoint" && part.pointIndex !== void 0 ? { seriesIndex: part.seriesIndex, pointIndex: part.pointIndex } : null
+      );
+      ctx.requestRender();
+    },
+    dispose() {
+      target.removeEventListener("pointermove", onPointerMove);
+      target.removeEventListener("pointerdown", onPointerDown);
+      target.removeEventListener("pointerup", onPointerUp);
+      target.removeEventListener("pointerleave", onPointerLeave);
+      adapter.dispose?.();
+    }
+  };
+}
+
+// src/pptx/render/chart-3d-oblique-drag.ts
+function isObliqueBarDraggable(layout) {
+  return layout.grouping === "clustered" || layout.grouping === "standard";
+}
+function obliqueDragValue(layout, startValue, dx, dy) {
+  const along = layout.horizontal ? dx : -dy;
+  const raw = startValue + along / layout.valueScale;
+  const span = layout.range.max - layout.range.min;
+  return roundDragValue(raw, { min: layout.range.min, max: layout.range.max, span });
+}
+function obliqueDraggedExtent(layout, value) {
+  const { min, max } = layout.range;
+  const base = Math.min(Math.max(0, min), max);
+  const clamp = (v) => Math.min(Math.max(v, min), max);
+  const lo = (clamp(Math.min(base, value)) - min) * layout.valueScale;
+  const hi = (clamp(Math.max(base, value)) - min) * layout.valueScale;
+  return { from: lo, length: hi - lo };
+}
+function obliqueBarAtValue(layout, bar, value) {
+  const { from, length } = obliqueDraggedExtent(layout, value);
+  const extent = (layout.range.max - layout.range.min) * layout.valueScale;
+  const taper = obliqueBarTaper(bar.shape, from, from + length, extent, value);
+  return layout.horizontal ? { ...bar, x: from, w: length, value, taper } : { ...bar, y: from, h: length, value, taper };
+}
+
+// src/pptx/render/chart-3d-oblique-interaction.ts
+var SELECTED_OUTLINE_COLOR = 2450411;
+function attachObliqueBarInteraction(options) {
+  const { ctx, meshes, layout } = options;
+  const bars = layout.bars;
+  const three = ctx.three;
+  const outline = new three.LineSegments(
+    new three.EdgesGeometry(new three.BoxGeometry(1, 1, 1)),
+    new three.LineBasicMaterial({ color: SELECTED_OUTLINE_COLOR })
+  );
+  outline.visible = false;
+  options.scene.add(outline);
+  let selected = -1;
+  const indexOf = (point) => bars.findIndex(
+    (b) => b.seriesIndex === point.seriesIndex && b.categoryIndex === point.pointIndex
+  );
+  function syncOutline() {
+    outline.visible = selected >= 0;
+    if (selected >= 0) {
+      outline.position.copy(meshes[selected].position);
+      outline.scale.copy(meshes[selected].scale);
+    }
+  }
+  return attachChart3DMarkInteraction({
+    ctx,
+    camera: options.camera,
+    scene: options.scene,
+    svgHeight: options.svgHeight,
+    chartData: options.chartData,
+    categoryLabels: options.categoryLabels,
+    seriesNames: options.seriesNames,
+    adapter: {
+      targets: meshes,
+      pointAt(hit) {
+        const data = hit.object.userData;
+        if (data.seriesIndex === void 0 || data.categoryIndex === void 0) {
+          return null;
+        }
+        return { seriesIndex: data.seriesIndex, pointIndex: data.categoryIndex };
+      },
+      valueOf(point) {
+        return bars[indexOf(point)]?.value;
+      },
+      beginDrag(point) {
+        const index = indexOf(point);
+        if (index < 0 || !isObliqueBarDraggable(layout)) {
+          return null;
+        }
+        const start = bars[index];
+        return {
+          preview(dx, dy) {
+            const value = obliqueDragValue(layout, start.value, dx, dy);
+            placeObliqueBarMesh(
+              three,
+              meshes[index],
+              layout,
+              options.svgWidth,
+              options.svgHeight,
+              obliqueBarAtValue(layout, start, value)
+            );
+            syncOutline();
+            return value;
+          }
+        };
+      },
+      highlight(point) {
+        selected = point ? indexOf(point) : -1;
+        syncOutline();
+      },
+      dispose() {
+        outline.geometry.dispose();
+        outline.material.dispose();
+        outline.removeFromParent();
+      }
+    }
+  });
+}
+
+// src/pptx/render/chart-3d-persp-bars.ts
+var DEFAULT_GAP_WIDTH = 150;
+function valueY(layout, v) {
+  const clamped = Math.min(Math.max(v, layout.range.min), layout.range.max);
+  return (clamped - layout.range.min) * layout.valueScale;
+}
+function buildPerspBarPrisms(chartData, layout, override) {
+  const nCat = layout.categoryX.length;
+  const nSer = chartData.series.length;
+  const catExtent = layout.horizontal ? layout.view.box.h : layout.view.box.w;
+  const slot = nCat > 0 ? catExtent / nCat : catExtent;
+  const gapWidth = (chartData.barGapWidth ?? DEFAULT_GAP_WIDTH) / 100;
+  const slots = layout.grouping === "clustered" ? nSer : 1;
+  const barW = slot / (slots + gapWidth);
+  const depth = Math.min(barW, layout.rowDepth);
+  const stacked = layout.grouping === "stacked" || layout.grouping === "percentStacked";
+  const baseline = Math.min(Math.max(0, layout.range.min), layout.range.max);
+  const prisms = [];
+  for (let c = 0; c < nCat; c++) {
+    const valueOf = (s) => {
+      if (override && override.seriesIndex === s && override.pointIndex === c) {
+        return override.value;
+      }
+      const v = chartData.series[s]?.values[c];
+      return v !== void 0 && Number.isFinite(v) ? v : 0;
+    };
+    const total = chartData.series.reduce((t, _s, s) => t + Math.abs(valueOf(s)), 0);
+    let pos = baseline;
+    let neg = baseline;
+    for (let s = 0; s < nSer; s++) {
+      const raw = valueOf(s);
+      const value = layout.grouping === "percentStacked" ? total ? raw / total : 0 : raw;
+      let from = baseline;
+      let to = value;
+      if (stacked) {
+        from = value >= 0 ? pos : neg;
+        to = from + value;
+        if (value >= 0) {
+          pos = to;
+        } else {
+          neg = to;
+        }
+      }
+      const shape = chartData.series[s]?.shape ?? chartData.barShape ?? "box";
+      const slotIndex = layout.grouping === "clustered" ? s : 0;
+      const row = layout.grouping === "standard" ? s : 0;
+      const c0 = c * slot + gapWidth * barW / 2 + slotIndex * barW;
+      const v0 = valueY(layout, Math.min(from, to));
+      const v1 = Math.max(valueY(layout, Math.max(from, to)), v0 + 1e-6);
+      const [x0, x1, y0, y1] = layout.horizontal ? [v0, v1, c0, c0 + barW] : [c0, c0 + barW, v0, v1];
+      const z0 = row * layout.rowDepth + (layout.rowDepth - depth) / 2;
+      prisms.push({
+        seriesIndex: s,
+        pointIndex: c,
+        color: layout.colors[s],
+        outline: [
+          [x0, y0],
+          [x1, y0],
+          [x1, y1],
+          [x0, y1]
+        ],
+        z0,
+        z1: z0 + depth,
+        shape,
+        taper: obliqueBarTaper(
+          shape,
+          v0,
+          v1,
+          (layout.range.max - layout.range.min) * layout.valueScale,
+          raw
+        ),
+        horizontal: layout.horizontal
+      });
+    }
+  }
+  return prisms;
+}
+
+// src/pptx/render/chart-3d-persp-marks.ts
+var RIBBON_THICKNESS = 0.012;
+function perspValueY(layout, v) {
+  const clamped = Math.min(Math.max(v, layout.range.min), layout.range.max);
+  return (clamped - layout.range.min) * layout.valueScale;
+}
+function perspRowSpan(layout, row) {
+  const z0 = row * layout.rowDepth + (layout.rowDepth - layout.markDepth) / 2;
+  return [z0, z0 + layout.markDepth];
+}
+function finite(v) {
+  return v !== void 0 && Number.isFinite(v) ? v : 0;
+}
+function plottedValues(chartData, layout, nCat) {
+  const raw = chartData.series.map(
+    (s) => Array.from({ length: nCat }, (_, c) => finite(s.values[c]))
+  );
+  if (layout.grouping !== "percentStacked") {
+    return raw;
+  }
+  const totals = Array.from(
+    { length: nCat },
+    (_, c) => raw.reduce((t, s) => t + Math.abs(s[c]), 0)
+  );
+  return raw.map((s) => s.map((v, c) => totals[c] ? v / totals[c] : 0));
+}
+function buildPerspPrisms(chartData, layout, override) {
+  if (layout.kind === "bar") {
+    return buildPerspBarPrisms(chartData, layout, override);
+  }
+  const nCat = layout.categoryX.length;
+  const values = plottedValues(chartData, layout, nCat);
+  if (override) {
+    const row = values[override.seriesIndex];
+    if (row && override.pointIndex < nCat) {
+      row[override.pointIndex] = override.value;
+    }
+  }
+  const xs = layout.categoryX;
+  const baseY = perspValueY(layout, Math.max(0, layout.range.min));
+  const prisms = [];
+  if (layout.kind === "line") {
+    const t = layout.view.box.h * RIBBON_THICKNESS / 2;
+    values.forEach((series, s) => {
+      const ys = series.map((v) => perspValueY(layout, v));
+      const [z0, z1] = perspRowSpan(layout, s);
+      prisms.push({
+        seriesIndex: s,
+        color: layout.colors[s],
+        outline: [
+          ...xs.map((x, c) => [x, ys[c] - t]),
+          ...xs.map((x, c) => [x, ys[c] + t]).reverse()
+        ],
+        z0,
+        z1
+      });
+    });
+    return prisms;
+  }
+  const stacked = layout.grouping !== "standard";
+  const running = new Array(nCat).fill(0);
+  values.forEach((series, s) => {
+    const lower = stacked ? running.map((v) => perspValueY(layout, v)) : xs.map(() => baseY);
+    const upper = series.map((v, c) => perspValueY(layout, stacked ? running[c] + v : v));
+    if (stacked) {
+      series.forEach((v, c) => {
+        running[c] += v;
+      });
+    }
+    const [z0, z1] = perspRowSpan(layout, stacked ? 0 : s);
+    prisms.push({
+      seriesIndex: s,
+      color: layout.colors[s],
+      outline: [
+        ...xs.map((x, c) => [x, lower[c]]),
+        ...xs.map((x, c) => [x, upper[c]]).reverse()
+      ],
+      z0,
+      z1
+    });
+  });
+  return prisms;
+}
+
+// src/pptx/render/chart-3d-persp-shape-mesh.ts
+function isShapedPerspPrism(prism) {
+  return prism.shape !== void 0 && prism.shape !== "box";
+}
+function outlineBounds(prism) {
+  const xs = prism.outline.map(([x]) => x);
+  const ys = prism.outline.map(([, y]) => y);
+  return [Math.min(...xs), Math.max(...xs), Math.min(...ys), Math.max(...ys)];
+}
+function buildShapedPrismGeometry(three, prism) {
+  const shape = prism.shape ?? "box";
+  const unit = buildObliqueShapeGeometry(
+    three,
+    { shape, taper: prism.taper ?? { bottom: 1, top: 1 } },
+    Boolean(prism.horizontal)
+  );
+  const geometry = unit.index ? unit.toNonIndexed() : unit;
+  if (geometry !== unit) {
+    unit.dispose();
+  }
+  const [x0, x1, y0, y1] = outlineBounds(prism);
+  const sx = Math.max(x1 - x0, 1e-6);
+  const sy = Math.max(y1 - y0, 1e-6);
+  const sz = Math.max(prism.z1 - prism.z0, 1e-6);
+  geometry.scale(sx, sy, sz);
+  geometry.translate((x0 + x1) / 2, (y0 + y1) / 2, (prism.z0 + prism.z1) / 2);
+  geometry.computeVertexNormals();
+  const normals = geometry.getAttribute("normal");
+  const colors = new Float32Array(normals.count * 3);
+  const base = new three.Color(prism.color).getRGB(new three.Color(), three.SRGBColorSpace);
+  const out = new three.Color();
+  for (let i = 0; i < normals.count; i++) {
+    const f = chart3DNormalShade(shape, normals.getX(i), normals.getY(i), -normals.getZ(i));
+    out.setRGB(
+      Math.min(1, base.r * f),
+      Math.min(1, base.g * f),
+      Math.min(1, base.b * f),
+      three.SRGBColorSpace
+    );
+    colors.set([out.r, out.g, out.b], i * 3);
+  }
+  geometry.setAttribute("color", new three.Float32BufferAttribute(colors, 3));
+  return geometry;
+}
+
+// src/pptx/render/chart-3d-persp-mesh.ts
+var GRIDLINE_COLOR2 = 14277081;
+function shadePerspGeometry(three, geometry, color) {
+  const normals = geometry.getAttribute("normal");
+  const colors = new Float32Array(normals.count * 3);
+  const base = new three.Color(color).getRGB(new three.Color(), three.SRGBColorSpace);
+  const out = new three.Color();
+  for (let i = 0; i < normals.count; i++) {
+    const f = chart3DNormalShade("box", normals.getX(i), normals.getY(i), -normals.getZ(i));
+    out.setRGB(
+      Math.min(1, base.r * f),
+      Math.min(1, base.g * f),
+      Math.min(1, base.b * f),
+      three.SRGBColorSpace
+    );
+    colors[i * 3] = out.r;
+    colors[i * 3 + 1] = out.g;
+    colors[i * 3 + 2] = out.b;
+  }
+  geometry.setAttribute("color", new three.Float32BufferAttribute(colors, 3));
+}
+function buildPrismGeometry(three, prism) {
+  if (isShapedPerspPrism(prism)) {
+    return buildShapedPrismGeometry(three, prism);
+  }
+  const shape = new three.Shape(prism.outline.map(([x, y]) => new three.Vector2(x, y)));
+  const extruded = new three.ExtrudeGeometry(shape, {
+    depth: Math.max(prism.z1 - prism.z0, 1e-6),
+    bevelEnabled: false,
+    steps: 1
+  });
+  const geometry = extruded.index ? extruded.toNonIndexed() : extruded;
+  if (geometry !== extruded) {
+    extruded.dispose();
+  }
+  geometry.translate(0, 0, prism.z0);
+  geometry.computeVertexNormals();
+  shadePerspGeometry(three, geometry, prism.color);
+  return geometry;
+}
+function buildPerspGridlines(three, layout) {
+  const points = [];
+  for (const line of layout.gridlines) {
+    points.push(...line.from, ...line.to);
+  }
+  const geometry = new three.BufferGeometry();
+  geometry.setAttribute("position", new three.Float32BufferAttribute(points, 3));
+  return new three.LineSegments(geometry, new three.LineBasicMaterial({ color: GRIDLINE_COLOR2 }));
+}
+function buildPerspMeshes(three, layout, prisms) {
+  const group = new three.Group();
+  group.matrixAutoUpdate = false;
+  group.matrix.copy(perspBoxMatrix(three, layout.view));
+  const gridlines = buildPerspGridlines(three, layout);
+  group.add(gridlines);
+  const material = new three.MeshBasicMaterial({ vertexColors: true, side: three.DoubleSide });
+  const meshes = prisms.map((prism) => {
+    const mesh = new three.Mesh(buildPrismGeometry(three, prism), material);
+    mesh.userData = { seriesIndex: prism.seriesIndex, pointIndex: prism.pointIndex };
+    group.add(mesh);
+    return mesh;
+  });
+  return {
+    group,
+    meshes,
+    setPrism(i, prism) {
+      const mesh = meshes[i];
+      if (!mesh) {
+        return;
+      }
+      const previous = mesh.geometry;
+      mesh.geometry = buildPrismGeometry(three, prism);
+      previous.dispose();
+    },
+    dispose() {
+      gridlines.geometry.dispose();
+      gridlines.material.dispose();
+      material.dispose();
+      for (const mesh of meshes) {
+        mesh.geometry.dispose();
+      }
+    }
+  };
+}
+
+// src/pptx/render/chart-3d-persp-surface.ts
+function surfaceRowZ(layout, s, n) {
+  return n > 1 ? s / (n - 1) * layout.view.box.d : layout.view.box.d / 2;
+}
+function bandEdges(range) {
+  const unit = range.majorUnit > 0 ? range.majorUnit : range.max - range.min || 1;
+  const edges = [];
+  for (let v = range.min; v < range.max - unit * 1e-9; v += unit) {
+    edges.push(Number(v.toPrecision(12)));
+  }
+  edges.push(range.max);
+  return edges;
+}
+function formatEdge(v) {
+  return String(Number(v.toPrecision(10)));
+}
+function surfaceBands(chartData, range, palette) {
+  const edges = bandEdges(range);
+  return edges.slice(0, -1).map((lo, i) => {
+    const fmt = chartData.bandFmts?.find((b) => b.index === i)?.spPr;
+    const cycle = palette.length > 0 ? palette : ["#4472C4"];
+    const base = cycle[i % cycle.length];
+    const fallback = Math.floor(i / cycle.length) % 2 === 1 ? shade(base, 0.4) : base;
+    return {
+      label: `${formatEdge(lo)}-${formatEdge(edges[i + 1])}`,
+      color: fmt?.fillColor ?? fmt?.strokeColor ?? fallback
+    };
+  });
+}
+function clipY(poly, lo, hi) {
+  const clip = (pts, keep, edge) => {
+    const out = [];
+    for (let i = 0; i < pts.length; i++) {
+      const a = pts[i];
+      const b = pts[(i + 1) % pts.length];
+      const ina = keep(a);
+      const inb = keep(b);
+      if (ina) {
+        out.push(a);
+      }
+      if (ina !== inb) {
+        const t = (edge - a[1]) / (b[1] - a[1]);
+        out.push([a[0] + (b[0] - a[0]) * t, edge, a[2] + (b[2] - a[2]) * t]);
+      }
+    }
+    return out;
+  };
+  return clip(
+    clip(poly, (p) => p[1] >= lo, lo),
+    (p) => p[1] <= hi,
+    hi
+  );
+}
+function cellTriangles(point, s, c) {
+  return [
+    [point(s, c), point(s, c + 1), point(s + 1, c + 1)],
+    [point(s, c), point(s + 1, c + 1), point(s + 1, c)]
+  ];
+}
+function clampedBandSegments(a, b, edgesY, out, keepFlat) {
+  for (let band = 0; band + 1 < edgesY.length; band++) {
+    const lo = edgesY[band];
+    const hi = edgesY[band + 1];
+    const cuts = [0, 1];
+    for (const e of [lo, hi]) {
+      const t = (e - a[1]) / (b[1] - a[1]);
+      if (t > 0 && t < 1) {
+        cuts.push(t);
+      }
+    }
+    cuts.sort((x, y) => x - y);
+    const at = (t) => [
+      a[0] + (b[0] - a[0]) * t,
+      Math.min(hi, Math.max(lo, a[1] + (b[1] - a[1]) * t)),
+      a[2] + (b[2] - a[2]) * t
+    ];
+    for (let i = 0; i + 1 < cuts.length; i++) {
+      const from = at(cuts[i]);
+      const to = at(cuts[i + 1]);
+      const flat = from[1] === to[1] && (from[1] === lo || from[1] === hi);
+      if (keepFlat || !flat) {
+        out.push({ from, to, band });
+      }
+    }
+  }
+}
+function buildSurfaceGeometry(chartData, layout, palette, override) {
+  const nSer = chartData.series.length;
+  const nCat = layout.categoryX.length;
+  const bands = surfaceBands(chartData, layout.range, palette);
+  const edgesY = bandEdges(layout.range).map((v) => perspValueY(layout, v));
+  const point = (s, c) => {
+    let v = chartData.series[s]?.values[c];
+    if (override && override.seriesIndex === s && override.pointIndex === c) {
+      v = override.value;
+    }
+    const value = v !== void 0 && Number.isFinite(v) ? v : layout.range.min;
+    return [layout.categoryX[c], perspValueY(layout, value), surfaceRowZ(layout, s, nSer)];
+  };
+  const geometry = { bands, triangles: [], segments: [] };
+  if (chartData.wireframe) {
+    for (let s = 0; s < nSer; s++) {
+      for (let c = 0; c < nCat; c++) {
+        if (c + 1 < nCat) {
+          clampedBandSegments(point(s, c), point(s, c + 1), edgesY, geometry.segments, s === 0);
+        }
+        if (s + 1 < nSer) {
+          clampedBandSegments(point(s, c), point(s + 1, c), edgesY, geometry.segments, false);
+        }
+      }
+    }
+    return geometry;
+  }
+  for (let s = 0; s + 1 < nSer; s++) {
+    for (let c = 0; c + 1 < nCat; c++) {
+      for (const tri of cellTriangles(point, s, c)) {
+        for (let b = 0; b < bands.length; b++) {
+          const piece = clipY(tri, edgesY[b], edgesY[b + 1]);
+          for (let i = 1; i + 1 < piece.length; i++) {
+            geometry.triangles.push({ points: [piece[0], piece[i], piece[i + 1]], band: b });
+          }
+        }
+      }
+    }
+  }
+  return geometry;
+}
+
+// src/pptx/render/chart-3d-persp-surface-mesh.ts
+function srgb(three, hex, f) {
+  const base = new three.Color(hex).getRGB(new three.Color(), three.SRGBColorSpace);
+  return new three.Color().setRGB(
+    Math.min(1, base.r * f),
+    Math.min(1, base.g * f),
+    Math.min(1, base.b * f),
+    three.SRGBColorSpace
+  );
+}
+function buildVisual(three, chartData, layout, palette, override) {
+  const geo = buildSurfaceGeometry(chartData, layout, palette, override);
+  const positions = [];
+  const colors = [];
+  if (chartData.wireframe) {
+    for (const seg of geo.segments) {
+      const c = srgb(three, geo.bands[seg.band].color, 1);
+      positions.push(...seg.from, ...seg.to);
+      colors.push(c.r, c.g, c.b, c.r, c.g, c.b);
+    }
+    const g2 = new three.BufferGeometry();
+    g2.setAttribute("position", new three.Float32BufferAttribute(positions, 3));
+    g2.setAttribute("color", new three.Float32BufferAttribute(colors, 3));
+    return new three.LineSegments(g2, new three.LineBasicMaterial({ vertexColors: true }));
+  }
+  const a = new three.Vector3();
+  const b = new three.Vector3();
+  const n = new three.Vector3();
+  for (const tri of geo.triangles) {
+    const [p0, p1, p2] = tri.points;
+    a.set(p1[0] - p0[0], p1[1] - p0[1], p1[2] - p0[2]);
+    b.set(p2[0] - p0[0], p2[1] - p0[1], p2[2] - p0[2]);
+    n.crossVectors(a, b).normalize();
+    if (n.y < 0) {
+      n.negate();
+    }
+    const c = srgb(three, geo.bands[tri.band].color, chart3DNormalShade("box", n.x, n.y, -n.z));
+    positions.push(...p0, ...p1, ...p2);
+    colors.push(c.r, c.g, c.b, c.r, c.g, c.b, c.r, c.g, c.b);
+  }
+  const g = new three.BufferGeometry();
+  g.setAttribute("position", new three.Float32BufferAttribute(positions, 3));
+  g.setAttribute("color", new three.Float32BufferAttribute(colors, 3));
+  return new three.Mesh(
+    g,
+    new three.MeshBasicMaterial({ vertexColors: true, side: three.DoubleSide })
+  );
+}
+function buildPickGeometry(three, chartData, layout) {
+  const nSer = chartData.series.length;
+  const nCat = layout.categoryX.length;
+  const at = (s, c) => {
+    const v = chartData.series[s]?.values[c];
+    return [
+      layout.categoryX[c],
+      perspValueY(layout, v !== void 0 && Number.isFinite(v) ? v : layout.range.min),
+      surfaceRowZ(layout, s, nSer)
+    ];
+  };
+  const positions = [];
+  for (let s = 0; s + 1 < nSer; s++) {
+    for (let c = 0; c + 1 < nCat; c++) {
+      positions.push(...at(s, c), ...at(s, c + 1), ...at(s + 1, c + 1));
+      positions.push(...at(s, c), ...at(s + 1, c + 1), ...at(s + 1, c));
+    }
+  }
+  const g = new three.BufferGeometry();
+  g.setAttribute("position", new three.Float32BufferAttribute(positions, 3));
+  return g;
+}
+function disposeObject(object) {
+  const withGeometry = object;
+  withGeometry.geometry?.dispose();
+  withGeometry.material?.dispose();
+}
+function buildSurfaceMarks(three, chartData, layout, palette) {
+  const group = new three.Group();
+  group.matrixAutoUpdate = false;
+  group.matrix.copy(perspBoxMatrix(three, layout.view));
+  const gridlines = buildPerspGridlines(three, layout);
+  group.add(gridlines);
+  let visual = buildVisual(three, chartData, layout, palette);
+  group.add(visual);
+  const pickMaterial = new three.MeshBasicMaterial({ side: three.DoubleSide, visible: false });
+  const pickTarget = new three.Mesh(buildPickGeometry(three, chartData, layout), pickMaterial);
+  group.add(pickTarget);
+  return {
+    group,
+    pickTarget,
+    rebuild(override) {
+      group.remove(visual);
+      disposeObject(visual);
+      visual = buildVisual(three, chartData, layout, palette, override);
+      group.add(visual);
+    },
+    dispose() {
+      disposeObject(visual);
+      disposeObject(gridlines);
+      pickTarget.geometry.dispose();
+      pickMaterial.dispose();
+    }
+  };
+}
+
+// src/pptx/render/chart-3d-persp-mark-set.ts
+function nearestIndex(xs, x) {
+  let best = 0;
+  xs.forEach((v, i) => {
+    if (Math.abs(v - x) < Math.abs(xs[best] - x)) {
+      best = i;
+    }
+  });
+  return best;
+}
+function buildPerspMarkSet(three, chartData, layout, palette) {
+  if (layout.kind === "surface") {
+    const nSer = chartData.series.length;
+    const zs = Array.from({ length: nSer }, (_, s) => surfaceRowZ(layout, s, nSer));
+    const surface = buildSurfaceMarks(three, chartData, layout, palette);
+    return {
+      group: surface.group,
+      targets: [surface.pickTarget],
+      pointAt: (_object, local) => ({
+        seriesIndex: nearestIndex(zs, local.z),
+        pointIndex: nearestIndex(layout.categoryX, local.x)
+      }),
+      anchor: (point, value) => [
+        layout.categoryX[point.pointIndex],
+        perspValueY(layout, value),
+        zs[point.seriesIndex]
+      ],
+      draggable: true,
+      preview: (point, value) => surface.rebuild({ ...point, value }),
+      dispose: () => surface.dispose()
+    };
+  }
+  if (layout.kind === "bar") {
+    return buildBarMarkSet(three, chartData, layout);
+  }
+  const stacked = layout.grouping !== "standard" && layout.grouping !== "clustered";
+  const meshes = buildPerspMeshes(three, layout, buildPerspPrisms(chartData, layout));
+  return {
+    group: meshes.group,
+    targets: meshes.meshes,
+    pointAt(object, local) {
+      const seriesIndex = object.userData.seriesIndex;
+      return seriesIndex === void 0 ? null : { seriesIndex, pointIndex: nearestIndex(layout.categoryX, local.x) };
+    },
+    anchor(point, value) {
+      const [z0, z1] = perspRowSpan(layout, stacked ? 0 : point.seriesIndex);
+      return [layout.categoryX[point.pointIndex], perspValueY(layout, value), (z0 + z1) / 2];
+    },
+    draggable: !stacked,
+    preview(point, value) {
+      meshes.setPrism(
+        point.seriesIndex,
+        buildPerspPrisms(chartData, layout, { ...point, value })[point.seriesIndex]
+      );
+    },
+    dispose: () => meshes.dispose()
+  };
+}
+function buildBarMarkSet(three, chartData, layout) {
+  const prisms = buildPerspPrisms(chartData, layout);
+  const meshes = buildPerspMeshes(three, layout, prisms);
+  const indexOf = (point) => prisms.findIndex(
+    (p) => p.seriesIndex === point.seriesIndex && p.pointIndex === point.pointIndex
+  );
+  return {
+    group: meshes.group,
+    targets: meshes.meshes,
+    pointAt(object) {
+      const data = object.userData;
+      return data.seriesIndex === void 0 || data.pointIndex === void 0 ? null : { seriesIndex: data.seriesIndex, pointIndex: data.pointIndex };
+    },
+    anchor(point, value) {
+      const prism = prisms[indexOf(point)];
+      if (!prism) {
+        return [0, perspValueY(layout, value), 0];
+      }
+      const along = prism.outline.map(([x, y]) => layout.horizontal ? y : x);
+      const mid = (Math.min(...along) + Math.max(...along)) / 2;
+      const v = perspValueY(layout, value);
+      const z = (prism.z0 + prism.z1) / 2;
+      return layout.horizontal ? [v, mid, z] : [mid, v, z];
+    },
+    draggable: layout.grouping === "clustered" || layout.grouping === "standard",
+    preview(point, value) {
+      const i = indexOf(point);
+      const next = buildPerspPrisms(chartData, layout, { ...point, value })[i];
+      if (next) {
+        meshes.setPrism(i, next);
+      }
+    },
+    dispose: () => meshes.dispose()
+  };
+}
+
+// src/pptx/render/chart-3d-persp-scene.ts
+var SELECTED_COLOR = 2450411;
+function surfaceLegend(chartData, layout, palette, background, textStyle) {
+  return surfaceBands(chartData, layout.range, palette).map((band) => ({
+    label: band.label,
+    color: band.color,
+    ...textStyle ? { textStyle } : {},
+    ...chartData.wireframe ? {
+      lineSwatch: {
+        primitives: [
+          { kind: "rect", x: 0, y: -7, w: 10, h: 10, fill: band.color },
+          { kind: "rect", x: 1, y: -6, w: 8, h: 8, fill: background }
+        ]
+      }
+    } : {}
+  }));
+}
+function mountPerspChartView(input, ctx) {
+  const three = ctx.three;
+  const { vm, layout, chartData } = input;
+  const palette = chartData.colorPalette?.length ? chartData.colorPalette : DEFAULT_PALETTE;
+  const camera = buildPerspCamera(three, layout.view, vm.svgWidth, vm.svgHeight);
+  const scene = new three.Scene();
+  const marks = buildPerspMarkSet(three, chartData, layout, palette);
+  scene.add(marks.group);
+  const markerGeometry = new three.OctahedronGeometry(layout.view.box.w * 0.012);
+  const markerMaterial = new three.MeshBasicMaterial({ color: SELECTED_COLOR });
+  const marker = new three.Mesh(markerGeometry, markerMaterial);
+  marker.visible = false;
+  marks.group.add(marker);
+  const overlay = renderChart3DChromeOverlaySvg(ctx.document, vm, {
+    labels: layout.labels,
+    reverseLegend: layout.horizontal && layout.grouping === "clustered",
+    legend: layout.kind === "surface" ? surfaceLegend(
+      chartData,
+      layout,
+      palette,
+      vm.areaFill ?? "#ffffff",
+      vm.legend[0]?.textStyle
+    ) : void 0
+  });
+  ctx.overlay.appendChild(overlay);
+  const valueAt = (point) => {
+    const v = chartData.series[point.seriesIndex]?.values[point.pointIndex];
+    return v !== void 0 && Number.isFinite(v) ? v : void 0;
+  };
+  const placeMarker = (point, value) => {
+    marker.position.set(...marks.anchor(point, value));
+  };
+  const interaction = attachChart3DMarkInteraction({
+    ctx,
+    camera,
+    scene,
+    svgHeight: vm.svgHeight,
+    chartData,
+    categoryLabels: input.categoryLabels,
+    seriesNames: chartData.series.map((s) => s.name),
+    adapter: {
+      targets: marks.targets,
+      pointAt: (hit) => marks.pointAt(hit.object, marks.group.worldToLocal(hit.point.clone())),
+      valueOf: valueAt,
+      beginDrag(point) {
+        const start = valueAt(point);
+        if (!marks.draggable || start === void 0) {
+          return null;
+        }
+        const unit = layout.range.majorUnit || 1;
+        const a = marks.anchor(point, start);
+        const step = unit * layout.valueScale;
+        const b = layout.horizontal ? [a[0] + step, a[1], a[2]] : [a[0], a[1] + step, a[2]];
+        const s0 = perspToScreen(layout.view, a);
+        const s1 = perspToScreen(layout.view, b);
+        const ux = (s1.x - s0.x) / unit;
+        const uy = (s1.y - s0.y) / unit;
+        const len2 = ux * ux + uy * uy || 1;
+        const span = layout.range.max - layout.range.min;
+        return {
+          preview(dx, dy) {
+            const value = roundDragValue(start + (dx * ux + dy * uy) / len2, {
+              min: layout.range.min,
+              max: layout.range.max,
+              span
+            });
+            marks.preview(point, value);
+            if (marker.visible) {
+              placeMarker(point, value);
+            }
+            return value;
+          }
+        };
+      },
+      highlight(point) {
+        const value = point ? valueAt(point) : void 0;
+        marker.visible = point !== null && value !== void 0;
+        if (point && value !== void 0) {
+          placeMarker(point, value);
+        }
+      },
+      dispose() {
+        markerGeometry.dispose();
+        markerMaterial.dispose();
+      }
+    }
+  });
+  let disposed = false;
+  return {
+    render(renderer) {
+      renderer.render(scene, camera);
+    },
+    resize() {
+    },
+    isAnimating: () => false,
+    setInteractive: (on) => interaction.setInteractive(on),
+    setSelectedPart: (part) => interaction.setSelectedPart(part),
+    dispose() {
+      if (disposed) {
+        return;
+      }
+      disposed = true;
+      interaction.dispose();
+      marks.dispose();
+      overlay.remove();
+    }
+  };
+}
+
+// src/pptx/render/chart-3d-pie-marks.ts
+var SEAM_COLOR = 16777215;
+var SEGMENTS_PER_TURN = 144;
+function pieFaceShade(nx, ny, nz, cut = false) {
+  if (ny > 0.5) {
+    return 1;
+  }
+  if (ny < -0.5) {
+    return 0.3;
+  }
+  const phi = Math.atan2(nx, -nz);
+  if (cut) {
+    return 0.5 + 0.2 * Math.sin(phi);
+  }
+  return Math.max(0.385, 0.57 - 0.275 * phi);
+}
+function sliceBuffers(three, layout, slice) {
+  const base = new three.Color(slice.color).getRGB(new three.Color(), three.SRGBColorSpace);
+  const out = new three.Color();
+  const positions = [];
+  const colors = [];
+  const cx = layout.center.x + slice.offset.x;
+  const cz = layout.center.z + slice.offset.z;
+  const top = layout.center.y;
+  const r = layout.radius;
+  const push = (p, n, cut = false) => {
+    const f = pieFaceShade(n[0], n[1], n[2], cut);
+    out.setRGB(
+      Math.min(1, base.r * f),
+      Math.min(1, base.g * f),
+      Math.min(1, base.b * f),
+      three.SRGBColorSpace
+    );
+    positions.push(...p);
+    colors.push(out.r, out.g, out.b);
+  };
+  const span = slice.endAngle - slice.startAngle;
+  const steps = Math.max(2, Math.ceil(span / (Math.PI * 2) * SEGMENTS_PER_TURN));
+  const angles = Array.from({ length: steps + 1 }, (_, i) => slice.startAngle + span * i / steps);
+  const rim = (a, y) => {
+    const p = pieRimPoint(cx, cz, r, a);
+    return [p.x, y, p.z];
+  };
+  const radial = (a) => [Math.sin(a), 0, Math.cos(a)];
+  for (let i = 0; i < steps; i++) {
+    const a0 = angles[i];
+    const a1 = angles[i + 1];
+    push([cx, top, cz], [0, 1, 0]);
+    push(rim(a0, top), [0, 1, 0]);
+    push(rim(a1, top), [0, 1, 0]);
+    push([cx, 0, cz], [0, -1, 0]);
+    push(rim(a1, 0), [0, -1, 0]);
+    push(rim(a0, 0), [0, -1, 0]);
+    push(rim(a0, top), radial(a0));
+    push(rim(a0, 0), radial(a0));
+    push(rim(a1, 0), radial(a1));
+    push(rim(a0, top), radial(a0));
+    push(rim(a1, 0), radial(a1));
+    push(rim(a1, top), radial(a1));
+  }
+  for (const [a, sign] of [
+    [slice.startAngle, -1],
+    [slice.endAngle, 1]
+  ]) {
+    const n = [sign * Math.cos(a), 0, -sign * Math.sin(a)];
+    push([cx, top, cz], n, true);
+    push([cx, 0, cz], n, true);
+    push(rim(a, 0), n, true);
+    push([cx, top, cz], n, true);
+    push(rim(a, 0), n, true);
+    push(rim(a, top), n, true);
+  }
+  const seams = [];
+  for (let i = 0; i < steps; i++) {
+    seams.push(...rim(angles[i], top), ...rim(angles[i + 1], top));
+  }
+  for (const a of [slice.startAngle, slice.endAngle]) {
+    seams.push(cx, top, cz, ...rim(a, top), ...rim(a, top), ...rim(a, 0));
+  }
+  return { positions, colors, seams };
+}
+function buildPieMarks(three, layout) {
+  const group = new three.Group();
+  group.matrixAutoUpdate = false;
+  group.matrix.copy(perspBoxMatrix(three, layout.view));
+  const material = new three.MeshBasicMaterial({
+    vertexColors: true,
+    side: three.DoubleSide,
+    polygonOffset: true,
+    polygonOffsetFactor: 1,
+    polygonOffsetUnits: 1
+  });
+  const seamMaterial = new three.LineBasicMaterial({ color: SEAM_COLOR });
+  const meshes = [];
+  let seams = null;
+  const clear = () => {
+    for (const mesh of meshes) {
+      group.remove(mesh);
+      mesh.geometry.dispose();
+    }
+    if (seams) {
+      group.remove(seams);
+      seams.geometry.dispose();
+    }
+  };
+  const build = (slices) => {
+    clear();
+    const seamPoints = [];
+    const built = slices.map((slice) => {
+      const b = sliceBuffers(three, layout, slice);
+      const geometry = new three.BufferGeometry();
+      geometry.setAttribute("position", new three.Float32BufferAttribute(b.positions, 3));
+      geometry.setAttribute("color", new three.Float32BufferAttribute(b.colors, 3));
+      const mesh = new three.Mesh(geometry, material);
+      mesh.userData = { seriesIndex: 0, pointIndex: slice.pointIndex };
+      group.add(mesh);
+      seamPoints.push(...b.seams);
+      return mesh;
+    });
+    meshes.splice(0, meshes.length, ...built);
+    const seamGeometry = new three.BufferGeometry();
+    seamGeometry.setAttribute("position", new three.Float32BufferAttribute(seamPoints, 3));
+    seams = new three.LineSegments(seamGeometry, seamMaterial);
+    group.add(seams);
+  };
+  build(layout.slices);
+  return {
+    group,
+    meshes,
+    setSlices: build,
+    dispose() {
+      clear();
+      material.dispose();
+      seamMaterial.dispose();
+    }
+  };
+}
+
+// src/pptx/render/chart-3d-pie-scene.ts
+var SELECTED_COLOR2 = 2450411;
+function slicesWith(input, pointIndex, value) {
+  const series = input.chartData.series.map(
+    (s, i) => i === 0 ? { ...s, values: s.values.map((v, j) => j === pointIndex ? value : v) } : s
+  );
+  const element = {
+    ...input.element,
+    chartData: { ...input.chartData, series }
+  };
+  return computePieChartLayout(element, input.vm)?.slices ?? input.layout.slices;
+}
+function mountPieChartView(input, ctx) {
+  const three = ctx.three;
+  const { vm, layout, chartData } = input;
+  const camera = buildPerspCamera(three, layout.view, vm.svgWidth, vm.svgHeight);
+  const scene = new three.Scene();
+  const marks = buildPieMarks(three, layout);
+  scene.add(marks.group);
+  const markerGeometry = new three.OctahedronGeometry(0.03);
+  const markerMaterial = new three.MeshBasicMaterial({ color: SELECTED_COLOR2 });
+  const marker = new three.Mesh(markerGeometry, markerMaterial);
+  marker.visible = false;
+  marks.group.add(marker);
+  const overlay = renderChart3DChromeOverlaySvg(ctx.document, vm, {
+    labels: [],
+    reverseLegend: false
+  });
+  ctx.overlay.appendChild(overlay);
+  const values = () => chartData.series[0]?.values.slice() ?? [];
+  const interaction = attachChart3DMarkInteraction({
+    ctx,
+    camera,
+    scene,
+    svgHeight: vm.svgHeight,
+    chartData,
+    categoryLabels: input.categoryLabels,
+    seriesNames: chartData.series.map((s) => s.name),
+    adapter: {
+      targets: marks.meshes,
+      pointAt(hit) {
+        const pointIndex = hit.object.userData.pointIndex;
+        return pointIndex === void 0 ? null : { seriesIndex: 0, pointIndex };
+      },
+      valueOf(point) {
+        const v = chartData.series[0]?.values[point.pointIndex];
+        return v !== void 0 && Number.isFinite(v) ? v : void 0;
+      },
+      beginDrag(point) {
+        const slice = layout.slices[point.pointIndex];
+        if (!slice) {
+          return null;
+        }
+        const start = values();
+        return {
+          preview(_dx, _dy, at) {
+            const hit = perspScreenToPlaneY(layout.view, at.x, at.y, layout.center.y);
+            if (!hit) {
+              return start[point.pointIndex];
+            }
+            const angle = Math.atan2(
+              hit.x - layout.center.x - slice.offset.x,
+              hit.z - layout.center.z - slice.offset.z
+            );
+            const value = resolvePieSliceShareValue(
+              angle,
+              slice.startAngle,
+              start,
+              point.pointIndex
+            );
+            marks.setSlices(slicesWith(input, point.pointIndex, value));
+            return value;
+          }
+        };
+      },
+      highlight(point) {
+        const slice = point ? layout.slices[point.pointIndex] : void 0;
+        marker.visible = slice !== void 0;
+        if (slice) {
+          const mid = (slice.startAngle + slice.endAngle) / 2;
+          const p = pieRimPoint(
+            layout.center.x + slice.offset.x,
+            layout.center.z + slice.offset.z,
+            layout.radius * 0.6,
+            mid
+          );
+          marker.position.set(p.x, layout.center.y, p.z);
+        }
+      },
+      dispose() {
+        markerGeometry.dispose();
+        markerMaterial.dispose();
+      }
+    }
+  });
+  let disposed = false;
+  return {
+    render(renderer) {
+      renderer.render(scene, camera);
+    },
+    resize() {
+    },
+    isAnimating: () => false,
+    setInteractive: (on) => interaction.setInteractive(on),
+    setSelectedPart: (part) => interaction.setSelectedPart(part),
+    dispose() {
+      if (disposed) {
+        return;
+      }
+      disposed = true;
+      interaction.dispose();
+      marks.dispose();
+      overlay.remove();
+    }
+  };
+}
+
+// src/pptx/render/chart-3d-view-scene.ts
+function buildObliqueCamera(three, svgWidth, svgHeight, shearX, shearY) {
+  const halfW = svgWidth / 2;
+  const halfH = svgHeight / 2;
+  const distance = halfW + halfH + 500;
+  const camera = new three.OrthographicCamera(-halfW, halfW, halfH, -halfH, 1, distance + 2e3);
+  camera.position.set(0, 0, distance);
+  camera.lookAt(0, 0, 0);
+  camera.updateProjectionMatrix();
+  const m = camera.projectionMatrix.elements;
+  const ndcScaleX = m[0];
+  const ndcScaleY = m[5];
+  m[8] = -shearX * ndcScaleX;
+  m[9] = shearY * ndcScaleY;
+  m[12] += m[8] * distance;
+  m[13] += m[9] * distance;
+  camera.projectionMatrixInverse.copy(camera.projectionMatrix).invert();
+  return camera;
+}
+async function mountChart3DView(spec, ctx) {
+  if (spec.geometry?.kind === "pie") {
+    const chartData2 = spec.element.chartData;
+    if (!chartData2) {
+      throw new Error("3D chart spec without chart data");
+    }
+    return mountPieChartView(
+      {
+        element: spec.element,
+        vm: widenPieViewModel(spec.vm, spec.element),
+        layout: spec.geometry.layout,
+        chartData: chartData2,
+        categoryLabels: spec.categoryLabels
+      },
+      ctx
+    );
+  }
+  if (spec.geometry?.kind === "perspective") {
+    const chartData2 = spec.element.chartData;
+    if (!chartData2) {
+      throw new Error("3D chart spec without chart data");
+    }
+    return mountPerspChartView(
+      { vm: spec.vm, layout: spec.geometry.layout, chartData: chartData2, categoryLabels: spec.categoryLabels },
+      ctx
+    );
+  }
+  if (spec.projection.mode !== "oblique" || spec.geometry?.kind !== "oblique") {
+    throw new Error(`no 3D chart scene for chartType=${spec.chartType}`);
+  }
+  const three = ctx.three;
+  const { vm, geometry } = spec;
+  const chartData = spec.element.chartData;
+  if (!chartData) {
+    throw new Error("3D chart spec without chart data");
+  }
+  const camera = buildObliqueCamera(
+    three,
+    vm.svgWidth,
+    vm.svgHeight,
+    spec.projection.shearX,
+    spec.projection.shearY
+  );
+  const scene = new three.Scene();
+  const { layout } = geometry;
+  const bars = buildChart3DBarMeshes(three, layout, vm.svgWidth, vm.svgHeight);
+  scene.add(bars.group);
+  const overlay = renderChart3DChromeOverlaySvg(ctx.document, vm, {
+    labels: layout.labels,
+    // PowerPoint lists a clustered horizontal bar chart's legend bottom-up,
+    // matching the order the series stack up the category axis.
+    reverseLegend: layout.horizontal && layout.grouping === "clustered"
+  });
+  ctx.overlay.appendChild(overlay);
+  const interaction = attachObliqueBarInteraction({
+    ctx,
+    camera,
+    meshes: bars.meshes,
+    layout,
+    svgWidth: vm.svgWidth,
+    svgHeight: vm.svgHeight,
+    chartData,
+    categoryLabels: spec.categoryLabels,
+    seriesNames: chartData.series.map((series) => series.name),
+    scene
+  });
+  let disposed = false;
+  return {
+    render(renderer) {
+      renderer.render(scene, camera);
+    },
+    resize() {
+    },
+    isAnimating: () => false,
+    setInteractive: (on) => interaction.setInteractive(on),
+    setSelectedPart: (part) => interaction.setSelectedPart(part),
+    dispose() {
+      if (disposed) {
+        return;
+      }
+      disposed = true;
+      interaction.dispose();
+      bars.dispose();
+      overlay.remove();
+    }
+  };
+}
+
+export { buildObliqueCamera, mountChart3DView };