@emasoft/svg-matrix 1.0.30 → 1.0.31

package/src/off-canvas-detection.js

@@ -193,15 +193,41 @@ export function parseViewBox(viewBoxString) {
  * @param {Decimal} maxX - Maximum X coordinate
  * @param {Decimal} maxY - Maximum Y coordinate
  * @returns {{minX: Decimal, minY: Decimal, maxX: Decimal, maxY: Decimal, width: Decimal, height: Decimal}}
+ * @throws {Error} If parameters are invalid or bounds are inverted
  */
 function createBBox(minX, minY, maxX, maxY) {
+  // Validate all parameters exist and are Decimal-convertible (WHY: prevent null/undefined crashes)
+  if (minX == null || minY == null || maxX == null || maxY == null) {
+    throw new Error(
+      "createBBox: all parameters (minX, minY, maxX, maxY) must be provided",
+    );
+  }
+
+  // Convert to Decimal (WHY: ensure consistent type)
+  const dMinX = D(minX);
+  const dMinY = D(minY);
+  const dMaxX = D(maxX);
+  const dMaxY = D(maxY);
+
+  // Validate bounds are not inverted (WHY: catch logic errors early)
+  if (dMaxX.lessThan(dMinX)) {
+    throw new Error(
+      `createBBox: maxX (${dMaxX}) must be >= minX (${dMinX})`,
+    );
+  }
+  if (dMaxY.lessThan(dMinY)) {
+    throw new Error(
+      `createBBox: maxY (${dMaxY}) must be >= minY (${dMinY})`,
+    );
+  }
+
   return {
-    minX,
-    minY,
-    maxX,
-    maxY,
-    width: maxX.minus(minX),
-    height: maxY.minus(minY),
+    minX: dMinX,
+    minY: dMinY,
+    maxX: dMaxX,
+    maxY: dMaxY,
+    width: dMaxX.minus(dMinX),
+    height: dMaxY.minus(dMinY),
   };
 }
 
@@ -212,13 +238,34 @@ function createBBox(minX, minY, maxX, maxY) {
  * @param {Decimal} x - Point X coordinate
  * @param {Decimal} y - Point Y coordinate
  * @returns {{minX: Decimal, minY: Decimal, maxX: Decimal, maxY: Decimal}}
+ * @throws {Error} If bbox or coordinates are invalid
  */
 function _expandBBox(bbox, x, y) {
+  // Validate bbox parameter (WHY: prevent null dereference)
+  if (!bbox || typeof bbox !== "object") {
+    throw new Error("_expandBBox: bbox must be a bounding box object");
+  }
+  if (
+    bbox.minX == null ||
+    bbox.minY == null ||
+    bbox.maxX == null ||
+    bbox.maxY == null
+  ) {
+    throw new Error(
+      "_expandBBox: bbox must have minX, minY, maxX, maxY properties",
+    );
+  }
+
+  // Validate coordinates (WHY: prevent null/undefined crashes)
+  if (x == null || y == null) {
+    throw new Error("_expandBBox: x and y coordinates must be provided");
+  }
+
   return {
-    minX: Decimal.min(bbox.minX, x),
-    minY: Decimal.min(bbox.minY, y),
-    maxX: Decimal.max(bbox.maxX, x),
-    maxY: Decimal.max(bbox.maxY, y),
+    minX: Decimal.min(bbox.minX, D(x)),
+    minY: Decimal.min(bbox.minY, D(y)),
+    maxX: Decimal.max(bbox.maxX, D(x)),
+    maxY: Decimal.max(bbox.maxY, D(y)),
   };
 }
 
@@ -235,8 +282,30 @@ function _expandBBox(bbox, x, y) {
  * @param {Decimal} y3 - End Y
  * @param {number} samples - Number of samples
  * @returns {Array<{x: Decimal, y: Decimal}>} Sample points
+ * @throws {Error} If parameters are invalid or samples is zero/negative
  */
 function sampleCubicBezier(x0, y0, x1, y1, x2, y2, x3, y3, samples = 20) {
+  // Validate all parameters exist (WHY: prevent null/undefined crashes)
+  if (
+    x0 == null ||
+    y0 == null ||
+    x1 == null ||
+    y1 == null ||
+    x2 == null ||
+    y2 == null ||
+    x3 == null ||
+    y3 == null
+  ) {
+    throw new Error(
+      "sampleCubicBezier: all coordinate parameters must be provided",
+    );
+  }
+
+  // Validate samples parameter (WHY: prevent division by zero)
+  if (samples == null || samples <= 0) {
+    throw new Error("sampleCubicBezier: samples must be a positive number");
+  }
+
   const points = [];
   for (let i = 0; i <= samples; i++) {
     const t = D(i).div(samples);
@@ -276,8 +345,28 @@ function sampleCubicBezier(x0, y0, x1, y1, x2, y2, x3, y3, samples = 20) {
  * @param {Decimal} y2 - End Y
  * @param {number} samples - Number of samples
  * @returns {Array<{x: Decimal, y: Decimal}>} Sample points
+ * @throws {Error} If parameters are invalid or samples is zero/negative
  */
 function sampleQuadraticBezier(x0, y0, x1, y1, x2, y2, samples = 20) {
+  // Validate all parameters exist (WHY: prevent null/undefined crashes)
+  if (
+    x0 == null ||
+    y0 == null ||
+    x1 == null ||
+    y1 == null ||
+    x2 == null ||
+    y2 == null
+  ) {
+    throw new Error(
+      "sampleQuadraticBezier: all coordinate parameters must be provided",
+    );
+  }
+
+  // Validate samples parameter (WHY: prevent division by zero)
+  if (samples == null || samples <= 0) {
+    throw new Error("sampleQuadraticBezier: samples must be a positive number");
+  }
+
   const points = [];
   for (let i = 0; i <= samples; i++) {
     const t = D(i).div(samples);
@@ -309,8 +398,29 @@ function sampleQuadraticBezier(x0, y0, x1, y1, x2, y2, samples = 20) {
  * @param {{minX: Decimal, minY: Decimal, maxX: Decimal, maxY: Decimal}} bbox - Bounding box
  * @param {Decimal} tolerance - Tolerance for boundary checks
  * @returns {boolean} True if point is inside or on boundary
+ * @throws {Error} If pt or bbox are invalid
  */
 function pointInBBox(pt, bbox, tolerance = DEFAULT_TOLERANCE) {
+  // Validate point parameter (WHY: prevent null dereference)
+  if (!pt || typeof pt !== "object" || pt.x == null || pt.y == null) {
+    throw new Error("pointInBBox: pt must be an object with x and y properties");
+  }
+
+  // Validate bbox parameter (WHY: prevent null dereference)
+  if (!bbox || typeof bbox !== "object") {
+    throw new Error("pointInBBox: bbox must be a bounding box object");
+  }
+  if (
+    bbox.minX == null ||
+    bbox.minY == null ||
+    bbox.maxX == null ||
+    bbox.maxY == null
+  ) {
+    throw new Error(
+      "pointInBBox: bbox must have minX, minY, maxX, maxY properties",
+    );
+  }
+
   return (
     pt.x.greaterThanOrEqualTo(bbox.minX.minus(tolerance)) &&
     pt.x.lessThanOrEqualTo(bbox.maxX.plus(tolerance)) &&
@@ -358,6 +468,13 @@ export function pathBoundingBox(pathCommands) {
   const samplePoints = [];
 
   for (const cmd of pathCommands) {
+    // Validate command object and type property (WHY: prevent null dereference and type errors)
+    if (!cmd || typeof cmd !== "object" || !cmd.type || typeof cmd.type !== "string") {
+      throw new Error(
+        "pathBoundingBox: each command must be an object with a string type property",
+      );
+    }
+
     const type = cmd.type.toUpperCase();
     // BUG 1 FIX: Check if command is relative (lowercase) or absolute (uppercase)
     const isRelative = cmd.type === cmd.type.toLowerCase();
@@ -365,6 +482,11 @@ export function pathBoundingBox(pathCommands) {
     switch (type) {
       case "M": // Move
         {
+          // Validate required properties (WHY: prevent accessing undefined properties)
+          if (cmd.x == null || cmd.y == null) {
+            throw new Error("pathBoundingBox: M command requires x and y properties");
+          }
+
           // BUG 1 FIX: Handle relative coordinates
           const x = isRelative ? currentX.plus(D(cmd.x)) : D(cmd.x);
           const y = isRelative ? currentY.plus(D(cmd.y)) : D(cmd.y);
@@ -387,6 +509,11 @@ export function pathBoundingBox(pathCommands) {
 
       case "L": // Line to
         {
+          // Validate required properties (WHY: prevent accessing undefined properties)
+          if (cmd.x == null || cmd.y == null) {
+            throw new Error("pathBoundingBox: L command requires x and y properties");
+          }
+
           // BUG 1 FIX: Handle relative coordinates
           const x = isRelative ? currentX.plus(D(cmd.x)) : D(cmd.x);
           const y = isRelative ? currentY.plus(D(cmd.y)) : D(cmd.y);
@@ -407,6 +534,11 @@ export function pathBoundingBox(pathCommands) {
 
       case "H": // Horizontal line
         {
+          // Validate required properties (WHY: prevent accessing undefined properties)
+          if (cmd.x == null) {
+            throw new Error("pathBoundingBox: H command requires x property");
+          }
+
           // BUG 1 FIX: Handle relative coordinates
           const x = isRelative ? currentX.plus(D(cmd.x)) : D(cmd.x);
 
@@ -423,6 +555,11 @@ export function pathBoundingBox(pathCommands) {
 
       case "V": // Vertical line
         {
+          // Validate required properties (WHY: prevent accessing undefined properties)
+          if (cmd.y == null) {
+            throw new Error("pathBoundingBox: V command requires y property");
+          }
+
           // BUG 1 FIX: Handle relative coordinates
           const y = isRelative ? currentY.plus(D(cmd.y)) : D(cmd.y);
 
@@ -439,6 +576,20 @@ export function pathBoundingBox(pathCommands) {
 
       case "C": // Cubic Bezier
         {
+          // Validate required properties (WHY: prevent accessing undefined properties)
+          if (
+            cmd.x1 == null ||
+            cmd.y1 == null ||
+            cmd.x2 == null ||
+            cmd.y2 == null ||
+            cmd.x == null ||
+            cmd.y == null
+          ) {
+            throw new Error(
+              "pathBoundingBox: C command requires x1, y1, x2, y2, x, y properties",
+            );
+          }
+
           // BUG 1 FIX: Handle relative coordinates
           const x1 = isRelative ? currentX.plus(D(cmd.x1)) : D(cmd.x1);
           const y1 = isRelative ? currentY.plus(D(cmd.y1)) : D(cmd.y1);
@@ -477,6 +628,13 @@ export function pathBoundingBox(pathCommands) {
 
       case "S": // Smooth cubic Bezier
         {
+          // Validate required properties (WHY: prevent accessing undefined properties)
+          if (cmd.x2 == null || cmd.y2 == null || cmd.x == null || cmd.y == null) {
+            throw new Error(
+              "pathBoundingBox: S command requires x2, y2, x, y properties",
+            );
+          }
+
           // BUG 1 FIX: Handle relative coordinates
           const x2 = isRelative ? currentX.plus(D(cmd.x2)) : D(cmd.x2);
           const y2 = isRelative ? currentY.plus(D(cmd.y2)) : D(cmd.y2);
@@ -523,6 +681,13 @@ export function pathBoundingBox(pathCommands) {
 
       case "Q": // Quadratic Bezier
         {
+          // Validate required properties (WHY: prevent accessing undefined properties)
+          if (cmd.x1 == null || cmd.y1 == null || cmd.x == null || cmd.y == null) {
+            throw new Error(
+              "pathBoundingBox: Q command requires x1, y1, x, y properties",
+            );
+          }
+
           // BUG 1 FIX: Handle relative coordinates
           const x1 = isRelative ? currentX.plus(D(cmd.x1)) : D(cmd.x1);
           const y1 = isRelative ? currentY.plus(D(cmd.y1)) : D(cmd.y1);
@@ -556,6 +721,11 @@ export function pathBoundingBox(pathCommands) {
 
       case "T": // Smooth quadratic Bezier
         {
+          // Validate required properties (WHY: prevent accessing undefined properties)
+          if (cmd.x == null || cmd.y == null) {
+            throw new Error("pathBoundingBox: T command requires x and y properties");
+          }
+
           // BUG 1 FIX: Handle relative coordinates
           const x = isRelative ? currentX.plus(D(cmd.x)) : D(cmd.x);
           const y = isRelative ? currentY.plus(D(cmd.y)) : D(cmd.y);
@@ -598,6 +768,11 @@ export function pathBoundingBox(pathCommands) {
 
       case "A": // Arc (approximate with samples)
         {
+          // Validate required properties (WHY: prevent accessing undefined properties)
+          if (cmd.x == null || cmd.y == null) {
+            throw new Error("pathBoundingBox: A command requires x and y properties");
+          }
+
           // BUG 4: Arc bounding box ignores actual arc geometry
           // TODO: Implement proper arc-to-bezier conversion or calculate arc extrema
           // Current implementation only samples linearly between endpoints, which
@@ -698,6 +873,18 @@ export function shapeBoundingBox(shape) {
   switch (type) {
     case "rect":
       {
+        // Validate required properties (WHY: prevent accessing undefined properties)
+        if (
+          shape.x == null ||
+          shape.y == null ||
+          shape.width == null ||
+          shape.height == null
+        ) {
+          throw new Error(
+            "shapeBoundingBox: rect requires x, y, width, height properties",
+          );
+        }
+
         const x = D(shape.x);
         const y = D(shape.y);
         const width = D(shape.width);
@@ -717,6 +904,13 @@ export function shapeBoundingBox(shape) {
 
     case "circle":
       {
+        // Validate required properties (WHY: prevent accessing undefined properties)
+        if (shape.cx == null || shape.cy == null || shape.r == null) {
+          throw new Error(
+            "shapeBoundingBox: circle requires cx, cy, r properties",
+          );
+        }
+
         const cx = D(shape.cx);
         const cy = D(shape.cy);
         const r = D(shape.r);
@@ -737,6 +931,18 @@ export function shapeBoundingBox(shape) {
 
     case "ellipse":
       {
+        // Validate required properties (WHY: prevent accessing undefined properties)
+        if (
+          shape.cx == null ||
+          shape.cy == null ||
+          shape.rx == null ||
+          shape.ry == null
+        ) {
+          throw new Error(
+            "shapeBoundingBox: ellipse requires cx, cy, rx, ry properties",
+          );
+        }
+
         const cx = D(shape.cx);
         const cy = D(shape.cy);
         const rx = D(shape.rx);
@@ -758,6 +964,18 @@ export function shapeBoundingBox(shape) {
 
     case "line":
       {
+        // Validate required properties (WHY: prevent accessing undefined properties)
+        if (
+          shape.x1 == null ||
+          shape.y1 == null ||
+          shape.x2 == null ||
+          shape.y2 == null
+        ) {
+          throw new Error(
+            "shapeBoundingBox: line requires x1, y1, x2, y2 properties",
+          );
+        }
+
         const x1 = D(shape.x1);
         const y1 = D(shape.y1);
         const x2 = D(shape.x2);
@@ -789,6 +1007,13 @@ export function shapeBoundingBox(shape) {
         let maxY = D(-Infinity);
 
         for (const pt of shape.points) {
+          // Validate point has x and y properties (WHY: prevent accessing undefined properties)
+          if (!pt || typeof pt !== "object" || pt.x == null || pt.y == null) {
+            throw new Error(
+              `shapeBoundingBox: ${type} points must have x and y properties`,
+            );
+          }
+
           const x = D(pt.x);
           const y = D(pt.y);
           minX = Decimal.min(minX, x);
@@ -827,8 +1052,24 @@ export function shapeBoundingBox(shape) {
  *
  * @param {{minX: Decimal, minY: Decimal, maxX: Decimal, maxY: Decimal}} bbox - Bounding box
  * @returns {Array<{x: Decimal, y: Decimal}>} Polygon vertices (counter-clockwise)
+ * @throws {Error} If bbox is invalid
  */
 function bboxToPolygon(bbox) {
+  // Validate bbox parameter (WHY: prevent null dereference)
+  if (!bbox || typeof bbox !== "object") {
+    throw new Error("bboxToPolygon: bbox must be a bounding box object");
+  }
+  if (
+    bbox.minX == null ||
+    bbox.minY == null ||
+    bbox.maxX == null ||
+    bbox.maxY == null
+  ) {
+    throw new Error(
+      "bboxToPolygon: bbox must have minX, minY, maxX, maxY properties",
+    );
+  }
+
   return [
     point(bbox.minX, bbox.minY),
     point(bbox.maxX, bbox.minY),
@@ -848,9 +1089,25 @@ function bboxToPolygon(bbox) {
  * @param {{minX: Decimal, minY: Decimal, maxX: Decimal, maxY: Decimal}} bbox - Bounding box to test
  * @param {{x: Decimal, y: Decimal, width: Decimal, height: Decimal}} viewBox - ViewBox object
  * @returns {{intersects: boolean, verified: boolean}}
+ * @throws {Error} If bbox or viewBox are invalid
  */
 export function bboxIntersectsViewBox(bbox, viewBox) {
-  // Convert both to polygons
+  // Validate viewBox parameter (WHY: prevent null dereference)
+  if (!viewBox || typeof viewBox !== "object") {
+    throw new Error("bboxIntersectsViewBox: viewBox must be an object");
+  }
+  if (
+    viewBox.x == null ||
+    viewBox.y == null ||
+    viewBox.width == null ||
+    viewBox.height == null
+  ) {
+    throw new Error(
+      "bboxIntersectsViewBox: viewBox must have x, y, width, height properties",
+    );
+  }
+
+  // Convert both to polygons (bboxToPolygon validates bbox)
   const bboxPoly = bboxToPolygon(bbox);
   const viewBoxPoly = bboxToPolygon({
     minX: viewBox.x,
@@ -882,9 +1139,25 @@ export function bboxIntersectsViewBox(bbox, viewBox) {
  * @param {Array<Object>} pathCommands - Array of path command objects
  * @param {{x: Decimal, y: Decimal, width: Decimal, height: Decimal}} viewBox - ViewBox object
  * @returns {{offCanvas: boolean, bbox: Object, verified: boolean}}
+ * @throws {Error} If parameters are invalid
  */
 export function isPathOffCanvas(pathCommands, viewBox) {
-  // Calculate path bounding box
+  // Validate viewBox parameter (WHY: prevent null dereference)
+  if (!viewBox || typeof viewBox !== "object") {
+    throw new Error("isPathOffCanvas: viewBox must be an object");
+  }
+  if (
+    viewBox.x == null ||
+    viewBox.y == null ||
+    viewBox.width == null ||
+    viewBox.height == null
+  ) {
+    throw new Error(
+      "isPathOffCanvas: viewBox must have x, y, width, height properties",
+    );
+  }
+
+  // Calculate path bounding box (pathBoundingBox validates pathCommands)
   const bbox = pathBoundingBox(pathCommands);
 
   // Check intersection
@@ -918,8 +1191,14 @@ export function isPathOffCanvas(pathCommands, viewBox) {
   for (const cmd of pathCommands) {
     if (sampleCount >= maxSamples) break;
 
+    // Validate command has type (WHY: prevent null dereference)
+    if (!cmd || !cmd.type) continue;
+
     const type = cmd.type.toUpperCase();
     if (type === "M" || type === "L") {
+      // Skip if properties missing (WHY: avoid crashes during verification)
+      if (cmd.x == null || cmd.y == null) continue;
+
       const x = D(cmd.x);
       const y = D(cmd.y);
       if (pointInBBox({ x, y }, viewBoxBBox)) {
@@ -949,9 +1228,25 @@ export function isPathOffCanvas(pathCommands, viewBox) {
  * @param {Object} shape - Shape object with type and properties
  * @param {{x: Decimal, y: Decimal, width: Decimal, height: Decimal}} viewBox - ViewBox object
  * @returns {{offCanvas: boolean, bbox: Object, verified: boolean}}
+ * @throws {Error} If parameters are invalid
  */
 export function isShapeOffCanvas(shape, viewBox) {
-  // Calculate shape bounding box
+  // Validate viewBox parameter (WHY: prevent null dereference)
+  if (!viewBox || typeof viewBox !== "object") {
+    throw new Error("isShapeOffCanvas: viewBox must be an object");
+  }
+  if (
+    viewBox.x == null ||
+    viewBox.y == null ||
+    viewBox.width == null ||
+    viewBox.height == null
+  ) {
+    throw new Error(
+      "isShapeOffCanvas: viewBox must have x, y, width, height properties",
+    );
+  }
+
+  // Calculate shape bounding box (shapeBoundingBox validates shape)
   const bbox = shapeBoundingBox(shape);
 
   // Check intersection
@@ -985,8 +1280,31 @@ export function isShapeOffCanvas(shape, viewBox) {
  * @param {{x: Decimal, y: Decimal}} p2 - Line segment end
  * @param {{minX: Decimal, minY: Decimal, maxX: Decimal, maxY: Decimal}} bounds - Clipping bounds
  * @returns {Array<{x: Decimal, y: Decimal}>} Clipped segment endpoints (empty if completely outside)
+ * @throws {Error} If parameters are invalid
  */
 function clipLine(p1, p2, bounds) {
+  // Validate points (WHY: prevent null dereference)
+  if (!p1 || typeof p1 !== "object" || p1.x == null || p1.y == null) {
+    throw new Error("clipLine: p1 must be an object with x and y properties");
+  }
+  if (!p2 || typeof p2 !== "object" || p2.x == null || p2.y == null) {
+    throw new Error("clipLine: p2 must be an object with x and y properties");
+  }
+
+  // Validate bounds (WHY: prevent null dereference)
+  if (!bounds || typeof bounds !== "object") {
+    throw new Error("clipLine: bounds must be a bounding box object");
+  }
+  if (
+    bounds.minX == null ||
+    bounds.minY == null ||
+    bounds.maxX == null ||
+    bounds.maxY == null
+  ) {
+    throw new Error(
+      "clipLine: bounds must have minX, minY, maxX, maxY properties",
+    );
+  }
   // Cohen-Sutherland outcodes
   const INSIDE = 0; // 0000
   const LEFT = 1; // 0001
@@ -1101,8 +1419,29 @@ function clipLine(p1, p2, bounds) {
  * @param {Array<Object>} pathCommands - Array of path command objects
  * @param {{x: Decimal, y: Decimal, width: Decimal, height: Decimal}} viewBox - ViewBox object
  * @returns {{commands: Array<Object>, verified: boolean}}
+ * @throws {Error} If parameters are invalid
  */
 export function clipPathToViewBox(pathCommands, viewBox) {
+  // Validate pathCommands (WHY: prevent null dereference)
+  if (!Array.isArray(pathCommands)) {
+    throw new Error("clipPathToViewBox: pathCommands must be an array");
+  }
+
+  // Validate viewBox parameter (WHY: prevent null dereference)
+  if (!viewBox || typeof viewBox !== "object") {
+    throw new Error("clipPathToViewBox: viewBox must be an object");
+  }
+  if (
+    viewBox.x == null ||
+    viewBox.y == null ||
+    viewBox.width == null ||
+    viewBox.height == null
+  ) {
+    throw new Error(
+      "clipPathToViewBox: viewBox must have x, y, width, height properties",
+    );
+  }
+
   const bounds = {
     minX: viewBox.x,
     minY: viewBox.y,
@@ -1116,11 +1455,21 @@ export function clipPathToViewBox(pathCommands, viewBox) {
   let pathStarted = false;
 
   for (const cmd of pathCommands) {
+    // Validate command object and type (WHY: prevent null dereference)
+    if (!cmd || typeof cmd !== "object" || !cmd.type || typeof cmd.type !== "string") {
+      continue; // Skip invalid commands during clipping (WHY: graceful degradation)
+    }
+
     const type = cmd.type.toUpperCase();
 
     switch (type) {
       case "M": // Move
         {
+          // Skip if properties missing (WHY: graceful degradation during clipping)
+          if (cmd.x == null || cmd.y == null) {
+            continue;
+          }
+
           const x = D(cmd.x);
           const y = D(cmd.y);
 
@@ -1139,6 +1488,11 @@ export function clipPathToViewBox(pathCommands, viewBox) {
 
       case "L": // Line to
         {
+          // Skip if properties missing (WHY: graceful degradation during clipping)
+          if (cmd.x == null || cmd.y == null) {
+            continue;
+          }
+
           const x = D(cmd.x);
           const y = D(cmd.y);
 
@@ -1176,6 +1530,11 @@ export function clipPathToViewBox(pathCommands, viewBox) {
 
       case "H": // Horizontal line
         {
+          // Skip if properties missing (WHY: graceful degradation during clipping)
+          if (cmd.x == null) {
+            continue;
+          }
+
           const x = D(cmd.x);
           const clipped = clipLine(
             { x: currentX, y: currentY },
@@ -1207,6 +1566,11 @@ export function clipPathToViewBox(pathCommands, viewBox) {
 
       case "V": // Vertical line
         {
+          // Skip if properties missing (WHY: graceful degradation during clipping)
+          if (cmd.y == null) {
+            continue;
+          }
+
           const y = D(cmd.y);
           const clipped = clipLine(
             { x: currentX, y: currentY },
@@ -1242,6 +1606,11 @@ export function clipPathToViewBox(pathCommands, viewBox) {
       case "T": // Smooth quadratic - sample as polyline
       case "A": // Arc - sample as polyline
         {
+          // Skip if properties missing (WHY: graceful degradation during clipping)
+          if (cmd.x == null || cmd.y == null) {
+            continue;
+          }
+
           // For simplicity, just include the endpoint
           // A full implementation would sample the curve
           const x = D(cmd.x);