From 8a4322a5125cf5c2cf0e529f63d8e7dcbb5e4630 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Tue, 19 Aug 2025 22:20:30 +0100
Subject: [PATCH 1/6] wip

---
 package.json                                  | 16 +++------
 .../Fieldtypes/CountryRegionFieldtype.vue     |  4 +--
 .../Fieldtypes/CouponCodeFieldtype.vue        |  4 +--
 .../Fieldtypes/CouponSummaryFieldtype.vue     |  2 +-
 .../Fieldtypes/CouponValueFieldtype.vue       |  2 +-
 .../Fieldtypes/GatewayFieldtype.vue           |  4 +--
 .../components/Fieldtypes/MoneyFieldtype.vue  |  4 +--
 .../Fieldtypes/OrderStatusFieldtype.vue       |  4 +--
 .../Fieldtypes/OrderStatusIndexFieldtype.vue  |  4 +--
 .../Fieldtypes/PaymentStatusFieldtype.vue     |  4 +--
 .../PaymentStatusIndexFieldtype.vue           |  4 +--
 .../Fieldtypes/ProductVariantFieldtype.vue    |  4 +--
 .../Fieldtypes/ProductVariantsFieldtype.vue   |  6 ++--
 .../Fieldtypes/StatusLogFieldtype.vue         |  6 ++--
 .../js/components/Listings/CouponListing.vue  |  2 +-
 .../js/components/StatusLog/StatusLog.vue     |  4 +--
 .../components/StatusLog/StatusLogEvent.vue   |  2 +-
 .../components/Widgets/LowStockProducts.vue   |  2 +-
 .../js/components/Widgets/OrdersChart.vue     |  2 +-
 .../js/components/Widgets/RecentOrders.vue    |  2 +-
 .../js/components/Widgets/TopCustomers.vue    |  2 +-
 src/ServiceProvider.php                       |  2 +-
 vite.config.js                                | 36 ++++++++-----------
 23 files changed, 53 insertions(+), 69 deletions(-)

diff --git a/package.json b/package.json
index b6d6d493d..e52c4be2f 100644
--- a/package.json
+++ b/package.json
@@ -1,23 +1,15 @@
 {
     "scripts": {
-        "dev": "vite",
+        "dev": "vite build --watch",
         "build": "vite build"
     },
     "dependencies": {
-        "@floating-ui/dom": "^1.2.5",
-        "@shopify/draggable": "^1.0.0-beta.8",
         "axios": "^0.21.1",
-        "cross-env": "^7.0.2",
-        "marked": "^4.0.12",
-        "underscore": "^1.13.2",
-        "uniqid": "^5.4.0",
-        "vite-svg-loader": "^5.1.0",
-        "vue-chartjs": "^5.3.2"
+        "vue-chartjs": "^5.3.2",
+        "@statamic/cms": "file:./vendor/statamic/cms/resources/js/package"
     },
     "devDependencies": {
-        "@vitejs/plugin-vue": "^5.2.3",
         "laravel-vite-plugin": "^1.2.0",
-        "vite": "^6.3.4",
-        "vite-plugin-externals": "^0.6.2"
+        "vite": "^6.3.4"
     }
 }
diff --git a/resources/js/components/Fieldtypes/CountryRegionFieldtype.vue b/resources/js/components/Fieldtypes/CountryRegionFieldtype.vue
index 1939534fd..0927c7da5 100644
--- a/resources/js/components/Fieldtypes/CountryRegionFieldtype.vue
+++ b/resources/js/components/Fieldtypes/CountryRegionFieldtype.vue
@@ -14,8 +14,8 @@
 
 <script>
 import axios from 'axios'
-import { FieldtypeMixin } from 'statamic'
-import { Select } from '@statamic/ui'
+import { FieldtypeMixin } from '@statamic/cms'
+import { Select } from '@statamic/cms/ui'
 
 export default {
     mixins: [FieldtypeMixin],
diff --git a/resources/js/components/Fieldtypes/CouponCodeFieldtype.vue b/resources/js/components/Fieldtypes/CouponCodeFieldtype.vue
index b6b1017f3..0f95d3485 100644
--- a/resources/js/components/Fieldtypes/CouponCodeFieldtype.vue
+++ b/resources/js/components/Fieldtypes/CouponCodeFieldtype.vue
@@ -9,8 +9,8 @@
 </template>
 
 <script>
-import { FieldtypeMixin } from 'statamic';
-import { Input } from '@statamic/ui';
+import { FieldtypeMixin } from '@statamic/cms';
+import { Input } from '@statamic/cms/ui';
 
 export default {
     name: 'CouponCodeFieldtype',
diff --git a/resources/js/components/Fieldtypes/CouponSummaryFieldtype.vue b/resources/js/components/Fieldtypes/CouponSummaryFieldtype.vue
index 4f5dade84..fd6f4907c 100644
--- a/resources/js/components/Fieldtypes/CouponSummaryFieldtype.vue
+++ b/resources/js/components/Fieldtypes/CouponSummaryFieldtype.vue
@@ -41,7 +41,7 @@
 </template>
 
 <script>
-import { FieldtypeMixin } from 'statamic';
+import { FieldtypeMixin } from '@statamic/cms';
 
 export default {
     name: 'CouponSummaryFieldtype',
diff --git a/resources/js/components/Fieldtypes/CouponValueFieldtype.vue b/resources/js/components/Fieldtypes/CouponValueFieldtype.vue
index d96484349..969bb9057 100644
--- a/resources/js/components/Fieldtypes/CouponValueFieldtype.vue
+++ b/resources/js/components/Fieldtypes/CouponValueFieldtype.vue
@@ -22,7 +22,7 @@
 </template>
 
 <script>
-import { FieldtypeMixin } from 'statamic';
+import { FieldtypeMixin } from '@statamic/cms';
 
 export default {
     name: 'CouponValueFieldtype',
diff --git a/resources/js/components/Fieldtypes/GatewayFieldtype.vue b/resources/js/components/Fieldtypes/GatewayFieldtype.vue
index 09fe2598e..f9da19742 100644
--- a/resources/js/components/Fieldtypes/GatewayFieldtype.vue
+++ b/resources/js/components/Fieldtypes/GatewayFieldtype.vue
@@ -50,8 +50,8 @@
 </template>
 
 <script>
-import { FieldtypeMixin, ItemActions } from 'statamic'
-import { Dropdown, DropdownMenu, DropdownItem } from '@statamic/ui'
+import { FieldtypeMixin, ItemActions } from '@statamic/cms'
+import { Dropdown, DropdownMenu, DropdownItem } from '@statamic/cms/ui'
 
 export default {
     name: 'gateway-fieldtype',
diff --git a/resources/js/components/Fieldtypes/MoneyFieldtype.vue b/resources/js/components/Fieldtypes/MoneyFieldtype.vue
index d421a59e1..160819dc1 100644
--- a/resources/js/components/Fieldtypes/MoneyFieldtype.vue
+++ b/resources/js/components/Fieldtypes/MoneyFieldtype.vue
@@ -8,8 +8,8 @@
 </template>
 
 <script>
-import { FieldtypeMixin } from 'statamic';
-import { Input } from '@statamic/ui'
+import { FieldtypeMixin } from '@statamic/cms';
+import { Input } from '@statamic/cms/ui'
 
 export default {
     name: 'money-fieldtype',
diff --git a/resources/js/components/Fieldtypes/OrderStatusFieldtype.vue b/resources/js/components/Fieldtypes/OrderStatusFieldtype.vue
index 2eaae6a20..b034b44fd 100644
--- a/resources/js/components/Fieldtypes/OrderStatusFieldtype.vue
+++ b/resources/js/components/Fieldtypes/OrderStatusFieldtype.vue
@@ -8,8 +8,8 @@
 </template>
 
 <script>
-import { FieldtypeMixin } from 'statamic';
-import { Badge } from '@statamic/ui'
+import { FieldtypeMixin } from '@statamic/cms';
+import { Badge } from '@statamic/cms/ui'
 
 export default {
     name: 'order-status-fieldtype',
diff --git a/resources/js/components/Fieldtypes/OrderStatusIndexFieldtype.vue b/resources/js/components/Fieldtypes/OrderStatusIndexFieldtype.vue
index 0642322ed..435e51628 100644
--- a/resources/js/components/Fieldtypes/OrderStatusIndexFieldtype.vue
+++ b/resources/js/components/Fieldtypes/OrderStatusIndexFieldtype.vue
@@ -8,8 +8,8 @@
 </template>
 
 <script>
-import { IndexFieldtypeMixin } from 'statamic';
-import { Badge } from '@statamic/ui'
+import { IndexFieldtypeMixin } from '@statamic/cms';
+import { Badge } from '@statamic/cms/ui'
 
 export default {
     mixins: [IndexFieldtypeMixin],
diff --git a/resources/js/components/Fieldtypes/PaymentStatusFieldtype.vue b/resources/js/components/Fieldtypes/PaymentStatusFieldtype.vue
index 5f5157211..4fd2ffbe5 100644
--- a/resources/js/components/Fieldtypes/PaymentStatusFieldtype.vue
+++ b/resources/js/components/Fieldtypes/PaymentStatusFieldtype.vue
@@ -8,8 +8,8 @@
 </template>
 
 <script>
-import { FieldtypeMixin } from 'statamic';
-import { Badge } from '@statamic/ui'
+import { FieldtypeMixin } from '@statamic/cms';
+import { Badge } from '@statamic/cms/ui'
 
 export default {
     name: 'payment-status-fieldtype',
diff --git a/resources/js/components/Fieldtypes/PaymentStatusIndexFieldtype.vue b/resources/js/components/Fieldtypes/PaymentStatusIndexFieldtype.vue
index a697a8c8a..6f0a8fee0 100644
--- a/resources/js/components/Fieldtypes/PaymentStatusIndexFieldtype.vue
+++ b/resources/js/components/Fieldtypes/PaymentStatusIndexFieldtype.vue
@@ -8,8 +8,8 @@
 </template>
 
 <script>
-import { IndexFieldtypeMixin } from 'statamic';
-import { Badge } from '@statamic/ui'
+import { IndexFieldtypeMixin } from '@statamic/cms';
+import { Badge } from '@statamic/cms/ui'
 
 export default {
     mixins: [IndexFieldtypeMixin],
diff --git a/resources/js/components/Fieldtypes/ProductVariantFieldtype.vue b/resources/js/components/Fieldtypes/ProductVariantFieldtype.vue
index 7ed44a7df..59ee9d87d 100644
--- a/resources/js/components/Fieldtypes/ProductVariantFieldtype.vue
+++ b/resources/js/components/Fieldtypes/ProductVariantFieldtype.vue
@@ -43,8 +43,8 @@
 
 <script>
 import axios from 'axios'
-import { FieldtypeMixin } from 'statamic';
-import { Select, publishContextKey } from '@statamic/ui'
+import { FieldtypeMixin } from '@statamic/cms';
+import { Select, publishContextKey } from '@statamic/cms/ui'
 
 export default {
     name: 'product-variant-fieldtype',
diff --git a/resources/js/components/Fieldtypes/ProductVariantsFieldtype.vue b/resources/js/components/Fieldtypes/ProductVariantsFieldtype.vue
index ed1c6fcbd..458c47b2d 100644
--- a/resources/js/components/Fieldtypes/ProductVariantsFieldtype.vue
+++ b/resources/js/components/Fieldtypes/ProductVariantsFieldtype.vue
@@ -1,6 +1,6 @@
 <script setup>
-import { Fieldtype } from 'statamic';
-import { Panel, PanelHeader, Heading, Card, Icon, Button, PublishContainer, FieldsProvider, PublishFields as Fields, injectPublishContext } from '@statamic/ui';
+import { Fieldtype } from '@statamic/cms';
+import { Panel, PanelHeader, Heading, Card, Icon, Button, PublishContainer, FieldsProvider, PublishFields as Fields, injectPublishContext } from '@statamic/cms/ui';
 import { computed, ref, watch } from 'vue';
 const { values, errors } = injectPublishContext()
 
@@ -190,7 +190,7 @@ watch(
 <template>
     <div class="mt-2">
         <!-- Variants -->
-        <div class="mb-10 flex flex-col">
+        <div class="mb-12 flex flex-col">
             <Panel v-for="(variant, index) in variants" :key="index">
                 <PanelHeader>
                     <div class="flex items-center justify-between">
diff --git a/resources/js/components/Fieldtypes/StatusLogFieldtype.vue b/resources/js/components/Fieldtypes/StatusLogFieldtype.vue
index 982ad1824..2b082bc14 100644
--- a/resources/js/components/Fieldtypes/StatusLogFieldtype.vue
+++ b/resources/js/components/Fieldtypes/StatusLogFieldtype.vue
@@ -3,7 +3,7 @@
         <Button
             class="w-full"
             :text="__('Visit Status Log')"
-            icon="light/history"
+            icon="history"
             target="_blank"
             @click="showStatusLog = true"
         />
@@ -26,8 +26,8 @@
 
 <script>
 import StatusLog from '../StatusLog/StatusLog.vue';
-import { FieldtypeMixin } from 'statamic';
-import { Button } from '@statamic/ui'
+import { FieldtypeMixin } from '@statamic/cms';
+import { Button } from '@statamic/cms/ui'
 
 export default {
     name: 'status-log-fieldtype',
diff --git a/resources/js/components/Listings/CouponListing.vue b/resources/js/components/Listings/CouponListing.vue
index 5744d0273..4946eb235 100644
--- a/resources/js/components/Listings/CouponListing.vue
+++ b/resources/js/components/Listings/CouponListing.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { DropdownItem, Listing } from '@statamic/ui';
+import { DropdownItem, Listing } from '@statamic/cms/ui';
 import { ref } from 'vue';
 
 const props = defineProps({
diff --git a/resources/js/components/StatusLog/StatusLog.vue b/resources/js/components/StatusLog/StatusLog.vue
index 37a55409d..df19b4587 100644
--- a/resources/js/components/StatusLog/StatusLog.vue
+++ b/resources/js/components/StatusLog/StatusLog.vue
@@ -38,8 +38,8 @@
 
 <script>
 import StatusLogEvent from './StatusLogEvent.vue';
-import { Button, Heading } from '@statamic/ui'
-import { DateFormatter } from 'statamic';
+import { Button, Heading } from '@statamic/cms/ui'
+import { DateFormatter } from '@statamic/cms';
 
 export default {
     components: {
diff --git a/resources/js/components/StatusLog/StatusLogEvent.vue b/resources/js/components/StatusLog/StatusLogEvent.vue
index 0428a132d..760e94023 100644
--- a/resources/js/components/StatusLog/StatusLogEvent.vue
+++ b/resources/js/components/StatusLog/StatusLogEvent.vue
@@ -35,7 +35,7 @@
 <script>
 import axios from 'axios';
 import Avatar from '../../../../vendor/statamic/cms/resources/js/components/Avatar.vue'
-import { Badge, Subheading } from '@statamic/ui'
+import { Badge, Subheading } from '@statamic/cms/ui'
 
 export default {
     components: { Badge, Subheading, Avatar },
diff --git a/resources/js/components/Widgets/LowStockProducts.vue b/resources/js/components/Widgets/LowStockProducts.vue
index dcf4f5c23..729ed36ec 100644
--- a/resources/js/components/Widgets/LowStockProducts.vue
+++ b/resources/js/components/Widgets/LowStockProducts.vue
@@ -51,7 +51,7 @@ import {
     ListingTableHead as TableHead,
     ListingTableBody as TableBody,
     ListingPagination as Pagination
-} from '@statamic/ui';
+} from '@statamic/cms/ui';
 
 export default {
     components: {
diff --git a/resources/js/components/Widgets/OrdersChart.vue b/resources/js/components/Widgets/OrdersChart.vue
index 61430c9e9..ec37c753a 100644
--- a/resources/js/components/Widgets/OrdersChart.vue
+++ b/resources/js/components/Widgets/OrdersChart.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script>
-import { Widget } from '@statamic/ui';
+import { Widget } from '@statamic/cms/ui';
 
 import {
     Chart as ChartJS,
diff --git a/resources/js/components/Widgets/RecentOrders.vue b/resources/js/components/Widgets/RecentOrders.vue
index c6767c34d..eb05cb5fe 100644
--- a/resources/js/components/Widgets/RecentOrders.vue
+++ b/resources/js/components/Widgets/RecentOrders.vue
@@ -46,7 +46,7 @@ import {
     ListingTableHead as TableHead,
     ListingTableBody as TableBody,
     ListingPagination as Pagination
-} from '@statamic/ui';
+} from '@statamic/cms/ui';
 
 export default {
     components: {
diff --git a/resources/js/components/Widgets/TopCustomers.vue b/resources/js/components/Widgets/TopCustomers.vue
index fa6330193..325e2ce46 100644
--- a/resources/js/components/Widgets/TopCustomers.vue
+++ b/resources/js/components/Widgets/TopCustomers.vue
@@ -51,7 +51,7 @@ import {
     ListingTableHead as TableHead,
     ListingTableBody as TableBody,
     ListingPagination as Pagination
-} from '@statamic/ui';
+} from '@statamic/cms/ui';
 
 export default {
     components: {
diff --git a/src/ServiceProvider.php b/src/ServiceProvider.php
index 52b56e4c4..873175a03 100644
--- a/src/ServiceProvider.php
+++ b/src/ServiceProvider.php
@@ -129,7 +129,7 @@ class ServiceProvider extends AddonServiceProvider
         'publicDirectory' => 'dist',
         'input' => [
             'resources/js/cp.js',
-            'resources/css/cp.css',
+//            'resources/css/cp.css',
         ],
     ];
 
diff --git a/vite.config.js b/vite.config.js
index 53b34d902..083c21842 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,25 +1,17 @@
-import { defineConfig } from 'vite'
 import laravel from 'laravel-vite-plugin'
-import vue from '@vitejs/plugin-vue';
-import svgLoader from 'vite-svg-loader';
-import { viteExternalsPlugin } from 'vite-plugin-externals';
-import statamic from './vendor/statamic/cms/resources/js/vite-plugin';
+import { defineConfig } from 'vite'
+import statamic from '@statamic/cms/vite-plugin';
 
-export default defineConfig(({ command, mode }) => {
-    return {
-        plugins: [
-            statamic(),
-            laravel({
-                hotFile: 'dist/hot',
-                publicDirectory: 'dist',
-                input: ['resources/js/cp.js', 'resources/css/cp.css'],
-            }),
-            vue(),
-            viteExternalsPlugin({ vue: 'Vue', pinia: 'Pinia', 'vue-demi': 'Vue' }),
-            svgLoader(),
-        ],
-        server: {
-            hmr: false
-        }
-    }
+export default defineConfig({
+    plugins: [
+        statamic(),
+        laravel({
+            hotFile: 'dist/hot',
+            publicDirectory: 'dist',
+            input: [
+                'resources/js/cp.js',
+                // 'resources/css/cp.css',
+            ],
+        }),
+    ],
 });

From f75f82a5b12700bcb4f4e055f016a5938e7a78b9 Mon Sep 17 00:00:00 2001
From: duncanmcclean <duncanmcclean@users.noreply.github.com>
Date: Tue, 19 Aug 2025 21:24:27 +0000
Subject: [PATCH 2/6] Fix styling

---
 src/ServiceProvider.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ServiceProvider.php b/src/ServiceProvider.php
index 873175a03..6684d2d94 100644
--- a/src/ServiceProvider.php
+++ b/src/ServiceProvider.php
@@ -129,7 +129,7 @@ class ServiceProvider extends AddonServiceProvider
         'publicDirectory' => 'dist',
         'input' => [
             'resources/js/cp.js',
-//            'resources/css/cp.css',
+            //            'resources/css/cp.css',
         ],
     ];
 

From a4026a0f80311f025a08681d648761710546a7a6 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Thu, 21 Aug 2025 10:50:46 +0100
Subject: [PATCH 3/6] Uncomment .css input

---
 src/ServiceProvider.php | 2 +-
 vite.config.js          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/ServiceProvider.php b/src/ServiceProvider.php
index 6684d2d94..52b56e4c4 100644
--- a/src/ServiceProvider.php
+++ b/src/ServiceProvider.php
@@ -129,7 +129,7 @@ class ServiceProvider extends AddonServiceProvider
         'publicDirectory' => 'dist',
         'input' => [
             'resources/js/cp.js',
-            //            'resources/css/cp.css',
+            'resources/css/cp.css',
         ],
     ];
 
diff --git a/vite.config.js b/vite.config.js
index 083c21842..f854ad47b 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -10,7 +10,7 @@ export default defineConfig({
             publicDirectory: 'dist',
             input: [
                 'resources/js/cp.js',
-                // 'resources/css/cp.css',
+                'resources/css/cp.css',
             ],
         }),
     ],

From 21730ebb973386a8f843b1366e4c2c024583e313 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Thu, 21 Aug 2025 10:51:31 +0100
Subject: [PATCH 4/6] Use the chart.js library directly

It was erroring out since it couldn't resolve Vue.js, probably because Statamic puts it on the window instead of us pulling it in ourselves.
---
 package.json                                  |  2 +-
 .../js/components/Widgets/OrdersChart.vue     | 67 ++++++++++++-------
 2 files changed, 42 insertions(+), 27 deletions(-)

diff --git a/package.json b/package.json
index e52c4be2f..e65efd616 100644
--- a/package.json
+++ b/package.json
@@ -5,8 +5,8 @@
     },
     "dependencies": {
         "axios": "^0.21.1",
-        "vue-chartjs": "^5.3.2",
         "@statamic/cms": "file:./vendor/statamic/cms/resources/js/package"
+        "chart.js": "^4.5.0"
     },
     "devDependencies": {
         "laravel-vite-plugin": "^1.2.0",
diff --git a/resources/js/components/Widgets/OrdersChart.vue b/resources/js/components/Widgets/OrdersChart.vue
index ec37c753a..7e5159f0a 100644
--- a/resources/js/components/Widgets/OrdersChart.vue
+++ b/resources/js/components/Widgets/OrdersChart.vue
@@ -2,8 +2,8 @@
     <Widget :title :icon>
         <div class="flex flex-wrap -mx-2 mb-4">
             <div class="px-2 w-full">
-                <div class="px-1" v-if="ready">
-                    <Line :data="chartData" :options="chartOptions" />
+                <div class="px-1">
+                    <canvas ref="chartCanvas"></canvas>
                 </div>
             </div>
         </div>
@@ -16,24 +16,24 @@
 
 <script>
 import { Widget } from '@statamic/cms/ui';
-
 import {
     Chart as ChartJS,
     CategoryScale,
     LinearScale,
     PointElement,
     LineElement,
+    LineController,
     Title,
     Tooltip,
     Legend
 } from 'chart.js'
-import { Line } from 'vue-chartjs'
 
 ChartJS.register(
     CategoryScale,
     LinearScale,
     PointElement,
     LineElement,
+    LineController,
     Title,
     Tooltip,
     Legend
@@ -42,7 +42,6 @@ ChartJS.register(
 export default {
     components: {
         Widget,
-        Line,
     },
 
     props: {
@@ -53,33 +52,49 @@ export default {
 
     data() {
         return {
-            ready: false,
+            chart: null,
+        }
+    },
 
-            chartData: {
-                labels: [],
-                datasets: [
-                    {
-                        label: __('Paid Orders'),
-                        backgroundColor: '#16a34a',
-                        data: [],
-                    },
-                ],
-            },
+    methods: {
+        createChart() {
+            const ctx = this.$refs.chartCanvas.getContext('2d');
 
-            chartOptions: {
-                responsive: true,
-                maintainAspectRatio: false,
-            },
-        }
+            const labels = [];
+            const chartData = [];
+
+            this.data.forEach((item) => {
+                labels.push(item.date);
+                chartData.push(item.count);
+            });
+
+            this.chart = new ChartJS(ctx, {
+                type: 'line',
+                data: {
+                    labels: labels,
+                    datasets: [
+                        {
+                            label: __('Paid Orders'),
+                            backgroundColor: '#16a34a',
+                            borderColor: '#16a34a',
+                            data: chartData,
+                        },
+                    ],
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                },
+            });
+        },
     },
 
     mounted() {
-        this.data.forEach((item) => {
-            this.chartData.labels.push(item.date)
-            this.chartData.datasets[0].data.push(item.count)
-        })
+        this.createChart();
+    },
 
-        this.ready = true
+    beforeUnmount() {
+        this.chart?.destroy();
     },
 }
 </script>

From 2c103ba7b6333c843b12672fd5112a3581c5f734 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Thu, 21 Aug 2025 10:51:36 +0100
Subject: [PATCH 5/6] Update imports

---
 package.json                                               | 2 +-
 .../js/components/Fieldtypes/ProductVariantsFieldtype.vue  | 7 ++++---
 resources/js/components/StatusLog/StatusLogEvent.vue       | 1 +
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index e65efd616..c1734a3a2 100644
--- a/package.json
+++ b/package.json
@@ -4,8 +4,8 @@
         "build": "vite build"
     },
     "dependencies": {
+        "@statamic/cms": "file:./vendor/statamic/cms/resources/js/package",
         "axios": "^0.21.1",
-        "@statamic/cms": "file:./vendor/statamic/cms/resources/js/package"
         "chart.js": "^4.5.0"
     },
     "devDependencies": {
diff --git a/resources/js/components/Fieldtypes/ProductVariantsFieldtype.vue b/resources/js/components/Fieldtypes/ProductVariantsFieldtype.vue
index 458c47b2d..7c9138fc3 100644
--- a/resources/js/components/Fieldtypes/ProductVariantsFieldtype.vue
+++ b/resources/js/components/Fieldtypes/ProductVariantsFieldtype.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { Fieldtype } from '@statamic/cms';
-import { Panel, PanelHeader, Heading, Card, Icon, Button, PublishContainer, FieldsProvider, PublishFields as Fields, injectPublishContext } from '@statamic/cms/ui';
+import { Panel, PanelHeader, Heading, Card, Button, PublishContainer, FieldsProvider, PublishFields as Fields, injectPublishContext } from '@statamic/cms/ui';
+import { ConfirmationModal } from '@statamic/cms/temporary';
 import { computed, ref, watch } from 'vue';
 const { values, errors } = injectPublishContext()
 
@@ -200,7 +201,7 @@ watch(
                 </PanelHeader>
 
                 <Card>
-                    <confirmation-modal
+                    <ConfirmationModal
                         v-if="deletingVariant === index"
                         :ref="`variant-deleter-${index}`"
                         :title="__('Delete Variant')"
@@ -209,7 +210,7 @@ watch(
                         @confirm="deleteVariant(index)"
                     >
                         <p>{{ __('Are you sure you want to delete this variant?') }}</p>
-                    </confirmation-modal>
+                    </ConfirmationModal>
 
                     <PublishContainer
                         :name="`product-variant-${index}`"
diff --git a/resources/js/components/StatusLog/StatusLogEvent.vue b/resources/js/components/StatusLog/StatusLogEvent.vue
index 760e94023..c5dcb2a18 100644
--- a/resources/js/components/StatusLog/StatusLogEvent.vue
+++ b/resources/js/components/StatusLog/StatusLogEvent.vue
@@ -39,6 +39,7 @@ import { Badge, Subheading } from '@statamic/cms/ui'
 
 export default {
     components: { Badge, Subheading, Avatar },
+
     props: {
         event: Object,
         orderId: String,

From 0061d707196ea1577e83062f5d3b9664d6935cb2 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Thu, 21 Aug 2025 10:53:03 +0100
Subject: [PATCH 6/6] Use runway dev-master

---
 composer.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/composer.json b/composer.json
index 6e5b0dc57..c8b8414ee 100644
--- a/composer.json
+++ b/composer.json
@@ -49,7 +49,7 @@
         "phpunit/phpunit": "^11.0",
         "spatie/ray": "^1.17",
         "spatie/test-time": "^1.3",
-        "statamic-rad-pack/runway": "dev-statamic-6"
+        "statamic-rad-pack/runway": "dev-master"
     },
     "config": {
         "optimize-autoloader": true,