pptx-angular-viewer 1.1.11 → 1.1.13

package/fesm2022/pptx-angular-viewer.mjs

@@ -3737,6 +3737,977 @@ const ANIMATION_KEYFRAMES_CSS = `
 }
 `.trim();
 
+/**
+ * CSS-based 3D approximation for PPTX shapes (framework-agnostic).
+ *
+ * Self-contained module that translates OOXML scene3d/shape3d properties
+ * (camera/perspective, extrusion depth, contour, bevel, material, light rig)
+ * into the CSS pieces a renderer can apply. It mirrors the React layer
+ * (`packages/react/src/viewer/utils/shape-3d-styles.ts` +
+ * `shape-visual-3d.ts`) closely enough that every binding produces the same
+ * visual output, while staying framework-agnostic (plain TS, unit-testable).
+ *
+ * The aggregate {@link getComputed3dStyle} returns plain string/number CSS
+ * pieces — no framework `CSSProperties` type — so React, Vue, and Angular can
+ * each merge them into their own style object. The extrusion box-shadow is
+ * returned as a SEPARATE `extrusionBoxShadow` value (rather than folded into
+ * `boxShadow`) so the caller can comma-join it with any pre-existing effect
+ * shadow instead of clobbering it.
+ *
+ * @module render/visual-3d
+ */
+/**
+ * EMU per CSS pixel. PowerPoint stores 3D dimensions in English Metric Units;
+ * the React layer uses the same constant (9525). Defined locally to keep this
+ * module self-contained.
+ */
+const EMU_PER_PX = 9525;
+/**
+ * Maximum stacked shadow layers for extrusion (performance guard). Matches the
+ * React engine — each layer is a single box-shadow, so 40 is still performant.
+ */
+const MAX_EXTRUSION_LAYERS = 40;
+const MATERIAL_MAP = {
+    matte: {
+        filter: 'brightness(0.95) saturate(0.9)',
+        backgroundImage: 'linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 40%, rgba(0,0,0,0.03) 100%)',
+    },
+    warmMatte: {
+        filter: 'brightness(1.0) saturate(0.85) sepia(0.08)',
+        backgroundImage: 'linear-gradient(180deg, rgba(255,240,220,0.06) 0%, transparent 50%, rgba(0,0,0,0.03) 100%)',
+    },
+    plastic: {
+        filter: 'brightness(1.05) contrast(1.05)',
+        boxShadow: 'inset -2px -2px 6px rgba(255,255,255,0.35), inset 1px 1px 3px rgba(255,255,255,0.15)',
+        backgroundImage: 'radial-gradient(ellipse 40% 30% at 25% 20%, rgba(255,255,255,0.18) 0%, transparent 70%)',
+    },
+    metal: {
+        filter: 'brightness(1.1) contrast(1.15) saturate(1.2)',
+        boxShadow: 'inset -3px -3px 8px rgba(255,255,255,0.45), inset 2px 2px 4px rgba(255,255,255,0.2), inset 0 0 2px rgba(0,0,0,0.15)',
+        backgroundImage: 'linear-gradient(135deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.08) 20%, transparent 45%, rgba(0,0,0,0.06) 75%, rgba(255,255,255,0.1) 100%)',
+    },
+    dkEdge: {
+        filter: 'brightness(0.85) contrast(1.2)',
+        boxShadow: 'inset 0 0 8px rgba(0,0,0,0.2), inset 0 0 2px rgba(0,0,0,0.1)',
+        backgroundImage: 'radial-gradient(ellipse at center, rgba(255,255,255,0.06) 0%, transparent 50%, rgba(0,0,0,0.1) 100%)',
+    },
+    softEdge: {
+        filter: 'brightness(1.05) contrast(0.9)',
+        backgroundImage: 'radial-gradient(ellipse at center, rgba(255,255,255,0.06) 0%, transparent 60%)',
+    },
+    flat: {},
+    softmetal: {
+        filter: 'brightness(1.05) contrast(1.08) saturate(1.1)',
+        boxShadow: 'inset -2px -2px 6px rgba(255,255,255,0.3), inset 1px 1px 3px rgba(255,255,255,0.12)',
+        backgroundImage: 'linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.04) 25%, transparent 50%, rgba(0,0,0,0.04) 85%, rgba(255,255,255,0.06) 100%)',
+    },
+    clear: {
+        opacity: 0.7,
+        filter: 'brightness(1.15)',
+        boxShadow: 'inset -1px -1px 4px rgba(255,255,255,0.3), inset 1px 1px 2px rgba(255,255,255,0.2)',
+        backgroundImage: 'linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 40%, rgba(255,255,255,0.08) 100%)',
+    },
+    powder: {
+        filter: 'brightness(1.1) contrast(0.85) saturate(0.8)',
+        backgroundImage: 'linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 50%)',
+    },
+    translucentPowder: {
+        opacity: 0.75,
+        filter: 'brightness(1.1) contrast(0.85)',
+        backgroundImage: 'radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.1) 0%, transparent 60%)',
+    },
+    legacyMatte: {
+        filter: 'brightness(0.92) saturate(0.85)',
+        backgroundImage: 'linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 50%, rgba(0,0,0,0.04) 100%)',
+    },
+    legacyPlastic: {
+        filter: 'brightness(1.02) contrast(1.03)',
+        boxShadow: 'inset -2px -2px 5px rgba(255,255,255,0.3)',
+        backgroundImage: 'radial-gradient(ellipse 35% 25% at 25% 20%, rgba(255,255,255,0.15) 0%, transparent 70%)',
+    },
+    legacyMetal: {
+        filter: 'brightness(1.05) contrast(1.1) saturate(1.1)',
+        boxShadow: 'inset -2px -2px 6px rgba(255,255,255,0.35), inset 1px 1px 3px rgba(255,255,255,0.15)',
+        backgroundImage: 'linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.06) 25%, transparent 50%, rgba(0,0,0,0.05) 80%)',
+    },
+    legacyWireframe: {
+        filter: 'brightness(1) contrast(1.4) saturate(0.6)',
+        boxShadow: 'inset 0 0 0 1px rgba(0,0,0,0.4)',
+    },
+};
+/** CSS overrides for a material preset; empty object for unknown/undefined. */
+function getMaterialCssOverrides(material) {
+    if (!material) {
+        return {};
+    }
+    return MATERIAL_MAP[material] ?? {};
+}
+const CAMERA_PRESET_MAP = {
+    orthographicFront: { rotateX: 0, rotateY: 0, rotateZ: 0 },
+    perspectiveFront: { perspective: '1000px', rotateX: 0, rotateY: 0, rotateZ: 0 },
+    perspectiveAbove: { perspective: '1000px', rotateX: -20, rotateY: 0, rotateZ: 0 },
+    perspectiveBelow: { perspective: '1000px', rotateX: 20, rotateY: 0, rotateZ: 0 },
+    perspectiveLeft: { perspective: '1000px', rotateX: 0, rotateY: 20, rotateZ: 0 },
+    perspectiveRight: { perspective: '1000px', rotateX: 0, rotateY: -20, rotateZ: 0 },
+    perspectiveAboveLeftFacing: { perspective: '1000px', rotateX: -20, rotateY: 25, rotateZ: 0 },
+    perspectiveAboveRightFacing: { perspective: '1000px', rotateX: -20, rotateY: -25, rotateZ: 0 },
+    perspectiveContrastingLeftFacing: { perspective: '800px', rotateX: -15, rotateY: 30, rotateZ: 0 },
+    perspectiveContrastingRightFacing: {
+        perspective: '800px',
+        rotateX: -15,
+        rotateY: -30,
+        rotateZ: 0,
+    },
+    perspectiveHeroicLeftFacing: { perspective: '600px', rotateX: -10, rotateY: 35, rotateZ: 0 },
+    perspectiveHeroicRightFacing: { perspective: '600px', rotateX: -10, rotateY: -35, rotateZ: 0 },
+    perspectiveHeroicExtremeLeftFacing: {
+        perspective: '500px',
+        rotateX: -8,
+        rotateY: 45,
+        rotateZ: 0,
+    },
+    perspectiveHeroicExtremeRightFacing: {
+        perspective: '500px',
+        rotateX: -8,
+        rotateY: -45,
+        rotateZ: 0,
+    },
+    perspectiveRelaxed: { perspective: '1200px', rotateX: -10, rotateY: 0, rotateZ: 0 },
+    perspectiveRelaxedModerately: { perspective: '1400px', rotateX: -5, rotateY: 0, rotateZ: 0 },
+    isometricLeftDown: { perspective: '1200px', rotateX: -35, rotateY: 45, rotateZ: 0 },
+    isometricRightUp: { perspective: '1200px', rotateX: -35, rotateY: -45, rotateZ: 0 },
+    isometricTopUp: { perspective: '1200px', rotateX: -55, rotateY: 0, rotateZ: 45 },
+    isometricTopDown: { perspective: '1200px', rotateX: -55, rotateY: 0, rotateZ: -45 },
+    isometricBottomUp: { perspective: '1200px', rotateX: 55, rotateY: 0, rotateZ: 45 },
+    isometricBottomDown: { perspective: '1200px', rotateX: 55, rotateY: 0, rotateZ: -45 },
+    isometricOffAxis1Left: { perspective: '1200px', rotateX: -30, rotateY: 30, rotateZ: 0 },
+    isometricOffAxis1Right: { perspective: '1200px', rotateX: -30, rotateY: -30, rotateZ: 0 },
+    isometricOffAxis1Top: { perspective: '1200px', rotateX: -45, rotateY: 0, rotateZ: 30 },
+    isometricOffAxis2Left: { perspective: '1200px', rotateX: -30, rotateY: 20, rotateZ: 0 },
+    isometricOffAxis2Right: { perspective: '1200px', rotateX: -30, rotateY: -20, rotateZ: 0 },
+    isometricOffAxis2Top: { perspective: '1200px', rotateX: -45, rotateY: 0, rotateZ: -30 },
+    isometricOffAxis3Left: { perspective: '1200px', rotateX: -25, rotateY: 35, rotateZ: 0 },
+    isometricOffAxis3Right: { perspective: '1200px', rotateX: -25, rotateY: -35, rotateZ: 0 },
+    isometricOffAxis3Bottom: { perspective: '1200px', rotateX: 45, rotateY: 0, rotateZ: 30 },
+    isometricOffAxis4Left: { perspective: '1200px', rotateX: -25, rotateY: 25, rotateZ: 0 },
+    isometricOffAxis4Right: { perspective: '1200px', rotateX: -25, rotateY: -25, rotateZ: 0 },
+    isometricOffAxis4Bottom: { perspective: '1200px', rotateX: 45, rotateY: 0, rotateZ: -30 },
+    obliqueTopLeft: { perspective: '900px', rotateX: -20, rotateY: 20, rotateZ: 0 },
+    obliqueTop: { perspective: '900px', rotateX: -25, rotateY: 0, rotateZ: 0 },
+    obliqueTopRight: { perspective: '900px', rotateX: -20, rotateY: -20, rotateZ: 0 },
+    obliqueLeft: { perspective: '900px', rotateX: 0, rotateY: 25, rotateZ: 0 },
+    obliqueRight: { perspective: '900px', rotateX: 0, rotateY: -25, rotateZ: 0 },
+    obliqueBottomLeft: { perspective: '900px', rotateX: 20, rotateY: 20, rotateZ: 0 },
+    obliqueBottom: { perspective: '900px', rotateX: 25, rotateY: 0, rotateZ: 0 },
+    obliqueBottomRight: { perspective: '900px', rotateX: 20, rotateY: -20, rotateZ: 0 },
+};
+/**
+ * Resolve a camera preset name + explicit rotation overrides into final CSS
+ * perspective and rotation (degrees). Explicit `cameraRot*` (1/60000 deg)
+ * override preset defaults; the X axis is negated to match CSS conventions.
+ */
+function getCameraTransform(scene3d) {
+    if (!scene3d) {
+        return { rotateX: 0, rotateY: 0, rotateZ: 0 };
+    }
+    const preset = scene3d.cameraPreset ? CAMERA_PRESET_MAP[scene3d.cameraPreset] : undefined;
+    let perspective = preset?.perspective;
+    let rotateX = preset?.rotateX ?? 0;
+    let rotateY = preset?.rotateY ?? 0;
+    let rotateZ = preset?.rotateZ ?? 0;
+    if (scene3d.cameraRotX) {
+        rotateX = -(scene3d.cameraRotX / 60000);
+    }
+    if (scene3d.cameraRotY) {
+        rotateY = scene3d.cameraRotY / 60000;
+    }
+    if (scene3d.cameraRotZ) {
+        rotateZ = scene3d.cameraRotZ / 60000;
+    }
+    if (!perspective && (rotateX !== 0 || rotateY !== 0 || rotateZ !== 0)) {
+        perspective = '800px';
+    }
+    return { perspective, rotateX, rotateY, rotateZ };
+}
+const LIGHT_RIG_MAP = {
+    threePt: {
+        backgroundImage: [
+            'linear-gradient(135deg, rgba(255,255,255,0.14) 0%, transparent 35%)',
+            'linear-gradient(315deg, rgba(255,255,255,0.05) 0%, transparent 25%)',
+            'linear-gradient(0deg, rgba(0,0,0,0.06) 0%, transparent 20%)',
+        ].join(', '),
+    },
+    balanced: {
+        backgroundImage: [
+            'linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 40%)',
+            'linear-gradient(0deg, rgba(255,255,255,0.03) 0%, transparent 30%)',
+            'linear-gradient(90deg, rgba(255,255,255,0.02) 0%, transparent 20%)',
+        ].join(', '),
+    },
+    harsh: {
+        backgroundImage: [
+            'linear-gradient(135deg, rgba(255,255,255,0.22) 0%, transparent 28%)',
+            'linear-gradient(315deg, rgba(0,0,0,0.12) 0%, transparent 40%)',
+        ].join(', '),
+        filter: 'contrast(1.08)',
+    },
+    flat: {},
+    flood: {
+        backgroundImage: 'linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.03) 50%, transparent 100%)',
+        filter: 'brightness(1.08)',
+    },
+    contrasting: {
+        backgroundImage: [
+            'linear-gradient(120deg, rgba(255,255,255,0.2) 0%, transparent 30%)',
+            'linear-gradient(300deg, rgba(0,0,0,0.1) 0%, transparent 35%)',
+        ].join(', '),
+        filter: 'contrast(1.1)',
+    },
+    morning: {
+        backgroundImage: [
+            'linear-gradient(90deg, rgba(255,240,200,0.16) 0%, transparent 45%)',
+            'linear-gradient(270deg, rgba(0,0,0,0.04) 0%, transparent 30%)',
+        ].join(', '),
+    },
+    sunrise: {
+        backgroundImage: [
+            'linear-gradient(45deg, rgba(255,220,180,0.16) 0%, transparent 40%)',
+            'radial-gradient(ellipse at 20% 80%, rgba(255,200,140,0.08) 0%, transparent 50%)',
+        ].join(', '),
+    },
+    sunset: {
+        backgroundImage: [
+            'linear-gradient(270deg, rgba(255,180,100,0.14) 0%, transparent 45%)',
+            'radial-gradient(ellipse at 85% 50%, rgba(255,160,60,0.06) 0%, transparent 40%)',
+        ].join(', '),
+    },
+    chilly: {
+        backgroundImage: [
+            'linear-gradient(180deg, rgba(180,200,255,0.1) 0%, transparent 50%)',
+            'radial-gradient(ellipse at center, rgba(200,220,255,0.04) 0%, transparent 60%)',
+        ].join(', '),
+    },
+    freezing: {
+        backgroundImage: [
+            'linear-gradient(180deg, rgba(160,190,255,0.16) 0%, transparent 40%)',
+            'linear-gradient(0deg, rgba(140,170,255,0.06) 0%, transparent 25%)',
+        ].join(', '),
+        filter: 'saturate(0.9)',
+    },
+    glow: {
+        backgroundImage: 'radial-gradient(ellipse at center, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.04) 40%, transparent 70%)',
+    },
+    brightRoom: {
+        backgroundImage: [
+            'linear-gradient(180deg, rgba(255,255,255,0.1) 0%, transparent 50%)',
+            'radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.06) 0%, transparent 60%)',
+        ].join(', '),
+        filter: 'brightness(1.05)',
+    },
+    soft: {
+        backgroundImage: [
+            'linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 40%)',
+            'radial-gradient(ellipse at center, rgba(255,255,255,0.03) 0%, transparent 60%)',
+        ].join(', '),
+        filter: 'contrast(0.95)',
+    },
+    twoPt: {
+        backgroundImage: [
+            'linear-gradient(90deg, rgba(255,255,255,0.12) 0%, transparent 35%)',
+            'linear-gradient(270deg, rgba(255,255,255,0.07) 0%, transparent 30%)',
+        ].join(', '),
+    },
+    legacyFlat1: {},
+    legacyFlat2: {},
+    legacyFlat3: {},
+    legacyFlat4: {},
+    legacyNormal1: {
+        backgroundImage: 'linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%)',
+    },
+    legacyNormal2: {
+        backgroundImage: 'linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 50%)',
+    },
+    legacyNormal3: {
+        backgroundImage: 'linear-gradient(120deg, rgba(255,255,255,0.1) 0%, transparent 50%)',
+    },
+    legacyNormal4: {
+        backgroundImage: 'linear-gradient(150deg, rgba(255,255,255,0.1) 0%, transparent 50%)',
+    },
+    legacyHarsh1: {
+        backgroundImage: [
+            'linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 28%)',
+            'linear-gradient(315deg, rgba(0,0,0,0.1) 0%, transparent 35%)',
+        ].join(', '),
+        filter: 'contrast(1.1)',
+    },
+    legacyHarsh2: {
+        backgroundImage: [
+            'linear-gradient(135deg, rgba(255,255,255,0.16) 0%, transparent 28%)',
+            'linear-gradient(315deg, rgba(0,0,0,0.08) 0%, transparent 35%)',
+        ].join(', '),
+        filter: 'contrast(1.08)',
+    },
+    legacyHarsh3: {
+        backgroundImage: [
+            'linear-gradient(120deg, rgba(255,255,255,0.2) 0%, transparent 28%)',
+            'linear-gradient(300deg, rgba(0,0,0,0.1) 0%, transparent 35%)',
+        ].join(', '),
+        filter: 'contrast(1.1)',
+    },
+    legacyHarsh4: {
+        backgroundImage: [
+            'linear-gradient(150deg, rgba(255,255,255,0.2) 0%, transparent 28%)',
+            'linear-gradient(330deg, rgba(0,0,0,0.1) 0%, transparent 35%)',
+        ].join(', '),
+        filter: 'contrast(1.1)',
+    },
+};
+/** Map a light-rig direction token to a CSS gradient angle (degrees). */
+function getLightDirectionAngle(direction) {
+    switch (direction) {
+        case 't':
+            return 180;
+        case 'b':
+            return 0;
+        case 'l':
+            return 90;
+        case 'r':
+            return 270;
+        case 'tl':
+            return 135;
+        case 'tr':
+            return 225;
+        case 'bl':
+            return 45;
+        case 'br':
+            return 315;
+        default:
+            return 135;
+    }
+}
+/** Shift every `linear-gradient(Ndeg` angle in a background-image by a delta. */
+function rotateGradientAngles(backgroundImage, angleDelta) {
+    if (angleDelta === 0) {
+        return backgroundImage;
+    }
+    return backgroundImage.replace(/linear-gradient\((?<deg>\d+)deg/gu, (_match, degStr) => {
+        const newAngle = (parseInt(degStr, 10) + angleDelta + 360) % 360;
+        return `linear-gradient(${newAngle}deg`;
+    });
+}
+/** Resolve light rig CSS overrides for a given rig type + direction. */
+function getLightRigCss(lightRigType, lightRigDirection) {
+    if (!lightRigType) {
+        return {};
+    }
+    const config = LIGHT_RIG_MAP[lightRigType];
+    if (!config) {
+        return {};
+    }
+    if (config.backgroundImage && lightRigDirection) {
+        const targetAngle = getLightDirectionAngle(lightRigDirection);
+        const delta = targetAngle - 135;
+        if (delta !== 0) {
+            return {
+                ...config,
+                backgroundImage: rotateGradientAngles(config.backgroundImage, delta),
+            };
+        }
+    }
+    return config;
+}
+// ── Bevel preset mapping ─────────────────────────────────────────────────
+function getBevelShadow(bevelType, bW, bH, isBottom) {
+    const hlDir = isBottom ? -1 : 1;
+    const shDir = isBottom ? 1 : -1;
+    const hlOpacity = isBottom ? 0.2 : 0.3;
+    const shOpacity = isBottom ? 0.3 : 0.2;
+    const maxDim = Math.max(bW, bH);
+    switch (bevelType) {
+        case 'circle':
+            return [
+                `inset ${hlDir * bW}px ${hlDir * bH}px ${maxDim + 2}px rgba(255,255,255,${hlOpacity + 0.12})`,
+                `inset ${hlDir * Math.round(bW * 0.5)}px ${hlDir * Math.round(bH * 0.5)}px ${maxDim + 4}px rgba(255,255,255,${hlOpacity * 0.4})`,
+                `inset ${shDir * bW}px ${shDir * bH}px ${maxDim + 2}px rgba(0,0,0,${shOpacity + 0.06})`,
+                `inset ${shDir * Math.round(bW * 0.5)}px ${shDir * Math.round(bH * 0.5)}px ${maxDim + 4}px rgba(0,0,0,${shOpacity * 0.3})`,
+            ].join(', ');
+        case 'relaxedInset':
+            return [
+                `inset ${hlDir * bW}px ${hlDir * bH}px ${maxDim + 5}px rgba(255,255,255,${hlOpacity - 0.04})`,
+                `inset ${shDir * bW}px ${shDir * bH}px ${maxDim + 5}px rgba(0,0,0,${shOpacity - 0.04})`,
+                `inset 0 0 ${maxDim + 8}px rgba(0,0,0,${shOpacity * 0.15})`,
+            ].join(', ');
+        case 'hardEdge':
+            return [
+                `inset ${hlDir * bW}px ${hlDir * bH}px 0 rgba(255,255,255,${hlOpacity + 0.18})`,
+                `inset ${shDir * bW}px ${shDir * bH}px 0 rgba(0,0,0,${shOpacity + 0.18})`,
+                `inset ${hlDir * Math.round(bW * 0.4)}px ${hlDir * Math.round(bH * 0.4)}px 0 rgba(255,255,255,${hlOpacity * 0.3})`,
+            ].join(', ');
+        case 'cross':
+            return [
+                `inset ${hlDir * bW}px 0 ${bW}px rgba(255,255,255,${hlOpacity})`,
+                `inset 0 ${hlDir * bH}px ${bH}px rgba(255,255,255,${hlOpacity})`,
+                `inset ${shDir * bW}px 0 ${bW}px rgba(0,0,0,${shOpacity})`,
+                `inset 0 ${shDir * bH}px ${bH}px rgba(0,0,0,${shOpacity})`,
+                `inset 0 0 ${Math.round(maxDim * 0.5)}px rgba(0,0,0,${shOpacity * 0.2})`,
+            ].join(', ');
+        case 'coolSlant':
+            return [
+                `inset ${hlDir * bW}px ${hlDir * Math.round(bH * 0.4)}px ${maxDim}px rgba(255,255,255,${hlOpacity + 0.12})`,
+                `inset ${hlDir * Math.round(bW * 0.6)}px 0 ${Math.round(maxDim * 0.6)}px rgba(255,255,255,${hlOpacity * 0.4})`,
+                `inset ${shDir * Math.round(bW * 0.4)}px ${shDir * bH}px ${maxDim}px rgba(0,0,0,${shOpacity + 0.1})`,
+            ].join(', ');
+        case 'angle':
+            return [
+                `inset ${hlDir * bW}px ${hlDir * bH}px ${Math.round(maxDim * 0.4)}px rgba(255,255,255,${hlOpacity + 0.16})`,
+                `inset ${hlDir * Math.round(bW * 0.5)}px ${hlDir * Math.round(bH * 0.5)}px 0 rgba(255,255,255,${hlOpacity * 0.5})`,
+                `inset ${shDir * bW}px ${shDir * bH}px ${Math.round(maxDim * 0.4)}px rgba(0,0,0,${shOpacity + 0.12})`,
+            ].join(', ');
+        case 'softRound':
+            return [
+                `inset ${hlDir * bW}px ${hlDir * bH}px ${maxDim + 7}px rgba(255,255,255,${hlOpacity + 0.02})`,
+                `inset ${hlDir * Math.round(bW * 0.3)}px ${hlDir * Math.round(bH * 0.3)}px ${maxDim + 10}px rgba(255,255,255,${hlOpacity * 0.3})`,
+                `inset ${shDir * bW}px ${shDir * bH}px ${maxDim + 7}px rgba(0,0,0,${shOpacity - 0.04})`,
+            ].join(', ');
+        case 'convex':
+            return [
+                `inset 0 0 ${maxDim + 4}px rgba(255,255,255,${hlOpacity + 0.06})`,
+                `inset ${hlDir * bW}px ${hlDir * bH}px ${maxDim}px rgba(255,255,255,${hlOpacity + 0.02})`,
+                `inset ${shDir * bW}px ${shDir * bH}px ${maxDim}px rgba(0,0,0,${shOpacity})`,
+                `inset ${shDir * Math.round(bW * 1.5)}px ${shDir * Math.round(bH * 1.5)}px ${maxDim + 2}px rgba(0,0,0,${shOpacity * 0.3})`,
+            ].join(', ');
+        case 'slope':
+            return [
+                `inset ${hlDir * bW}px ${hlDir * bH}px ${maxDim + 4}px rgba(255,255,255,${hlOpacity + 0.06})`,
+                `inset ${hlDir * Math.round(bW * 0.5)}px ${hlDir * Math.round(bH * 0.5)}px ${maxDim + 6}px rgba(255,255,255,${hlOpacity * 0.35})`,
+                `inset ${shDir * Math.round(bW * 0.7)}px ${shDir * Math.round(bH * 0.7)}px ${maxDim}px rgba(0,0,0,${shOpacity})`,
+            ].join(', ');
+        case 'divot':
+            return [
+                `inset ${shDir * Math.round(bW * 0.5)}px ${shDir * Math.round(bH * 0.5)}px ${Math.round(maxDim * 0.5)}px rgba(255,255,255,${hlOpacity + 0.06})`,
+                `inset ${hlDir * Math.round(bW * 0.5)}px ${hlDir * Math.round(bH * 0.5)}px ${Math.round(maxDim * 0.5)}px rgba(0,0,0,${shOpacity + 0.12})`,
+                `inset 0 0 ${Math.round(maxDim * 0.3)}px rgba(0,0,0,${shOpacity * 0.3})`,
+            ].join(', ');
+        case 'riblet':
+            return [
+                `inset 0 ${hlDir * bH}px ${Math.round(bH * 0.4)}px rgba(255,255,255,${hlOpacity + 0.02})`,
+                `inset 0 ${shDir * bH}px ${Math.round(bH * 0.4)}px rgba(0,0,0,${shOpacity})`,
+                `inset 0 ${hlDir * Math.round(bH * 2)}px ${bH}px rgba(255,255,255,${hlOpacity * 0.45})`,
+                `inset 0 ${shDir * Math.round(bH * 2)}px ${bH}px rgba(0,0,0,${shOpacity * 0.25})`,
+            ].join(', ');
+        case 'artDeco':
+            return [
+                `inset ${hlDir * bW}px ${hlDir * bH}px 0 rgba(255,255,255,${hlOpacity + 0.12})`,
+                `inset ${hlDir * Math.round(bW * 2)}px ${hlDir * Math.round(bH * 2)}px 0 rgba(255,255,255,${hlOpacity * 0.45})`,
+                `inset ${hlDir * Math.round(bW * 3)}px ${hlDir * Math.round(bH * 3)}px 0 rgba(255,255,255,${hlOpacity * 0.2})`,
+                `inset ${shDir * bW}px ${shDir * bH}px 0 rgba(0,0,0,${shOpacity + 0.12})`,
+                `inset ${shDir * Math.round(bW * 2)}px ${shDir * Math.round(bH * 2)}px 0 rgba(0,0,0,${shOpacity * 0.4})`,
+            ].join(', ');
+        default:
+            return [
+                `inset ${hlDir * bW}px ${hlDir * bH}px ${maxDim}px rgba(255,255,255,${hlOpacity})`,
+                `inset ${shDir * bW}px ${shDir * bH}px ${maxDim}px rgba(0,0,0,${shOpacity})`,
+            ].join(', ');
+    }
+}
+// ── Extrusion shadow generation ──────────────────────────────────────────
+/** Darken a hex colour by a factor (0 = black, 1 = unchanged). */
+function darkenColor(hex, factor) {
+    const clean = hex.replace('#', '');
+    const r = Math.round(parseInt(clean.slice(0, 2), 16) * factor);
+    const g = Math.round(parseInt(clean.slice(2, 4), 16) * factor);
+    const b = Math.round(parseInt(clean.slice(4, 6), 16) * factor);
+    return `rgb(${r},${g},${b})`;
+}
+/** Compute (dx, dy) extrusion offset direction from camera rotation. */
+function getExtrusionDirection(rotateX, rotateY) {
+    let dx = 1;
+    let dy = 1;
+    if (rotateY > 5) {
+        dx = -1;
+    }
+    else if (rotateY < -5) {
+        dx = 1;
+    }
+    if (rotateX < -5) {
+        dy = 1;
+    }
+    else if (rotateX > 5) {
+        dy = -1;
+    }
+    return { dx, dy };
+}
+/**
+ * Camera/perspective → CSS transform. Maps OOXML camera presets and explicit
+ * rotation angles to `perspective(...)` + `rotateX/Y/Z(...)`. When extrusion is
+ * present a `translateZ` is appended so the front face sits above the stacked
+ * box-shadow depth (mirrors React's `apply3dEffects`).
+ *
+ * Returns `undefined` when there is nothing 3D to apply.
+ */
+function get3dTransformCss(scene3d, shape3d) {
+    if (!scene3d && !shape3d) {
+        return undefined;
+    }
+    const { perspective, rotateX, rotateY, rotateZ } = getCameraTransform(scene3d);
+    const hasRotation = rotateX !== 0 || rotateY !== 0 || rotateZ !== 0;
+    const hasExtrusion = Boolean(shape3d?.extrusionHeight && shape3d.extrusionHeight > 0);
+    const transforms = [];
+    if (rotateX !== 0) {
+        transforms.push(`rotateX(${rotateX}deg)`);
+    }
+    if (rotateY !== 0) {
+        transforms.push(`rotateY(${rotateY}deg)`);
+    }
+    if (rotateZ !== 0) {
+        transforms.push(`rotateZ(${rotateZ}deg)`);
+    }
+    if (hasExtrusion && shape3d) {
+        const depthPx = Math.max(1, Math.round((shape3d.extrusionHeight ?? 0) / EMU_PER_PX));
+        const halfDepth = Math.min(depthPx, 80) / 2;
+        transforms.push(`translateZ(${halfDepth}px)`);
+    }
+    const has3D = hasRotation || Boolean(perspective) || Boolean(shape3d);
+    if (!has3D && transforms.length === 0) {
+        return undefined;
+    }
+    const result = {};
+    if (perspective) {
+        result.perspective = perspective;
+    }
+    if (transforms.length > 0) {
+        result.transform = transforms.join(' ');
+    }
+    if (has3D) {
+        result.transformStyle = 'preserve-3d';
+    }
+    return result;
+}
+/**
+ * Extrusion depth → layered `box-shadow`. Stacks up to {@link MAX_EXTRUSION_LAYERS}
+ * offset shadows (radiating per camera angle) with a final soft shadow for
+ * depth perception. Returns `undefined` when there is no extrusion.
+ */
+function getExtrusionBoxShadow(shape3d, cameraRotX = 0, cameraRotY = 0) {
+    if (!shape3d?.extrusionHeight || shape3d.extrusionHeight <= 0) {
+        return undefined;
+    }
+    const rawDepthPx = Math.round(shape3d.extrusionHeight / EMU_PER_PX);
+    if (rawDepthPx <= 0) {
+        return undefined;
+    }
+    const layerCount = Math.min(rawDepthPx, MAX_EXTRUSION_LAYERS);
+    const step = rawDepthPx / layerCount;
+    const extColor = shape3d.extrusionColor || '#888888';
+    const { dx, dy } = getExtrusionDirection(cameraRotX, cameraRotY);
+    const depthShadows = [];
+    for (let i = 1; i <= layerCount; i++) {
+        const offset = Math.round(i * step);
+        const darkenFactor = 1 - (i / layerCount) * 0.25;
+        const layerColor = i > layerCount * 0.7 ? darkenColor(extColor, darkenFactor) : extColor;
+        const spread = step > 1.5 ? Math.ceil(step / 2) : 0;
+        depthShadows.push(`${dx * offset}px ${dy * offset}px ${spread}px ${layerColor}`);
+    }
+    const finalOffset = rawDepthPx + 1;
+    depthShadows.push(`${dx * finalOffset}px ${dy * finalOffset}px ${Math.max(2, Math.round(rawDepthPx / 3))}px rgba(0,0,0,0.2)`);
+    return depthShadows.join(', ');
+}
+/** Contour (outline ring) → box-shadow. Returns `undefined` when no contour. */
+function getContourBoxShadow(shape3d) {
+    if (!shape3d?.contourWidth || shape3d.contourWidth <= 0) {
+        return undefined;
+    }
+    const widthPx = Math.max(1, Math.round(shape3d.contourWidth / EMU_PER_PX));
+    const color = shape3d.contourColor || '#000000';
+    return `0 0 0 ${widthPx}px ${color}`;
+}
+/**
+ * Bevel preset → inset `box-shadow` (top + bottom bevels combined), plus an
+ * optional background gradient for presets that benefit from one
+ * (convex/divot/softRound). Returns `undefined` when no bevel is present.
+ */
+function getBevelStyle(shape3d) {
+    if (!shape3d) {
+        return undefined;
+    }
+    const parts = [];
+    if (shape3d.bevelTopType && shape3d.bevelTopType !== 'none') {
+        const bW = shape3d.bevelTopWidth
+            ? Math.max(1, Math.round(shape3d.bevelTopWidth / EMU_PER_PX))
+            : 3;
+        const bH = shape3d.bevelTopHeight
+            ? Math.max(1, Math.round(shape3d.bevelTopHeight / EMU_PER_PX))
+            : 3;
+        parts.push(getBevelShadow(shape3d.bevelTopType, bW, bH, false));
+    }
+    if (shape3d.bevelBottomType && shape3d.bevelBottomType !== 'none') {
+        const bW = shape3d.bevelBottomWidth
+            ? Math.max(1, Math.round(shape3d.bevelBottomWidth / EMU_PER_PX))
+            : 3;
+        const bH = shape3d.bevelBottomHeight
+            ? Math.max(1, Math.round(shape3d.bevelBottomHeight / EMU_PER_PX))
+            : 3;
+        parts.push(getBevelShadow(shape3d.bevelBottomType, bW, bH, true));
+    }
+    if (parts.length === 0) {
+        return undefined;
+    }
+    let background;
+    switch (shape3d.bevelTopType) {
+        case 'convex':
+            background =
+                'radial-gradient(ellipse at 40% 35%, rgba(255,255,255,0.08) 0%, transparent 60%)';
+            break;
+        case 'divot':
+            background = 'radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0.04) 0%, transparent 50%)';
+            break;
+        case 'softRound':
+            background =
+                'radial-gradient(ellipse at 35% 30%, rgba(255,255,255,0.06) 0%, transparent 55%)';
+            break;
+    }
+    return { boxShadow: parts.join(', '), background };
+}
+/** Material preset → CSS `filter`. Returns `undefined` when none/flat. */
+function getMaterialFilter(shape3d) {
+    if (!shape3d?.presetMaterial) {
+        return undefined;
+    }
+    return getMaterialCssOverrides(shape3d.presetMaterial).filter;
+}
+/**
+ * Compute the complete set of 3D CSS for an element's shape style. Reads
+ * `scene3d`/`shape3d` off the element's `shapeStyle`. Returns `undefined`
+ * when the element carries no 3D data so callers can skip merging entirely.
+ */
+function getComputed3dStyle(el) {
+    if (!hasShapeProperties(el)) {
+        return undefined;
+    }
+    const ss = el.shapeStyle;
+    const scene3d = ss?.scene3d;
+    const shape3d = ss?.shape3d;
+    if (!scene3d && !shape3d) {
+        return undefined;
+    }
+    const result = {};
+    // ── Camera / perspective / rotation ──
+    const { perspective, rotateX, rotateY, rotateZ } = getCameraTransform(scene3d);
+    const transformCss = get3dTransformCss(scene3d, shape3d);
+    if (transformCss?.perspective) {
+        result.perspective = transformCss.perspective;
+    }
+    if (transformCss?.transform) {
+        result.transform = transformCss.transform;
+    }
+    const hasRotation = rotateX !== 0 || rotateY !== 0 || rotateZ !== 0;
+    if (hasRotation || perspective || shape3d) {
+        result.willChange = 'transform';
+        result.transformStyle = 'preserve-3d';
+    }
+    // ── Extrusion (kept SEPARATE for shadow combination) ──
+    const extrusion = getExtrusionBoxShadow(shape3d, rotateX, rotateY);
+    if (extrusion) {
+        result.extrusionBoxShadow = extrusion;
+    }
+    // ── Contour + bevel + backdrop shadows (folded into boxShadow) ──
+    const shadowParts = [];
+    const contour = getContourBoxShadow(shape3d);
+    if (contour) {
+        shadowParts.push(contour);
+    }
+    const bevel = getBevelStyle(shape3d);
+    if (bevel) {
+        shadowParts.push(bevel.boxShadow);
+        if (bevel.background) {
+            result.background = bevel.background;
+        }
+    }
+    if (scene3d?.hasBackdrop) {
+        shadowParts.push('0px 8px 24px -4px rgba(0,0,0,0.25)');
+    }
+    // ── Material preset ──
+    const filterParts = [];
+    const bgParts = [];
+    if (shape3d?.presetMaterial) {
+        const mat = getMaterialCssOverrides(shape3d.presetMaterial);
+        if (mat.filter) {
+            filterParts.push(mat.filter);
+        }
+        if (mat.opacity !== undefined) {
+            result.opacity = mat.opacity;
+        }
+        if (mat.boxShadow) {
+            shadowParts.push(mat.boxShadow);
+        }
+        if (mat.backgroundImage) {
+            bgParts.push(mat.backgroundImage);
+        }
+    }
+    // ── Light rig ──
+    const lightRig = getLightRigCss(scene3d?.lightRigType, scene3d?.lightRigDirection);
+    if (lightRig.filter) {
+        filterParts.push(lightRig.filter);
+    }
+    if (lightRig.backgroundImage) {
+        bgParts.push(lightRig.backgroundImage);
+    }
+    if (shadowParts.length > 0) {
+        result.boxShadow = shadowParts.join(', ');
+    }
+    if (filterParts.length > 0) {
+        result.filter = filterParts.join(' ');
+    }
+    if (bgParts.length > 0) {
+        result.backgroundImage = bgParts.join(', ');
+    }
+    return result;
+}
+
+/** Map an OOXML `a:prstDash/@val` value to a CSS `border-style` keyword. */
+function ooxmlDashToCssBorderStyle$1(dashVal) {
+    if (!dashVal) {
+        return 'solid';
+    }
+    switch (dashVal) {
+        case 'dot':
+        case 'sysDot':
+            return 'dotted';
+        case 'dash':
+        case 'sysDash':
+        case 'lgDash':
+        case 'dashDot':
+        case 'lgDashDot':
+        case 'sysDashDot':
+        case 'lgDashDotDot':
+        case 'sysDashDotDot':
+            return 'dashed';
+        default:
+            return 'solid';
+    }
+}
+/**
+ * Convert a structured {@link PptxTableCellStyle} to CSS properties.
+ *
+ * Mirrors the React `cellStyleToCss`, minus the SVG pattern-fill branch
+ * (approximated by its background colour here).
+ */
+function cellStyleToCss(style) {
+    if (!style) {
+        return {};
+    }
+    const css = {};
+    if (style.fontSize) {
+        css.fontSize = `${style.fontSize}px`;
+    }
+    if (style.bold) {
+        css.fontWeight = 'bold';
+    }
+    if (style.italic) {
+        css.fontStyle = 'italic';
+    }
+    if (style.underline) {
+        css.textDecorationLine = 'underline';
+    }
+    if (style.color) {
+        css.color = style.color;
+    }
+    // Cell background fill — gradient takes precedence, then pattern (approximated
+    // by its background colour), then a solid colour.
+    if (style.gradientFillCss) {
+        css.background = style.gradientFillCss;
+    }
+    else if (style.fillMode === 'pattern') {
+        const patternBg = style.patternFillBackground ?? style.backgroundColor;
+        if (patternBg) {
+            css.backgroundColor = patternBg;
+        }
+    }
+    else if (style.backgroundColor) {
+        css.backgroundColor = style.backgroundColor;
+    }
+    if (style.align) {
+        css.textAlign = style.align;
+    }
+    if (style.vAlign) {
+        css.verticalAlign = style.vAlign;
+    }
+    // Vertical text direction — map all variants to CSS writing-mode + orientation.
+    if (style.textDirection) {
+        switch (style.textDirection) {
+            case 'vert':
+            case 'eaVert':
+            case 'wordArtVert':
+            case 'wordArtVertRtl':
+                css.writingMode = 'vertical-rl';
+                break;
+            case 'vert270':
+            case 'mongolianVert':
+                css.writingMode = 'vertical-lr';
+                break;
+        }
+        if (style.textDirection === 'wordArtVert') {
+            css.textOrientation = 'upright';
+        }
+        else if (css.writingMode) {
+            css.textOrientation = 'mixed';
+        }
+        if (style.textDirection === 'wordArtVertRtl') {
+            css.direction = 'rtl';
+        }
+    }
+    // Per-edge borders (width, color, dash style).
+    const borderEdges = [
+        {
+            prefix: 'borderTop',
+            width: style.borderTopWidth,
+            color: style.borderTopColor,
+            dash: style.borderTopDash,
+        },
+        {
+            prefix: 'borderBottom',
+            width: style.borderBottomWidth,
+            color: style.borderBottomColor,
+            dash: style.borderBottomDash,
+        },
+        {
+            prefix: 'borderLeft',
+            width: style.borderLeftWidth,
+            color: style.borderLeftColor,
+            dash: style.borderLeftDash,
+        },
+        {
+            prefix: 'borderRight',
+            width: style.borderRightWidth,
+            color: style.borderRightColor,
+            dash: style.borderRightDash,
+        },
+    ];
+    for (const edge of borderEdges) {
+        if (edge.width || edge.color) {
+            const w = edge.width ?? 1;
+            const c = edge.color ?? style.borderColor ?? '#000000';
+            const s = ooxmlDashToCssBorderStyle$1(edge.dash);
+            css[edge.prefix] = `${w}px ${s} ${c}`;
+        }
+    }
+    // Cell margins → padding.
+    if (style.marginLeft) {
+        css.paddingLeft = `${style.marginLeft}px`;
+    }
+    if (style.marginRight) {
+        css.paddingRight = `${style.marginRight}px`;
+    }
+    if (style.marginTop) {
+        css.paddingTop = `${style.marginTop}px`;
+    }
+    if (style.marginBottom) {
+        css.paddingBottom = `${style.marginBottom}px`;
+    }
+    // Text effects (shadow / glow) via CSS text-shadow.
+    const textShadowParts = [];
+    if (style.textShadowColor) {
+        const offX = style.textShadowOffsetX ?? 1;
+        const offY = style.textShadowOffsetY ?? 1;
+        const blur = style.textShadowBlur ?? 0;
+        textShadowParts.push(`${offX}px ${offY}px ${blur}px ${style.textShadowColor}`);
+    }
+    if (style.textGlowColor) {
+        const radius = style.textGlowRadius ?? 2;
+        textShadowParts.push(`0px 0px ${radius}px ${style.textGlowColor}`);
+    }
+    if (textShadowParts.length > 0) {
+        css.textShadow = textShadowParts.join(', ');
+    }
+    return css;
+}
+/** Extract diagonal-border info from a cell style, or `null` when none. */
+function getDiagonalBorders(style) {
+    if (!style) {
+        return null;
+    }
+    const hasDown = Boolean(style.borderDiagDownColor && style.borderDiagDownWidth);
+    const hasUp = Boolean(style.borderDiagUpColor && style.borderDiagUpWidth);
+    if (!hasDown && !hasUp) {
+        return null;
+    }
+    return {
+        diagDownColor: style.borderDiagDownColor,
+        diagDownWidth: style.borderDiagDownWidth,
+        diagUpColor: style.borderDiagUpColor,
+        diagUpWidth: style.borderDiagUpWidth,
+    };
+}
+/**
+ * Banding / header / total-row / first-last-column emphasis for a cell.
+ *
+ * A port of the React `getTableCellBandStyle` that operates purely on the
+ * structured {@link PptxTableData} banding flags. Without the parsed table
+ * style map + theme colour scheme (not threaded into the viewer yet) it
+ * uses the same hardcoded fallback colours the React renderer falls back to.
+ *
+ * Returns `undefined` when no banding applies, so callers can treat the
+ * result as a lower-priority style layer beneath explicit cell styles.
+ */
+function getTableCellBandStyle(tableData, rowIndex, cellIndex, rowCount, columnCount) {
+    if (!tableData) {
+        return undefined;
+    }
+    const style = {};
+    let applied = false;
+    // ── Banded rows (skip the header row when present). ──
+    const bandStartRow = tableData.firstRowHeader ? 1 : 0;
+    const bandEndRow = tableData.lastRow ? rowCount - 1 : rowCount;
+    if (tableData.bandedRows && rowIndex >= bandStartRow && rowIndex < bandEndRow) {
+        const bandIndex = rowIndex - bandStartRow;
+        const rowCycle = Math.max(tableData.bandRowCycle ?? 1, 1);
+        const bandGroup = Math.floor(bandIndex / rowCycle) % 2;
+        if (bandGroup === 0) {
+            style.backgroundColor = 'rgba(217, 226, 243, 0.5)';
+            applied = true;
+        }
+    }
+    // ── Banded columns. ──
+    if (tableData.bandedColumns) {
+        const isFirstCol = tableData.firstCol;
+        const isLastCol = tableData.lastCol;
+        const colBandIndex = isFirstCol && cellIndex > 0 ? cellIndex - 1 : cellIndex;
+        const skipCol = (isFirstCol && cellIndex === 0) || (isLastCol && cellIndex === columnCount - 1);
+        if (!skipCol) {
+            const colCycle = Math.max(tableData.bandColCycle ?? 1, 1);
+            const colBandGroup = Math.floor(colBandIndex / colCycle) % 2;
+            if (colBandGroup === 0 && (!style.backgroundColor || !tableData.bandedRows)) {
+                style.backgroundColor = 'rgba(217, 226, 243, 0.35)';
+                applied = true;
+            }
+        }
+    }
+    // ── Header row (first row). ──
+    if (tableData.firstRowHeader && rowIndex === 0) {
+        style.fontWeight = 700;
+        style.backgroundColor = 'rgba(68, 114, 196, 0.85)';
+        style.color = '#ffffff';
+        applied = true;
+    }
+    // ── Total / last row emphasis. ──
+    if (tableData.lastRow && rowIndex === rowCount - 1) {
+        style.fontWeight = 700;
+        style.borderTop = '2px solid rgba(68, 114, 196, 0.7)';
+        applied = true;
+    }
+    // ── First column emphasis. ──
+    if (tableData.firstCol && cellIndex === 0) {
+        style.fontWeight = 700;
+        applied = true;
+    }
+    // ── Last column emphasis. ──
+    if (tableData.lastCol && cellIndex === columnCount - 1) {
+        style.fontWeight = 700;
+        applied = true;
+    }
+    return applied ? style : undefined;
+}
+
 /**
  * Pure geometry helpers for the align / distribute editor operations.
  *
@@ -4020,6 +4991,8 @@ function snapAngle(angleDeg, step = 15, tolerance = step / 2) {
  * - text:       `text-warp` (WordArt paths), `omml-to-mathml` (equations).
  * - charts:     `chart-helpers` (layout/palette/axis math).
  * - animation:  `animation-css` (preset → CSS keyframes).
+ * - 3d:         `visual-3d` (scene3d/shape3d → CSS transform/shadow pieces).
+ * - tables:     `table-style` (cell style + banding → CSS).
  * - editing:    `element-align` (align/distribute), `element-interaction`
  *               (drag/resize/rotate math).
  */