From b8c1ec8cb95a6c72dde779eea9b4ed678f2f6de8 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 19 May 2026 14:55:10 -0400
Subject: [PATCH 01/12] wip

---
 lang/en/messages.php                          |  10 +
 .../dashboard/WidgetConfigStack.vue           |  78 ++++++
 .../js/components/dashboard/WidgetPicker.vue  |  41 +++
 .../js/components/dashboard/WidgetTile.vue    |  48 ++++
 resources/js/pages/Dashboard.vue              | 247 +++++++++++++++---
 routes/cp.php                                 |   4 +
 src/Forms/Widget.php                          |  69 +++++
 .../Controllers/CP/DashboardController.php    |  50 +++-
 .../CP/DashboardWidgetsController.php         |  72 +++++
 src/Widgets/Collection.php                    |  80 ++++++
 src/Widgets/Template.php                      |  40 +++
 src/Widgets/Updater.php                       |  12 +
 src/Widgets/Widget.php                        |  71 +++--
 .../CP/DashboardWidgetsControllerTest.php     | 123 +++++++++
 14 files changed, 880 insertions(+), 65 deletions(-)
 create mode 100644 resources/js/components/dashboard/WidgetConfigStack.vue
 create mode 100644 resources/js/components/dashboard/WidgetPicker.vue
 create mode 100644 resources/js/components/dashboard/WidgetTile.vue
 create mode 100644 src/Http/Controllers/CP/DashboardWidgetsController.php
 create mode 100644 tests/Feature/CP/DashboardWidgetsControllerTest.php

diff --git a/lang/en/messages.php b/lang/en/messages.php
index f5e7e230fb7..4b2008fcf65 100644
--- a/lang/en/messages.php
+++ b/lang/en/messages.php
@@ -291,5 +291,15 @@
     'user_wizard_invitation_subject' => 'Activate your new Statamic account on :site',
     'user_wizard_roles_groups_intro' => 'Users can be assigned to roles that customize their permissions, access, and abilities throughout the Control Panel.',
     'user_wizard_super_admin_instructions' => 'Super admins have complete control and access to everything in the control panel. Grant this role wisely.',
+    'widget_classes_instructions' => 'Additional CSS classes applied to the widget wrapper.',
+    'widget_collection_description' => 'Shows recent entries from a collection.',
+    'widget_collection_fields_instructions' => 'Field handles to display as columns. Defaults to title.',
+    'widget_collection_order_by_instructions' => 'Field and direction, e.g. <code>date:desc</code> or <code>title:asc</code>.',
+    'widget_collection_title_instructions' => 'Override the widget title. Defaults to the collection title.',
+    'widget_form_description' => 'Shows recent submissions for a form.',
+    'widget_form_form_instructions' => 'The handle of the form to display submissions for.',
+    'widget_template_description' => 'Renders a custom Blade or Antlers template.',
+    'widget_template_template_instructions' => 'Path to the template, relative to the views directory.',
+    'widget_updater_description' => 'Shows available updates for Statamic and your installed addons.',
     'width_x_height' => ':width × :height',
 ];
diff --git a/resources/js/components/dashboard/WidgetConfigStack.vue b/resources/js/components/dashboard/WidgetConfigStack.vue
new file mode 100644
index 00000000000..d3ba5225a65
--- /dev/null
+++ b/resources/js/components/dashboard/WidgetConfigStack.vue
@@ -0,0 +1,78 @@
+<script>
+import { Stack, Button, PublishContainer, PublishTabs, Icon } from '@/components/ui';
+
+export default {
+    components: { Stack, Button, PublishContainer, PublishTabs, Icon },
+
+    emits: ['closed', 'saved'],
+
+    props: {
+        config: { type: Object, required: true },
+        meta: { type: Object, default: null },
+    },
+
+    data() {
+        return {
+            values: this.initialValues(),
+            fieldMeta: this.meta?.meta || {},
+            errors: {},
+            name: `dashboard-widget-${this.config.type}-${Math.random().toString(36).slice(2, 8)}`,
+        };
+    },
+
+    computed: {
+        blueprint() {
+            return this.meta?.blueprint;
+        },
+
+        title() {
+            return this.meta?.title ?? this.config.type;
+        },
+    },
+
+    methods: {
+        initialValues() {
+            const defaults = this.meta?.defaults ?? {};
+            const { type, ...rest } = this.config;
+            return { ...defaults, ...rest };
+        },
+
+        save() {
+            const next = { type: this.config.type, ...this.values };
+            this.$emit('saved', next);
+        },
+    },
+};
+</script>
+
+<template>
+    <Stack
+        size="narrow"
+        open
+        :title="title"
+        @update:open="$emit('closed')"
+    >
+        <div class="flex flex-col h-full">
+            <div v-if="!blueprint" class="flex-1 flex items-center justify-center">
+                <Icon name="loading" />
+            </div>
+            <template v-else>
+                <div class="flex-1 overflow-auto p-4">
+                    <PublishContainer
+                        :name="name"
+                        :blueprint="blueprint"
+                        :meta="fieldMeta"
+                        :errors="errors"
+                        v-model="values"
+                    >
+                        <PublishTabs />
+                    </PublishContainer>
+                </div>
+                <div class="border-t bg-gray-200 dark:bg-gray-700 dark:border-gray-900 p-4 flex justify-end gap-2">
+                    <Button variant="ghost" :text="__('Cancel')" @click="$emit('closed')" />
+                    <Button variant="primary" :text="__('Apply')" @click="save" />
+                </div>
+            </template>
+        </div>
+    </Stack>
+</template>
diff --git a/resources/js/components/dashboard/WidgetPicker.vue b/resources/js/components/dashboard/WidgetPicker.vue
new file mode 100644
index 00000000000..1cbc3be9c23
--- /dev/null
+++ b/resources/js/components/dashboard/WidgetPicker.vue
@@ -0,0 +1,41 @@
+<script setup>
+import { Stack, Icon, Button } from '@/components/ui';
+
+const props = defineProps({
+    widgets: { type: Array, required: true },
+});
+
+const emit = defineEmits(['closed', 'picked']);
+</script>
+
+<template>
+    <Stack
+        size="narrow"
+        open
+        :title="__('Add Widget')"
+        @update:open="emit('closed')"
+    >
+        <div class="p-4">
+            <div v-if="!widgets.length" class="text-center text-gray-500 py-8">
+                {{ __('No widgets available.') }}
+            </div>
+            <div v-else class="grid grid-cols-1 gap-3">
+                <button
+                    v-for="widget in widgets"
+                    :key="widget.handle"
+                    type="button"
+                    class="text-start flex items-start gap-3 p-3 rounded-lg border bg-white dark:bg-gray-800 dark:border-gray-700 hover:border-blue-500 hover:shadow"
+                    @click="emit('picked', widget)"
+                >
+                    <Icon :name="widget.icon" class="size-5 text-gray-500 shrink-0 mt-1" />
+                    <div class="flex-1 min-w-0">
+                        <div class="font-medium">{{ widget.title }}</div>
+                        <div v-if="widget.description" class="text-xs text-gray-600 dark:text-gray-400">
+                            {{ widget.description }}
+                        </div>
+                    </div>
+                </button>
+            </div>
+        </div>
+    </Stack>
+</template>
diff --git a/resources/js/components/dashboard/WidgetTile.vue b/resources/js/components/dashboard/WidgetTile.vue
new file mode 100644
index 00000000000..73e4b7f049d
--- /dev/null
+++ b/resources/js/components/dashboard/WidgetTile.vue
@@ -0,0 +1,48 @@
+<script setup>
+import { Button, Icon, Dropdown, DropdownMenu, DropdownItem } from '@/components/ui';
+import { computed } from 'vue';
+
+const props = defineProps({
+    config: { type: Object, required: true },
+    meta: { type: Object, default: null },
+});
+
+const emit = defineEmits(['configure', 'remove', 'update:width']);
+
+const title = computed(() => props.meta?.title ?? props.config.type);
+const icon = computed(() => props.meta?.icon ?? 'generic-widget');
+const description = computed(() => props.meta?.description);
+const widthOptions = ['sm', 'md', 'lg', 'full'];
+const currentWidth = computed(() => props.config.width ?? 'md');
+</script>
+
+<template>
+    <div class="dashboard-widget-tile relative flex flex-col gap-2 rounded-lg border border-dashed border-gray-400 bg-gray-100 dark:bg-gray-800 dark:border-gray-700 p-4">
+        <div class="flex items-start gap-3">
+            <Icon name="handles" class="dashboard-widget-handle cursor-grab text-gray-500 size-4 shrink-0 mt-1" />
+            <Icon :name="icon" class="size-5 text-gray-500 shrink-0 mt-1" />
+            <div class="flex-1 min-w-0 cursor-pointer" @click="emit('configure')">
+                <div class="font-medium truncate">{{ title }}</div>
+                <div v-if="description" class="text-xs text-gray-600 dark:text-gray-400 truncate">{{ description }}</div>
+            </div>
+
+            <Dropdown placement="bottom-end">
+                <template #trigger>
+                    <Button size="sm" icon="more-horizontal" variant="ghost" :aria-label="__('Width')" />
+                </template>
+                <DropdownMenu>
+                    <DropdownItem
+                        v-for="opt in widthOptions"
+                        :key="opt"
+                        :text="__(opt.charAt(0).toUpperCase() + opt.slice(1))"
+                        :icon="currentWidth === opt ? 'check' : undefined"
+                        @click="emit('update:width', opt)"
+                    />
+                </DropdownMenu>
+            </Dropdown>
+
+            <Button size="sm" icon="settings" variant="ghost" :aria-label="__('Configure')" @click="emit('configure')" />
+            <Button size="sm" icon="trash" variant="ghost" :aria-label="__('Remove')" @click="emit('remove')" />
+        </div>
+    </div>
+</template>
diff --git a/resources/js/pages/Dashboard.vue b/resources/js/pages/Dashboard.vue
index 57d1d9cb1ab..04cdac67c9e 100644
--- a/resources/js/pages/Dashboard.vue
+++ b/resources/js/pages/Dashboard.vue
@@ -1,52 +1,216 @@
-<script setup>
+<script>
 import Head from '@/pages/layout/Head.vue';
 import DynamicHtmlRenderer from '@/components/DynamicHtmlRenderer.vue';
-import { Icon, EmptyStateMenu, EmptyStateItem, DocsCallout } from '@ui';
+import { Icon, Button, EmptyStateMenu, EmptyStateItem, DocsCallout } from '@ui';
+import { SortableList } from '@/components/sortable/Sortable.js';
+import WidgetTile from '@/components/dashboard/WidgetTile.vue';
+import WidgetPicker from '@/components/dashboard/WidgetPicker.vue';
+import WidgetConfigStack from '@/components/dashboard/WidgetConfigStack.vue';
 import useArchitecturalBackground from '@/pages/layout/architectural-background.js';
+import { router } from '@inertiajs/vue3';
+import { clone } from '@/bootstrap/globals.js';
 
-const props = defineProps({
-    widgets: Array,
-    pro: Boolean,
-    blueprintsUrl: String,
-    collectionsCreateUrl: String,
-    navigationCreateUrl: String,
-});
-
-if (props.widgets.length === 0) useArchitecturalBackground();
-
-function classes(widget) {
-    return `${widget.classes} ${tailwindWidthClass(widget.width)}`;
-}
-
-function tailwindWidthClass(width) {
-    const sizes = {
-        sm: 'w-full @2xl:w-1/2 @4xl:w-1/3 @7xl:w-1/4',
-        md: 'w-full @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3',
-        lg: 'w-full @2xl:w-full @4xl:w-2/3 @7xl:w-3/4',
-        full: 'w-full',
-    };
-
-    // For backward compatibility, map old numeric widths to new sizes
-    const legacyMap = {
-        25: 'sm',
-        33: 'sm',
-        50: 'md',
-        66: 'md',
-        75: 'lg',
-        100: 'full'
-    };
-
-    const size = typeof width === 'number' ? (legacyMap[width] ?? 'full') : width;
-
-    return sizes[size] ?? sizes.md;
-}
+export default {
+    components: {
+        Head,
+        DynamicHtmlRenderer,
+        Icon,
+        Button,
+        EmptyStateMenu,
+        EmptyStateItem,
+        DocsCallout,
+        SortableList,
+        WidgetTile,
+        WidgetPicker,
+        WidgetConfigStack,
+    },
+
+    props: {
+        widgets: Array,
+        widgetConfigs: { type: Array, default: () => [] },
+        canEditWidgets: { type: Boolean, default: false },
+        widgetMetaUrl: String,
+        widgetUpdateUrl: String,
+        pro: Boolean,
+        blueprintsUrl: String,
+        collectionsCreateUrl: String,
+        navigationCreateUrl: String,
+    },
+
+    data() {
+        return {
+            editing: false,
+            draftWidgets: [],
+            availableWidgets: null,
+            loadingMeta: false,
+            picking: false,
+            configuringIndex: null,
+            saving: false,
+        };
+    },
+
+    computed: {
+        widgetsMetaByHandle() {
+            if (! this.availableWidgets) return {};
+            return Object.fromEntries(this.availableWidgets.map((w) => [w.handle, w]));
+        },
+
+        configuringWidget() {
+            if (this.configuringIndex === null) return null;
+            return this.draftWidgets[this.configuringIndex] || null;
+        },
+
+        configuringMeta() {
+            return this.configuringWidget ? this.widgetsMetaByHandle[this.configuringWidget.type] : null;
+        },
+    },
+
+    created() {
+        if (!this.widgets.length && !this.editing) useArchitecturalBackground();
+    },
+
+    methods: {
+        classes(widget) {
+            return `${widget.classes ?? ''} ${this.tailwindWidthClass(widget.width)}`;
+        },
+
+        tailwindWidthClass(width) {
+            const sizes = {
+                sm: 'w-full @2xl:w-1/2 @4xl:w-1/3 @7xl:w-1/4',
+                md: 'w-full @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3',
+                lg: 'w-full @2xl:w-full @4xl:w-2/3 @7xl:w-3/4',
+                full: 'w-full',
+            };
+
+            const legacyMap = { 25: 'sm', 33: 'sm', 50: 'md', 66: 'md', 75: 'lg', 100: 'full' };
+            const size = typeof width === 'number' ? (legacyMap[width] ?? 'full') : width;
+            return sizes[size] ?? sizes.md;
+        },
+
+        startEditing() {
+            this.draftWidgets = clone(this.widgetConfigs);
+            this.editing = true;
+            this.ensureMetaLoaded();
+        },
+
+        cancelEditing() {
+            this.editing = false;
+            this.draftWidgets = [];
+        },
+
+        ensureMetaLoaded() {
+            if (this.availableWidgets || this.loadingMeta) return;
+            this.loadingMeta = true;
+            this.$axios.get(this.widgetMetaUrl)
+                .then((response) => { this.availableWidgets = response.data; })
+                .catch(() => this.$toast.error(__('Could not load widgets.')))
+                .finally(() => { this.loadingMeta = false; });
+        },
+
+        openPicker() {
+            this.ensureMetaLoaded();
+            this.picking = true;
+        },
+
+        widgetPicked(widget) {
+            const newConfig = { type: widget.handle, ...(widget.defaults || {}) };
+            this.draftWidgets.push(newConfig);
+            this.picking = false;
+            this.configuringIndex = this.draftWidgets.length - 1;
+        },
+
+        configureWidget(index) {
+            this.configuringIndex = index;
+        },
+
+        widgetConfigSaved(updated) {
+            if (this.configuringIndex === null) return;
+            this.draftWidgets.splice(this.configuringIndex, 1, updated);
+            this.configuringIndex = null;
+        },
+
+        removeWidget(index) {
+            this.draftWidgets.splice(index, 1);
+        },
+
+        updateWidth(index, width) {
+            this.draftWidgets[index] = { ...this.draftWidgets[index], width };
+        },
+
+        save() {
+            this.saving = true;
+            this.$axios.patch(this.widgetUpdateUrl, { widgets: this.draftWidgets })
+                .then(() => {
+                    this.editing = false;
+                    router.reload();
+                })
+                .catch(() => this.$toast.error(__('Something went wrong')))
+                .finally(() => { this.saving = false; });
+        },
+
+    },
+};
 </script>
 
 <template>
     <Head :title="__('Dashboard')" />
 
-    <template v-if="widgets.length">
-        <ui-header :title="__('Dashboard')" icon="dashboard" />
+    <template v-if="editing">
+        <ui-header :title="__('Dashboard')" icon="dashboard">
+            <Button :text="__('Add Widget')" icon="plus" @click="openPicker" />
+            <Button :text="__('Cancel')" @click="cancelEditing" />
+            <Button :text="__('Save')" variant="primary" :disabled="saving" @click="save" />
+        </ui-header>
+
+        <SortableList
+            v-model="draftWidgets"
+            item-class="dashboard-widget-sortable"
+            handle-class="dashboard-widget-handle"
+            :vertical="true"
+            :mirror="false"
+            :distance="5"
+        >
+            <div class="flex flex-col gap-3">
+                <div
+                    v-for="(config, index) in draftWidgets"
+                    :key="`${config.type}-${index}`"
+                    class="dashboard-widget-sortable"
+                >
+                    <WidgetTile
+                        :config="config"
+                        :meta="widgetsMetaByHandle[config.type]"
+                        @configure="configureWidget(index)"
+                        @remove="removeWidget(index)"
+                        @update:width="updateWidth(index, $event)"
+                    />
+                </div>
+                <div v-if="!draftWidgets.length" class="text-center text-gray-500 py-12 border border-dashed rounded-lg dark:border-gray-700">
+                    {{ __('No widgets yet. Click "Add Widget" to get started.') }}
+                </div>
+            </div>
+        </SortableList>
+
+        <WidgetPicker
+            v-if="picking"
+            :widgets="availableWidgets || []"
+            @closed="picking = false"
+            @picked="widgetPicked"
+        />
+
+        <WidgetConfigStack
+            v-if="configuringWidget"
+            :config="configuringWidget"
+            :meta="configuringMeta"
+            @closed="configuringIndex = null"
+            @saved="widgetConfigSaved"
+        />
+
+    </template>
+
+    <template v-else-if="widgets.length">
+        <ui-header :title="__('Dashboard')" icon="dashboard">
+            <Button v-if="canEditWidgets" :text="__('Edit')" icon="edit" @click="startEditing" />
+        </ui-header>
 
         <div class="widgets @container/widgets flex flex-wrap gap-y-6 -mx-2 sm:-mx-3">
             <div
@@ -66,6 +230,9 @@ function tailwindWidthClass(width) {
                 <Icon name="dashboard" class="size-5 text-gray-500" />
                 {{ __('Dashboard') }}
             </h1>
+            <div v-if="canEditWidgets" class="mt-4">
+                <Button :text="__('Edit Dashboard')" icon="edit" @click="startEditing" />
+            </div>
         </header>
 
         <EmptyStateMenu
diff --git a/routes/cp.php b/routes/cp.php
index 4c08207c7d3..f7c13ab9a77 100644
--- a/routes/cp.php
+++ b/routes/cp.php
@@ -47,6 +47,7 @@
 use Statamic\Http\Controllers\CP\CommandPaletteController;
 use Statamic\Http\Controllers\CP\CpController;
 use Statamic\Http\Controllers\CP\DashboardController;
+use Statamic\Http\Controllers\CP\DashboardWidgetsController;
 use Statamic\Http\Controllers\CP\DuplicatesController;
 use Statamic\Http\Controllers\CP\FieldActionModalController;
 use Statamic\Http\Controllers\CP\Fields\AdditionalBlueprintController;
@@ -159,6 +160,9 @@
 
     Route::get('/', StartPageController::class)->name('index');
     Route::get('dashboard', [DashboardController::class, 'index'])->name('dashboard');
+    Route::get('dashboard/widgets/meta', [DashboardWidgetsController::class, 'meta'])->name('dashboard.widgets.meta');
+    Route::patch('dashboard/widgets', [DashboardWidgetsController::class, 'update'])->name('dashboard.widgets.update');
+    Route::delete('dashboard/widgets', [DashboardWidgetsController::class, 'destroy'])->name('dashboard.widgets.destroy');
 
     Route::get('select-site/{handle}', [SelectSiteController::class, 'select']);
 
diff --git a/src/Forms/Widget.php b/src/Forms/Widget.php
index 4d36333294d..28654db5fa5 100644
--- a/src/Forms/Widget.php
+++ b/src/Forms/Widget.php
@@ -2,15 +2,84 @@
 
 namespace Statamic\Forms;
 
+use Statamic\Facades\Blueprint;
 use Statamic\Facades\Form;
 use Statamic\Facades\User;
 use Statamic\Widgets\VueComponent;
 use Statamic\Widgets\Widget as BaseWidget;
 
+use function Statamic\trans as __;
+
 class Widget extends BaseWidget
 {
     protected static $handle = 'form';
 
+    public static function description(): ?string
+    {
+        return __('statamic::messages.widget_form_description');
+    }
+
+    public static function icon(): string
+    {
+        return 'forms';
+    }
+
+    public function blueprint(): \Statamic\Fields\Blueprint
+    {
+        return Blueprint::make()->setContents([
+            'tabs' => [
+                'main' => [
+                    'sections' => [
+                        [
+                            'fields' => [
+                                [
+                                    'handle' => 'form',
+                                    'field' => [
+                                        'type' => 'text',
+                                        'display' => __('Form'),
+                                        'instructions' => __('statamic::messages.widget_form_form_instructions'),
+                                        'validate' => 'required',
+                                    ],
+                                ],
+                                [
+                                    'handle' => 'title',
+                                    'field' => [
+                                        'type' => 'text',
+                                        'display' => __('Title'),
+                                    ],
+                                ],
+                                [
+                                    'handle' => 'limit',
+                                    'field' => [
+                                        'type' => 'integer',
+                                        'display' => __('Limit'),
+                                        'default' => 5,
+                                    ],
+                                ],
+                                [
+                                    'handle' => 'show_table_header',
+                                    'field' => [
+                                        'type' => 'toggle',
+                                        'display' => __('Show Table Header'),
+                                        'default' => false,
+                                    ],
+                                ],
+                                [
+                                    'handle' => 'fields',
+                                    'field' => [
+                                        'type' => 'list',
+                                        'display' => __('Fields'),
+                                    ],
+                                ],
+                                ...$this->commonBlueprintFields(),
+                            ],
+                        ],
+                    ],
+                ],
+            ],
+        ]);
+    }
+
     public function component()
     {
         $form = Form::find($handle = $this->config('form'));
diff --git a/src/Http/Controllers/CP/DashboardController.php b/src/Http/Controllers/CP/DashboardController.php
index be23e7b0057..d37ccb3ebc0 100644
--- a/src/Http/Controllers/CP/DashboardController.php
+++ b/src/Http/Controllers/CP/DashboardController.php
@@ -19,10 +19,17 @@ class DashboardController extends CpController
      */
     public function index(Loader $loader)
     {
-        $widgets = $this->getDisplayableWidgets($loader);
+        $configs = $this->resolvedWidgetConfigs();
+        $widgets = $this->buildDisplayableWidgets($loader, $configs);
 
         return Inertia::render('Dashboard', [
             'widgets' => $widgets,
+            'widgetConfigs' => $this->preProcessedConfigs($configs),
+            'hasCustomWidgets' => Preference::get('widgets') !== null,
+            'canEditWidgets' => User::current()->can('access cp'),
+            'widgetMetaUrl' => cp_route('dashboard.widgets.meta'),
+            'widgetUpdateUrl' => cp_route('dashboard.widgets.update'),
+            'widgetDestroyUrl' => cp_route('dashboard.widgets.destroy'),
             'pro' => Statamic::pro(),
             'blueprintsUrl' => cp_route('blueprints.index'),
             'collectionsCreateUrl' => cp_route('collections.create'),
@@ -30,20 +37,47 @@ public function index(Loader $loader)
         ]);
     }
 
+    private function resolvedWidgetConfigs()
+    {
+        return Preference::get('widgets') ?? config('statamic.cp.widgets') ?? [];
+    }
+
+    private function normalizedConfigs($widgets)
+    {
+        return collect($widgets)->map(function ($config) {
+            return is_string($config) ? ['type' => $config] : $config;
+        });
+    }
+
+    private function preProcessedConfigs($configs)
+    {
+        $availableWidgets = collect(app('statamic.widgets')->all());
+
+        return $this->normalizedConfigs($configs)->map(function ($config) use ($availableWidgets) {
+            $handle = $config['type'];
+            $widgetClass = $availableWidgets->get($handle);
+
+            if (! $widgetClass) {
+                return $config;
+            }
+
+            $widget = app($widgetClass);
+            $widget->setConfig($config);
+            $fields = $widget->blueprint()->fields()->addValues($config)->preProcess();
+
+            return array_merge(['type' => $handle], $fields->values()->all());
+        })->values()->all();
+    }
+
     /**
      * Get displayable widgets.
      *
      * @param  Loader  $loader
      * @return \Illuminate\Support\Collection
      */
-    private function getDisplayableWidgets($loader)
+    private function buildDisplayableWidgets($loader, $widgets)
     {
-        $widgets = Preference::get('widgets') ?? config('statamic.cp.widgets') ?? [];
-
-        return collect($widgets)
-            ->map(function ($config) {
-                return is_string($config) ? ['type' => $config] : $config;
-            })
+        return $this->normalizedConfigs($widgets)
             ->filter(function ($config) {
                 if ($config['type'] === 'getting_started') {
                     return false;
diff --git a/src/Http/Controllers/CP/DashboardWidgetsController.php b/src/Http/Controllers/CP/DashboardWidgetsController.php
new file mode 100644
index 00000000000..411b584fbdc
--- /dev/null
+++ b/src/Http/Controllers/CP/DashboardWidgetsController.php
@@ -0,0 +1,72 @@
+<?php
+
+namespace Statamic\Http\Controllers\CP;
+
+use Illuminate\Http\Request;
+use Statamic\Facades\User;
+use Statamic\Widgets\Widget;
+
+class DashboardWidgetsController extends CpController
+{
+    public function meta()
+    {
+        $this->authorize('access cp');
+
+        return $this->availableWidgets()->map(function ($class, $handle) {
+            /** @var Widget $widget */
+            $widget = app($class);
+            $widget->setConfig(['type' => $handle]);
+
+            $blueprint = $widget->blueprint();
+            $fields = $blueprint->fields()->addValues([])->preProcess();
+
+            return [
+                'handle' => $handle,
+                'title' => $class::title(),
+                'description' => $class::description(),
+                'icon' => $class::icon(),
+                'blueprint' => $blueprint->toPublishArray(),
+                'meta' => $fields->meta(),
+                'defaults' => $fields->values()->all(),
+            ];
+        })->values()->all();
+    }
+
+    public function update(Request $request)
+    {
+        $this->authorize('access cp');
+
+        $widgets = collect($request->input('widgets', []))
+            ->map(fn ($config) => is_string($config) ? ['type' => $config] : (array) $config)
+            ->filter(fn ($config) => isset($config['type']) && $this->availableWidgets()->has($config['type']))
+            ->map(function ($config) {
+                $handle = $config['type'];
+                $widgetClass = $this->availableWidgets()->get($handle);
+                $widget = app($widgetClass);
+                $widget->setConfig(['type' => $handle]);
+                $processedValues = $widget->blueprint()->fields()->addValues($config)->process()->values()->all();
+
+                return array_merge($config, $processedValues);
+            })
+            ->values()
+            ->all();
+
+        User::current()->setPreference('widgets', $widgets)->save();
+
+        return response()->noContent();
+    }
+
+    public function destroy()
+    {
+        $this->authorize('access cp');
+
+        User::current()->removePreference('widgets')->save();
+
+        return response()->noContent();
+    }
+
+    private function availableWidgets()
+    {
+        return collect(app('statamic.widgets')->all());
+    }
+}
diff --git a/src/Widgets/Collection.php b/src/Widgets/Collection.php
index 2bd922e16bc..b1fcb5da920 100644
--- a/src/Widgets/Collection.php
+++ b/src/Widgets/Collection.php
@@ -4,6 +4,7 @@
 
 use Statamic\Contracts\Entries\Entry as EntryContract;
 use Statamic\CP\Column;
+use Statamic\Facades\Blueprint;
 use Statamic\Facades\Collection as CollectionAPI;
 use Statamic\Facades\Scope;
 use Statamic\Facades\Site;
@@ -13,6 +14,85 @@
 
 class Collection extends Widget
 {
+    public static function description(): ?string
+    {
+        return __('statamic::messages.widget_collection_description');
+    }
+
+    public static function icon(): string
+    {
+        return 'collections';
+    }
+
+    public function blueprint(): \Statamic\Fields\Blueprint
+    {
+        return Blueprint::make()->setContents([
+            'tabs' => [
+                'main' => [
+                    'sections' => [
+                        [
+                            'fields' => [
+                                [
+                                    'handle' => 'collection',
+                                    'field' => [
+                                        'type' => 'collections',
+                                        'display' => __('Collection'),
+                                        'max_items' => 1,
+                                        'mode' => 'select',
+                                        'validate' => 'required',
+                                    ],
+                                ],
+                                [
+                                    'handle' => 'title',
+                                    'field' => [
+                                        'type' => 'text',
+                                        'display' => __('Title'),
+                                        'instructions' => __('statamic::messages.widget_collection_title_instructions'),
+                                    ],
+                                ],
+                                [
+                                    'handle' => 'limit',
+                                    'field' => [
+                                        'type' => 'integer',
+                                        'display' => __('Limit'),
+                                        'default' => 5,
+                                    ],
+                                ],
+                                [
+                                    'handle' => 'order_by',
+                                    'field' => [
+                                        'type' => 'text',
+                                        'display' => __('Order By'),
+                                        'instructions' => __('statamic::messages.widget_collection_order_by_instructions'),
+                                        'default' => 'date:desc',
+                                    ],
+                                ],
+                                [
+                                    'handle' => 'show_table_header',
+                                    'field' => [
+                                        'type' => 'toggle',
+                                        'display' => __('Show Table Header'),
+                                        'default' => false,
+                                    ],
+                                ],
+                                [
+                                    'handle' => 'fields',
+                                    'field' => [
+                                        'type' => 'list',
+                                        'display' => __('Fields'),
+                                        'instructions' => __('statamic::messages.widget_collection_fields_instructions'),
+                                        'default' => ['title'],
+                                    ],
+                                ],
+                                ...$this->commonBlueprintFields(),
+                            ],
+                        ],
+                    ],
+                ],
+            ],
+        ]);
+    }
+
     public function component()
     {
         $collection = $this->config('collection');
diff --git a/src/Widgets/Template.php b/src/Widgets/Template.php
index 2a2e53c7ac8..ad49cf4efa7 100644
--- a/src/Widgets/Template.php
+++ b/src/Widgets/Template.php
@@ -2,8 +2,48 @@
 
 namespace Statamic\Widgets;
 
+use Statamic\Facades\Blueprint;
+
+use function Statamic\trans as __;
+
 class Template extends Widget
 {
+    public static function description(): ?string
+    {
+        return __('statamic::messages.widget_template_description');
+    }
+
+    public static function icon(): string
+    {
+        return 'template-theme-design-layout';
+    }
+
+    public function blueprint(): \Statamic\Fields\Blueprint
+    {
+        return Blueprint::make()->setContents([
+            'tabs' => [
+                'main' => [
+                    'sections' => [
+                        [
+                            'fields' => [
+                                [
+                                    'handle' => 'template',
+                                    'field' => [
+                                        'type' => 'text',
+                                        'display' => __('Template'),
+                                        'instructions' => __('statamic::messages.widget_template_template_instructions'),
+                                        'validate' => 'required',
+                                    ],
+                                ],
+                                ...$this->commonBlueprintFields(),
+                            ],
+                        ],
+                    ],
+                ],
+            ],
+        ]);
+    }
+
     /**
      * The HTML that should be shown in the widget.
      *
diff --git a/src/Widgets/Updater.php b/src/Widgets/Updater.php
index 16d709155ad..a0bfacc7245 100644
--- a/src/Widgets/Updater.php
+++ b/src/Widgets/Updater.php
@@ -7,8 +7,20 @@
 use Statamic\Facades\Addon;
 use Statamic\Facades\User;
 
+use function Statamic\trans as __;
+
 class Updater extends Widget
 {
+    public static function description(): ?string
+    {
+        return __('statamic::messages.widget_updater_description');
+    }
+
+    public static function icon(): string
+    {
+        return 'updates';
+    }
+
     public function component()
     {
         if (! User::current()->can('view updates')) {
diff --git a/src/Widgets/Widget.php b/src/Widgets/Widget.php
index 39c6b21d0b8..832f5ff6a1e 100644
--- a/src/Widgets/Widget.php
+++ b/src/Widgets/Widget.php
@@ -6,6 +6,7 @@
 use Statamic\Extend\HasHandle;
 use Statamic\Extend\HasTitle;
 use Statamic\Extend\RegistersItself;
+use Statamic\Facades\Blueprint;
 use Statamic\Support\Str;
 
 abstract class Widget
@@ -18,13 +19,6 @@ abstract class Widget
 
     protected $config;
 
-    /**
-     * Get config for use within widget.
-     *
-     * @param  string|null  $key
-     * @param  mixed  $default
-     * @return string|\Illuminate\Support\Collection
-     */
     public function config($key = null, $default = null)
     {
         if (is_null($key)) {
@@ -34,26 +28,69 @@ public function config($key = null, $default = null)
         return $this->config[$key] ?? $default;
     }
 
-    /**
-     * Set config when loading widget.
-     *
-     * @param  array  $config
-     */
     public function setConfig($config)
     {
         $this->config = $config ?? [];
     }
 
-    /**
-     * Get container handle.
-     *
-     * @return string
-     */
     public static function handle()
     {
         return Str::removeRight(static::traitHandle(), '_widget');
     }
 
+    public static function description(): ?string
+    {
+        return null;
+    }
+
+    public static function icon(): string
+    {
+        return 'generic-widget';
+    }
+
+    public function blueprint(): \Statamic\Fields\Blueprint
+    {
+        return Blueprint::make()->setContents([
+            'tabs' => [
+                'main' => [
+                    'sections' => [
+                        ['fields' => $this->commonBlueprintFields()],
+                    ],
+                ],
+            ],
+        ]);
+    }
+
+    protected function commonBlueprintFields(): array
+    {
+        return [
+            [
+                'handle' => 'width',
+                'field' => [
+                    'type' => 'select',
+                    'display' => __('Width'),
+                    'options' => [
+                        'sm' => __('Small'),
+                        'md' => __('Medium'),
+                        'lg' => __('Large'),
+                        'full' => __('Full'),
+                    ],
+                    'default' => 'md',
+                    'clearable' => false,
+                    'localizable' => false,
+                ],
+            ],
+            [
+                'handle' => 'classes',
+                'field' => [
+                    'type' => 'text',
+                    'display' => __('Classes'),
+                    'instructions' => __('statamic::messages.widget_classes_instructions'),
+                ],
+            ],
+        ];
+    }
+
     public function component()
     {
         //
diff --git a/tests/Feature/CP/DashboardWidgetsControllerTest.php b/tests/Feature/CP/DashboardWidgetsControllerTest.php
new file mode 100644
index 00000000000..e06a04de1e7
--- /dev/null
+++ b/tests/Feature/CP/DashboardWidgetsControllerTest.php
@@ -0,0 +1,123 @@
+<?php
+
+namespace Tests\Feature\CP;
+
+use PHPUnit\Framework\Attributes\Test;
+use Statamic\Facades\User;
+use Tests\PreventSavingStacheItemsToDisk;
+use Tests\TestCase;
+
+class DashboardWidgetsControllerTest extends TestCase
+{
+    use PreventSavingStacheItemsToDisk;
+
+    #[Test]
+    public function it_lists_available_widgets()
+    {
+        $user = User::make()->makeSuper()->save();
+
+        $response = $this->actingAs($user)
+            ->getJson(cp_route('dashboard.widgets.meta'))
+            ->assertOk()
+            ->json();
+
+        $handles = collect($response)->pluck('handle')->all();
+
+        $this->assertContains('collection', $handles);
+        $this->assertContains('updater', $handles);
+        $this->assertContains('template', $handles);
+
+        $collection = collect($response)->firstWhere('handle', 'collection');
+        $this->assertArrayHasKey('blueprint', $collection);
+        $this->assertArrayHasKey('meta', $collection);
+        $this->assertArrayHasKey('defaults', $collection);
+        $this->assertArrayHasKey('icon', $collection);
+        $this->assertArrayHasKey('title', $collection);
+    }
+
+    #[Test]
+    public function it_requires_access_cp_for_meta()
+    {
+        $this->getJson(cp_route('dashboard.widgets.meta'))->assertUnauthorized();
+    }
+
+    #[Test]
+    public function it_saves_widgets_to_user_preference()
+    {
+        $user = User::make()->makeSuper()->save();
+
+        $payload = [
+            'widgets' => [
+                ['type' => 'collection', 'collection' => 'pages', 'limit' => 5],
+                ['type' => 'updater'],
+            ],
+        ];
+
+        $this->actingAs($user)
+            ->patchJson(cp_route('dashboard.widgets.update'), $payload)
+            ->assertNoContent();
+
+        $saved = $user->fresh()->getPreference('widgets');
+
+        $this->assertIsArray($saved);
+        $this->assertCount(2, $saved);
+        $this->assertEquals('collection', $saved[0]['type']);
+        $this->assertEquals('updater', $saved[1]['type']);
+    }
+
+    #[Test]
+    public function it_processes_fieldtype_values_when_saving()
+    {
+        // The collections fieldtype (max_items: 1) sends an array from the frontend.
+        // It should be processed to a string before being stored.
+        $user = User::make()->makeSuper()->save();
+
+        $this->actingAs($user)
+            ->patchJson(cp_route('dashboard.widgets.update'), [
+                'widgets' => [
+                    ['type' => 'collection', 'collection' => ['pages']],
+                ],
+            ])
+            ->assertNoContent();
+
+        $saved = $user->fresh()->getPreference('widgets');
+
+        $this->assertEquals('pages', $saved[0]['collection']);
+    }
+
+    #[Test]
+    public function it_filters_out_unknown_widget_types()
+    {
+        $user = User::make()->makeSuper()->save();
+
+        $this->actingAs($user)
+            ->patchJson(cp_route('dashboard.widgets.update'), [
+                'widgets' => [
+                    ['type' => 'collection'],
+                    ['type' => 'i_do_not_exist'],
+                ],
+            ])
+            ->assertNoContent();
+
+        $saved = $user->fresh()->getPreference('widgets');
+
+        $this->assertCount(1, $saved);
+        $this->assertEquals('collection', $saved[0]['type']);
+    }
+
+    #[Test]
+    public function it_removes_widget_preference()
+    {
+        $user = User::make()->makeSuper()->preferences([
+            'widgets' => [['type' => 'collection']],
+        ])->save();
+
+        $this->assertNotNull($user->getPreference('widgets'));
+
+        $this->actingAs($user)
+            ->deleteJson(cp_route('dashboard.widgets.destroy'))
+            ->assertNoContent();
+
+        $this->assertNull($user->fresh()->getPreference('widgets'));
+    }
+}

From 2b008c5faba3f8a0636ef1c4d3a1f912ed7ab34b Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 19 May 2026 15:30:23 -0400
Subject: [PATCH 02/12] fallback icon

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

diff --git a/src/Widgets/Widget.php b/src/Widgets/Widget.php
index 832f5ff6a1e..bae6d959891 100644
--- a/src/Widgets/Widget.php
+++ b/src/Widgets/Widget.php
@@ -45,7 +45,7 @@ public static function description(): ?string
 
     public static function icon(): string
     {
-        return 'generic-widget';
+        return 'code-block';
     }
 
     public function blueprint(): \Statamic\Fields\Blueprint

From f931adb0c1b034dfbd4776fed2bf72ffdd0e6f96 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 19 May 2026 15:30:36 -0400
Subject: [PATCH 03/12] avoid separate edit view

---
 .../dashboard/WidgetEditOverlay.vue           |  55 ++++++++
 .../js/components/dashboard/WidgetTile.vue    |  48 -------
 resources/js/components/ui/Widget.vue         |   3 +-
 resources/js/pages/Dashboard.vue              | 123 ++++++++++--------
 4 files changed, 128 insertions(+), 101 deletions(-)
 create mode 100644 resources/js/components/dashboard/WidgetEditOverlay.vue
 delete mode 100644 resources/js/components/dashboard/WidgetTile.vue

diff --git a/resources/js/components/dashboard/WidgetEditOverlay.vue b/resources/js/components/dashboard/WidgetEditOverlay.vue
new file mode 100644
index 00000000000..0d02dbddb1a
--- /dev/null
+++ b/resources/js/components/dashboard/WidgetEditOverlay.vue
@@ -0,0 +1,55 @@
+<script setup>
+import { Icon } from '@/components/ui';
+import { computed } from 'vue';
+
+const props = defineProps({
+    config: { type: Object, required: true },
+    meta: { type: Object, default: null },
+});
+
+const emit = defineEmits(['configure', 'remove', 'update:width']);
+
+const widthOptions = ['sm', 'md', 'lg', 'full'];
+const currentWidth = computed(() => props.config.width ?? 'md');
+</script>
+
+<template>
+    <div class="absolute inset-0 z-10 rounded-lg ring-2 ring-inset ring-blue-500/40">
+        <div class="absolute inset-x-0 top-0 flex items-center gap-1 px-2 py-2 rounded-t-lg bg-gray-900/80 backdrop-blur-sm">
+            <Icon name="handles" class="dashboard-widget-handle cursor-grab text-white size-4 shrink-0 drop-shadow-sm" />
+            <Icon :name="meta?.icon ?? 'code-block'" class="size-4 text-white/70 shrink-0" />
+            <span class="text-sm text-white font-medium truncate min-w-0">{{ meta?.title ?? config.type }}</span>
+
+            <div class="flex-1 min-w-2" />
+
+            <div class="flex items-center text-xs font-medium rounded overflow-hidden border border-white/20">
+                <button
+                    v-for="opt in widthOptions"
+                    :key="opt"
+                    type="button"
+                    class="px-2 py-1 text-white/70 hover:text-white hover:bg-white/10 transition-colors"
+                    :class="{ 'bg-white/25 !text-white': currentWidth === opt }"
+                    @click="emit('update:width', opt)"
+                >{{ opt.charAt(0).toUpperCase() + opt.slice(1) }}</button>
+            </div>
+
+            <button
+                type="button"
+                class="p-1.5 rounded text-white hover:bg-white/20 transition-colors"
+                :aria-label="__('Configure')"
+                @click="emit('configure')"
+            >
+                <Icon name="configure" class="size-4 drop-shadow-sm" />
+            </button>
+
+            <button
+                type="button"
+                class="p-1.5 rounded text-white hover:bg-red-500/60 transition-colors"
+                :aria-label="__('Remove')"
+                @click="emit('remove')"
+            >
+                <Icon name="trash" class="size-4 drop-shadow-sm" />
+            </button>
+        </div>
+    </div>
+</template>
diff --git a/resources/js/components/dashboard/WidgetTile.vue b/resources/js/components/dashboard/WidgetTile.vue
deleted file mode 100644
index 73e4b7f049d..00000000000
--- a/resources/js/components/dashboard/WidgetTile.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<script setup>
-import { Button, Icon, Dropdown, DropdownMenu, DropdownItem } from '@/components/ui';
-import { computed } from 'vue';
-
-const props = defineProps({
-    config: { type: Object, required: true },
-    meta: { type: Object, default: null },
-});
-
-const emit = defineEmits(['configure', 'remove', 'update:width']);
-
-const title = computed(() => props.meta?.title ?? props.config.type);
-const icon = computed(() => props.meta?.icon ?? 'generic-widget');
-const description = computed(() => props.meta?.description);
-const widthOptions = ['sm', 'md', 'lg', 'full'];
-const currentWidth = computed(() => props.config.width ?? 'md');
-</script>
-
-<template>
-    <div class="dashboard-widget-tile relative flex flex-col gap-2 rounded-lg border border-dashed border-gray-400 bg-gray-100 dark:bg-gray-800 dark:border-gray-700 p-4">
-        <div class="flex items-start gap-3">
-            <Icon name="handles" class="dashboard-widget-handle cursor-grab text-gray-500 size-4 shrink-0 mt-1" />
-            <Icon :name="icon" class="size-5 text-gray-500 shrink-0 mt-1" />
-            <div class="flex-1 min-w-0 cursor-pointer" @click="emit('configure')">
-                <div class="font-medium truncate">{{ title }}</div>
-                <div v-if="description" class="text-xs text-gray-600 dark:text-gray-400 truncate">{{ description }}</div>
-            </div>
-
-            <Dropdown placement="bottom-end">
-                <template #trigger>
-                    <Button size="sm" icon="more-horizontal" variant="ghost" :aria-label="__('Width')" />
-                </template>
-                <DropdownMenu>
-                    <DropdownItem
-                        v-for="opt in widthOptions"
-                        :key="opt"
-                        :text="__(opt.charAt(0).toUpperCase() + opt.slice(1))"
-                        :icon="currentWidth === opt ? 'check' : undefined"
-                        @click="emit('update:width', opt)"
-                    />
-                </DropdownMenu>
-            </Dropdown>
-
-            <Button size="sm" icon="settings" variant="ghost" :aria-label="__('Configure')" @click="emit('configure')" />
-            <Button size="sm" icon="trash" variant="ghost" :aria-label="__('Remove')" @click="emit('remove')" />
-        </div>
-    </div>
-</template>
diff --git a/resources/js/components/ui/Widget.vue b/resources/js/components/ui/Widget.vue
index f4c9e791ed3..452e1ebafd2 100644
--- a/resources/js/components/ui/Widget.vue
+++ b/resources/js/components/ui/Widget.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { Card, Icon } from '@ui';
 import { Link } from '@inertiajs/vue3';
-import { useSlots, computed } from 'vue';
+import { useSlots, computed, onMounted } from 'vue';
 
 const props = defineProps({
     title: {type: String },
@@ -12,6 +12,7 @@ const props = defineProps({
 const slots = useSlots();
 const hasHeader = computed(() => Boolean(props.title || props.icon || slots.actions));
 
+onMounted(() => console.log('widget mounted'));
 </script>
 
 <template>
diff --git a/resources/js/pages/Dashboard.vue b/resources/js/pages/Dashboard.vue
index 04cdac67c9e..2faf06627bb 100644
--- a/resources/js/pages/Dashboard.vue
+++ b/resources/js/pages/Dashboard.vue
@@ -3,7 +3,7 @@ import Head from '@/pages/layout/Head.vue';
 import DynamicHtmlRenderer from '@/components/DynamicHtmlRenderer.vue';
 import { Icon, Button, EmptyStateMenu, EmptyStateItem, DocsCallout } from '@ui';
 import { SortableList } from '@/components/sortable/Sortable.js';
-import WidgetTile from '@/components/dashboard/WidgetTile.vue';
+import WidgetEditOverlay from '@/components/dashboard/WidgetEditOverlay.vue';
 import WidgetPicker from '@/components/dashboard/WidgetPicker.vue';
 import WidgetConfigStack from '@/components/dashboard/WidgetConfigStack.vue';
 import useArchitecturalBackground from '@/pages/layout/architectural-background.js';
@@ -20,7 +20,7 @@ export default {
         EmptyStateItem,
         DocsCallout,
         SortableList,
-        WidgetTile,
+        WidgetEditOverlay,
         WidgetPicker,
         WidgetConfigStack,
     },
@@ -40,7 +40,7 @@ export default {
     data() {
         return {
             editing: false,
-            draftWidgets: [],
+            draftItems: [],
             availableWidgets: null,
             loadingMeta: false,
             picking: false,
@@ -51,18 +51,27 @@ export default {
 
     computed: {
         widgetsMetaByHandle() {
-            if (! this.availableWidgets) return {};
+            if (!this.availableWidgets) return {};
             return Object.fromEntries(this.availableWidgets.map((w) => [w.handle, w]));
         },
 
         configuringWidget() {
             if (this.configuringIndex === null) return null;
-            return this.draftWidgets[this.configuringIndex] || null;
+            return this.draftItems[this.configuringIndex]?.config || null;
         },
 
         configuringMeta() {
             return this.configuringWidget ? this.widgetsMetaByHandle[this.configuringWidget.type] : null;
         },
+
+        // Unified widget list used in both view and edit mode.
+        // Using the same key (index) in both modes prevents widget remounting when toggling.
+        unifiedWidgets() {
+            if (this.editing) {
+                return this.draftItems.map((item) => ({ config: item.config, display: item.display }));
+            }
+            return this.widgets.map((widget) => ({ config: null, display: widget }));
+        },
     },
 
     created() {
@@ -70,8 +79,8 @@ export default {
     },
 
     methods: {
-        classes(widget) {
-            return `${widget.classes ?? ''} ${this.tailwindWidthClass(widget.width)}`;
+        classes(source) {
+            return `${source?.classes ?? ''} ${this.tailwindWidthClass(source?.width)}`;
         },
 
         tailwindWidthClass(width) {
@@ -88,14 +97,17 @@ export default {
         },
 
         startEditing() {
-            this.draftWidgets = clone(this.widgetConfigs);
+            this.draftItems = this.widgetConfigs.map((config, i) => ({
+                config: clone(config),
+                display: this.widgets[i] || null,
+            }));
             this.editing = true;
             this.ensureMetaLoaded();
         },
 
         cancelEditing() {
             this.editing = false;
-            this.draftWidgets = [];
+            this.draftItems = [];
         },
 
         ensureMetaLoaded() {
@@ -114,9 +126,9 @@ export default {
 
         widgetPicked(widget) {
             const newConfig = { type: widget.handle, ...(widget.defaults || {}) };
-            this.draftWidgets.push(newConfig);
+            this.draftItems.push({ config: newConfig, display: null });
             this.picking = false;
-            this.configuringIndex = this.draftWidgets.length - 1;
+            this.configuringIndex = this.draftItems.length - 1;
         },
 
         configureWidget(index) {
@@ -125,21 +137,33 @@ export default {
 
         widgetConfigSaved(updated) {
             if (this.configuringIndex === null) return;
-            this.draftWidgets.splice(this.configuringIndex, 1, updated);
+            const existing = this.draftItems[this.configuringIndex];
+            this.draftItems.splice(this.configuringIndex, 1, { ...existing, config: updated });
             this.configuringIndex = null;
         },
 
         removeWidget(index) {
-            this.draftWidgets.splice(index, 1);
+            if (this.configuringIndex === index) {
+                this.configuringIndex = null;
+            } else if (this.configuringIndex !== null && this.configuringIndex > index) {
+                this.configuringIndex--;
+            }
+            this.draftItems.splice(index, 1);
         },
 
         updateWidth(index, width) {
-            this.draftWidgets[index] = { ...this.draftWidgets[index], width };
+            const item = this.draftItems[index];
+            this.draftItems.splice(index, 1, { ...item, config: { ...item.config, width } });
+        },
+
+        onSort(sortedItems) {
+            if (!this.editing) return;
+            this.draftItems = sortedItems.map((item) => ({ config: item.config, display: item.display }));
         },
 
         save() {
             this.saving = true;
-            this.$axios.patch(this.widgetUpdateUrl, { widgets: this.draftWidgets })
+            this.$axios.patch(this.widgetUpdateUrl, { widgets: this.draftItems.map(i => i.config) })
                 .then(() => {
                     this.editing = false;
                     router.reload();
@@ -147,7 +171,6 @@ export default {
                 .catch(() => this.$toast.error(__('Something went wrong')))
                 .finally(() => { this.saving = false; });
         },
-
     },
 };
 </script>
@@ -155,36 +178,50 @@ export default {
 <template>
     <Head :title="__('Dashboard')" />
 
-    <template v-if="editing">
+    <template v-if="editing || widgets.length">
         <ui-header :title="__('Dashboard')" icon="dashboard">
-            <Button :text="__('Add Widget')" icon="plus" @click="openPicker" />
-            <Button :text="__('Cancel')" @click="cancelEditing" />
-            <Button :text="__('Save')" variant="primary" :disabled="saving" @click="save" />
+            <template v-if="editing">
+                <Button :text="__('Add Widget')" icon="plus" @click="openPicker" />
+                <Button :text="__('Cancel')" @click="cancelEditing" />
+                <Button :text="__('Save')" variant="primary" :disabled="saving" @click="save" />
+            </template>
+            <Button v-else-if="canEditWidgets" :text="__('Edit')" icon="edit" @click="startEditing" />
         </ui-header>
 
         <SortableList
-            v-model="draftWidgets"
+            :model-value="unifiedWidgets"
             item-class="dashboard-widget-sortable"
             handle-class="dashboard-widget-handle"
-            :vertical="true"
+            :disabled="!editing"
             :mirror="false"
             :distance="5"
+            @update:model-value="onSort"
         >
-            <div class="flex flex-col gap-3">
+            <div class="widgets @container/widgets flex flex-wrap gap-y-6 -mx-2 sm:-mx-3">
                 <div
-                    v-for="(config, index) in draftWidgets"
-                    :key="`${config.type}-${index}`"
-                    class="dashboard-widget-sortable"
+                    v-for="(item, index) in unifiedWidgets"
+                    :key="index"
+                    class="dashboard-widget-sortable px-3"
+                    :class="[classes(item.config ?? item.display), { 'starting-style-transition': !editing }]"
                 >
-                    <WidgetTile
-                        :config="config"
-                        :meta="widgetsMetaByHandle[config.type]"
-                        @configure="configureWidget(index)"
-                        @remove="removeWidget(index)"
-                        @update:width="updateWidth(index, $event)"
-                    />
+                    <div class="relative">
+                        <WidgetEditOverlay
+                            v-if="editing && item.config"
+                            :config="item.config"
+                            :meta="widgetsMetaByHandle[item.config.type]"
+                            @configure="configureWidget(index)"
+                            @remove="removeWidget(index)"
+                            @update:width="updateWidth(index, $event)"
+                        />
+                        <component v-if="item.display?.component" :is="item.display.component.name" v-bind="item.display.component.props" />
+                        <DynamicHtmlRenderer v-else-if="item.display?.html" :html="item.display.html" />
+                        <div v-else-if="editing" class="rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800/50 p-8 flex flex-col items-center justify-center gap-2 text-gray-500 dark:text-gray-400 min-h-32">
+                            <Icon :name="widgetsMetaByHandle[item.config?.type]?.icon ?? 'code-block'" class="size-8 opacity-50" />
+                            <span class="text-sm">{{ widgetsMetaByHandle[item.config?.type]?.title ?? item.config?.type }}</span>
+                        </div>
+                    </div>
                 </div>
-                <div v-if="!draftWidgets.length" class="text-center text-gray-500 py-12 border border-dashed rounded-lg dark:border-gray-700">
+                <div v-if="editing && !draftItems.length" class="w-full text-center text-gray-500 py-12 border border-dashed rounded-lg dark:border-gray-700">
                     {{ __('No widgets yet. Click "Add Widget" to get started.') }}
                 </div>
             </div>
@@ -204,24 +241,6 @@ export default {
             @closed="configuringIndex = null"
             @saved="widgetConfigSaved"
         />
-
-    </template>
-
-    <template v-else-if="widgets.length">
-        <ui-header :title="__('Dashboard')" icon="dashboard">
-            <Button v-if="canEditWidgets" :text="__('Edit')" icon="edit" @click="startEditing" />
-        </ui-header>
-
-        <div class="widgets @container/widgets flex flex-wrap gap-y-6 -mx-2 sm:-mx-3">
-            <div
-                v-for="widget in widgets"
-                class="px-3 starting-style-transition"
-                :class="classes(widget)"
-            >
-                <component v-if="widget.component" :is="widget.component.name" v-bind="widget.component.props" />
-                <DynamicHtmlRenderer v-else :html="widget.html" />
-            </div>
-        </div>
     </template>
 
     <template v-else>

From 20b07cf3a7e7ec4db9863e2b1ca56a8624ccf4e6 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 19 May 2026 15:33:28 -0400
Subject: [PATCH 04/12] use existing width selector

---
 .../dashboard/WidgetEditOverlay.vue           | 26 ++++++++++---------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/resources/js/components/dashboard/WidgetEditOverlay.vue b/resources/js/components/dashboard/WidgetEditOverlay.vue
index 0d02dbddb1a..342634eb5c6 100644
--- a/resources/js/components/dashboard/WidgetEditOverlay.vue
+++ b/resources/js/components/dashboard/WidgetEditOverlay.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { Icon } from '@/components/ui';
+import WidthSelector from '@/components/fields/WidthSelector.vue';
 import { computed } from 'vue';
 
 const props = defineProps({
@@ -9,8 +10,14 @@ const props = defineProps({
 
 const emit = defineEmits(['configure', 'remove', 'update:width']);
 
-const widthOptions = ['sm', 'md', 'lg', 'full'];
-const currentWidth = computed(() => props.config.width ?? 'md');
+const widthToPercent = { sm: 25, md: 50, lg: 75, full: 100 };
+const percentToWidth = { 25: 'sm', 50: 'md', 75: 'lg', 100: 'full' };
+
+const currentWidth = computed(() => widthToPercent[props.config.width ?? 'md']);
+
+function onWidthUpdate(value) {
+    emit('update:width', percentToWidth[value]);
+}
 </script>
 
 <template>
@@ -22,16 +29,11 @@ const currentWidth = computed(() => props.config.width ?? 'md');
 
             <div class="flex-1 min-w-2" />
 
-            <div class="flex items-center text-xs font-medium rounded overflow-hidden border border-white/20">
-                <button
-                    v-for="opt in widthOptions"
-                    :key="opt"
-                    type="button"
-                    class="px-2 py-1 text-white/70 hover:text-white hover:bg-white/10 transition-colors"
-                    :class="{ 'bg-white/25 !text-white': currentWidth === opt }"
-                    @click="emit('update:width', opt)"
-                >{{ opt.charAt(0).toUpperCase() + opt.slice(1) }}</button>
-            </div>
+            <WidthSelector
+                :model-value="currentWidth"
+                :initial-widths="[25, 50, 75, 100]"
+                @update:model-value="onWidthUpdate"
+            />
 
             <button
                 type="button"

From fe9d3ed06e0d5ef91bdf0b1f0f5f88dece05aff4 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 19 May 2026 15:39:58 -0400
Subject: [PATCH 05/12] adjust drag/drop

---
 resources/js/components/dashboard/WidgetEditOverlay.vue | 2 +-
 resources/js/pages/Dashboard.vue                        | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/dashboard/WidgetEditOverlay.vue b/resources/js/components/dashboard/WidgetEditOverlay.vue
index 342634eb5c6..6a66c794f65 100644
--- a/resources/js/components/dashboard/WidgetEditOverlay.vue
+++ b/resources/js/components/dashboard/WidgetEditOverlay.vue
@@ -21,7 +21,7 @@ function onWidthUpdate(value) {
 </script>
 
 <template>
-    <div class="absolute inset-0 z-10 rounded-lg ring-2 ring-inset ring-blue-500/40">
+    <div class="absolute inset-0 z-[2] rounded-lg ring-2 ring-inset ring-blue-500/40">
         <div class="absolute inset-x-0 top-0 flex items-center gap-1 px-2 py-2 rounded-t-lg bg-gray-900/80 backdrop-blur-sm">
             <Icon name="handles" class="dashboard-widget-handle cursor-grab text-white size-4 shrink-0 drop-shadow-sm" />
             <Icon :name="meta?.icon ?? 'code-block'" class="size-4 text-white/70 shrink-0" />
diff --git a/resources/js/pages/Dashboard.vue b/resources/js/pages/Dashboard.vue
index 2faf06627bb..da03ae65f5a 100644
--- a/resources/js/pages/Dashboard.vue
+++ b/resources/js/pages/Dashboard.vue
@@ -193,7 +193,8 @@ export default {
             item-class="dashboard-widget-sortable"
             handle-class="dashboard-widget-handle"
             :disabled="!editing"
-            :mirror="false"
+            :animate="false"
+            :constrain-dimensions="true"
             :distance="5"
             @update:model-value="onSort"
         >

From bf58051a02a5d65853bb21e31fac51bba84479c7 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 19 May 2026 15:43:35 -0400
Subject: [PATCH 06/12] oops

---
 resources/js/components/ui/Widget.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/resources/js/components/ui/Widget.vue b/resources/js/components/ui/Widget.vue
index 452e1ebafd2..9665e5f104c 100644
--- a/resources/js/components/ui/Widget.vue
+++ b/resources/js/components/ui/Widget.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { Card, Icon } from '@ui';
 import { Link } from '@inertiajs/vue3';
-import { useSlots, computed, onMounted } from 'vue';
+import { useSlots, computed } from 'vue';
 
 const props = defineProps({
     title: {type: String },
@@ -11,8 +11,6 @@ const props = defineProps({
 
 const slots = useSlots();
 const hasHeader = computed(() => Boolean(props.title || props.icon || slots.actions));
-
-onMounted(() => console.log('widget mounted'));
 </script>
 
 <template>

From 8fdfd66a3822f6ede7f511cfe96444c6960cd355 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 19 May 2026 15:46:16 -0400
Subject: [PATCH 07/12] remove stack padding

---
 resources/js/components/dashboard/WidgetConfigStack.vue | 1 +
 resources/js/components/dashboard/WidgetPicker.vue      | 1 +
 2 files changed, 2 insertions(+)

diff --git a/resources/js/components/dashboard/WidgetConfigStack.vue b/resources/js/components/dashboard/WidgetConfigStack.vue
index d3ba5225a65..56b7bc6d4ef 100644
--- a/resources/js/components/dashboard/WidgetConfigStack.vue
+++ b/resources/js/components/dashboard/WidgetConfigStack.vue
@@ -49,6 +49,7 @@ export default {
     <Stack
         size="narrow"
         open
+        inset
         :title="title"
         @update:open="$emit('closed')"
     >
diff --git a/resources/js/components/dashboard/WidgetPicker.vue b/resources/js/components/dashboard/WidgetPicker.vue
index 1cbc3be9c23..00e0eb1739a 100644
--- a/resources/js/components/dashboard/WidgetPicker.vue
+++ b/resources/js/components/dashboard/WidgetPicker.vue
@@ -12,6 +12,7 @@ const emit = defineEmits(['closed', 'picked']);
     <Stack
         size="narrow"
         open
+        inset
         :title="__('Add Widget')"
         @update:open="emit('closed')"
     >

From 0e3c087407cd15dfffef0bba9b71b6e45141fe65 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 19 May 2026 16:00:56 -0400
Subject: [PATCH 08/12] render fields directly - assume there will only be one
 section.

---
 resources/js/components/dashboard/WidgetConfigStack.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/dashboard/WidgetConfigStack.vue b/resources/js/components/dashboard/WidgetConfigStack.vue
index 56b7bc6d4ef..19bdcdca15d 100644
--- a/resources/js/components/dashboard/WidgetConfigStack.vue
+++ b/resources/js/components/dashboard/WidgetConfigStack.vue
@@ -1,8 +1,8 @@
 <script>
-import { Stack, Button, PublishContainer, PublishTabs, Icon } from '@/components/ui';
+import { Stack, Button, PublishContainer, PublishFieldsProvider, PublishFields, Icon } from '@/components/ui';
 
 export default {
-    components: { Stack, Button, PublishContainer, PublishTabs, Icon },
+    components: { Stack, Button, PublishContainer, PublishFieldsProvider, PublishFields, Icon },
 
     emits: ['closed', 'saved'],
 
@@ -66,7 +66,9 @@ export default {
                         :errors="errors"
                         v-model="values"
                     >
-                        <PublishTabs />
+                        <PublishFieldsProvider :fields="blueprint.tabs[0].sections[0].fields">
+                            <PublishFields />
+                        </PublishFieldsProvider>
                     </PublishContainer>
                 </div>
                 <div class="border-t bg-gray-200 dark:bg-gray-700 dark:border-gray-900 p-4 flex justify-end gap-2">

From 4af11de849e1deaabbd44232cf3ba57b590d49b2 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 19 May 2026 16:05:40 -0400
Subject: [PATCH 09/12] composition api

---
 .../dashboard/WidgetConfigStack.vue           |  63 ++---
 resources/js/pages/Dashboard.vue              | 264 ++++++++----------
 2 files changed, 143 insertions(+), 184 deletions(-)

diff --git a/resources/js/components/dashboard/WidgetConfigStack.vue b/resources/js/components/dashboard/WidgetConfigStack.vue
index 19bdcdca15d..c9e3ef32653 100644
--- a/resources/js/components/dashboard/WidgetConfigStack.vue
+++ b/resources/js/components/dashboard/WidgetConfigStack.vue
@@ -1,48 +1,31 @@
-<script>
+<script setup>
+import { ref, computed, getCurrentInstance } from 'vue';
 import { Stack, Button, PublishContainer, PublishFieldsProvider, PublishFields, Icon } from '@/components/ui';
 
-export default {
-    components: { Stack, Button, PublishContainer, PublishFieldsProvider, PublishFields, Icon },
+const props = defineProps({
+    config: { type: Object, required: true },
+    meta: { type: Object, default: null },
+});
 
-    emits: ['closed', 'saved'],
+const emit = defineEmits(['closed', 'saved']);
 
-    props: {
-        config: { type: Object, required: true },
-        meta: { type: Object, default: null },
-    },
+const blueprint = computed(() => props.meta?.blueprint);
+const title = computed(() => props.meta?.title ?? props.config.type);
 
-    data() {
-        return {
-            values: this.initialValues(),
-            fieldMeta: this.meta?.meta || {},
-            errors: {},
-            name: `dashboard-widget-${this.config.type}-${Math.random().toString(36).slice(2, 8)}`,
-        };
-    },
+function initialValues() {
+    const defaults = props.meta?.defaults ?? {};
+    const { type, ...rest } = props.config;
+    return { ...defaults, ...rest };
+}
 
-    computed: {
-        blueprint() {
-            return this.meta?.blueprint;
-        },
+const values = ref(initialValues());
+const fieldMeta = ref(props.meta?.meta || {});
+const errors = ref({});
+const name = `dashboard-widget-${props.config.type}-${Math.random().toString(36).slice(2, 8)}`;
 
-        title() {
-            return this.meta?.title ?? this.config.type;
-        },
-    },
-
-    methods: {
-        initialValues() {
-            const defaults = this.meta?.defaults ?? {};
-            const { type, ...rest } = this.config;
-            return { ...defaults, ...rest };
-        },
-
-        save() {
-            const next = { type: this.config.type, ...this.values };
-            this.$emit('saved', next);
-        },
-    },
-};
+function save() {
+    emit('saved', { type: props.config.type, ...values.value });
+}
 </script>
 
 <template>
@@ -51,7 +34,7 @@ export default {
         open
         inset
         :title="title"
-        @update:open="$emit('closed')"
+        @update:open="emit('closed')"
     >
         <div class="flex flex-col h-full">
             <div v-if="!blueprint" class="flex-1 flex items-center justify-center">
@@ -72,7 +55,7 @@ export default {
                     </PublishContainer>
                 </div>
                 <div class="border-t bg-gray-200 dark:bg-gray-700 dark:border-gray-900 p-4 flex justify-end gap-2">
-                    <Button variant="ghost" :text="__('Cancel')" @click="$emit('closed')" />
+                    <Button variant="ghost" :text="__('Cancel')" @click="emit('closed')" />
                     <Button variant="primary" :text="__('Apply')" @click="save" />
                 </div>
             </template>
diff --git a/resources/js/pages/Dashboard.vue b/resources/js/pages/Dashboard.vue
index da03ae65f5a..0b424d66bd3 100644
--- a/resources/js/pages/Dashboard.vue
+++ b/resources/js/pages/Dashboard.vue
@@ -1,4 +1,5 @@
-<script>
+<script setup>
+import { ref, computed, onMounted, getCurrentInstance } from 'vue';
 import Head from '@/pages/layout/Head.vue';
 import DynamicHtmlRenderer from '@/components/DynamicHtmlRenderer.vue';
 import { Icon, Button, EmptyStateMenu, EmptyStateItem, DocsCallout } from '@ui';
@@ -10,169 +11,144 @@ import useArchitecturalBackground from '@/pages/layout/architectural-background.
 import { router } from '@inertiajs/vue3';
 import { clone } from '@/bootstrap/globals.js';
 
-export default {
-    components: {
-        Head,
-        DynamicHtmlRenderer,
-        Icon,
-        Button,
-        EmptyStateMenu,
-        EmptyStateItem,
-        DocsCallout,
-        SortableList,
-        WidgetEditOverlay,
-        WidgetPicker,
-        WidgetConfigStack,
-    },
+const props = defineProps({
+    widgets: Array,
+    widgetConfigs: { type: Array, default: () => [] },
+    canEditWidgets: { type: Boolean, default: false },
+    widgetMetaUrl: String,
+    widgetUpdateUrl: String,
+    pro: Boolean,
+    blueprintsUrl: String,
+    collectionsCreateUrl: String,
+    navigationCreateUrl: String,
+});
 
-    props: {
-        widgets: Array,
-        widgetConfigs: { type: Array, default: () => [] },
-        canEditWidgets: { type: Boolean, default: false },
-        widgetMetaUrl: String,
-        widgetUpdateUrl: String,
-        pro: Boolean,
-        blueprintsUrl: String,
-        collectionsCreateUrl: String,
-        navigationCreateUrl: String,
-    },
+const { $axios, $toast } = getCurrentInstance().appContext.config.globalProperties;
 
-    data() {
-        return {
-            editing: false,
-            draftItems: [],
-            availableWidgets: null,
-            loadingMeta: false,
-            picking: false,
-            configuringIndex: null,
-            saving: false,
-        };
-    },
+const editing = ref(false);
+const draftItems = ref([]);
+const availableWidgets = ref(null);
+const loadingMeta = ref(false);
+const picking = ref(false);
+const configuringIndex = ref(null);
+const saving = ref(false);
 
-    computed: {
-        widgetsMetaByHandle() {
-            if (!this.availableWidgets) return {};
-            return Object.fromEntries(this.availableWidgets.map((w) => [w.handle, w]));
-        },
+const widgetsMetaByHandle = computed(() => {
+    if (!availableWidgets.value) return {};
+    return Object.fromEntries(availableWidgets.value.map((w) => [w.handle, w]));
+});
 
-        configuringWidget() {
-            if (this.configuringIndex === null) return null;
-            return this.draftItems[this.configuringIndex]?.config || null;
-        },
+const configuringWidget = computed(() => {
+    if (configuringIndex.value === null) return null;
+    return draftItems.value[configuringIndex.value]?.config || null;
+});
 
-        configuringMeta() {
-            return this.configuringWidget ? this.widgetsMetaByHandle[this.configuringWidget.type] : null;
-        },
+const configuringMeta = computed(() => {
+    return configuringWidget.value ? widgetsMetaByHandle.value[configuringWidget.value.type] : null;
+});
 
-        // Unified widget list used in both view and edit mode.
-        // Using the same key (index) in both modes prevents widget remounting when toggling.
-        unifiedWidgets() {
-            if (this.editing) {
-                return this.draftItems.map((item) => ({ config: item.config, display: item.display }));
-            }
-            return this.widgets.map((widget) => ({ config: null, display: widget }));
-        },
-    },
+const unifiedWidgets = computed(() => {
+    if (editing.value) {
+        return draftItems.value.map((item) => ({ config: item.config, display: item.display }));
+    }
+    return props.widgets.map((widget) => ({ config: null, display: widget }));
+});
 
-    created() {
-        if (!this.widgets.length && !this.editing) useArchitecturalBackground();
-    },
+onMounted(() => {
+    if (!props.widgets.length && !editing.value) useArchitecturalBackground();
+});
 
-    methods: {
-        classes(source) {
-            return `${source?.classes ?? ''} ${this.tailwindWidthClass(source?.width)}`;
-        },
+function tailwindWidthClass(width) {
+    const sizes = {
+        sm: 'w-full @2xl:w-1/2 @4xl:w-1/3 @7xl:w-1/4',
+        md: 'w-full @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3',
+        lg: 'w-full @2xl:w-full @4xl:w-2/3 @7xl:w-3/4',
+        full: 'w-full',
+    };
+    const legacyMap = { 25: 'sm', 33: 'sm', 50: 'md', 66: 'md', 75: 'lg', 100: 'full' };
+    const size = typeof width === 'number' ? (legacyMap[width] ?? 'full') : width;
+    return sizes[size] ?? sizes.md;
+}
 
-        tailwindWidthClass(width) {
-            const sizes = {
-                sm: 'w-full @2xl:w-1/2 @4xl:w-1/3 @7xl:w-1/4',
-                md: 'w-full @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3',
-                lg: 'w-full @2xl:w-full @4xl:w-2/3 @7xl:w-3/4',
-                full: 'w-full',
-            };
+function classes(source) {
+    return `${source?.classes ?? ''} ${tailwindWidthClass(source?.width)}`;
+}
 
-            const legacyMap = { 25: 'sm', 33: 'sm', 50: 'md', 66: 'md', 75: 'lg', 100: 'full' };
-            const size = typeof width === 'number' ? (legacyMap[width] ?? 'full') : width;
-            return sizes[size] ?? sizes.md;
-        },
+function ensureMetaLoaded() {
+    if (availableWidgets.value || loadingMeta.value) return;
+    loadingMeta.value = true;
+    $axios.get(props.widgetMetaUrl)
+        .then((response) => { availableWidgets.value = response.data; })
+        .catch(() => $toast.error(__('Could not load widgets.')))
+        .finally(() => { loadingMeta.value = false; });
+}
 
-        startEditing() {
-            this.draftItems = this.widgetConfigs.map((config, i) => ({
-                config: clone(config),
-                display: this.widgets[i] || null,
-            }));
-            this.editing = true;
-            this.ensureMetaLoaded();
-        },
+function startEditing() {
+    draftItems.value = props.widgetConfigs.map((config, i) => ({
+        config: clone(config),
+        display: props.widgets[i] || null,
+    }));
+    editing.value = true;
+    ensureMetaLoaded();
+}
 
-        cancelEditing() {
-            this.editing = false;
-            this.draftItems = [];
-        },
+function cancelEditing() {
+    editing.value = false;
+    draftItems.value = [];
+}
 
-        ensureMetaLoaded() {
-            if (this.availableWidgets || this.loadingMeta) return;
-            this.loadingMeta = true;
-            this.$axios.get(this.widgetMetaUrl)
-                .then((response) => { this.availableWidgets = response.data; })
-                .catch(() => this.$toast.error(__('Could not load widgets.')))
-                .finally(() => { this.loadingMeta = false; });
-        },
+function openPicker() {
+    ensureMetaLoaded();
+    picking.value = true;
+}
 
-        openPicker() {
-            this.ensureMetaLoaded();
-            this.picking = true;
-        },
+function widgetPicked(widget) {
+    const newConfig = { type: widget.handle, ...(widget.defaults || {}) };
+    draftItems.value.push({ config: newConfig, display: null });
+    picking.value = false;
+    configuringIndex.value = draftItems.value.length - 1;
+}
 
-        widgetPicked(widget) {
-            const newConfig = { type: widget.handle, ...(widget.defaults || {}) };
-            this.draftItems.push({ config: newConfig, display: null });
-            this.picking = false;
-            this.configuringIndex = this.draftItems.length - 1;
-        },
+function configureWidget(index) {
+    configuringIndex.value = index;
+}
 
-        configureWidget(index) {
-            this.configuringIndex = index;
-        },
+function widgetConfigSaved(updated) {
+    if (configuringIndex.value === null) return;
+    const existing = draftItems.value[configuringIndex.value];
+    draftItems.value.splice(configuringIndex.value, 1, { ...existing, config: updated });
+    configuringIndex.value = null;
+}
 
-        widgetConfigSaved(updated) {
-            if (this.configuringIndex === null) return;
-            const existing = this.draftItems[this.configuringIndex];
-            this.draftItems.splice(this.configuringIndex, 1, { ...existing, config: updated });
-            this.configuringIndex = null;
-        },
+function removeWidget(index) {
+    if (configuringIndex.value === index) {
+        configuringIndex.value = null;
+    } else if (configuringIndex.value !== null && configuringIndex.value > index) {
+        configuringIndex.value--;
+    }
+    draftItems.value.splice(index, 1);
+}
 
-        removeWidget(index) {
-            if (this.configuringIndex === index) {
-                this.configuringIndex = null;
-            } else if (this.configuringIndex !== null && this.configuringIndex > index) {
-                this.configuringIndex--;
-            }
-            this.draftItems.splice(index, 1);
-        },
+function updateWidth(index, width) {
+    const item = draftItems.value[index];
+    draftItems.value.splice(index, 1, { ...item, config: { ...item.config, width } });
+}
 
-        updateWidth(index, width) {
-            const item = this.draftItems[index];
-            this.draftItems.splice(index, 1, { ...item, config: { ...item.config, width } });
-        },
+function onSort(sortedItems) {
+    if (!editing.value) return;
+    draftItems.value = sortedItems.map((item) => ({ config: item.config, display: item.display }));
+}
 
-        onSort(sortedItems) {
-            if (!this.editing) return;
-            this.draftItems = sortedItems.map((item) => ({ config: item.config, display: item.display }));
-        },
-
-        save() {
-            this.saving = true;
-            this.$axios.patch(this.widgetUpdateUrl, { widgets: this.draftItems.map(i => i.config) })
-                .then(() => {
-                    this.editing = false;
-                    router.reload();
-                })
-                .catch(() => this.$toast.error(__('Something went wrong')))
-                .finally(() => { this.saving = false; });
-        },
-    },
-};
+function save() {
+    saving.value = true;
+    $axios.patch(props.widgetUpdateUrl, { widgets: draftItems.value.map((i) => i.config) })
+        .then(() => {
+            editing.value = false;
+            router.reload();
+        })
+        .catch(() => $toast.error(__('Something went wrong')))
+        .finally(() => { saving.value = false; });
+}
 </script>
 
 <template>

From 1944141d03cae5104c9195eb00efa5e34f4c5e6d Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 19 May 2026 16:11:35 -0400
Subject: [PATCH 10/12] avoid descriptions

---
 resources/js/components/dashboard/WidgetPicker.vue  | 13 ++++---------
 .../Controllers/CP/DashboardWidgetsController.php   |  1 -
 src/Widgets/Collection.php                          |  5 -----
 src/Widgets/Template.php                            |  5 -----
 src/Widgets/Updater.php                             |  5 -----
 src/Widgets/Widget.php                              |  5 -----
 6 files changed, 4 insertions(+), 30 deletions(-)

diff --git a/resources/js/components/dashboard/WidgetPicker.vue b/resources/js/components/dashboard/WidgetPicker.vue
index 00e0eb1739a..46312d7a332 100644
--- a/resources/js/components/dashboard/WidgetPicker.vue
+++ b/resources/js/components/dashboard/WidgetPicker.vue
@@ -20,21 +20,16 @@ const emit = defineEmits(['closed', 'picked']);
             <div v-if="!widgets.length" class="text-center text-gray-500 py-8">
                 {{ __('No widgets available.') }}
             </div>
-            <div v-else class="grid grid-cols-1 gap-3">
+            <div v-else class="grid grid-cols-1 gap-1.5">
                 <button
                     v-for="widget in widgets"
                     :key="widget.handle"
                     type="button"
-                    class="text-start flex items-start gap-3 p-3 rounded-lg border bg-white dark:bg-gray-800 dark:border-gray-700 hover:border-blue-500 hover:shadow"
+                    class="flex items-center gap-2 w-full px-3 py-2.5 group bg-white dark:bg-gray-850 shadow-ui-sm rounded-xl border border-gray-200 dark:border-x-0 dark:border-b-0 dark:border-gray-700 cursor-pointer"
                     @click="emit('picked', widget)"
                 >
-                    <Icon :name="widget.icon" class="size-5 text-gray-500 shrink-0 mt-1" />
-                    <div class="flex-1 min-w-0">
-                        <div class="font-medium">{{ widget.title }}</div>
-                        <div v-if="widget.description" class="text-xs text-gray-600 dark:text-gray-400">
-                            {{ widget.description }}
-                        </div>
-                    </div>
+                    <Icon :name="widget.icon" class="size-5 shrink-0 text-gray-500 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-gray-100" />
+                    <span class="text-sm text-gray-700 dark:text-gray-300 group-hover:text-gray-900 dark:group-hover:text-gray-100">{{ widget.title }}</span>
                 </button>
             </div>
         </div>
diff --git a/src/Http/Controllers/CP/DashboardWidgetsController.php b/src/Http/Controllers/CP/DashboardWidgetsController.php
index 411b584fbdc..3248fd32cfb 100644
--- a/src/Http/Controllers/CP/DashboardWidgetsController.php
+++ b/src/Http/Controllers/CP/DashboardWidgetsController.php
@@ -23,7 +23,6 @@ public function meta()
             return [
                 'handle' => $handle,
                 'title' => $class::title(),
-                'description' => $class::description(),
                 'icon' => $class::icon(),
                 'blueprint' => $blueprint->toPublishArray(),
                 'meta' => $fields->meta(),
diff --git a/src/Widgets/Collection.php b/src/Widgets/Collection.php
index b1fcb5da920..7361e3ef571 100644
--- a/src/Widgets/Collection.php
+++ b/src/Widgets/Collection.php
@@ -14,11 +14,6 @@
 
 class Collection extends Widget
 {
-    public static function description(): ?string
-    {
-        return __('statamic::messages.widget_collection_description');
-    }
-
     public static function icon(): string
     {
         return 'collections';
diff --git a/src/Widgets/Template.php b/src/Widgets/Template.php
index ad49cf4efa7..54062c71b0d 100644
--- a/src/Widgets/Template.php
+++ b/src/Widgets/Template.php
@@ -8,11 +8,6 @@
 
 class Template extends Widget
 {
-    public static function description(): ?string
-    {
-        return __('statamic::messages.widget_template_description');
-    }
-
     public static function icon(): string
     {
         return 'template-theme-design-layout';
diff --git a/src/Widgets/Updater.php b/src/Widgets/Updater.php
index a0bfacc7245..1d3fe6a879a 100644
--- a/src/Widgets/Updater.php
+++ b/src/Widgets/Updater.php
@@ -11,11 +11,6 @@
 
 class Updater extends Widget
 {
-    public static function description(): ?string
-    {
-        return __('statamic::messages.widget_updater_description');
-    }
-
     public static function icon(): string
     {
         return 'updates';
diff --git a/src/Widgets/Widget.php b/src/Widgets/Widget.php
index bae6d959891..bb721439b2c 100644
--- a/src/Widgets/Widget.php
+++ b/src/Widgets/Widget.php
@@ -38,11 +38,6 @@ public static function handle()
         return Str::removeRight(static::traitHandle(), '_widget');
     }
 
-    public static function description(): ?string
-    {
-        return null;
-    }
-
     public static function icon(): string
     {
         return 'code-block';

From faa470118621e4ae9f21191507206893efdad87c Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 19 May 2026 16:18:33 -0400
Subject: [PATCH 11/12] Use a dropdown for the widget picker.

---
 .../js/components/dashboard/WidgetPicker.vue  | 43 +++++++------------
 resources/js/pages/Dashboard.vue              | 16 +------
 2 files changed, 17 insertions(+), 42 deletions(-)

diff --git a/resources/js/components/dashboard/WidgetPicker.vue b/resources/js/components/dashboard/WidgetPicker.vue
index 46312d7a332..28618f8d5a3 100644
--- a/resources/js/components/dashboard/WidgetPicker.vue
+++ b/resources/js/components/dashboard/WidgetPicker.vue
@@ -1,37 +1,26 @@
 <script setup>
-import { Stack, Icon, Button } from '@/components/ui';
+import { Dropdown, DropdownMenu, DropdownItem, Button } from '@/components/ui';
 
 const props = defineProps({
     widgets: { type: Array, required: true },
 });
 
-const emit = defineEmits(['closed', 'picked']);
+const emit = defineEmits(['picked']);
 </script>
 
 <template>
-    <Stack
-        size="narrow"
-        open
-        inset
-        :title="__('Add Widget')"
-        @update:open="emit('closed')"
-    >
-        <div class="p-4">
-            <div v-if="!widgets.length" class="text-center text-gray-500 py-8">
-                {{ __('No widgets available.') }}
-            </div>
-            <div v-else class="grid grid-cols-1 gap-1.5">
-                <button
-                    v-for="widget in widgets"
-                    :key="widget.handle"
-                    type="button"
-                    class="flex items-center gap-2 w-full px-3 py-2.5 group bg-white dark:bg-gray-850 shadow-ui-sm rounded-xl border border-gray-200 dark:border-x-0 dark:border-b-0 dark:border-gray-700 cursor-pointer"
-                    @click="emit('picked', widget)"
-                >
-                    <Icon :name="widget.icon" class="size-5 shrink-0 text-gray-500 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-gray-100" />
-                    <span class="text-sm text-gray-700 dark:text-gray-300 group-hover:text-gray-900 dark:group-hover:text-gray-100">{{ widget.title }}</span>
-                </button>
-            </div>
-        </div>
-    </Stack>
+    <Dropdown align="start">
+        <template #trigger>
+            <Button :text="__('Add Widget')" icon="plus" />
+        </template>
+        <DropdownMenu>
+            <DropdownItem
+                v-for="widget in widgets"
+                :key="widget.handle"
+                :icon="widget.icon"
+                :text="widget.title"
+                @click="emit('picked', widget)"
+            />
+        </DropdownMenu>
+    </Dropdown>
 </template>
diff --git a/resources/js/pages/Dashboard.vue b/resources/js/pages/Dashboard.vue
index 0b424d66bd3..c179e4b0ead 100644
--- a/resources/js/pages/Dashboard.vue
+++ b/resources/js/pages/Dashboard.vue
@@ -29,7 +29,6 @@ const editing = ref(false);
 const draftItems = ref([]);
 const availableWidgets = ref(null);
 const loadingMeta = ref(false);
-const picking = ref(false);
 const configuringIndex = ref(null);
 const saving = ref(false);
 
@@ -97,15 +96,9 @@ function cancelEditing() {
     draftItems.value = [];
 }
 
-function openPicker() {
-    ensureMetaLoaded();
-    picking.value = true;
-}
-
 function widgetPicked(widget) {
     const newConfig = { type: widget.handle, ...(widget.defaults || {}) };
     draftItems.value.push({ config: newConfig, display: null });
-    picking.value = false;
     configuringIndex.value = draftItems.value.length - 1;
 }
 
@@ -157,7 +150,7 @@ function save() {
     <template v-if="editing || widgets.length">
         <ui-header :title="__('Dashboard')" icon="dashboard">
             <template v-if="editing">
-                <Button :text="__('Add Widget')" icon="plus" @click="openPicker" />
+                <WidgetPicker :widgets="availableWidgets || []" @picked="widgetPicked" />
                 <Button :text="__('Cancel')" @click="cancelEditing" />
                 <Button :text="__('Save')" variant="primary" :disabled="saving" @click="save" />
             </template>
@@ -204,13 +197,6 @@ function save() {
             </div>
         </SortableList>
 
-        <WidgetPicker
-            v-if="picking"
-            :widgets="availableWidgets || []"
-            @closed="picking = false"
-            @picked="widgetPicked"
-        />
-
         <WidgetConfigStack
             v-if="configuringWidget"
             :config="configuringWidget"

From 8b29e7e5652a2941cb6893d3f3ed943bde2a0534 Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Tue, 19 May 2026 19:21:42 -0400
Subject: [PATCH 12/12] fiddle fiddle fiddle

---
 resources/css/components/dashboard.css        | 40 ++++++++++
 resources/css/cp.css                          |  1 +
 .../dashboard/WidgetConfigStack.vue           | 40 ++++------
 .../components/dashboard/WidgetEditChrome.vue | 62 ++++++++++++++
 .../dashboard/WidgetEditOverlay.vue           | 57 -------------
 .../js/components/fields/WidthSelector.vue    |  3 +-
 resources/js/pages/Dashboard.vue              | 80 ++++++++++++++-----
 7 files changed, 182 insertions(+), 101 deletions(-)
 create mode 100644 resources/css/components/dashboard.css
 create mode 100644 resources/js/components/dashboard/WidgetEditChrome.vue
 delete mode 100644 resources/js/components/dashboard/WidgetEditOverlay.vue

diff --git a/resources/css/components/dashboard.css b/resources/css/components/dashboard.css
new file mode 100644
index 00000000000..7323634b90b
--- /dev/null
+++ b/resources/css/components/dashboard.css
@@ -0,0 +1,40 @@
+/* ==========================================================================
+   DASHBOARD WIDGET EDITING
+   ========================================================================== */
+
+.dashboard-widget-inner {
+    @apply @container/widget relative rounded-xl;
+}
+
+/* Hide the chrome on the dragging source — the mirror is what the user sees */
+.dashboard-widget-sortable.draggable-source--is-dragging .dashboard-widget-inner {
+    @apply opacity-50;
+}
+
+.dashboard-widget-sortable.draggable-source--is-dragging [data-widget-edit-chrome] {
+    @apply opacity-0;
+}
+
+.dashboard-widget-sortable.draggable-source--is-dragging .dashboard-widget-inner::after {
+    content: '';
+    @apply pointer-events-none absolute inset-0 rounded-xl border-2 border-dashed border-ui-accent-bg/40 bg-ui-accent-bg/5 dark:bg-ui-accent-bg/10;
+}
+
+/* Mirror — the floating element that follows the cursor while dragging */
+body > .draggable-mirror.dashboard-widget-mirror {
+    @apply rounded-xl shadow-ui-lg ring-1 ring-black/5 dark:ring-white/10;
+    transition: none !important;
+    will-change: transform;
+}
+
+body > .draggable-mirror.dashboard-widget-mirror [data-widget-edit-chrome] {
+    @apply bg-white/95 dark:bg-gray-850/95;
+}
+
+.dashboard-widget-placeholder {
+    @apply flex min-h-54 flex-col items-center justify-center gap-3 rounded-xl bg-gray-50 px-6 py-10 text-center ring-1 ring-black/5 dark:bg-gray-900/40 dark:ring-white/10;
+}
+
+.dashboard-widget-empty {
+    @apply flex min-h-64 flex-col items-center justify-center gap-4 rounded-xl bg-gray-50 px-8 py-16 text-center ring-1 ring-black/5 dark:bg-gray-900/30 dark:ring-white/10;
+}
diff --git a/resources/css/cp.css b/resources/css/cp.css
index dd8ab0f1172..542e7b73093 100644
--- a/resources/css/cp.css
+++ b/resources/css/cp.css
@@ -13,6 +13,7 @@
 @import './components/assets.css';
 @import './components/blueprints.css';
 @import './components/configure.css';
+@import './components/dashboard.css';
 @import './components/focal-point.css';
 @import './components/index-fields.css';
 @import './components/notifications.css';
diff --git a/resources/js/components/dashboard/WidgetConfigStack.vue b/resources/js/components/dashboard/WidgetConfigStack.vue
index c9e3ef32653..3b664b187c2 100644
--- a/resources/js/components/dashboard/WidgetConfigStack.vue
+++ b/resources/js/components/dashboard/WidgetConfigStack.vue
@@ -32,33 +32,23 @@ function save() {
     <Stack
         size="narrow"
         open
-        inset
         :title="title"
         @update:open="emit('closed')"
     >
-        <div class="flex flex-col h-full">
-            <div v-if="!blueprint" class="flex-1 flex items-center justify-center">
-                <Icon name="loading" />
-            </div>
-            <template v-else>
-                <div class="flex-1 overflow-auto p-4">
-                    <PublishContainer
-                        :name="name"
-                        :blueprint="blueprint"
-                        :meta="fieldMeta"
-                        :errors="errors"
-                        v-model="values"
-                    >
-                        <PublishFieldsProvider :fields="blueprint.tabs[0].sections[0].fields">
-                            <PublishFields />
-                        </PublishFieldsProvider>
-                    </PublishContainer>
-                </div>
-                <div class="border-t bg-gray-200 dark:bg-gray-700 dark:border-gray-900 p-4 flex justify-end gap-2">
-                    <Button variant="ghost" :text="__('Cancel')" @click="emit('closed')" />
-                    <Button variant="primary" :text="__('Apply')" @click="save" />
-                </div>
-            </template>
-        </div>
+        <PublishContainer
+            :name="name"
+            :blueprint="blueprint"
+            :meta="fieldMeta"
+            :errors="errors"
+            v-model="values"
+        >
+            <PublishFieldsProvider :fields="blueprint.tabs[0].sections[0].fields">
+                <PublishFields />
+            </PublishFieldsProvider>
+        </PublishContainer>
+        <template #footer-end>
+            <Button variant="ghost" :text="__('Cancel')" @click="emit('closed')" />
+            <Button variant="primary" :text="__('Apply')" @click="save" />
+        </template>
     </Stack>
 </template>
diff --git a/resources/js/components/dashboard/WidgetEditChrome.vue b/resources/js/components/dashboard/WidgetEditChrome.vue
new file mode 100644
index 00000000000..02768d79c8e
--- /dev/null
+++ b/resources/js/components/dashboard/WidgetEditChrome.vue
@@ -0,0 +1,62 @@
+<script setup>
+import { Heading, Icon, Button, ButtonGroup } from '@/components/ui';
+import WidthSelector from '@/components/fields/WidthSelector.vue';
+import { computed } from 'vue';
+
+const props = defineProps({
+    config: { type: Object, required: true },
+    meta: { type: Object, default: null },
+});
+
+const emit = defineEmits(['configure', 'remove', 'update:width']);
+
+const widthToPercent = { sm: 25, md: 50, lg: 75, full: 100 };
+const percentToWidth = { 25: 'sm', 50: 'md', 75: 'lg', 100: 'full' };
+
+const currentWidth = computed(() => widthToPercent[props.config.width ?? 'md']);
+
+function onWidthUpdate(value) {
+    emit('update:width', percentToWidth[value]);
+}
+</script>
+
+<template>
+    <div
+        data-widget-edit-chrome
+        class="dashboard-widget-handle absolute inset-0 z-2 flex flex-col cursor-grab items-center justify-center gap-5 rounded-xl bg-white/80 px-4 backdrop-blur-[4px] -m-px border border-dashed border-purple-300 dark:border-purple-300/40 shadow-sm active:cursor-grabbing dark:bg-gray-900/85"
+    >
+        <Heading
+            :text="meta?.title ?? config.type"
+            :icon="meta?.icon ?? 'code-block'"
+        />
+
+        <div
+            class="flex shrink-0 items-center gap-2"
+            @mousedown.stop
+            @click.stop
+        >
+            <WidthSelector
+                size="md"
+                :model-value="currentWidth"
+                :initial-widths="[25, 50, 75, 100]"
+                @update:model-value="onWidthUpdate"
+            />
+
+            <ButtonGroup>
+                <Button
+                    size="sm"
+                    icon="configure"
+                    :text="__('Configure')"
+                    @click="emit('configure')"
+                />
+                <Button
+                    size="sm"
+                    icon="trash"
+                    icon-only
+                    :aria-label="__('Remove')"
+                    @click="emit('remove')"
+                />
+            </ButtonGroup>
+        </div>
+    </div>
+</template>
diff --git a/resources/js/components/dashboard/WidgetEditOverlay.vue b/resources/js/components/dashboard/WidgetEditOverlay.vue
deleted file mode 100644
index 6a66c794f65..00000000000
--- a/resources/js/components/dashboard/WidgetEditOverlay.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<script setup>
-import { Icon } from '@/components/ui';
-import WidthSelector from '@/components/fields/WidthSelector.vue';
-import { computed } from 'vue';
-
-const props = defineProps({
-    config: { type: Object, required: true },
-    meta: { type: Object, default: null },
-});
-
-const emit = defineEmits(['configure', 'remove', 'update:width']);
-
-const widthToPercent = { sm: 25, md: 50, lg: 75, full: 100 };
-const percentToWidth = { 25: 'sm', 50: 'md', 75: 'lg', 100: 'full' };
-
-const currentWidth = computed(() => widthToPercent[props.config.width ?? 'md']);
-
-function onWidthUpdate(value) {
-    emit('update:width', percentToWidth[value]);
-}
-</script>
-
-<template>
-    <div class="absolute inset-0 z-[2] rounded-lg ring-2 ring-inset ring-blue-500/40">
-        <div class="absolute inset-x-0 top-0 flex items-center gap-1 px-2 py-2 rounded-t-lg bg-gray-900/80 backdrop-blur-sm">
-            <Icon name="handles" class="dashboard-widget-handle cursor-grab text-white size-4 shrink-0 drop-shadow-sm" />
-            <Icon :name="meta?.icon ?? 'code-block'" class="size-4 text-white/70 shrink-0" />
-            <span class="text-sm text-white font-medium truncate min-w-0">{{ meta?.title ?? config.type }}</span>
-
-            <div class="flex-1 min-w-2" />
-
-            <WidthSelector
-                :model-value="currentWidth"
-                :initial-widths="[25, 50, 75, 100]"
-                @update:model-value="onWidthUpdate"
-            />
-
-            <button
-                type="button"
-                class="p-1.5 rounded text-white hover:bg-white/20 transition-colors"
-                :aria-label="__('Configure')"
-                @click="emit('configure')"
-            >
-                <Icon name="configure" class="size-4 drop-shadow-sm" />
-            </button>
-
-            <button
-                type="button"
-                class="p-1.5 rounded text-white hover:bg-red-500/60 transition-colors"
-                :aria-label="__('Remove')"
-                @click="emit('remove')"
-            >
-                <Icon name="trash" class="size-4 drop-shadow-sm" />
-            </button>
-        </div>
-    </div>
-</template>
diff --git a/resources/js/components/fields/WidthSelector.vue b/resources/js/components/fields/WidthSelector.vue
index da07abae1af..fdf87f2e930 100644
--- a/resources/js/components/fields/WidthSelector.vue
+++ b/resources/js/components/fields/WidthSelector.vue
@@ -23,10 +23,11 @@ const selected = computed(() => {
 })
 
 const wrapperClasses = cva({
-    base: 'relative text-gray-600 dark:text-gray-400 font-mono antialiased bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 with-contrast:border-gray-500 overflow-hidden flex cursor-pointer',
+    base: 'relative text-gray-600 dark:text-gray-400 font-mono antialiased bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 with-contrast:border-gray-500 overflow-hidden flex cursor-pointer shadow-ui-sm',
     variants: {
         size: {
             base: 'h-6 w-14 text-xs rounded-md',
+            md: 'h-8 w-16 text-xs rounded-lg',
             lg: 'h-10 w-24 text-sm rounded-lg',
         },
     },
diff --git a/resources/js/pages/Dashboard.vue b/resources/js/pages/Dashboard.vue
index c179e4b0ead..5bbaa701360 100644
--- a/resources/js/pages/Dashboard.vue
+++ b/resources/js/pages/Dashboard.vue
@@ -4,7 +4,7 @@ import Head from '@/pages/layout/Head.vue';
 import DynamicHtmlRenderer from '@/components/DynamicHtmlRenderer.vue';
 import { Icon, Button, EmptyStateMenu, EmptyStateItem, DocsCallout } from '@ui';
 import { SortableList } from '@/components/sortable/Sortable.js';
-import WidgetEditOverlay from '@/components/dashboard/WidgetEditOverlay.vue';
+import WidgetEditChrome from '@/components/dashboard/WidgetEditChrome.vue';
 import WidgetPicker from '@/components/dashboard/WidgetPicker.vue';
 import WidgetConfigStack from '@/components/dashboard/WidgetConfigStack.vue';
 import useArchitecturalBackground from '@/pages/layout/architectural-background.js';
@@ -31,6 +31,23 @@ const availableWidgets = ref(null);
 const loadingMeta = ref(false);
 const configuringIndex = ref(null);
 const saving = ref(false);
+const isDragging = ref(false);
+
+const sortableOptions = {
+    classes: {
+        mirror: 'dashboard-widget-mirror',
+    },
+    swapAnimation: {
+        duration: 220,
+        easingFunction: 'cubic-bezier(0.22, 1, 0.36, 1)',
+        horizontal: true,
+        vertical: true,
+    },
+    mirror: {
+        constrainDimensions: true,
+        appendTo: 'body',
+    },
+};
 
 const widgetsMetaByHandle = computed(() => {
     if (!availableWidgets.value) return {};
@@ -48,9 +65,9 @@ const configuringMeta = computed(() => {
 
 const unifiedWidgets = computed(() => {
     if (editing.value) {
-        return draftItems.value.map((item) => ({ config: item.config, display: item.display }));
+        return draftItems.value.map((item) => ({ id: item.id, config: item.config, display: item.display }));
     }
-    return props.widgets.map((widget) => ({ config: null, display: widget }));
+    return props.widgets.map((widget, i) => ({ id: `widget-${i}`, config: null, display: widget }));
 });
 
 onMounted(() => {
@@ -84,6 +101,7 @@ function ensureMetaLoaded() {
 
 function startEditing() {
     draftItems.value = props.widgetConfigs.map((config, i) => ({
+        id: `widget-${i}`,
         config: clone(config),
         display: props.widgets[i] || null,
     }));
@@ -98,7 +116,11 @@ function cancelEditing() {
 
 function widgetPicked(widget) {
     const newConfig = { type: widget.handle, ...(widget.defaults || {}) };
-    draftItems.value.push({ config: newConfig, display: null });
+    draftItems.value.push({
+        id: `${widget.handle}-${Date.now()}`,
+        config: newConfig,
+        display: null,
+    });
     configuringIndex.value = draftItems.value.length - 1;
 }
 
@@ -119,6 +141,7 @@ function removeWidget(index) {
     } else if (configuringIndex.value !== null && configuringIndex.value > index) {
         configuringIndex.value--;
     }
+
     draftItems.value.splice(index, 1);
 }
 
@@ -129,7 +152,12 @@ function updateWidth(index, width) {
 
 function onSort(sortedItems) {
     if (!editing.value) return;
-    draftItems.value = sortedItems.map((item) => ({ config: item.config, display: item.display }));
+
+    draftItems.value = sortedItems.map((item) => ({
+        id: item.id ?? `${item.config?.type}-${Date.now()}`,
+        config: item.config,
+        display: item.display,
+    }));
 }
 
 function save() {
@@ -154,7 +182,7 @@ function save() {
                 <Button :text="__('Cancel')" @click="cancelEditing" />
                 <Button :text="__('Save')" variant="primary" :disabled="saving" @click="save" />
             </template>
-            <Button v-else-if="canEditWidgets" :text="__('Edit')" icon="edit" @click="startEditing" />
+            <Button v-else-if="canEditWidgets" :text="__('Configure')" icon="edit" @click="startEditing" />
         </ui-header>
 
         <SortableList
@@ -162,20 +190,26 @@ function save() {
             item-class="dashboard-widget-sortable"
             handle-class="dashboard-widget-handle"
             :disabled="!editing"
-            :animate="false"
+            :animate="true"
             :constrain-dimensions="true"
-            :distance="5"
+            :distance="8"
+            :options="sortableOptions"
+            @dragstart="isDragging = true"
+            @dragend="isDragging = false"
             @update:model-value="onSort"
         >
-            <div class="widgets @container/widgets flex flex-wrap gap-y-6 -mx-2 sm:-mx-3">
+            <div
+                class="widgets @container/widgets flex flex-wrap gap-y-6 -mx-2 sm:-mx-3"
+                :class="{ 'dashboard-editing': editing, 'dashboard-is-dragging': isDragging }"
+            >
                 <div
                     v-for="(item, index) in unifiedWidgets"
-                    :key="index"
+                    :key="item.id"
                     class="dashboard-widget-sortable px-3"
-                    :class="[classes(item.config ?? item.display), { 'starting-style-transition': !editing }]"
+                    :class="[classes(item.config ?? item.display), { 'starting-style-transition': !editing && !isDragging }]"
                 >
-                    <div class="relative">
-                        <WidgetEditOverlay
+                    <div class="dashboard-widget-inner">
+                        <WidgetEditChrome
                             v-if="editing && item.config"
                             :config="item.config"
                             :meta="widgetsMetaByHandle[item.config.type]"
@@ -185,14 +219,24 @@ function save() {
                         />
                         <component v-if="item.display?.component" :is="item.display.component.name" v-bind="item.display.component.props" />
                         <DynamicHtmlRenderer v-else-if="item.display?.html" :html="item.display.html" />
-                        <div v-else-if="editing" class="rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800/50 p-8 flex flex-col items-center justify-center gap-2 text-gray-500 dark:text-gray-400 min-h-32">
-                            <Icon :name="widgetsMetaByHandle[item.config?.type]?.icon ?? 'code-block'" class="size-8 opacity-50" />
-                            <span class="text-sm">{{ widgetsMetaByHandle[item.config?.type]?.title ?? item.config?.type }}</span>
+                        <div v-else-if="editing" class="dashboard-widget-placeholder">
+                            <Icon :name="widgetsMetaByHandle[item.config?.type]?.icon ?? 'code-block'" class="size-8 text-gray-400" />
+                            <div>
+                                <p class="text-sm font-medium text-gray-700 dark:text-gray-200">
+                                    {{ widgetsMetaByHandle[item.config?.type]?.title ?? item.config?.type }}
+                                </p>
+                                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ __('Configure this widget to preview it here.') }}</p>
+                            </div>
                         </div>
                     </div>
                 </div>
-                <div v-if="editing && !draftItems.length" class="w-full text-center text-gray-500 py-12 border border-dashed rounded-lg dark:border-gray-700">
-                    {{ __('No widgets yet. Click "Add Widget" to get started.') }}
+                <div v-if="editing && !draftItems.length" class="dashboard-widget-empty w-full">
+                    <Icon name="dashboard" class="size-10 text-gray-400" />
+                    <div>
+                        <p class="text-sm font-medium text-gray-700 dark:text-gray-200">{{ __('No widgets yet') }}</p>
+                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ __('Add a widget to start customizing your dashboard.') }}</p>
+                    </div>
+                    <WidgetPicker :widgets="availableWidgets || []" @picked="widgetPicked" />
                 </div>
             </div>
         </SortableList>