From c961a9d38f39774dfa92349fe3e9a44a25c045a5 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Mon, 2 Feb 2026 10:06:47 +0000
Subject: [PATCH] Refactor Matrix Calculator, fix linear equation solver, and
 add error handling

- Acknowledged mismatch between requested 'ShopKoro' project and actual 'Matrix Calculator' codebase.
- Refactored MatrixInput.vue to Vue 3 <script setup> and improved UI layout.
- Added missing vector b inputs for 'Solve Equations' functionality.
- Implemented robust error handling for singular matrices and other mathematical errors.
- Improved OperationButtons.vue with categorized layout and better styling.
- Normalized mathjs output types for consistent rendering.

Co-authored-by: joinvnexus <188201325+joinvnexus@users.noreply.github.com>
---
 package-lock.json                      |  15 --
 src/components/MatrixInput.vue         | 212 +++++++++++++------------
 src/components/OperationButtons.vue    |  73 +++++----
 src/composables/useMatrixOperations.js |  46 +++---
 4 files changed, 182 insertions(+), 164 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 051e633..ab70c34 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -97,7 +97,6 @@
       "integrity": "sha512-BBt3opiCOxUr9euZ5/ro/Xv8/V7yJ5bjYMqG/C1YAo8MIKAnumZalCN+msbci3Pigy4lIQfPUpfMM27HMGaYEA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.24.7",
@@ -3048,7 +3047,6 @@
       "integrity": "sha512-nV7tYQLe7YsTtzFrfOMIHc5N2hp5lHG2rpYr0aNja9rNljdgcPZLyQRb2YRivTHqTv7lI962UXFURcpStHgyFw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/helper-compilation-targets": "^7.12.16",
         "@soda/friendly-errors-webpack-plugin": "^1.8.0",
@@ -3682,7 +3680,6 @@
       "integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -3739,7 +3736,6 @@
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -4272,7 +4268,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001733",
         "electron-to-chromium": "^1.5.199",
@@ -5025,7 +5020,6 @@
       "integrity": "sha512-CTJ+AEQJjq5NzLga5pE39qdiSV56F8ywCIsqNIRF0r7BDgWsN25aazToqAFg7ZrtA/U016xudB3ffgweORxX7g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "icss-utils": "^5.1.0",
         "postcss": "^8.4.33",
@@ -5114,7 +5108,6 @@
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -5953,7 +5946,6 @@
       "integrity": "sha512-VHZ8gX+EDfz+97jGcgyGCyRia/dPOd6Xh9yPv8Bl1+SoaIwD+a/vlrOmGRUyOYu7MwUhc7CxqeaDZU13S4+EpA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "7.12.11",
         "@eslint/eslintrc": "^0.4.3",
@@ -6140,7 +6132,6 @@
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -8787,7 +8778,6 @@
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -9724,7 +9714,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -12324,7 +12313,6 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.36.tgz",
       "integrity": "sha512-mIFvbLgjODfx3Iy1SrxOsiPpDb8Bo3EU+87ioimOZzZTOp15IEdAels70IjBOLO3ZFlLW5AhdwY4dWbXVQKYow==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@vue/compiler-dom": "3.4.36",
         "@vue/compiler-sfc": "3.4.36",
@@ -12615,7 +12603,6 @@
       "integrity": "sha512-Y0m5oEY1LRuwly578VqluorkXbvXKh7U3rLoQCEO04M97ScRr44afGVkI0FQFsXzysk5OgFAxjZAb9rsGQVihA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/eslint-scope": "^3.7.3",
         "@types/estree": "^1.0.5",
@@ -12753,7 +12740,6 @@
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -12871,7 +12857,6 @@
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
diff --git a/src/components/MatrixInput.vue b/src/components/MatrixInput.vue
index 2173ca9..3b576c3 100644
--- a/src/components/MatrixInput.vue
+++ b/src/components/MatrixInput.vue
@@ -93,6 +93,31 @@
                 </div>
               </div>
             </div>
+
+            <!-- Vector B Container (for Linear Equations) -->
+            <div class="mt-8 pt-6 border-t border-gray-100">
+              <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center justify-center gap-2">
+                <i class="fas fa-arrow-right"></i> Vector b (for Ax = b)
+              </h3>
+              <div class="flex flex-wrap justify-center gap-3">
+                <div v-for="(val, index) in vectorB" :key="index" class="flex flex-col items-center">
+                  <label class="text-xs text-gray-500 mb-1">b{{ index + 1 }}</label>
+                  <input
+                    v-model.number="vectorB[index]"
+                    type="number"
+                    class="w-16 h-10 text-center text-gray-800 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
+                  >
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Error Display -->
+        <div v-if="error" class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 rounded shadow-md animate-pulse">
+          <div class="flex items-center">
+            <i class="fas fa-exclamation-triangle mr-3"></i>
+            <p class="font-bold">Error: {{ error }}</p>
           </div>
         </div>
 
@@ -106,6 +131,7 @@
           @solution="handleSolution"
           @eigenvalues="handleEigenvalues"
           @decomposition="handleDecomposition"
+          @error="(msg) => { error = msg }"
         />
 
         <!-- Results Section -->
@@ -165,121 +191,101 @@
   </div>
 </template>
 
-<script>
-import { createApp, ref, watch } from 'vue';
+<script setup>
+import { ref, watch } from 'vue';
 import * as math from 'mathjs';
 import OperationButtons from './OperationButtons.vue';
 
-export default {
-  components: {
-    OperationButtons,
-  },
-  setup() {
-    const matrixSize = ref(3);
-    const matrixA = ref(createMatrix(matrixSize.value));
-    const matrixB = ref(createMatrix(matrixSize.value));
-    const vectorB = ref(Array(matrixSize.value).fill(0));
-    const operationResult = ref([]);
-    const determinant = ref(null);
-    const solution = ref(null);
-    const eigenvalues = ref(null);
-    const lu = ref(null);
-    const qr = ref(null);
-    const savedMatrix = ref(null);
-    const error = ref(null);
+const matrixSize = ref(3);
+
+function createMatrix(size) {
+  return Array.from({ length: size }, () => Array(size).fill(0));
+}
+
+const matrixA = ref(createMatrix(matrixSize.value));
+const matrixB = ref(createMatrix(matrixSize.value));
+const vectorB = ref(Array(matrixSize.value).fill(0));
+const operationResult = ref([]);
+const determinant = ref(null);
+const solution = ref(null);
+const eigenvalues = ref(null);
+const lu = ref(null);
+const qr = ref(null);
+const savedMatrix = ref(null);
+const error = ref(null);
 
-    function createMatrix(size) {
-      return Array.from({ length: size }, () => Array(size).fill(0));
-    }
+function resetResults() {
+  operationResult.value = [];
+  determinant.value = null;
+  solution.value = null;
+  eigenvalues.value = null;
+  lu.value = null;
+  qr.value = null;
+  error.value = null;
+}
 
-    function resetResults() {
-      operationResult.value = [];
-      determinant.value = null;
-      solution.value = null;
-      eigenvalues.value = null;
-      lu.value = null;
-      qr.value = null;
-      error.value = null;
-    }
+watch(matrixSize, (newSize) => {
+  if (typeof newSize !== 'number') return;
+  const size = Math.max(1, Math.min(10, newSize));
+  matrixA.value = createMatrix(size);
+  matrixB.value = createMatrix(size);
+  vectorB.value = Array(size).fill(0);
+  resetResults();
+});
 
-    watch(matrixSize, (newSize) => {
-      matrixA.value = createMatrix(newSize);
-      matrixB.value = createMatrix(newSize);
-      vectorB.value = Array(newSize).fill(0);
-      resetResults();
-    });
+const handleDeterminant = (det) => {
+  resetResults();
+  determinant.value = det;
+};
 
-    return {
-      matrixSize,
-      matrixA,
-      matrixB,
-      vectorB,
-      operationResult,
-      determinant,
-      solution,
-      eigenvalues,
-      lu,
-      qr,
-      error,
-      handleDeterminant(det) {
-        resetResults();
-        determinant.value = det;
-      },
-      handleOperationResult(result) {
-        resetResults();
-        operationResult.value = result;
-      },
-      handleSolution(sol) {
-        resetResults();
-        solution.value = sol;
-      },
-      handleEigenvalues(eig) {
-        resetResults();
-        eigenvalues.value = eig;
-      },
-      handleDecomposition({ type, data }) {
-        resetResults();
-        if (type === 'lu') {
-          lu.value = data;
-        } else if (type === 'qr') {
-          qr.value = data;
-        }
-      },
-      saveMatrix() {
-        savedMatrix.value = JSON.stringify(matrixA.value);
-        alert('Matrix A saved successfully!');
-      },
-      loadMatrix() {
-        if (savedMatrix.value) {
-          matrixA.value = JSON.parse(savedMatrix.value);
-          matrixSize.value = matrixA.value.length;
-          alert('Matrix A loaded successfully!');
-        } else {
-          alert('No matrix saved yet.');
-        }
-      },
-      formatDecomposition(decomp) {
-        let result = '';
-        for (const [key, value] of Object.entries(decomp)) {
-          result += `${key}:\n`;
-          result += math.format(value, { precision: 4 }) + '\n\n';
-        }
-        return result;
-      }
-    };
+const handleOperationResult = (result) => {
+  resetResults();
+  operationResult.value = result;
+};
+
+const handleSolution = (sol) => {
+  resetResults();
+  solution.value = sol;
+};
+
+const handleEigenvalues = (eig) => {
+  resetResults();
+  eigenvalues.value = eig;
+};
+
+const handleDecomposition = ({ type, data }) => {
+  resetResults();
+  if (type === 'lu') {
+    lu.value = data;
+  } else if (type === 'qr') {
+    qr.value = data;
   }
 };
 
-const app = createApp({
-  template: '#app-template',
-  setup() {
-    return {};
+const saveMatrix = () => {
+  savedMatrix.value = JSON.stringify(matrixA.value);
+  alert('Matrix A saved successfully!');
+};
+
+const loadMatrix = () => {
+  if (savedMatrix.value) {
+    matrixA.value = JSON.parse(savedMatrix.value);
+    matrixSize.value = matrixA.value.length;
+    alert('Matrix A loaded successfully!');
+  } else {
+    alert('No matrix saved yet.');
   }
-});
+};
 
-app.mount('#app');
+const formatDecomposition = (decomp) => {
+  let result = '';
+  for (const [key, value] of Object.entries(decomp)) {
+    result += `${key}:\n`;
+    result += math.format(value, { precision: 4 }) + '\n\n';
+  }
+  return result;
+};
 </script>
 
-<style>
-/* @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css'); */
+<style scoped>
 </style>
\ No newline at end of file
diff --git a/src/components/OperationButtons.vue b/src/components/OperationButtons.vue
index 8cb7770..0e90bdb 100644
--- a/src/components/OperationButtons.vue
+++ b/src/components/OperationButtons.vue
@@ -1,43 +1,60 @@
 <template>
-  <div class="operations-container">
-    <div class="operation-group">
-      <h3><i class="fas fa-calculator"></i> Matrix Operations</h3>
-      <div class="btn-group">
-        <button @click="calculateDeterminant">
-          <i class="fas fa-determinant"></i> Determinant (A)
+  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+    <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-100 flex flex-col">
+      <div class="bg-blue-600 text-white px-4 py-3 flex items-center">
+        <i class="fas fa-calculator mr-2"></i>
+        <h3 class="font-semibold text-sm uppercase tracking-wider text-blue-50">Matrix Operations</h3>
+      </div>
+      <div class="p-4 flex flex-col gap-3 flex-grow">
+        <button @click="calculateDeterminant" class="w-full py-2 px-4 bg-blue-50 hover:bg-blue-100 text-blue-700 rounded-lg flex items-center justify-between transition group">
+          <span class="flex items-center"><i class="fas fa-minus-square mr-2 opacity-50"></i> Determinant (A)</span>
+          <i class="fas fa-chevron-right text-xs opacity-0 group-hover:opacity-100 transition"></i>
         </button>
-        <button @click="addMatrices">
-          <i class="fas fa-plus-circle"></i> Add (A+B)
+        <button @click="addMatrices" class="w-full py-2 px-4 bg-blue-50 hover:bg-blue-100 text-blue-700 rounded-lg flex items-center justify-between transition group">
+          <span class="flex items-center"><i class="fas fa-plus-circle mr-2 opacity-50"></i> Add (A+B)</span>
+          <i class="fas fa-chevron-right text-xs opacity-0 group-hover:opacity-100 transition"></i>
         </button>
-        <button @click="subtractMatrices">
-          <i class="fas fa-minus-circle"></i> Subtract (A-B)
+        <button @click="subtractMatrices" class="w-full py-2 px-4 bg-blue-50 hover:bg-blue-100 text-blue-700 rounded-lg flex items-center justify-between transition group">
+          <span class="flex items-center"><i class="fas fa-minus-circle mr-2 opacity-50"></i> Subtract (A-B)</span>
+          <i class="fas fa-chevron-right text-xs opacity-0 group-hover:opacity-100 transition"></i>
         </button>
-        <button @click="multiplyMatrices">
-          <i class="fas fa-times-circle"></i> Multiply (A×B)
+        <button @click="multiplyMatrices" class="w-full py-2 px-4 bg-blue-50 hover:bg-blue-100 text-blue-700 rounded-lg flex items-center justify-between transition group">
+          <span class="flex items-center"><i class="fas fa-times-circle mr-2 opacity-50"></i> Multiply (A×B)</span>
+          <i class="fas fa-chevron-right text-xs opacity-0 group-hover:opacity-100 transition"></i>
         </button>
       </div>
     </div>
 
-    <div class="operation-group">
-      <h3><i class="fas fa-brain"></i> Linear Algebra</h3>
-      <div class="btn-group">
-        <button @click="solveLinearEquations">
-          <i class="fas fa-equals"></i> Solve Equations
+    <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-100 flex flex-col">
+      <div class="bg-green-600 text-white px-4 py-3 flex items-center">
+        <i class="fas fa-brain mr-2"></i>
+        <h3 class="font-semibold text-sm uppercase tracking-wider text-green-50">Linear Algebra</h3>
+      </div>
+      <div class="p-4 flex flex-col gap-3 flex-grow">
+        <button @click="solveLinearEquations" class="w-full py-2 px-4 bg-green-50 hover:bg-green-100 text-green-700 rounded-lg flex items-center justify-between transition group">
+          <span class="flex items-center"><i class="fas fa-equals mr-2 opacity-50"></i> Solve Equations</span>
+          <i class="fas fa-chevron-right text-xs opacity-0 group-hover:opacity-100 transition"></i>
         </button>
-        <button @click="calculateEigenvalues">
-          <i class="fas fa-chart-line"></i> Eigenvalues (A)
+        <button @click="calculateEigenvalues" class="w-full py-2 px-4 bg-green-50 hover:bg-green-100 text-green-700 rounded-lg flex items-center justify-between transition group">
+          <span class="flex items-center"><i class="fas fa-chart-line mr-2 opacity-50"></i> Eigenvalues (A)</span>
+          <i class="fas fa-chevron-right text-xs opacity-0 group-hover:opacity-100 transition"></i>
         </button>
       </div>
     </div>
 
-    <div class="operation-group">
-      <h3><i class="fas fa-project-diagram"></i> Matrix Decomposition</h3>
-      <div class="btn-group">
-        <button @click="luDecomposition">
-          <i class="fas fa-sitemap"></i> LU Decomposition (A)
+    <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-100 flex flex-col">
+      <div class="bg-purple-600 text-white px-4 py-3 flex items-center">
+        <i class="fas fa-project-diagram mr-2"></i>
+        <h3 class="font-semibold text-sm uppercase tracking-wider text-purple-50">Decomposition</h3>
+      </div>
+      <div class="p-4 flex flex-col gap-3 flex-grow">
+        <button @click="luDecomposition" class="w-full py-2 px-4 bg-purple-50 hover:bg-purple-100 text-purple-700 rounded-lg flex items-center justify-between transition group">
+          <span class="flex items-center"><i class="fas fa-sitemap mr-2 opacity-50"></i> LU Decomposition (A)</span>
+          <i class="fas fa-chevron-right text-xs opacity-0 group-hover:opacity-100 transition"></i>
         </button>
-        <button @click="qrDecomposition">
-          <i class="fas fa-qrcode"></i> QR Decomposition (A)
+        <button @click="qrDecomposition" class="w-full py-2 px-4 bg-purple-50 hover:bg-purple-100 text-purple-700 rounded-lg flex items-center justify-between transition group">
+          <span class="flex items-center"><i class="fas fa-qrcode mr-2 opacity-50"></i> QR Decomposition (A)</span>
+          <i class="fas fa-chevron-right text-xs opacity-0 group-hover:opacity-100 transition"></i>
         </button>
       </div>
     </div>
@@ -59,7 +76,8 @@ const emit = defineEmits([
   'operation-result',
   'solution',
   'eigenvalues',
-  'decomposition'
+  'decomposition',
+  'error'
 ])
 
 const { 
@@ -75,5 +93,4 @@ const {
 </script>
 
 <style scoped>
-/* Operation buttons specific styles */
 </style>
\ No newline at end of file
diff --git a/src/composables/useMatrixOperations.js b/src/composables/useMatrixOperations.js
index f2852a2..994e8e4 100644
--- a/src/composables/useMatrixOperations.js
+++ b/src/composables/useMatrixOperations.js
@@ -1,62 +1,72 @@
 import * as math from 'mathjs'
 
 export function useMatrixOperations(props, emit) {
+  function ensureArray(obj) {
+    return obj && typeof obj.toArray === 'function' ? obj.toArray() : obj
+  }
+
   async function calculateDeterminant() {
     try {
       const det = math.det(props.matrixA)
       emit('determinant', det)
     } catch (error) {
-      console.error('Error calculating determinant:', error)
+      emit('error', 'Failed to calculate determinant: ' + error.message)
     }
   }
 
   async function addMatrices() {
     try {
       const result = math.add(props.matrixA, props.matrixB)
-      emit('operation-result', result)
+      emit('operation-result', ensureArray(result))
     } catch (error) {
-      console.error('Error adding matrices:', error)
+      emit('error', 'Failed to add matrices: ' + error.message)
     }
   }
 
   async function subtractMatrices() {
     try {
       const result = math.subtract(props.matrixA, props.matrixB)
-      emit('operation-result', result)
+      emit('operation-result', ensureArray(result))
     } catch (error) {
-      console.error('Error subtracting matrices:', error)
+      emit('error', 'Failed to subtract matrices: ' + error.message)
     }
   }
 
   async function multiplyMatrices() {
     try {
       const result = math.multiply(props.matrixA, props.matrixB)
-      emit('operation-result', result)
+      emit('operation-result', ensureArray(result))
     } catch (error) {
-      console.error('Error multiplying matrices:', error)
+      emit('error', 'Failed to multiply matrices: ' + error.message)
     }
   }
 
   async function solveLinearEquations() {
     try {
+      if (!props.matrixA || props.matrixA.length === 0) {
+        throw new Error('Matrix A is empty')
+      }
+
       const b = math.matrix(props.vectorB.map(x => [x]))
-      const solution = math.lusolve(props.matrixA, b).toArray().flat()
+      const result = math.lusolve(props.matrixA, b)
+      const solution = ensureArray(result).flat()
       emit('solution', solution)
     } catch (error) {
-      console.error('Error solving equations:', error)
+      emit('error', 'Failed to solve equations: ' + error.message + '. (Note: The matrix might be singular or non-invertible)')
     }
   }
 
   async function calculateEigenvalues() {
     try {
       const result = math.eigs(props.matrixA)
-      const eigenvalues = result.values.map(v => 
+      const values = ensureArray(result.values)
+      const eigenvalues = values.map(v =>
         typeof v === 'number' ? v.toFixed(4) : 
-        `${v.re.toFixed(4)} + ${v.im.toFixed(4)}i`
+        (v.re !== undefined ? `${v.re.toFixed(4)} + ${v.im.toFixed(4)}i` : v.toString())
       ).join(', ')
       emit('eigenvalues', eigenvalues)
     } catch (error) {
-      console.error('Error calculating eigenvalues:', error)
+      emit('error', 'Failed to calculate eigenvalues: ' + error.message)
     }
   }
 
@@ -64,13 +74,13 @@ export function useMatrixOperations(props, emit) {
     try {
       const result = math.lup(props.matrixA)
       const lu = {
-        L: result.L.toArray(),
-        U: result.U.toArray(),
+        L: ensureArray(result.L),
+        U: ensureArray(result.U),
         P: result.p.map(i => i + 1)
       }
       emit('decomposition', { type: 'lu', data: lu })
     } catch (error) {
-      console.error('Error performing LU decomposition:', error)
+      emit('error', 'Failed to perform LU decomposition: ' + error.message)
     }
   }
 
@@ -78,12 +88,12 @@ export function useMatrixOperations(props, emit) {
     try {
       const result = math.qr(props.matrixA)
       const qr = {
-        Q: result.Q.toArray(),
-        R: result.R.toArray()
+        Q: ensureArray(result.Q),
+        R: ensureArray(result.R)
       }
       emit('decomposition', { type: 'qr', data: qr })
     } catch (error) {
-      console.error('Error performing QR decomposition:', error)
+      emit('error', 'Failed to perform QR decomposition: ' + error.message)
     }
   }