diff --git a/TODO.md b/TODO.md
index 26171797d4..d3bb2e1c7b 100644
--- a/TODO.md
+++ b/TODO.md
@@ -10,6 +10,7 @@ Items tagged _(judgement)_ are genuine line-calls worth revisiting.
 
 - Inertia admin panel — new `lunarphp/panel` package: auth, extension points (navigation, slots, table columns, row/bulk/page actions with shared ordering), Customers CRUD, Channels settings (spec 0049)
 - Panel order-value chart on the customer edit page + `TimeSeriesChart` on the add-on surface (spec 0050)
+- Panel edit drafts — autosaved pending edits with field-level conflict detection (spec 0051)
 - Default professional customer notifications for the order lifecycle (spec 0036) _(judgement)_
 - Bulk order operations — goal-oriented bulk actions on the orders table (spec 0026)
 - Line-item refunds — refund specific lines/quantities via a dedicated refund page (spec 0028)
diff --git a/composer.json b/composer.json
index d09b4ffeef..1e8ccbbd61 100644
--- a/composer.json
+++ b/composer.json
@@ -72,6 +72,7 @@
             "Lunar\\Meilisearch\\": "packages/meilisearch/src/",
             "Lunar\\Opayo\\": "packages/opayo/src/",
             "Lunar\\Panel\\": "packages/panel/src/",
+            "Lunar\\Panel\\Database\\Factories\\": "packages/panel/database/factories",
             "Lunar\\Paypal\\": "packages/paypal/src/",
             "Lunar\\Search\\": "packages/search/src/",
             "Lunar\\Shipping\\": "packages/table-rate-shipping/src",
diff --git a/packages/panel/composer.json b/packages/panel/composer.json
index 80ce452ea5..87898e0958 100644
--- a/packages/panel/composer.json
+++ b/packages/panel/composer.json
@@ -4,7 +4,8 @@
     "license": "MIT",
     "autoload": {
         "psr-4": {
-            "Lunar\\Panel\\": "src/"
+            "Lunar\\Panel\\": "src/",
+            "Lunar\\Panel\\Database\\Factories\\": "database/factories"
         }
     },
     "minimum-stability": "dev",
diff --git a/packages/panel/config/panel.php b/packages/panel/config/panel.php
index 227ba54993..e553801eac 100644
--- a/packages/panel/config/panel.php
+++ b/packages/panel/config/panel.php
@@ -39,6 +39,19 @@
 
     'storefront_url' => null,
 
+    /*
+    |--------------------------------------------------------------------------
+    | Edit Drafts
+    |--------------------------------------------------------------------------
+    |
+    | Drafts untouched for ttl_days are pruned by the scheduled model:prune
+    | run; their base snapshots are too stale for reliable conflict checks.
+    |
+    */
+    'drafts' => [
+        'ttl_days' => 7,
+    ],
+
     'support_url' => 'https://docs.lunarphp.com/',
 
     /*
diff --git a/packages/panel/database/factories/EditDraftFactory.php b/packages/panel/database/factories/EditDraftFactory.php
new file mode 100644
index 0000000000..1dea5a37f1
--- /dev/null
+++ b/packages/panel/database/factories/EditDraftFactory.php
@@ -0,0 +1,35 @@
+<?php
+
+namespace Lunar\Panel\Database\Factories;
+
+use Illuminate\Database\Eloquent\Factories\Factory;
+use Lunar\Core\Models\Customer;
+use Lunar\Core\Models\Staff;
+use Lunar\Panel\Models\EditDraft;
+
+/**
+ * Fixture-style drafts (pruning, listing, cleanup tests). Behavioural tests
+ * should create drafts through DraftManager instead, so base-snapshot capture
+ * and normalisation stay exercised.
+ */
+class EditDraftFactory extends Factory
+{
+    /**
+     * The name of the factory's corresponding model.
+     */
+    protected $model = EditDraft::class;
+
+    /**
+     * Define the model's default state.
+     */
+    public function definition(): array
+    {
+        return [
+            'draftable_type' => Customer::morphName(),
+            'draftable_id' => Customer::factory(),
+            'staff_id' => Staff::factory(),
+            'data' => ['first_name' => $this->faker->firstName()],
+            'base_snapshot' => ['first_name' => $this->faker->firstName()],
+        ];
+    }
+}
diff --git a/packages/panel/database/migrations/2026_07_17_000000_create_edit_drafts_table.php b/packages/panel/database/migrations/2026_07_17_000000_create_edit_drafts_table.php
new file mode 100644
index 0000000000..00092a85e6
--- /dev/null
+++ b/packages/panel/database/migrations/2026_07_17_000000_create_edit_drafts_table.php
@@ -0,0 +1,27 @@
+<?php
+
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+use Lunar\Core\Database\Migration;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create($this->prefix.'edit_drafts', function (Blueprint $table) {
+            $table->id();
+            $table->morphs('draftable');
+            $table->foreignId('staff_id')->constrained($this->prefix.'staff')->cascadeOnDelete();
+            $table->json('data');
+            $table->json('base_snapshot');
+            $table->timestamps();
+
+            $table->unique(['draftable_type', 'draftable_id', 'staff_id']);
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists($this->prefix.'edit_drafts');
+    }
+};
diff --git a/packages/panel/resources/js/components/DraftActions.test.ts b/packages/panel/resources/js/components/DraftActions.test.ts
new file mode 100644
index 0000000000..b5cef05ddd
--- /dev/null
+++ b/packages/panel/resources/js/components/DraftActions.test.ts
@@ -0,0 +1,113 @@
+import { describe, expect, it, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { computed, nextTick, reactive, ref } from 'vue';
+import DraftActions from './DraftActions.vue';
+import type { EditDraftForm } from '../composables/useEditDraft';
+
+function fakeForm(overrides: Partial<Record<string, unknown>> = {}): EditDraftForm<Record<string, unknown>> {
+    return {
+        values: reactive({}),
+        errors: ref({}),
+        conflicts: ref([]),
+        isDirty: computed(() => false),
+        saving: ref(false),
+        committing: ref(false),
+        savedAt: ref<string | null>(null),
+        hasDraft: ref(false),
+        restoredFrom: ref<string | null>(null),
+        commit: vi.fn().mockResolvedValue(true),
+        resolve: vi.fn().mockResolvedValue(true),
+        discard: vi.fn().mockResolvedValue(undefined),
+        ...overrides,
+    } as EditDraftForm<Record<string, unknown>>;
+}
+
+const buttons = (wrapper: ReturnType<typeof mount>) => wrapper.findAll('button');
+
+describe('DraftActions', () => {
+    it('renders nothing while the form is clean', () => {
+        const wrapper = mount(DraftActions, { props: { form: fakeForm() } });
+
+        expect(wrapper.find('button').exists()).toBe(false);
+    });
+
+    it('shows discard and save once the form is dirty', () => {
+        const wrapper = mount(DraftActions, {
+            props: { form: fakeForm({ isDirty: computed(() => true) }) },
+        });
+
+        const labels = buttons(wrapper).map((button) => button.text());
+
+        expect(labels).toEqual(['drafts.discard', 'common.save_changes']);
+    });
+
+    it('stays visible for a stored draft even when local values are clean', () => {
+        const wrapper = mount(DraftActions, {
+            props: { form: fakeForm({ hasDraft: ref(true) }) },
+        });
+
+        expect(buttons(wrapper)).toHaveLength(2);
+    });
+
+    it('shows the saving status text while an autosave is in flight', () => {
+        const wrapper = mount(DraftActions, {
+            props: { form: fakeForm({ isDirty: computed(() => true), saving: ref(true) }) },
+        });
+
+        expect(wrapper.find('[role="status"]').text()).toBe('drafts.saving');
+    });
+
+    it('shows the saved note after a save lands and clears it after 10 seconds', async () => {
+        vi.useFakeTimers();
+
+        try {
+            const saving = ref(true);
+            const savedAt = ref<string | null>(null);
+            const wrapper = mount(DraftActions, {
+                props: { form: fakeForm({ isDirty: computed(() => true), saving, savedAt }) },
+            });
+
+            saving.value = false;
+            savedAt.value = '2026-07-17T00:00:00Z';
+            await nextTick();
+
+            expect(wrapper.find('[role="status"]').text()).toBe('drafts.saved');
+
+            await vi.advanceTimersByTimeAsync(10_000);
+
+            expect(wrapper.find('[role="status"]').exists()).toBe(false);
+        } finally {
+            vi.useRealTimers();
+        }
+    });
+
+    it('does not show a stale saved note for a restored draft on load', () => {
+        const wrapper = mount(DraftActions, {
+            props: { form: fakeForm({ hasDraft: ref(true), savedAt: ref('2026-07-16T00:00:00Z') }) },
+        });
+
+        expect(wrapper.find('[role="status"]').exists()).toBe(false);
+        expect(buttons(wrapper)).toHaveLength(2);
+    });
+
+    it('commits on save and discards on discard', async () => {
+        const form = fakeForm({ isDirty: computed(() => true) });
+        const wrapper = mount(DraftActions, { props: { form } });
+
+        await buttons(wrapper)[1].trigger('click');
+        expect(form.commit).toHaveBeenCalledTimes(1);
+
+        await buttons(wrapper)[0].trigger('click');
+        expect(form.discard).toHaveBeenCalledTimes(1);
+    });
+
+    it('disables both buttons while committing', () => {
+        const wrapper = mount(DraftActions, {
+            props: { form: fakeForm({ isDirty: computed(() => true), committing: ref(true) }) },
+        });
+
+        for (const button of buttons(wrapper)) {
+            expect(button.attributes('disabled')).toBeDefined();
+        }
+    });
+});
diff --git a/packages/panel/resources/js/components/DraftActions.vue b/packages/panel/resources/js/components/DraftActions.vue
new file mode 100644
index 0000000000..be5dc32ebc
--- /dev/null
+++ b/packages/panel/resources/js/components/DraftActions.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import Button from './Button.vue';
+import type { EditDraftForm } from '../composables/useEditDraft';
+
+// The standard home for a draft-backed form's save cluster: drop into the
+// sticky Breadcrumbs #actions slot. Shopify-style contextual bar — rendered
+// only while there is something to save or throw away, so a clean page shows
+// nothing.
+const props = defineProps<{
+    form: EditDraftForm<Record<string, unknown>>;
+}>();
+
+const { t } = useI18n();
+
+const active = computed(() => props.form.isDirty.value || props.form.hasDraft.value);
+
+// "Draft saved" is a confirmation, not a permanent label: it shows for a few
+// seconds after each autosave lands, then clears until the next one.
+const SAVED_NOTE_MS = 10_000;
+
+const showSaved = ref(false);
+let savedNoteTimer: ReturnType<typeof setTimeout> | null = null;
+
+watch(
+    [() => props.form.saving.value, () => props.form.savedAt.value],
+    ([saving, savedAt]) => {
+        if (savedNoteTimer !== null) {
+            clearTimeout(savedNoteTimer);
+            savedNoteTimer = null;
+        }
+
+        showSaved.value = !saving && savedAt !== null;
+
+        if (showSaved.value) {
+            savedNoteTimer = setTimeout(() => {
+                showSaved.value = false;
+                savedNoteTimer = null;
+            }, SAVED_NOTE_MS);
+        }
+    },
+);
+
+onBeforeUnmount(() => {
+    if (savedNoteTimer !== null) {
+        clearTimeout(savedNoteTimer);
+    }
+});
+
+const status = computed(() => {
+    if (props.form.saving.value) {
+        return t('drafts.saving');
+    }
+
+    return showSaved.value ? t('drafts.saved') : null;
+});
+
+const save = (): void => {
+    void props.form.commit();
+};
+
+const discard = (): void => {
+    void props.form.discard();
+};
+</script>
+
+<template>
+    <template v-if="active">
+        <span v-if="status" role="status" class="hidden sm:inline text-[11px] text-ink-500 mr-1">{{ status }}</span>
+        <Button :disabled="form.committing.value" @click="discard">{{ t('drafts.discard') }}</Button>
+        <Button variant="primary" :disabled="form.committing.value" @click="save">{{ t('common.save_changes') }}</Button>
+    </template>
+</template>
diff --git a/packages/panel/resources/js/components/DraftConflictDialog.test.ts b/packages/panel/resources/js/components/DraftConflictDialog.test.ts
new file mode 100644
index 0000000000..7a0216cf8d
--- /dev/null
+++ b/packages/panel/resources/js/components/DraftConflictDialog.test.ts
@@ -0,0 +1,116 @@
+import { afterEach, describe, expect, it } from 'vitest';
+import { mount, type VueWrapper } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import DraftConflictDialog from './DraftConflictDialog.vue';
+import type { DraftConflict } from '../lib/http';
+
+// Reka's DialogPortal teleports content to document.body, out of the
+// wrapper's reach; interactions query the document instead.
+const body = (): HTMLElement => document.body;
+
+const textConflict: DraftConflict = {
+    key: 'first_name',
+    label: 'First name',
+    mine: 'Mine',
+    base: 'Base',
+    theirs: 'Theirs',
+};
+
+const arrayConflict: DraftConflict = {
+    key: 'customer_group_ids',
+    label: 'Customer groups',
+    mine: [1, 2],
+    base: [1],
+    theirs: [1, 3],
+};
+
+let wrapper: VueWrapper | null = null;
+
+async function mountDialog(conflicts: DraftConflict[]): Promise<VueWrapper> {
+    wrapper = mount(DraftConflictDialog, {
+        props: { open: true, conflicts },
+        attachTo: document.body,
+    });
+
+    // The portal teleports content to document.body on the next tick.
+    await nextTick();
+
+    return wrapper;
+}
+
+function clickButtonByText(text: string): Promise<void> {
+    const button = [...body().querySelectorAll('button')].find((el) => el.textContent?.includes(text));
+
+    expect(button, `button containing "${text}"`).toBeDefined();
+    button?.click();
+
+    return nextTick();
+}
+
+afterEach(() => {
+    wrapper?.unmount();
+    wrapper = null;
+    document.body.innerHTML = '';
+});
+
+describe('DraftConflictDialog', () => {
+    it('renders a row per conflict with both values and the base note', async () => {
+        await mountDialog([textConflict, arrayConflict]);
+
+        const text = body().textContent ?? '';
+
+        expect(text).toContain('First name');
+        expect(text).toContain('Mine');
+        expect(text).toContain('Theirs');
+        expect(text).toContain('Customer groups');
+        expect(text).toContain('1, 2');
+        expect(text).toContain('1, 3');
+    });
+
+    it('defaults to keeping mine and emits theirs as the rebase pin', async () => {
+        const dialog = await mountDialog([textConflict]);
+
+        await clickButtonByText('drafts.apply');
+
+        expect(dialog.emitted('resolve')).toEqual([[{ first_name: 'Mine' }, { first_name: 'Theirs' }]]);
+    });
+
+    it('emits the current value when take-theirs is chosen', async () => {
+        const dialog = await mountDialog([textConflict]);
+
+        await clickButtonByText('drafts.current_value');
+        await clickButtonByText('drafts.apply');
+
+        expect(dialog.emitted('resolve')).toEqual([[{ first_name: 'Theirs' }, { first_name: 'Theirs' }]]);
+    });
+
+    it('lets a manual edit override the chosen scalar value', async () => {
+        const dialog = await mountDialog([textConflict]);
+
+        const input = body().querySelector<HTMLInputElement>('input[type="text"]');
+        expect(input).not.toBeNull();
+
+        input!.value = 'Merged by hand';
+        input!.dispatchEvent(new Event('input', { bubbles: true }));
+        await nextTick();
+
+        await clickButtonByText('drafts.apply');
+
+        expect(dialog.emitted('resolve')).toEqual([[{ first_name: 'Merged by hand' }, { first_name: 'Theirs' }]]);
+    });
+
+    it('offers no manual edit input for structured values', async () => {
+        await mountDialog([arrayConflict]);
+
+        expect(body().querySelector('input[type="text"]')).toBeNull();
+    });
+
+    it('closes without resolving on cancel', async () => {
+        const dialog = await mountDialog([textConflict]);
+
+        await clickButtonByText('common.cancel');
+
+        expect(dialog.emitted('resolve')).toBeUndefined();
+        expect(dialog.emitted('update:open')).toEqual([[false]]);
+    });
+});
diff --git a/packages/panel/resources/js/components/DraftConflictDialog.vue b/packages/panel/resources/js/components/DraftConflictDialog.vue
new file mode 100644
index 0000000000..f4c831b3ea
--- /dev/null
+++ b/packages/panel/resources/js/components/DraftConflictDialog.vue
@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import { reactive, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import Button from './Button.vue';
+import Dialog from './Dialog.vue';
+import TextInput from './TextInput.vue';
+import type { DraftConflict } from '../lib/http';
+
+const props = withDefaults(
+    defineProps<{
+        open?: boolean;
+        conflicts?: DraftConflict[];
+        busy?: boolean;
+    }>(),
+    { open: false, conflicts: () => [], busy: false },
+);
+
+const emit = defineEmits<{
+    'update:open': [value: boolean];
+    resolve: [resolutions: Record<string, unknown>, rebase: Record<string, unknown>];
+}>();
+
+const { t } = useI18n();
+
+interface Resolution {
+    choice: 'mine' | 'theirs';
+    value: unknown;
+}
+
+const resolutions = reactive<Record<string, Resolution>>({});
+
+watch(
+    () => props.conflicts,
+    (conflicts) => {
+        for (const key of Object.keys(resolutions)) {
+            delete resolutions[key];
+        }
+
+        for (const conflict of conflicts) {
+            resolutions[conflict.key] = { choice: 'mine', value: conflict.mine };
+        }
+    },
+    { immediate: true, deep: true },
+);
+
+const choose = (conflict: DraftConflict, choice: 'mine' | 'theirs'): void => {
+    resolutions[conflict.key] = {
+        choice,
+        value: choice === 'mine' ? conflict.mine : conflict.theirs,
+    };
+};
+
+// Manual merging edits the chosen value in place; only scalar values get a
+// text input, structured values (id sets) stay a two-way choice.
+const isEditable = (conflict: DraftConflict): boolean =>
+    [conflict.mine, conflict.theirs].every(
+        (value) => value === null || ['string', 'number', 'boolean'].includes(typeof value),
+    );
+
+const display = (value: unknown): string => {
+    if (value === null || value === undefined || value === '') {
+        return t('drafts.empty');
+    }
+
+    return Array.isArray(value) ? value.join(', ') : String(value);
+};
+
+const editableValue = (key: string): string => {
+    const value = resolutions[key]?.value;
+
+    return value === null || value === undefined ? '' : String(value);
+};
+
+const onManualEdit = (key: string, value: string | number): void => {
+    if (resolutions[key]) {
+        resolutions[key].value = String(value);
+    }
+};
+
+const confirm = (): void => {
+    const resolved: Record<string, unknown> = {};
+    const rebase: Record<string, unknown> = {};
+
+    for (const conflict of props.conflicts) {
+        resolved[conflict.key] = resolutions[conflict.key]?.value;
+        rebase[conflict.key] = conflict.theirs;
+    }
+
+    emit('resolve', resolved, rebase);
+};
+</script>
+
+<template>
+    <Dialog :open="open" :title="t('drafts.conflict_title')" :description="t('drafts.conflict_description')" size="lg" @update:open="$emit('update:open', $event)">
+        <div class="flex flex-col gap-4">
+            <div v-for="conflict in conflicts" :key="conflict.key" class="rounded-lg border border-line overflow-hidden">
+                <div class="px-3.5 py-2 bg-surface-2 border-b border-line text-[12px] font-semibold text-ink-900">
+                    {{ conflict.label }}
+                </div>
+                <div class="p-3.5 flex flex-col gap-2">
+                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
+                        <button
+                            type="button"
+                            class="text-left rounded-md border px-3 py-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sage/35"
+                            :class="resolutions[conflict.key]?.choice === 'mine' ? 'border-sage bg-sage/5' : 'border-line hover:border-line-strong'"
+                            :aria-pressed="resolutions[conflict.key]?.choice === 'mine'"
+                            @click="choose(conflict, 'mine')"
+                        >
+                            <span class="block text-[11px] uppercase tracking-[0.06em] text-ink-500 font-medium mb-0.5">{{ t('drafts.your_value') }}</span>
+                            <span class="block text-[12.5px] text-ink-900 break-words" :class="{ italic: display(conflict.mine) === t('drafts.empty') }">{{ display(conflict.mine) }}</span>
+                        </button>
+                        <button
+                            type="button"
+                            class="text-left rounded-md border px-3 py-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sage/35"
+                            :class="resolutions[conflict.key]?.choice === 'theirs' ? 'border-sage bg-sage/5' : 'border-line hover:border-line-strong'"
+                            :aria-pressed="resolutions[conflict.key]?.choice === 'theirs'"
+                            @click="choose(conflict, 'theirs')"
+                        >
+                            <span class="block text-[11px] uppercase tracking-[0.06em] text-ink-500 font-medium mb-0.5">{{ t('drafts.current_value') }}</span>
+                            <span class="block text-[12.5px] text-ink-900 break-words" :class="{ italic: display(conflict.theirs) === t('drafts.empty') }">{{ display(conflict.theirs) }}</span>
+                        </button>
+                    </div>
+                    <TextInput
+                        v-if="isEditable(conflict)"
+                        :model-value="editableValue(conflict.key)"
+                        :aria-label="conflict.label"
+                        @update:model-value="onManualEdit(conflict.key, $event)"
+                    />
+                    <p class="m-0 text-[11px] text-ink-500">{{ t('drafts.base_note', { value: display(conflict.base) }) }}</p>
+                </div>
+            </div>
+        </div>
+        <template #footer>
+            <Button type="button" @click="$emit('update:open', false)">{{ t('common.cancel') }}</Button>
+            <Button type="button" variant="primary" :disabled="busy" @click="confirm">{{ t('drafts.apply') }}</Button>
+        </template>
+    </Dialog>
+</template>
diff --git a/packages/panel/resources/js/components/FlashMessage.test.ts b/packages/panel/resources/js/components/FlashMessage.test.ts
deleted file mode 100644
index 66ea581209..0000000000
--- a/packages/panel/resources/js/components/FlashMessage.test.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { mount } from '@vue/test-utils';
-import FlashMessage from './FlashMessage.vue';
-
-vi.mock('@inertiajs/vue3', () => ({
-    usePage: () => ({ props: { flash: {} } }),
-}));
-
-const mountFlash = (props = {}) => mount(FlashMessage, { props: { message: 'Saved.', ...props } });
-
-describe('FlashMessage', () => {
-    beforeEach(() => vi.useFakeTimers());
-    afterEach(() => vi.useRealTimers());
-
-    it('shows the message with a status role', () => {
-        const wrapper = mountFlash();
-
-        const status = wrapper.find('[role="status"]');
-        expect(status.exists()).toBe(true);
-        expect(status.text()).toContain('Saved.');
-    });
-
-    it('renders nothing without a message', () => {
-        const wrapper = mountFlash({ message: null });
-
-        expect(wrapper.find('[role="status"]').exists()).toBe(false);
-    });
-
-    it('dismisses via the close button', async () => {
-        const wrapper = mountFlash();
-
-        await wrapper.find('button').trigger('click');
-
-        expect(wrapper.find('[role="status"]').exists()).toBe(false);
-    });
-
-    it('auto-dismisses after the timeout', async () => {
-        const wrapper = mountFlash({ timeout: 5000 });
-
-        expect(wrapper.find('[role="status"]').exists()).toBe(true);
-
-        vi.advanceTimersByTime(5001);
-        await wrapper.vm.$nextTick();
-
-        expect(wrapper.find('[role="status"]').exists()).toBe(false);
-    });
-
-    it('persists when the timeout is zero', async () => {
-        const wrapper = mountFlash({ timeout: 0 });
-
-        vi.advanceTimersByTime(60_000);
-        await wrapper.vm.$nextTick();
-
-        expect(wrapper.find('[role="status"]').exists()).toBe(true);
-    });
-
-    it('pauses the auto-dismiss while hovered', async () => {
-        const wrapper = mountFlash({ timeout: 5000 });
-
-        await wrapper.find('[role="status"]').trigger('mouseenter');
-        vi.advanceTimersByTime(10_000);
-        await wrapper.vm.$nextTick();
-
-        expect(wrapper.find('[role="status"]').exists()).toBe(true);
-
-        await wrapper.find('[role="status"]').trigger('mouseleave');
-        vi.advanceTimersByTime(5001);
-        await wrapper.vm.$nextTick();
-
-        expect(wrapper.find('[role="status"]').exists()).toBe(false);
-    });
-});
diff --git a/packages/panel/resources/js/components/FlashMessage.vue b/packages/panel/resources/js/components/FlashMessage.vue
deleted file mode 100644
index 157409abd2..0000000000
--- a/packages/panel/resources/js/components/FlashMessage.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<script setup lang="ts">
-import { onBeforeUnmount, ref, watch } from 'vue';
-import { usePage } from '@inertiajs/vue3';
-import { useI18n } from 'vue-i18n';
-import Icon from './Icon.vue';
-
-const props = withDefaults(
-    defineProps<{
-        message?: string | null;
-        tone?: 'success' | 'error';
-        /** Milliseconds before the message dismisses itself; 0 keeps it until dismissed. */
-        timeout?: number;
-    }>(),
-    { message: null, tone: 'success', timeout: 6000 },
-);
-
-const { t } = useI18n();
-
-const visible = ref(false);
-let timer: ReturnType<typeof setTimeout> | undefined;
-
-const dismiss = (): void => {
-    visible.value = false;
-    clearTimeout(timer);
-};
-
-const arm = (): void => {
-    clearTimeout(timer);
-
-    if (props.timeout > 0) {
-        timer = setTimeout(dismiss, props.timeout);
-    }
-};
-
-const show = (): void => {
-    if (!props.message) {
-        visible.value = false;
-
-        return;
-    }
-
-    visible.value = true;
-    arm();
-};
-
-// Re-show on every server response carrying flash data: the prop object is a
-// fresh reference per visit, so a repeat save with identical text retriggers.
-const page = usePage();
-watch(() => [page.props.flash, props.message] as const, show, { immediate: true });
-
-// Hovering pauses the auto-dismiss so the message can be read in peace.
-const pause = (): void => clearTimeout(timer);
-const resume = (): void => {
-    if (visible.value) {
-        arm();
-    }
-};
-
-onBeforeUnmount(() => clearTimeout(timer));
-
-const TONE = {
-    success: {
-        wrap: 'border-sage-border bg-sage-soft text-sage-ink',
-        icon: 'check',
-    },
-    error: {
-        wrap: 'border-danger-border bg-danger-soft text-danger',
-        icon: 'alert',
-    },
-} as const;
-</script>
-
-<template>
-    <Transition
-        enter-active-class="transition-all duration-300 ease-out"
-        leave-active-class="transition-all duration-200 ease-in"
-        enter-from-class="opacity-0 max-h-0 !py-0 !mt-0 !mb-0 -translate-y-1"
-        leave-to-class="opacity-0 max-h-0 !py-0 !mt-0 !mb-0 -translate-y-1"
-    >
-        <div
-            v-if="visible && message"
-            :class="['flex items-center gap-2 overflow-hidden max-h-24 rounded-md border px-3 py-2 text-[12px]', TONE[tone].wrap]"
-            role="status"
-            @mouseenter="pause"
-            @mouseleave="resume"
-        >
-            <Icon :name="TONE[tone].icon" cls="sm" class="shrink-0" />
-            <span class="flex-1 min-w-0 truncate">{{ message }}</span>
-            <button
-                type="button"
-                class="shrink-0 grid place-items-center w-[18px] h-[18px] rounded-full text-current/70 hover:text-current hover:bg-surface/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sage/35"
-                :aria-label="t('common.close')"
-                @click="dismiss"
-            >
-                <Icon name="x" cls="sm" />
-            </button>
-        </div>
-    </Transition>
-</template>
diff --git a/packages/panel/resources/js/components/Icon.vue b/packages/panel/resources/js/components/Icon.vue
index 14990ff821..e25d30c2d2 100644
--- a/packages/panel/resources/js/components/Icon.vue
+++ b/packages/panel/resources/js/components/Icon.vue
@@ -36,6 +36,7 @@ const ICONS: Record<string, string> = {
     tag: '<path d="M20.59 13.41 12 22 3 13V3h10l8.59 8.59a2 2 0 0 1 0 2.82Z"/><line x1="7" y1="7" x2="7.01" y2="7"/>',
     folder: '<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2Z"/>',
     globe: '<circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><line x1="2" y1="12" x2="22" y2="12"/>',
+    info: '<circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/>',
     dashboard: '<rect x="3" y="3" width="7" height="9"/><rect x="14" y="3" width="7" height="5"/><rect x="14" y="12" width="7" height="9"/><rect x="3" y="16" width="7" height="5"/>',
     'layout-dashboard': '<rect x="3" y="3" width="7" height="9"/><rect x="14" y="3" width="7" height="5"/><rect x="14" y="12" width="7" height="9"/><rect x="3" y="16" width="7" height="5"/>',
     help: '<circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/>',
diff --git a/packages/panel/resources/js/components/TimeSeriesChart.test.ts b/packages/panel/resources/js/components/TimeSeriesChart.test.ts
index 1a3d5c8cde..75823f0268 100644
--- a/packages/panel/resources/js/components/TimeSeriesChart.test.ts
+++ b/packages/panel/resources/js/components/TimeSeriesChart.test.ts
@@ -69,6 +69,21 @@ describe('TimeSeriesChart', () => {
         expect(wrapper.find('path.tsc-area').exists()).toBe(true);
     });
 
+    it('replays the draw-in only when point values actually change', async () => {
+        const wrapper = mountChart();
+
+        const lineBefore = wrapper.findAll('path')[1].element;
+
+        // A fresh but value-identical array (a partial reload after a draft
+        // commit) must not remount the series paths.
+        await wrapper.setProps({ points: points.map((point) => ({ ...point })) });
+        expect(wrapper.findAll('path')[1].element).toBe(lineBefore);
+
+        // Different values (a range switch) restart the animation via remount.
+        await wrapper.setProps({ points: [...points, { label: 'Apr', value: 25 }] });
+        expect(wrapper.findAll('path')[1].element).not.toBe(lineBefore);
+    });
+
     it('scales a flat zero series without dividing by zero', () => {
         const wrapper = mountChart({ points: [{ label: 'Jan', value: 0 }, { label: 'Feb', value: 0 }] });
 
diff --git a/packages/panel/resources/js/components/TimeSeriesChart.vue b/packages/panel/resources/js/components/TimeSeriesChart.vue
index 0cabf35e40..0f6fb441de 100644
--- a/packages/panel/resources/js/components/TimeSeriesChart.vue
+++ b/packages/panel/resources/js/components/TimeSeriesChart.vue
@@ -107,9 +107,13 @@ const showLabel = (index: number): boolean => {
 
 // Remounting the series paths (via :key) restarts their draw-in animation
 // whenever the data changes, e.g. when a range switcher swaps the buckets.
+// Compared by value: partial reloads hand over a fresh but identical array
+// (e.g. after a draft commit), which must not replay the animation.
 const animationKey = ref(0);
-watch(() => props.points, () => {
-    animationKey.value++;
+watch(() => props.points, (points, previous) => {
+    if (JSON.stringify(points) !== JSON.stringify(previous)) {
+        animationKey.value++;
+    }
 });
 
 // Hover/focus: a crosshair snaps to the nearest bucket; the same readout is
diff --git a/packages/panel/resources/js/components/Toaster.test.ts b/packages/panel/resources/js/components/Toaster.test.ts
new file mode 100644
index 0000000000..fd6dda5dc2
--- /dev/null
+++ b/packages/panel/resources/js/components/Toaster.test.ts
@@ -0,0 +1,125 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { mount, type VueWrapper } from '@vue/test-utils';
+import { nextTick, reactive } from 'vue';
+import Toaster from './Toaster.vue';
+import { useToasts } from '../composables/useToasts';
+
+const pageProps = reactive<{ flash?: Record<string, string | null> }>({});
+
+vi.mock('@inertiajs/vue3', () => ({
+    usePage: () => ({ props: pageProps }),
+}));
+
+let wrapper: VueWrapper | null = null;
+
+// The stack teleports to document.body, out of the wrapper's subtree.
+const stack = (): HTMLElement => document.body;
+
+function mountToaster(): VueWrapper {
+    wrapper = mount(Toaster, { attachTo: document.body });
+
+    return wrapper;
+}
+
+describe('Toaster', () => {
+    beforeEach(() => {
+        vi.useFakeTimers();
+        useToasts().clear();
+        delete pageProps.flash;
+    });
+
+    afterEach(() => {
+        wrapper?.unmount();
+        wrapper = null;
+        useToasts().clear();
+        vi.useRealTimers();
+        document.body.innerHTML = '';
+    });
+
+    it('renders pushed toasts with their tone roles', async () => {
+        mountToaster();
+
+        const toast = useToasts();
+        toast.success('Saved.');
+        toast.error('Broke.');
+        toast.info('FYI.');
+        await nextTick();
+
+        const statuses = [...stack().querySelectorAll('[role="status"]')].map((el) => el.textContent?.trim());
+        const alerts = [...stack().querySelectorAll('[role="alert"]')].map((el) => el.textContent?.trim());
+
+        expect(statuses.some((text) => text?.includes('Saved.'))).toBe(true);
+        expect(statuses.some((text) => text?.includes('FYI.'))).toBe(true);
+        expect(alerts.some((text) => text?.includes('Broke.'))).toBe(true);
+    });
+
+    it('auto-dismisses success toasts and keeps error toasts until closed', async () => {
+        mountToaster();
+
+        const toast = useToasts();
+        toast.success('Saved.');
+        toast.error('Broke.');
+        await nextTick();
+
+        await vi.advanceTimersByTimeAsync(6000);
+
+        expect(stack().textContent).not.toContain('Saved.');
+        expect(stack().textContent).toContain('Broke.');
+    });
+
+    it('dismisses a toast via its close button', async () => {
+        mountToaster();
+
+        useToasts().error('Broke.');
+        await nextTick();
+
+        stack().querySelector<HTMLButtonElement>('[role="alert"] button')?.click();
+        await nextTick();
+
+        expect(stack().textContent).not.toContain('Broke.');
+    });
+
+    it('pauses the auto-dismiss while hovered and re-arms on leave', async () => {
+        mountToaster();
+
+        useToasts().success('Saved.');
+        await nextTick();
+
+        const el = stack().querySelector('[role="status"]');
+        el?.dispatchEvent(new Event('mouseenter'));
+        await vi.advanceTimersByTimeAsync(10_000);
+
+        expect(stack().textContent).toContain('Saved.');
+
+        el?.dispatchEvent(new Event('mouseleave'));
+        await vi.advanceTimersByTimeAsync(6000);
+
+        expect(stack().textContent).not.toContain('Saved.');
+    });
+
+    it('bridges server flash props into toasts, deduping repeat passes over one flash object', async () => {
+        mountToaster();
+
+        pageProps.flash = { success: 'Changes saved.', info: 'Heads up.' };
+        await nextTick();
+
+        expect(stack().textContent).toContain('Changes saved.');
+        expect(stack().textContent).toContain('Heads up.');
+        expect(useToasts().toasts.value).toHaveLength(2);
+
+        // A second instance (as during a layout swap) sees the same flash
+        // object and must not duplicate it.
+        const second = mount(Toaster, { attachTo: document.body });
+        await nextTick();
+
+        expect(useToasts().toasts.value).toHaveLength(2);
+        second.unmount();
+
+        // A fresh flash object from the next response toasts again, even with
+        // identical text (a repeat save).
+        pageProps.flash = { ...pageProps.flash };
+        await nextTick();
+
+        expect(useToasts().toasts.value).toHaveLength(4);
+    });
+});
diff --git a/packages/panel/resources/js/components/Toaster.vue b/packages/panel/resources/js/components/Toaster.vue
new file mode 100644
index 0000000000..41f594fc2a
--- /dev/null
+++ b/packages/panel/resources/js/components/Toaster.vue
@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import { onBeforeUnmount, watch } from 'vue';
+import { usePage } from '@inertiajs/vue3';
+import { useI18n } from 'vue-i18n';
+import Icon from './Icon.vue';
+import { pushServerFlash, useToasts, type ServerFlash, type Toast } from '../composables/useToasts';
+
+// The panel's notification surface: a fixed bottom-centre stack fed by the
+// useToasts() store, so messages stay visible wherever the page is scrolled.
+// Mounted once per shell (PanelLayout, SettingsShell); it also bridges the
+// server's flash props (success / error / info) into the stack, so pages no
+// longer render flash messages themselves.
+const { t } = useI18n();
+
+const { toasts, dismiss } = useToasts();
+
+const page = usePage();
+
+watch(
+    () => page.props.flash as ServerFlash | undefined,
+    (flash) => pushServerFlash(flash),
+    { immediate: true },
+);
+
+// Auto-dismiss timers live here (not in the store) so hovering a toast can
+// pause its clock; re-arming on leave restarts the full duration.
+const timers = new Map<number, ReturnType<typeof setTimeout>>();
+
+const stopTimer = (id: number): void => {
+    const timer = timers.get(id);
+
+    if (timer !== undefined) {
+        clearTimeout(timer);
+        timers.delete(id);
+    }
+};
+
+const remove = (id: number): void => {
+    stopTimer(id);
+    dismiss(id);
+};
+
+const arm = (toast: Toast): void => {
+    if (toast.duration > 0 && !timers.has(toast.id)) {
+        timers.set(
+            toast.id,
+            setTimeout(() => remove(toast.id), toast.duration),
+        );
+    }
+};
+
+watch(
+    toasts,
+    (list) => {
+        list.forEach(arm);
+
+        for (const id of [...timers.keys()]) {
+            if (!list.some((toast) => toast.id === id)) {
+                stopTimer(id);
+            }
+        }
+    },
+    { immediate: true, deep: true },
+);
+
+onBeforeUnmount(() => {
+    for (const id of [...timers.keys()]) {
+        stopTimer(id);
+    }
+});
+
+const pause = (toast: Toast): void => stopTimer(toast.id);
+const resume = (toast: Toast): void => arm(toast);
+
+const TONE = {
+    success: {
+        wrap: 'border-sage-border bg-sage-soft text-sage-ink',
+        icon: 'check',
+    },
+    error: {
+        wrap: 'border-danger-border bg-danger-soft text-danger',
+        icon: 'alert',
+    },
+    info: {
+        wrap: 'border-line bg-surface text-ink-700',
+        icon: 'info',
+    },
+} as const;
+</script>
+
+<template>
+    <Teleport to="body">
+        <div
+            class="fixed bottom-4 inset-x-0 z-[70] flex flex-col items-center gap-2 px-4 pointer-events-none"
+            aria-live="polite"
+        >
+            <TransitionGroup
+                enter-active-class="transition-all duration-300 ease-out"
+                leave-active-class="transition-all duration-200 ease-in"
+                enter-from-class="opacity-0 translate-y-2"
+                leave-to-class="opacity-0 translate-y-2"
+            >
+                <div
+                    v-for="toast in toasts"
+                    :key="toast.id"
+                    :class="['pointer-events-auto flex items-center gap-2 w-full max-w-[420px] rounded-lg border px-3.5 py-2.5 text-[12.5px] shadow-lg', TONE[toast.tone].wrap]"
+                    :role="toast.tone === 'error' ? 'alert' : 'status'"
+                    @mouseenter="pause(toast)"
+                    @mouseleave="resume(toast)"
+                >
+                    <Icon :name="TONE[toast.tone].icon" cls="sm" class="shrink-0" />
+                    <span class="flex-1 min-w-0 break-words">{{ toast.message }}</span>
+                    <button
+                        type="button"
+                        class="shrink-0 grid place-items-center w-[18px] h-[18px] rounded-full text-current/70 hover:text-current hover:bg-surface/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sage/35"
+                        :aria-label="t('common.close')"
+                        @click="remove(toast.id)"
+                    >
+                        <Icon name="x" cls="sm" />
+                    </button>
+                </div>
+            </TransitionGroup>
+        </div>
+    </Teleport>
+</template>
diff --git a/packages/panel/resources/js/composables/useEditDraft.test.ts b/packages/panel/resources/js/composables/useEditDraft.test.ts
new file mode 100644
index 0000000000..38dce73986
--- /dev/null
+++ b/packages/panel/resources/js/composables/useEditDraft.test.ts
@@ -0,0 +1,235 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { nextTick } from 'vue';
+import { DraftConflictError, ValidationError } from '../lib/http';
+import { useEditDraft } from './useEditDraft';
+
+const { httpMock, reloadMock } = vi.hoisted(() => ({
+    httpMock: {
+        patch: vi.fn(),
+        post: vi.fn(),
+        delete: vi.fn(),
+    },
+    reloadMock: vi.fn(),
+}));
+
+vi.mock('../lib/http', async (importOriginal) => ({
+    ...(await importOriginal<typeof import('../lib/http')>()),
+    http: httpMock,
+}));
+
+vi.mock('@inertiajs/vue3', () => ({
+    router: { reload: reloadMock },
+}));
+
+const urls = { draft: '/customers/1/draft', commit: '/customers/1/draft/commit' };
+
+async function flushAutosave(): Promise<void> {
+    await nextTick();
+    await vi.advanceTimersByTimeAsync(750);
+    await vi.runOnlyPendingTimersAsync();
+}
+
+describe('useEditDraft', () => {
+    beforeEach(() => {
+        vi.useFakeTimers();
+        httpMock.patch.mockResolvedValue({ data: {}, updated_at: '2026-07-17T00:00:00Z' });
+        httpMock.post.mockResolvedValue({ committed: true });
+        httpMock.delete.mockResolvedValue(null);
+    });
+
+    afterEach(() => {
+        vi.clearAllMocks();
+        vi.useRealTimers();
+    });
+
+    it('overlays a stored draft onto the initial values', () => {
+        const form = useEditDraft({
+            initial: { first_name: 'Original', company_name: 'Acme' },
+            draft: { data: { first_name: 'Drafted' }, updated_at: '2026-07-16T00:00:00Z' },
+            urls,
+        });
+
+        expect(form.values.first_name).toBe('Drafted');
+        expect(form.values.company_name).toBe('Acme');
+        expect(form.isDirty.value).toBe(true);
+        expect(form.hasDraft.value).toBe(true);
+        expect(form.restoredFrom.value).toBe('2026-07-16T00:00:00Z');
+    });
+
+    it('autosaves only the dirty diff after the debounce', async () => {
+        const form = useEditDraft({
+            initial: { first_name: 'Original', company_name: 'Acme' },
+            draft: null,
+            urls,
+        });
+
+        form.values.first_name = 'Changed';
+        await flushAutosave();
+
+        expect(httpMock.patch).toHaveBeenCalledTimes(1);
+        expect(httpMock.patch).toHaveBeenCalledWith(urls.draft, { data: { first_name: 'Changed' } });
+        expect(form.hasDraft.value).toBe(true);
+        expect(form.savedAt.value).toBe('2026-07-17T00:00:00Z');
+    });
+
+    it('collapses rapid edits into one autosave', async () => {
+        const form = useEditDraft({ initial: { first_name: 'Original' }, draft: null, urls });
+
+        form.values.first_name = 'C';
+        await nextTick();
+        await vi.advanceTimersByTimeAsync(300);
+        form.values.first_name = 'Ch';
+        await flushAutosave();
+
+        expect(httpMock.patch).toHaveBeenCalledTimes(1);
+        expect(httpMock.patch).toHaveBeenCalledWith(urls.draft, { data: { first_name: 'Ch' } });
+    });
+
+    it('deletes the draft when the form returns to clean', async () => {
+        const form = useEditDraft({
+            initial: { first_name: 'Original' },
+            draft: { data: { first_name: 'Drafted' }, updated_at: null },
+            urls,
+        });
+
+        form.values.first_name = 'Original';
+        await flushAutosave();
+
+        expect(httpMock.delete).toHaveBeenCalledWith(urls.draft);
+        expect(httpMock.patch).not.toHaveBeenCalled();
+        expect(form.hasDraft.value).toBe(false);
+    });
+
+    it('treats reordered array values as clean', async () => {
+        const form = useEditDraft({
+            initial: { customer_group_ids: [1, 2] },
+            draft: null,
+            urls,
+        });
+
+        form.values.customer_group_ids = [1, 2];
+        await flushAutosave();
+
+        expect(httpMock.patch).not.toHaveBeenCalled();
+        expect(form.isDirty.value).toBe(false);
+    });
+
+    it('commits the current diff and reloads on success', async () => {
+        const form = useEditDraft({ initial: { first_name: 'Original' }, draft: null, urls });
+
+        form.values.first_name = 'Changed';
+
+        // Read (and cache) the computed before committing: the commit must
+        // invalidate it when it re-baselines pristine, not leave it stale.
+        expect(form.isDirty.value).toBe(true);
+
+        await expect(form.commit()).resolves.toBe(true);
+
+        expect(httpMock.post).toHaveBeenCalledWith(urls.commit, {
+            data: { first_name: 'Changed' },
+            rebase: {},
+        });
+        expect(reloadMock).toHaveBeenCalled();
+        expect(form.hasDraft.value).toBe(false);
+        expect(form.isDirty.value).toBe(false);
+    });
+
+    it('cancels a pending autosave when committing', async () => {
+        const form = useEditDraft({ initial: { first_name: 'Original' }, draft: null, urls });
+
+        form.values.first_name = 'Changed';
+        await nextTick();
+
+        await form.commit();
+        await vi.runOnlyPendingTimersAsync();
+
+        expect(httpMock.patch).not.toHaveBeenCalled();
+    });
+
+    it('captures conflicts from a 409 without reloading', async () => {
+        const conflicts = [{ key: 'first_name', label: 'First name', mine: 'Mine', base: 'Base', theirs: 'Theirs' }];
+        httpMock.post.mockRejectedValue(new DraftConflictError(conflicts));
+
+        const form = useEditDraft({ initial: { first_name: 'Original' }, draft: null, urls });
+        form.values.first_name = 'Mine';
+
+        await expect(form.commit()).resolves.toBe(false);
+
+        expect(form.conflicts.value).toEqual(conflicts);
+        expect(reloadMock).not.toHaveBeenCalled();
+    });
+
+    it('captures field errors from a 422', async () => {
+        httpMock.post.mockRejectedValue(new ValidationError({ first_name: ['Required.', 'Second message.'] }));
+
+        const form = useEditDraft({ initial: { first_name: 'Original' }, draft: null, urls });
+        form.values.first_name = '';
+
+        await expect(form.commit()).resolves.toBe(false);
+
+        expect(form.errors.value).toEqual({ first_name: 'Required.' });
+    });
+
+    it('applies resolutions and re-commits with the rebase payload', async () => {
+        const form = useEditDraft({ initial: { first_name: 'Original' }, draft: null, urls });
+        form.values.first_name = 'Mine';
+
+        await expect(form.resolve({ first_name: 'Theirs' }, { first_name: 'Theirs' })).resolves.toBe(true);
+
+        expect(form.values.first_name).toBe('Theirs');
+        expect(httpMock.post).toHaveBeenCalledWith(urls.commit, {
+            data: { first_name: 'Theirs' },
+            rebase: { first_name: 'Theirs' },
+        });
+    });
+
+    it('discard resets values and deletes the server draft', async () => {
+        const form = useEditDraft({
+            initial: { first_name: 'Original' },
+            draft: { data: { first_name: 'Drafted' }, updated_at: '2026-07-16T00:00:00Z' },
+            urls,
+        });
+
+        await form.discard();
+
+        expect(form.values.first_name).toBe('Original');
+        expect(httpMock.delete).toHaveBeenCalledWith(urls.draft);
+        expect(form.hasDraft.value).toBe(false);
+        expect(form.restoredFrom.value).toBeNull();
+        expect(form.isDirty.value).toBe(false);
+    });
+
+    it('serialises in-flight requests so responses apply in order', async () => {
+        const order: string[] = [];
+        let releaseFirst!: () => void;
+
+        httpMock.patch
+            .mockImplementationOnce(async () => {
+                await new Promise<void>((resolvePromise) => {
+                    releaseFirst = resolvePromise;
+                });
+                order.push('first');
+
+                return { data: {}, updated_at: 'first' };
+            })
+            .mockImplementationOnce(async () => {
+                order.push('second');
+
+                return { data: {}, updated_at: 'second' };
+            });
+
+        const form = useEditDraft({ initial: { first_name: 'Original' }, draft: null, urls });
+
+        form.values.first_name = 'One';
+        await flushAutosave();
+
+        form.values.first_name = 'Two';
+        await flushAutosave();
+
+        releaseFirst();
+        await vi.runAllTimersAsync();
+
+        expect(order).toEqual(['first', 'second']);
+        expect(form.savedAt.value).toBe('second');
+    });
+});
diff --git a/packages/panel/resources/js/composables/useEditDraft.ts b/packages/panel/resources/js/composables/useEditDraft.ts
new file mode 100644
index 0000000000..ffac0c0b29
--- /dev/null
+++ b/packages/panel/resources/js/composables/useEditDraft.ts
@@ -0,0 +1,261 @@
+import { computed, reactive, ref, watch, type ComputedRef, type Ref } from 'vue';
+import { router } from '@inertiajs/vue3';
+import { DraftConflictError, ValidationError, http, type DraftConflict } from '../lib/http';
+
+export interface DraftState {
+    data: Record<string, unknown>;
+    updated_at: string | null;
+}
+
+export interface EditDraftOptions<T extends Record<string, unknown>> {
+    initial: T;
+    draft: DraftState | null;
+    urls: {
+        draft: string;
+        commit: string;
+    };
+    debounceMs?: number;
+}
+
+export interface EditDraftForm<T extends Record<string, unknown>> {
+    values: T;
+    errors: Ref<Record<string, string>>;
+    conflicts: Ref<DraftConflict[]>;
+    isDirty: ComputedRef<boolean>;
+    saving: Ref<boolean>;
+    committing: Ref<boolean>;
+    savedAt: Ref<string | null>;
+    hasDraft: Ref<boolean>;
+    restoredFrom: Ref<string | null>;
+    commit: () => Promise<boolean>;
+    resolve: (resolutions: Record<string, unknown>, rebase: Record<string, unknown>) => Promise<boolean>;
+    discard: () => Promise<void>;
+}
+
+// JSON round-trip rather than structuredClone: draft values are JSON-shaped
+// by construction, and this also unwraps Vue reactive proxies safely.
+function clone<T>(value: T): T {
+    return value === undefined ? value : (JSON.parse(JSON.stringify(value)) as T);
+}
+
+// The server stores empty nullable text fields as null; string-bound inputs
+// need '' back, or overlaying a draft would fake dirtiness against a
+// ''-shaped pristine value.
+function coerceToShape(value: unknown, reference: unknown): unknown {
+    return value === null && typeof reference === 'string' ? '' : value;
+}
+
+// Mirrors the server's comparison: object keys sort, list order matters.
+function normalize(value: unknown): unknown {
+    if (Array.isArray(value)) {
+        return value.map(normalize);
+    }
+
+    if (value && typeof value === 'object') {
+        return Object.fromEntries(
+            Object.entries(value as Record<string, unknown>)
+                .sort(([a], [b]) => (a < b ? -1 : a > b ? 1 : 0))
+                .map(([key, entry]) => [key, normalize(entry)]),
+        );
+    }
+
+    return value;
+}
+
+function encode(value: unknown): string {
+    return JSON.stringify(normalize(value)) ?? 'undefined';
+}
+
+/**
+ * Drives a draft-backed edit form: values overlay the staff member's stored
+ * draft, dirty fields autosave (debounced, serialised so a stale response
+ * never lands after a newer one), and commit() surfaces per-field conflicts
+ * for the resolution dialog instead of failing the whole save.
+ */
+export function useEditDraft<T extends Record<string, unknown>>(options: EditDraftOptions<T>): EditDraftForm<T> {
+    const debounceMs = options.debounceMs ?? 750;
+
+    // Reactive so isDirty recomputes when a successful commit re-baselines
+    // pristine to the committed values — a plain object would leave the stale
+    // dirty state cached until the next keystroke.
+    const pristine = reactive<Record<string, unknown>>(clone(options.initial));
+    const values = reactive(clone(options.initial)) as T;
+
+    for (const [key, value] of Object.entries(options.draft?.data ?? {})) {
+        if (key in values) {
+            (values as Record<string, unknown>)[key] = coerceToShape(clone(value), pristine[key]);
+        }
+    }
+
+    const errors = ref<Record<string, string>>({});
+    const conflicts = ref<DraftConflict[]>([]);
+    const saving = ref(false);
+    const committing = ref(false);
+    const savedAt = ref<string | null>(options.draft?.updated_at ?? null);
+    const hasDraft = ref(options.draft !== null);
+    const restoredFrom = ref<string | null>(options.draft?.updated_at ?? null);
+
+    const diff = (): Record<string, unknown> => {
+        const changed: Record<string, unknown> = {};
+
+        for (const key of Object.keys(pristine)) {
+            const value = (values as Record<string, unknown>)[key];
+
+            if (encode(value) !== encode(pristine[key])) {
+                changed[key] = value;
+            }
+        }
+
+        return changed;
+    };
+
+    const isDirty = computed(() => Object.keys(diff()).length > 0);
+
+    // In-flight requests chain so responses apply in request order.
+    let queue: Promise<unknown> = Promise.resolve();
+    const enqueue = <R>(task: () => Promise<R>): Promise<R> => {
+        const run = queue.then(task, task);
+        queue = run.catch(() => undefined);
+
+        return run;
+    };
+
+    let timer: ReturnType<typeof setTimeout> | null = null;
+    const cancelPendingAutosave = (): void => {
+        if (timer !== null) {
+            clearTimeout(timer);
+            timer = null;
+        }
+    };
+
+    const autosave = (): Promise<void> =>
+        enqueue(async () => {
+            const changed = diff();
+
+            if (Object.keys(changed).length === 0) {
+                if (!hasDraft.value) {
+                    return;
+                }
+
+                saving.value = true;
+
+                try {
+                    await http.delete(options.urls.draft);
+                    hasDraft.value = false;
+                    savedAt.value = null;
+                } finally {
+                    saving.value = false;
+                }
+
+                return;
+            }
+
+            saving.value = true;
+
+            try {
+                const response = await http.patch<{ data: Record<string, unknown>; updated_at: string | null }>(
+                    options.urls.draft,
+                    { data: changed },
+                );
+                hasDraft.value = true;
+                savedAt.value = response.updated_at;
+            } finally {
+                saving.value = false;
+            }
+        });
+
+    watch(
+        values,
+        () => {
+            cancelPendingAutosave();
+            timer = setTimeout(() => {
+                timer = null;
+                autosave().catch(() => undefined);
+            }, debounceMs);
+        },
+        { deep: true },
+    );
+
+    const send = async (rebase: Record<string, unknown>): Promise<boolean> => {
+        cancelPendingAutosave();
+        committing.value = true;
+        errors.value = {};
+
+        try {
+            await enqueue(() => http.post(options.urls.commit, { data: diff(), rebase }));
+
+            conflicts.value = [];
+            hasDraft.value = false;
+            savedAt.value = null;
+            restoredFrom.value = null;
+            Object.assign(pristine, clone(values));
+
+            // reload() preserves scroll and state; it refreshes props and
+            // surfaces the session flash the commit endpoint set.
+            router.reload();
+
+            return true;
+        } catch (error) {
+            if (error instanceof DraftConflictError) {
+                conflicts.value = error.conflicts;
+
+                return false;
+            }
+
+            if (error instanceof ValidationError) {
+                errors.value = Object.fromEntries(
+                    Object.entries(error.errors).map(([key, messages]) => [key, messages[0]]),
+                );
+
+                return false;
+            }
+
+            throw error;
+        } finally {
+            committing.value = false;
+        }
+    };
+
+    const commit = (): Promise<boolean> => send({});
+
+    const resolve = (resolutions: Record<string, unknown>, rebase: Record<string, unknown>): Promise<boolean> => {
+        for (const [key, value] of Object.entries(resolutions)) {
+            if (key in values) {
+                (values as Record<string, unknown>)[key] = coerceToShape(clone(value), pristine[key]);
+            }
+        }
+
+        return send(rebase);
+    };
+
+    const discard = async (): Promise<void> => {
+        cancelPendingAutosave();
+
+        for (const key of Object.keys(pristine)) {
+            (values as Record<string, unknown>)[key] = clone(pristine[key]);
+        }
+
+        await enqueue(() => http.delete(options.urls.draft));
+
+        hasDraft.value = false;
+        savedAt.value = null;
+        restoredFrom.value = null;
+        errors.value = {};
+        conflicts.value = [];
+    };
+
+    return {
+        values,
+        errors,
+        conflicts,
+        isDirty,
+        saving,
+        committing,
+        savedAt,
+        hasDraft,
+        restoredFrom,
+        commit,
+        resolve,
+        discard,
+    };
+}
diff --git a/packages/panel/resources/js/composables/useToasts.ts b/packages/panel/resources/js/composables/useToasts.ts
new file mode 100644
index 0000000000..75047e7632
--- /dev/null
+++ b/packages/panel/resources/js/composables/useToasts.ts
@@ -0,0 +1,88 @@
+import { ref, type Ref } from 'vue';
+
+export type ToastTone = 'success' | 'error' | 'info';
+
+export interface Toast {
+    id: number;
+    tone: ToastTone;
+    message: string;
+    /** Milliseconds before auto-dismiss; 0 keeps the toast until closed. */
+    duration: number;
+}
+
+export interface ToastApi {
+    toasts: Ref<Toast[]>;
+    success: (message: string, duration?: number) => number;
+    error: (message: string, duration?: number) => number;
+    info: (message: string, duration?: number) => number;
+    dismiss: (id: number) => void;
+    clear: () => void;
+}
+
+// Errors stay until dismissed; confirmations and notes clear themselves.
+const DEFAULT_DURATIONS: Record<ToastTone, number> = {
+    success: 6000,
+    info: 6000,
+    error: 0,
+};
+
+// Module-level store so any page, component, or add-on bundle pushes into the
+// same stack, and toasts survive layout swaps between visits.
+const toasts = ref<Toast[]>([]);
+let nextId = 0;
+
+function push(tone: ToastTone, message: string, duration?: number): number {
+    const id = ++nextId;
+
+    toasts.value = [...toasts.value, { id, tone, message, duration: duration ?? DEFAULT_DURATIONS[tone] }];
+
+    return id;
+}
+
+function dismiss(id: number): void {
+    toasts.value = toasts.value.filter((toast) => toast.id !== id);
+}
+
+export function useToasts(): ToastApi {
+    return {
+        toasts,
+        success: (message, duration?) => push('success', message, duration),
+        error: (message, duration?) => push('error', message, duration),
+        info: (message, duration?) => push('info', message, duration),
+        dismiss,
+        clear: () => {
+            toasts.value = [];
+        },
+    };
+}
+
+export interface ServerFlash {
+    success?: string | null;
+    error?: string | null;
+    info?: string | null;
+}
+
+// The flash prop object is a fresh reference per server response, so identity
+// tracking both dedupes double-fires (two Toaster instances during a layout
+// swap) and still re-toasts an identical message on a repeat save.
+let handledFlash: ServerFlash | null = null;
+
+export function pushServerFlash(flash: ServerFlash | null | undefined): void {
+    if (!flash || flash === handledFlash) {
+        return;
+    }
+
+    handledFlash = flash;
+
+    if (flash.success) {
+        push('success', flash.success);
+    }
+
+    if (flash.error) {
+        push('error', flash.error);
+    }
+
+    if (flash.info) {
+        push('info', flash.info);
+    }
+}
diff --git a/packages/panel/resources/js/layouts/PanelLayout.vue b/packages/panel/resources/js/layouts/PanelLayout.vue
index 517f64f4aa..67ec2bf4a6 100644
--- a/packages/panel/resources/js/layouts/PanelLayout.vue
+++ b/packages/panel/resources/js/layouts/PanelLayout.vue
@@ -5,6 +5,7 @@ import { usePage } from '@inertiajs/vue3';
 import { useI18n } from 'vue-i18n';
 import NavBody from '../components/NavBody.vue';
 import Icon from '../components/Icon.vue';
+import Toaster from '../components/Toaster.vue';
 import { useNavState } from '../composables/useNavState';
 
 const { state, toggleCollapsed, openDrawer } = useNavState();
@@ -144,5 +145,7 @@ onUnmounted(() => {
                 <slot />
             </main>
         </div>
+
+        <Toaster />
     </TooltipProvider>
 </template>
diff --git a/packages/panel/resources/js/layouts/SettingsShell.vue b/packages/panel/resources/js/layouts/SettingsShell.vue
index 89f749b732..d3b7c438aa 100644
--- a/packages/panel/resources/js/layouts/SettingsShell.vue
+++ b/packages/panel/resources/js/layouts/SettingsShell.vue
@@ -9,7 +9,7 @@ import Icon from '../components/Icon.vue';
 import PageActions, { type PageAction } from '../components/PageActions.vue';
 import PageHeader from '../components/PageHeader.vue';
 import PageZone from '../components/PageZone.vue';
-import FlashMessage from '../components/FlashMessage.vue';
+import Toaster from '../components/Toaster.vue';
 import { useNavState } from '../composables/useNavState';
 
 // Settings pages get the same scaffold as top-level pages: a breadcrumb bar
@@ -42,8 +42,6 @@ const crumbs = computed<BreadcrumbItem[]>(() => {
 
 const panelName = computed(() => (usePage().props.panel as { name: string }).name);
 const pageActions = computed(() => (usePage().props.pageActions as PageAction[] | undefined) ?? []);
-const flashSuccess = computed(() => (usePage().props.flash as { success?: string })?.success);
-const flashError = computed(() => (usePage().props.flash as { error?: string })?.error);
 
 const isDesktop = ref(typeof window !== 'undefined' && window.matchMedia ? window.matchMedia('(min-width: 1024px)').matches : true);
 
@@ -192,14 +190,13 @@ onUnmounted(() => {
                 <div :class="wide ? 'px-4 sm:px-5 lg:px-7 max-w-[1400px] w-full mx-auto pt-5 pb-7' : 'mx-auto w-full max-w-5xl px-6 pt-5 pb-7'">
                     <PageZone region="main" position="before" />
 
-                    <FlashMessage :message="flashSuccess" class="mb-4" />
-                    <FlashMessage :message="flashError" tone="error" :timeout="0" class="mb-4" />
-
                     <slot />
 
                     <PageZone region="main" position="after" />
                 </div>
             </main>
         </div>
+
+        <Toaster />
     </TooltipProvider>
 </template>
diff --git a/packages/panel/resources/js/lib/http.test.ts b/packages/panel/resources/js/lib/http.test.ts
new file mode 100644
index 0000000000..0b64e80261
--- /dev/null
+++ b/packages/panel/resources/js/lib/http.test.ts
@@ -0,0 +1,76 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { DraftConflictError, HttpError, ValidationError, http } from './http';
+
+function jsonResponse(status: number, body: unknown): Response {
+    return new Response(JSON.stringify(body), {
+        status,
+        headers: { 'Content-Type': 'application/json' },
+    });
+}
+
+describe('http', () => {
+    beforeEach(() => {
+        document.cookie = 'XSRF-TOKEN=token%3Dvalue';
+        vi.stubGlobal('fetch', vi.fn());
+    });
+
+    afterEach(() => {
+        vi.unstubAllGlobals();
+    });
+
+    it('sends JSON requests with the XSRF token from the cookie', async () => {
+        vi.mocked(fetch).mockResolvedValue(jsonResponse(200, { ok: true }));
+
+        await http.patch('/draft', { data: { first_name: 'A' } });
+
+        const [url, init] = vi.mocked(fetch).mock.calls[0];
+
+        expect(url).toBe('/draft');
+        expect(init?.method).toBe('PATCH');
+        expect(init?.body).toBe(JSON.stringify({ data: { first_name: 'A' } }));
+        expect(init?.headers).toMatchObject({
+            Accept: 'application/json',
+            'X-XSRF-TOKEN': 'token=value',
+        });
+    });
+
+    it('returns the decoded payload on success', async () => {
+        vi.mocked(fetch).mockResolvedValue(jsonResponse(200, { updated_at: 'now' }));
+
+        await expect(http.post('/commit')).resolves.toEqual({ updated_at: 'now' });
+    });
+
+    it('returns null for 204 responses', async () => {
+        vi.mocked(fetch).mockResolvedValue(new Response(null, { status: 204 }));
+
+        await expect(http.delete('/draft')).resolves.toBeNull();
+    });
+
+    it('throws a typed ValidationError on 422', async () => {
+        vi.mocked(fetch).mockResolvedValue(jsonResponse(422, { errors: { first_name: ['Required.'] } }));
+
+        const error = await http.post('/commit').catch((caught: unknown) => caught);
+
+        expect(error).toBeInstanceOf(ValidationError);
+        expect((error as ValidationError).errors).toEqual({ first_name: ['Required.'] });
+    });
+
+    it('throws a typed DraftConflictError carrying the conflict set on 409', async () => {
+        const conflicts = [{ key: 'first_name', label: 'First name', mine: 'A', base: 'B', theirs: 'C' }];
+        vi.mocked(fetch).mockResolvedValue(jsonResponse(409, { conflicts }));
+
+        const error = await http.post('/commit').catch((caught: unknown) => caught);
+
+        expect(error).toBeInstanceOf(DraftConflictError);
+        expect((error as DraftConflictError).conflicts).toEqual(conflicts);
+    });
+
+    it('throws HttpError for other failure statuses', async () => {
+        vi.mocked(fetch).mockResolvedValue(jsonResponse(500, {}));
+
+        const error = await http.get('/draft').catch((caught: unknown) => caught);
+
+        expect(error).toBeInstanceOf(HttpError);
+        expect((error as HttpError).status).toBe(500);
+    });
+});
diff --git a/packages/panel/resources/js/lib/http.ts b/packages/panel/resources/js/lib/http.ts
new file mode 100644
index 0000000000..cae6127853
--- /dev/null
+++ b/packages/panel/resources/js/lib/http.ts
@@ -0,0 +1,79 @@
+// The panel's sanctioned non-Inertia transport, for endpoints whose responses
+// have no home in Inertia's page-visit cycle (draft autosave, commit's 409
+// conflict payload). Everything page-shaped stays on @inertiajs/vue3.
+
+export interface DraftConflict {
+    key: string;
+    label: string;
+    mine: unknown;
+    base: unknown;
+    theirs: unknown;
+}
+
+export class ValidationError extends Error {
+    constructor(public readonly errors: Record<string, string[]>) {
+        super('The request payload failed validation.');
+        this.name = 'ValidationError';
+    }
+}
+
+export class DraftConflictError extends Error {
+    constructor(public readonly conflicts: DraftConflict[]) {
+        super('The commit conflicts with concurrent changes.');
+        this.name = 'DraftConflictError';
+    }
+}
+
+export class HttpError extends Error {
+    constructor(public readonly status: number) {
+        super(`Request failed with status ${status}.`);
+        this.name = 'HttpError';
+    }
+}
+
+function xsrfToken(): string {
+    const match = document.cookie.match(/(?:^|;\s*)XSRF-TOKEN=([^;]+)/);
+
+    return match ? decodeURIComponent(match[1]) : '';
+}
+
+async function request<T>(method: string, url: string, body?: unknown): Promise<T> {
+    const response = await fetch(url, {
+        method,
+        credentials: 'same-origin',
+        headers: {
+            Accept: 'application/json',
+            'Content-Type': 'application/json',
+            'X-Requested-With': 'XMLHttpRequest',
+            'X-XSRF-TOKEN': xsrfToken(),
+        },
+        body: body === undefined ? undefined : JSON.stringify(body),
+    });
+
+    if (response.status === 204) {
+        return null as T;
+    }
+
+    const payload = await response.json().catch(() => null);
+
+    if (response.status === 422) {
+        throw new ValidationError((payload?.errors ?? {}) as Record<string, string[]>);
+    }
+
+    if (response.status === 409) {
+        throw new DraftConflictError((payload?.conflicts ?? []) as DraftConflict[]);
+    }
+
+    if (!response.ok) {
+        throw new HttpError(response.status);
+    }
+
+    return payload as T;
+}
+
+export const http = {
+    get: <T>(url: string): Promise<T> => request<T>('GET', url),
+    post: <T>(url: string, body?: unknown): Promise<T> => request<T>('POST', url, body),
+    patch: <T>(url: string, body?: unknown): Promise<T> => request<T>('PATCH', url, body),
+    delete: <T = null>(url: string): Promise<T> => request<T>('DELETE', url),
+};
diff --git a/packages/panel/resources/js/pages/account/Security.vue b/packages/panel/resources/js/pages/account/Security.vue
index 0719d0b9be..a6e6b65c28 100644
--- a/packages/panel/resources/js/pages/account/Security.vue
+++ b/packages/panel/resources/js/pages/account/Security.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import { Head, useForm, usePage } from '@inertiajs/vue3';
+import { Head, useForm } from '@inertiajs/vue3';
 import { useI18n } from 'vue-i18n';
 import Button from '../../components/Button.vue';
 import CodeInput from '../../components/CodeInput.vue';
 import FieldLabel from '../../components/FieldLabel.vue';
-import FlashMessage from '../../components/FlashMessage.vue';
 import Icon from '../../components/Icon.vue';
 import TextInput from '../../components/TextInput.vue';
 
@@ -24,8 +23,6 @@ const props = defineProps<{
 
 const { t } = useI18n();
 
-const flashSuccess = computed(() => (usePage().props.flash as { success?: string })?.success);
-
 const passwordForm = useForm({
     current_password: '',
     password: '',
@@ -75,8 +72,6 @@ const copyCodes = () => {
             <Head :title="t('auth.security_title')" />
             <h1 class="text-2xl font-semibold tracking-[-0.02em] text-ink-900">{{ t('auth.security_title') }}</h1>
 
-            <FlashMessage :message="flashSuccess" />
-
             <!-- Password -->
             <section class="rounded-lg border border-line bg-paper p-6">
                 <h2 class="text-[15px] font-semibold text-ink-900">{{ t('auth.password_section_title') }}</h2>
diff --git a/packages/panel/resources/js/pages/auth/ForgotPassword.vue b/packages/panel/resources/js/pages/auth/ForgotPassword.vue
index acd6ab4078..dd6509d3cc 100644
--- a/packages/panel/resources/js/pages/auth/ForgotPassword.vue
+++ b/packages/panel/resources/js/pages/auth/ForgotPassword.vue
@@ -5,7 +5,6 @@ import { useI18n } from 'vue-i18n';
 import AuthLayout from '../../layouts/AuthLayout.vue';
 import Button from '../../components/Button.vue';
 import FieldLabel from '../../components/FieldLabel.vue';
-import FlashMessage from '../../components/FlashMessage.vue';
 import Icon from '../../components/Icon.vue';
 import TextInput from '../../components/TextInput.vue';
 
@@ -37,7 +36,16 @@ const submit = () => form.post(props.urls.store);
             <h1 class="text-2xl font-semibold tracking-[-0.02em] text-ink-900">{{ t('auth.forgot_title') }}</h1>
             <p class="mt-1.5 text-[13px] text-ink-500">{{ t('auth.forgot_subtitle') }}</p>
 
-            <FlashMessage :message="flashSuccess" :timeout="0" class="mt-5" />
+            <!-- Persistent inline note rather than a toast: "check your email"
+                 must stay readable for as long as the page is open. -->
+            <div
+                v-if="flashSuccess"
+                role="status"
+                class="mt-5 flex items-center gap-2 rounded-md border border-sage-border bg-sage-soft px-3 py-2 text-[12px] text-sage-ink"
+            >
+                <Icon name="check" cls="sm" class="shrink-0" />
+                <span class="flex-1 min-w-0">{{ flashSuccess }}</span>
+            </div>
 
             <div class="mt-7">
                 <FieldLabel>{{ t('auth.email') }}</FieldLabel>
diff --git a/packages/panel/resources/js/pages/customers/Edit.vue b/packages/panel/resources/js/pages/customers/Edit.vue
index 3dacc939e6..feabcad5b4 100644
--- a/packages/panel/resources/js/pages/customers/Edit.vue
+++ b/packages/panel/resources/js/pages/customers/Edit.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue';
-import { router, useForm, usePage } from '@inertiajs/vue3';
+import { router, useForm } from '@inertiajs/vue3';
 import { useI18n } from 'vue-i18n';
 import Button from '../../components/Button.vue';
 import AddressCard from '../../components/AddressCard.vue';
@@ -10,9 +10,10 @@ import Breadcrumbs, { type BreadcrumbItem } from '../../components/Breadcrumbs.v
 import Combobox from '../../components/Combobox.vue';
 import ConfirmDialog from '../../components/ConfirmDialog.vue';
 import Dialog from '../../components/Dialog.vue';
+import DraftActions from '../../components/DraftActions.vue';
+import DraftConflictDialog from '../../components/DraftConflictDialog.vue';
 import FieldLabel from '../../components/FieldLabel.vue';
 import FilterDropdown, { type FilterOption } from '../../components/FilterDropdown.vue';
-import FlashMessage from '../../components/FlashMessage.vue';
 import Icon from '../../components/Icon.vue';
 import PageEmpty from '../../components/PageEmpty.vue';
 import PageHeader from '../../components/PageHeader.vue';
@@ -26,6 +27,7 @@ import Textarea from '../../components/Textarea.vue';
 import TextInput from '../../components/TextInput.vue';
 import TimeSeriesChart, { type ChartPoint } from '../../components/TimeSeriesChart.vue';
 import PanelLayout from '../../layouts/PanelLayout.vue';
+import { useEditDraft, type DraftState } from '../../composables/useEditDraft';
 
 interface OptionItem {
     id: number;
@@ -106,6 +108,7 @@ const props = defineProps<{
         range: string;
         buckets: ChartPoint[];
     };
+    draft: DraftState | null;
     urls: {
         index: string;
         update: string;
@@ -113,13 +116,13 @@ const props = defineProps<{
         addressesStore: string;
         usersStore: string;
         notesUpdate: string;
+        draft: string;
+        draftCommit: string;
     };
 }>();
 
 const { t, te } = useI18n();
 
-const flashSuccess = computed(() => (usePage().props.flash as { success?: string } | undefined)?.success);
-
 const initials = (): string => ((props.customer.first_name?.[0] ?? '?') + (props.customer.last_name?.[0] ?? '')).toUpperCase();
 const fullName = computed(() => [props.customer.title, props.customer.first_name, props.customer.last_name].filter(Boolean).join(' '));
 
@@ -140,17 +143,46 @@ const headerUsers = computed(() => {
     return props.users.length > 1 ? t('customers.user_count', props.users.length) : null;
 });
 
-// Personal details + customer groups
-const detailsForm = useForm({
-    title: props.customer.title ?? '',
-    first_name: props.customer.first_name,
-    last_name: props.customer.last_name,
-    company_name: props.customer.company_name ?? '',
-    tax_identifier: props.customer.tax_identifier ?? '',
-    account_ref: props.customer.account_ref ?? '',
-    customer_group_ids: props.customer.customer_groups.map((group) => group.id),
+// Personal details + customer groups, driven by an autosaving edit draft:
+// dirty fields persist server-side and commit with field-level conflict
+// detection instead of a last-write-wins PUT. The save cluster lives in the
+// sticky breadcrumb bar via <DraftActions :form="draftForm" />.
+const draftForm = useEditDraft({
+    initial: {
+        title: props.customer.title ?? '',
+        first_name: props.customer.first_name,
+        last_name: props.customer.last_name,
+        company_name: props.customer.company_name ?? '',
+        tax_identifier: props.customer.tax_identifier ?? '',
+        account_ref: props.customer.account_ref ?? '',
+        customer_group_ids: props.customer.customer_groups.map((group) => group.id),
+    },
+    draft: props.draft,
+    urls: { draft: props.urls.draft, commit: props.urls.draftCommit },
+});
+
+const {
+    values: details,
+    errors: detailsErrors,
+    conflicts: draftConflicts,
+    committing: draftCommitting,
+    commit: commitDetails,
+    resolve: resolveDraft,
+} = draftForm;
+
+const conflictOpen = computed({
+    get: () => draftConflicts.value.length > 0,
+    set: (value: boolean) => {
+        if (!value) {
+            draftConflicts.value = [];
+        }
+    },
 });
 
+const onResolveConflicts = (resolutions: Record<string, unknown>, rebase: Record<string, unknown>): void => {
+    void resolveDraft(resolutions, rebase);
+};
+
 // Stored values stay canonical; only the visible labels are translated. A stored
 // title outside the base list (e.g. entered at checkout) is kept as its own option
 // so it still displays and survives a save untouched.
@@ -176,22 +208,22 @@ const titleOptions = computed(() => {
 const groupName = (id: number): string => props.customerGroups.find((group) => group.id === id)?.name ?? String(id);
 
 const addableGroupOptions = computed(() => {
-    const taken = new Set(detailsForm.customer_group_ids);
+    const taken = new Set(details.customer_group_ids);
 
     return props.customerGroups.filter((group) => !taken.has(group.id)).map((group) => ({ value: group.id, label: group.name }));
 });
 
 const addGroupSelection = ref<string | number | null>(null);
 const onAddGroup = (value: string | number): void => {
-    detailsForm.customer_group_ids.push(Number(value));
+    details.customer_group_ids.push(Number(value));
     addGroupSelection.value = null;
 };
 const removeGroup = (id: number): void => {
-    detailsForm.customer_group_ids = detailsForm.customer_group_ids.filter((groupId) => groupId !== id);
+    details.customer_group_ids = details.customer_group_ids.filter((groupId) => groupId !== id);
 };
 
 const submitDetails = (): void => {
-    detailsForm.put(props.urls.update, { preserveScroll: true });
+    void commitDetails();
 };
 
 // Confirmation dialog (shared across customer delete / address delete / user unlink)
@@ -505,9 +537,7 @@ const tabDefs = computed(() => [
         <div data-screen-label="Customer detail" class="contents">
             <Breadcrumbs :items="breadcrumbs">
                 <template #actions>
-                    <a href="https://docs.lunarphp.com/" target="_blank" rel="noopener">
-                        <Button icon="help"><span class="hidden sm:inline">{{ t('common.docs') }}</span></Button>
-                    </a>
+                    <DraftActions :form="draftForm" />
                 </template>
             </Breadcrumbs>
 
@@ -538,8 +568,6 @@ const tabDefs = computed(() => [
             <div class="px-4 sm:px-5 lg:px-7 max-w-[1400px] w-full mx-auto pt-5 pb-7">
                 <PageZone region="main" position="before" />
 
-                <FlashMessage :message="flashSuccess" class="mb-4" />
-
                 <div class="flex flex-col gap-8 lg:grid lg:grid-cols-[minmax(0,1fr)_320px]">
                     <div class="min-w-0">
                         <!-- Order value over time; the range switcher reloads only this card. -->
@@ -565,34 +593,34 @@ const tabDefs = computed(() => [
                                 <div class="grid grid-cols-1 sm:grid-cols-12 gap-3">
                                     <div class="sm:col-span-2">
                                         <FieldLabel for="customer-title">{{ t('customers.field_title') }}</FieldLabel>
-                                        <Select id="customer-title" v-model="detailsForm.title">
+                                        <Select id="customer-title" v-model="details.title">
                                             <option v-for="option in titleOptions" :key="option.value || 'none'" :value="option.value">{{ option.label }}</option>
                                         </Select>
                                     </div>
                                     <div class="sm:col-span-5">
                                         <FieldLabel for="customer-first-name" required>{{ t('customers.field_first_name') }}</FieldLabel>
-                                        <TextInput id="customer-first-name" v-model="detailsForm.first_name" :invalid="!!detailsForm.errors.first_name" />
-                                        <div v-if="detailsForm.errors.first_name" class="mt-1 text-[11px] text-danger">{{ detailsForm.errors.first_name }}</div>
+                                        <TextInput id="customer-first-name" v-model="details.first_name" :invalid="!!detailsErrors.first_name" />
+                                        <div v-if="detailsErrors.first_name" class="mt-1 text-[11px] text-danger">{{ detailsErrors.first_name }}</div>
                                     </div>
                                     <div class="sm:col-span-5">
                                         <FieldLabel for="customer-last-name" required>{{ t('customers.field_last_name') }}</FieldLabel>
-                                        <TextInput id="customer-last-name" v-model="detailsForm.last_name" :invalid="!!detailsForm.errors.last_name" />
-                                        <div v-if="detailsForm.errors.last_name" class="mt-1 text-[11px] text-danger">{{ detailsForm.errors.last_name }}</div>
+                                        <TextInput id="customer-last-name" v-model="details.last_name" :invalid="!!detailsErrors.last_name" />
+                                        <div v-if="detailsErrors.last_name" class="mt-1 text-[11px] text-danger">{{ detailsErrors.last_name }}</div>
                                     </div>
                                     <div class="sm:col-span-12">
                                         <FieldLabel for="customer-company-name">{{ t('customers.field_company_name') }}</FieldLabel>
-                                        <TextInput id="customer-company-name" v-model="detailsForm.company_name" :placeholder="t('common.optional')" :invalid="!!detailsForm.errors.company_name" />
-                                        <div v-if="detailsForm.errors.company_name" class="mt-1 text-[11px] text-danger">{{ detailsForm.errors.company_name }}</div>
+                                        <TextInput id="customer-company-name" v-model="details.company_name" :placeholder="t('common.optional')" :invalid="!!detailsErrors.company_name" />
+                                        <div v-if="detailsErrors.company_name" class="mt-1 text-[11px] text-danger">{{ detailsErrors.company_name }}</div>
                                     </div>
                                     <div class="sm:col-span-6">
                                         <FieldLabel for="customer-tax-identifier">{{ t('customers.field_tax_identifier') }}</FieldLabel>
-                                        <TextInput id="customer-tax-identifier" v-model="detailsForm.tax_identifier" mono :invalid="!!detailsForm.errors.tax_identifier" />
-                                        <div v-if="detailsForm.errors.tax_identifier" class="mt-1 text-[11px] text-danger">{{ detailsForm.errors.tax_identifier }}</div>
+                                        <TextInput id="customer-tax-identifier" v-model="details.tax_identifier" mono :invalid="!!detailsErrors.tax_identifier" />
+                                        <div v-if="detailsErrors.tax_identifier" class="mt-1 text-[11px] text-danger">{{ detailsErrors.tax_identifier }}</div>
                                     </div>
                                     <div class="sm:col-span-6">
                                         <FieldLabel for="customer-account-ref">{{ t('customers.field_account_ref') }}</FieldLabel>
-                                        <TextInput id="customer-account-ref" v-model="detailsForm.account_ref" mono :invalid="!!detailsForm.errors.account_ref" />
-                                        <div v-if="detailsForm.errors.account_ref" class="mt-1 text-[11px] text-danger">{{ detailsForm.errors.account_ref }}</div>
+                                        <TextInput id="customer-account-ref" v-model="details.account_ref" mono :invalid="!!detailsErrors.account_ref" />
+                                        <div v-if="detailsErrors.account_ref" class="mt-1 text-[11px] text-danger">{{ detailsErrors.account_ref }}</div>
                                     </div>
                                 </div>
                             </Section>
@@ -601,7 +629,7 @@ const tabDefs = computed(() => [
                                 <template #desc>{{ t('customers.groups_desc') }}</template>
                                 <div class="flex flex-wrap items-center gap-1.5">
                                     <span
-                                        v-for="id in detailsForm.customer_group_ids"
+                                        v-for="id in details.customer_group_ids"
                                         :key="id"
                                         class="inline-flex items-center gap-1 rounded-full border bg-surface-2 border-line text-ink-700 h-[22px] pl-2 pr-1 text-[11px] font-medium"
                                     >
@@ -615,7 +643,7 @@ const tabDefs = computed(() => [
                                             <Icon name="x" cls="sm" />
                                         </button>
                                     </span>
-                                    <span v-if="!detailsForm.customer_group_ids.length" class="text-[12px] text-ink-500">{{ t('customers.no_groups') }}</span>
+                                    <span v-if="!details.customer_group_ids.length" class="text-[12px] text-ink-500">{{ t('customers.no_groups') }}</span>
                                     <div class="ml-auto min-w-[180px] max-w-[220px] flex-1">
                                         <Combobox
                                             v-if="addableGroupOptions.length"
@@ -628,9 +656,9 @@ const tabDefs = computed(() => [
                                 </div>
                             </Section>
 
-                            <div class="pt-2 pb-6">
-                                <Button type="submit" variant="primary" :disabled="detailsForm.processing">{{ t('common.save_changes') }}</Button>
-                            </div>
+                            <!-- The save cluster lives in the sticky breadcrumb bar; the
+                                 hidden submit keeps Enter-to-save working in the form. -->
+                            <button type="submit" class="hidden" aria-hidden="true" tabindex="-1" />
                         </form>
 
                         <PageZone region="main" position="after" :customer="customer" />
@@ -869,6 +897,13 @@ const tabDefs = computed(() => [
                 :confirm-label="confirmLabel"
                 @confirm="confirmDestroy"
             />
+
+            <DraftConflictDialog
+                v-model:open="conflictOpen"
+                :conflicts="draftConflicts"
+                :busy="draftCommitting"
+                @resolve="onResolveConflicts"
+            />
         </div>
     </PanelLayout>
 </template>
diff --git a/packages/panel/resources/js/pages/customers/Index.vue b/packages/panel/resources/js/pages/customers/Index.vue
index f17664942c..89d2d5ade8 100644
--- a/packages/panel/resources/js/pages/customers/Index.vue
+++ b/packages/panel/resources/js/pages/customers/Index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, reactive, ref, watch } from 'vue';
-import { Link, router, usePage } from '@inertiajs/vue3';
+import { Link, router } from '@inertiajs/vue3';
 import { useI18n } from 'vue-i18n';
 import Button from '../../components/Button.vue';
 import DataTable from '../../components/DataTable.vue';
@@ -13,7 +13,6 @@ import Icon from '../../components/Icon.vue';
 import Pagination from '../../components/Pagination.vue';
 import PageEmpty from '../../components/PageEmpty.vue';
 import FilterDropdown, { type FilterOption } from '../../components/FilterDropdown.vue';
-import FlashMessage from '../../components/FlashMessage.vue';
 import KpiCard from '../../components/KpiCard.vue';
 import StatusBadge from '../../components/StatusBadge.vue';
 import TextInput from '../../components/TextInput.vue';
@@ -101,8 +100,6 @@ const props = defineProps<{
 const selected = ref<(string | number)[]>([]);
 const hasBulkActions = computed(() => props.tableBulkActions.length > 0);
 
-const flashSuccess = computed(() => (usePage().props.flash as { success?: string } | undefined)?.success);
-
 // Sort options fold the backend's sort + direction pair into a single dropdown value,
 // matching the prototype's one-control sort.
 const sortOptions: { value: string; label: string; sort: string; direction: string }[] = [
@@ -258,8 +255,6 @@ const formatShortDate = (value: string): string =>
             <div class="px-4 sm:px-5 lg:px-7 max-w-[1400px] w-full mx-auto pt-5 pb-7">
                 <PageZone region="main" position="before" />
 
-                <FlashMessage :message="flashSuccess" class="mb-4" />
-
                 <!-- KPI strip; dismissable, restored via "Show KPIs". -->
                 <div v-if="!kpisDismissed" class="mb-5 relative">
                     <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
diff --git a/packages/panel/resources/js/ui.ts b/packages/panel/resources/js/ui.ts
index 0fe8d0be36..efaf427d21 100644
--- a/packages/panel/resources/js/ui.ts
+++ b/packages/panel/resources/js/ui.ts
@@ -17,7 +17,11 @@ export { default as DataTable } from './components/DataTable.vue';
 export { default as Pagination } from './components/Pagination.vue';
 export { default as PageEmpty } from './components/PageEmpty.vue';
 export { default as StatusBadge } from './components/StatusBadge.vue';
-export { default as FlashMessage } from './components/FlashMessage.vue';
+
+// Notifications
+export { default as Toaster } from './components/Toaster.vue';
+export { useToasts } from './composables/useToasts';
+export type { ServerFlash, Toast, ToastApi, ToastTone } from './composables/useToasts';
 
 // Filters / stats
 export { default as FilterDropdown } from './components/FilterDropdown.vue';
@@ -42,6 +46,14 @@ export { default as Tooltip } from './components/Tooltip.vue';
 export { default as SideCard } from './components/SideCard.vue';
 export { default as Tabs } from './components/Tabs.vue';
 
+// Edit drafts
+export { default as DraftActions } from './components/DraftActions.vue';
+export { default as DraftConflictDialog } from './components/DraftConflictDialog.vue';
+export { useEditDraft } from './composables/useEditDraft';
+export type { DraftState, EditDraftForm, EditDraftOptions } from './composables/useEditDraft';
+export { DraftConflictError, HttpError, ValidationError, http } from './lib/http';
+export type { DraftConflict } from './lib/http';
+
 // Primitives
 export { default as Button } from './components/Button.vue';
 export { default as Icon } from './components/Icon.vue';
diff --git a/packages/panel/resources/lang/ar/drafts.php b/packages/panel/resources/lang/ar/drafts.php
new file mode 100644
index 0000000000..db2a383684
--- /dev/null
+++ b/packages/panel/resources/lang/ar/drafts.php
@@ -0,0 +1,18 @@
+<?php
+
+return [
+    'flash_committed' => 'تم حفظ التغييرات.',
+    'restored' => 'تمت استعادة التغييرات غير المحفوظة من {time}.',
+    'discard' => 'تجاهل',
+    'saving' => 'جارٍ حفظ المسودة…',
+    'saved' => 'تم حفظ المسودة',
+    'conflict_title' => 'حل التغييرات المتعارضة',
+    'conflict_description' => 'قام شخص آخر بتغيير هذه الحقول أثناء تحريرك. اختر القيمة التي تريد الاحتفاظ بها لكل حقل؛ وسيتم حفظ بقية تغييراتك دون تأثر.',
+    'keep_mine' => 'الاحتفاظ بقيمتي',
+    'take_theirs' => 'أخذ قيمتهم',
+    'your_value' => 'قيمتك',
+    'current_value' => 'القيمة الحالية',
+    'base_note' => 'كانت {value} عندما بدأت التحرير',
+    'empty' => 'فارغ',
+    'apply' => 'تطبيق وحفظ',
+];
diff --git a/packages/panel/resources/lang/bg/drafts.php b/packages/panel/resources/lang/bg/drafts.php
new file mode 100644
index 0000000000..83b3eca882
--- /dev/null
+++ b/packages/panel/resources/lang/bg/drafts.php
@@ -0,0 +1,18 @@
+<?php
+
+return [
+    'flash_committed' => 'Промените са запазени.',
+    'restored' => 'Възстановени са незапазени промени от {time}.',
+    'discard' => 'Отхвърляне',
+    'saving' => 'Записване на черновата…',
+    'saved' => 'Черновата е запазена',
+    'conflict_title' => 'Разрешаване на конфликтни промени',
+    'conflict_description' => 'Някой друг промени тези полета, докато редактирахте. Изберете коя стойност да запазите за всяко поле; останалите ви промени ще бъдат запазени без промяна.',
+    'keep_mine' => 'Запази моята',
+    'take_theirs' => 'Вземи тяхната',
+    'your_value' => 'Вашата стойност',
+    'current_value' => 'Текуща стойност',
+    'base_note' => 'Беше {value}, когато започнахте да редактирате',
+    'empty' => 'Празно',
+    'apply' => 'Приложи и запази',
+];
diff --git a/packages/panel/resources/lang/de/drafts.php b/packages/panel/resources/lang/de/drafts.php
new file mode 100644
index 0000000000..5c214a38c5
--- /dev/null
+++ b/packages/panel/resources/lang/de/drafts.php
@@ -0,0 +1,18 @@
+<?php
+
+return [
+    'flash_committed' => 'Änderungen gespeichert.',
+    'restored' => 'Ungespeicherte Änderungen von {time} wiederhergestellt.',
+    'discard' => 'Verwerfen',
+    'saving' => 'Entwurf wird gespeichert…',
+    'saved' => 'Entwurf gespeichert',
+    'conflict_title' => 'Konflikte auflösen',
+    'conflict_description' => 'Jemand anderes hat diese Felder während Ihrer Bearbeitung geändert. Wählen Sie für jedes Feld den zu behaltenden Wert; Ihre übrigen Änderungen werden unverändert gespeichert.',
+    'keep_mine' => 'Meinen behalten',
+    'take_theirs' => 'Deren übernehmen',
+    'your_value' => 'Ihr Wert',
+    'current_value' => 'Aktueller Wert',
+    'base_note' => 'War {value}, als Sie mit der Bearbeitung begannen',
+    'empty' => 'Leer',
+    'apply' => 'Übernehmen und speichern',
+];
diff --git a/packages/panel/resources/lang/en/drafts.php b/packages/panel/resources/lang/en/drafts.php
new file mode 100644
index 0000000000..9a25c9e2a1
--- /dev/null
+++ b/packages/panel/resources/lang/en/drafts.php
@@ -0,0 +1,18 @@
+<?php
+
+return [
+    'flash_committed' => 'Changes saved.',
+    'restored' => 'Unsaved changes from {time} restored.',
+    'discard' => 'Discard',
+    'saving' => 'Saving draft…',
+    'saved' => 'Draft saved',
+    'conflict_title' => 'Resolve conflicting changes',
+    'conflict_description' => 'Someone else changed these fields while you were editing. Choose which value to keep for each field; your other changes will save unaffected.',
+    'keep_mine' => 'Keep mine',
+    'take_theirs' => 'Take theirs',
+    'your_value' => 'Your value',
+    'current_value' => 'Current value',
+    'base_note' => 'Was {value} when you started editing',
+    'empty' => 'Empty',
+    'apply' => 'Apply and save',
+];
diff --git a/packages/panel/resources/lang/es/drafts.php b/packages/panel/resources/lang/es/drafts.php
new file mode 100644
index 0000000000..01736cfd0c
--- /dev/null
+++ b/packages/panel/resources/lang/es/drafts.php
@@ -0,0 +1,18 @@
+<?php
+
+return [
+    'flash_committed' => 'Cambios guardados.',
+    'restored' => 'Cambios sin guardar de {time} restaurados.',
+    'discard' => 'Descartar',
+    'saving' => 'Guardando borrador…',
+    'saved' => 'Borrador guardado',
+    'conflict_title' => 'Resolver cambios en conflicto',
+    'conflict_description' => 'Otra persona modificó estos campos mientras editabas. Elige qué valor conservar en cada campo; el resto de tus cambios se guardarán sin cambios.',
+    'keep_mine' => 'Mantener el mío',
+    'take_theirs' => 'Tomar el suyo',
+    'your_value' => 'Tu valor',
+    'current_value' => 'Valor actual',
+    'base_note' => 'Era {value} cuando empezaste a editar',
+    'empty' => 'Vacío',
+    'apply' => 'Aplicar y guardar',
+];
diff --git a/packages/panel/resources/lang/fa/drafts.php b/packages/panel/resources/lang/fa/drafts.php
new file mode 100644
index 0000000000..8e0c1267c4
--- /dev/null
+++ b/packages/panel/resources/lang/fa/drafts.php
@@ -0,0 +1,18 @@
+<?php
+
+return [
+    'flash_committed' => 'تغییرات ذخیره شد.',
+    'restored' => 'تغییرات ذخیره‌نشده از {time} بازیابی شد.',
+    'discard' => 'صرف‌نظر',
+    'saving' => 'در حال ذخیره پیش‌نویس…',
+    'saved' => 'پیش‌نویس ذخیره شد',
+    'conflict_title' => 'حل تغییرات متعارض',
+    'conflict_description' => 'شخص دیگری این فیلدها را هنگام ویرایش شما تغییر داده است. برای هر فیلد مقدار موردنظر را انتخاب کنید؛ سایر تغییرات شما بدون تغییر ذخیره می‌شوند.',
+    'keep_mine' => 'حفظ مقدار من',
+    'take_theirs' => 'پذیرش مقدار آن‌ها',
+    'your_value' => 'مقدار شما',
+    'current_value' => 'مقدار فعلی',
+    'base_note' => 'هنگام شروع ویرایش {value} بود',
+    'empty' => 'خالی',
+    'apply' => 'اعمال و ذخیره',
+];
diff --git a/packages/panel/resources/lang/fr/drafts.php b/packages/panel/resources/lang/fr/drafts.php
new file mode 100644
index 0000000000..d5d67c2579
--- /dev/null
+++ b/packages/panel/resources/lang/fr/drafts.php
@@ -0,0 +1,18 @@
+<?php
+
+return [
+    'flash_committed' => 'Modifications enregistrées.',
+    'restored' => 'Modifications non enregistrées du {time} restaurées.',
+    'discard' => 'Abandonner',
+    'saving' => 'Enregistrement du brouillon…',
+    'saved' => 'Brouillon enregistré',
+    'conflict_title' => 'Résoudre les modifications en conflit',
+    'conflict_description' => "Quelqu'un d'autre a modifié ces champs pendant votre édition. Choisissez la valeur à conserver pour chaque champ ; vos autres modifications seront enregistrées sans changement.",
+    'keep_mine' => 'Garder la mienne',
+    'take_theirs' => 'Prendre la leur',
+    'your_value' => 'Votre valeur',
+    'current_value' => 'Valeur actuelle',
+    'base_note' => 'Était {value} au début de votre édition',
+    'empty' => 'Vide',
+    'apply' => 'Appliquer et enregistrer',
+];
diff --git a/packages/panel/resources/lang/hr/drafts.php b/packages/panel/resources/lang/hr/drafts.php
new file mode 100644
index 0000000000..d87b8033e6
--- /dev/null
+++ b/packages/panel/resources/lang/hr/drafts.php
@@ -0,0 +1,18 @@
+<?php
+
+return [
+    'flash_committed' => 'Promjene su spremljene.',
+    'restored' => 'Vraćene su nespremljene promjene od {time}.',
+    'discard' => 'Odbaci',
+    'saving' => 'Spremanje skice…',
+    'saved' => 'Skica spremljena',
+    'conflict_title' => 'Riješite sukobljene promjene',
+    'conflict_description' => 'Netko drugi je promijenio ova polja dok ste uređivali. Odaberite koju vrijednost zadržati za svako polje; ostale promjene bit će spremljene netaknute.',
+    'keep_mine' => 'Zadrži moju',
+    'take_theirs' => 'Preuzmi njihovu',
+    'your_value' => 'Vaša vrijednost',
+    'current_value' => 'Trenutna vrijednost',
+    'base_note' => 'Bila je {value} kad ste počeli uređivati',
+    'empty' => 'Prazno',
+    'apply' => 'Primijeni i spremi',
+];
diff --git a/packages/panel/resources/lang/hu/drafts.php b/packages/panel/resources/lang/hu/drafts.php
new file mode 100644
index 0000000000..e2b6b1a489
--- /dev/null
+++ b/packages/panel/resources/lang/hu/drafts.php
@@ -0,0 +1,18 @@
+<?php
+
+return [
+    'flash_committed' => 'A módosítások mentve.',
+    'restored' => 'A(z) {time} időpontból származó nem mentett módosítások visszaállítva.',
+    'discard' => 'Elvetés',
+    'saving' => 'Piszkozat mentése…',
+    'saved' => 'Piszkozat mentve',
+    'conflict_title' => 'Ütköző módosítások feloldása',
+    'conflict_description' => 'Valaki más módosította ezeket a mezőket a szerkesztés közben. Válassza ki, melyik értéket tartja meg mezőnként; a többi módosítása változatlanul mentésre kerül.',
+    'keep_mine' => 'Az enyém megtartása',
+    'take_theirs' => 'Az övék átvétele',
+    'your_value' => 'Az Ön értéke',
+    'current_value' => 'Jelenlegi érték',
+    'base_note' => '{value} volt, amikor a szerkesztést elkezdte',
+    'empty' => 'Üres',
+    'apply' => 'Alkalmazás és mentés',
+];
diff --git a/packages/panel/resources/lang/mn/drafts.php b/packages/panel/resources/lang/mn/drafts.php
new file mode 100644
index 0000000000..a7d5a3cfbd
--- /dev/null
+++ b/packages/panel/resources/lang/mn/drafts.php
@@ -0,0 +1,18 @@
+<?php
+
+return [
+    'flash_committed' => 'Өөрчлөлтүүд хадгалагдлаа.',
+    'restored' => '{time}-ийн хадгалагдаагүй өөрчлөлтүүдийг сэргээлээ.',
+    'discard' => 'Цуцлах',
+    'saving' => 'Ноорог хадгалж байна…',
+    'saved' => 'Ноорог хадгалагдлаа',
+    'conflict_title' => 'Зөрчилтэй өөрчлөлтүүдийг шийдвэрлэх',
+    'conflict_description' => 'Таныг засварлаж байх үед өөр хэн нэгэн эдгээр талбарыг өөрчилсөн байна. Талбар бүрд хадгалах утгаа сонгоно уу; бусад өөрчлөлтүүд тань хэвээр хадгалагдана.',
+    'keep_mine' => 'Минийхийг үлдээх',
+    'take_theirs' => 'Тэднийхийг авах',
+    'your_value' => 'Таны утга',
+    'current_value' => 'Одоогийн утга',
+    'base_note' => 'Таныг засварлаж эхлэхэд {value} байсан',
+    'empty' => 'Хоосон',
+    'apply' => 'Хэрэглэж хадгалах',
+];
diff --git a/packages/panel/resources/lang/nl/drafts.php b/packages/panel/resources/lang/nl/drafts.php
new file mode 100644
index 0000000000..cda6719ce8
--- /dev/null
+++ b/packages/panel/resources/lang/nl/drafts.php
@@ -0,0 +1,18 @@
+<?php
+
+return [
+    'flash_committed' => 'Wijzigingen opgeslagen.',
+    'restored' => 'Niet-opgeslagen wijzigingen van {time} hersteld.',
+    'discard' => 'Verwerpen',
+    'saving' => 'Concept opslaan…',
+    'saved' => 'Concept opgeslagen',
+    'conflict_title' => 'Conflicterende wijzigingen oplossen',
+    'conflict_description' => 'Iemand anders heeft deze velden gewijzigd terwijl u aan het bewerken was. Kies per veld welke waarde u wilt behouden; uw overige wijzigingen worden ongewijzigd opgeslagen.',
+    'keep_mine' => 'Mijn waarde behouden',
+    'take_theirs' => 'Hun waarde overnemen',
+    'your_value' => 'Uw waarde',
+    'current_value' => 'Huidige waarde',
+    'base_note' => 'Was {value} toen u begon met bewerken',
+    'empty' => 'Leeg',
+    'apply' => 'Toepassen en opslaan',
+];
diff --git a/packages/panel/resources/lang/pl/drafts.php b/packages/panel/resources/lang/pl/drafts.php
new file mode 100644
index 0000000000..402cfdd417
--- /dev/null
+++ b/packages/panel/resources/lang/pl/drafts.php
@@ -0,0 +1,18 @@
+<?php
+
+return [
+    'flash_committed' => 'Zmiany zapisane.',
+    'restored' => 'Przywrócono niezapisane zmiany z {time}.',
+    'discard' => 'Odrzuć',
+    'saving' => 'Zapisywanie wersji roboczej…',
+    'saved' => 'Wersja robocza zapisana',
+    'conflict_title' => 'Rozwiąż konfliktowe zmiany',
+    'conflict_description' => 'Ktoś inny zmienił te pola podczas Twojej edycji. Wybierz, którą wartość zachować dla każdego pola; pozostałe zmiany zostaną zapisane bez zmian.',
+    'keep_mine' => 'Zachowaj moją',
+    'take_theirs' => 'Przyjmij ich',
+    'your_value' => 'Twoja wartość',
+    'current_value' => 'Aktualna wartość',
+    'base_note' => 'Było {value}, gdy rozpoczynano edycję',
+    'empty' => 'Puste',
+    'apply' => 'Zastosuj i zapisz',
+];
diff --git a/packages/panel/resources/lang/pt_BR/drafts.php b/packages/panel/resources/lang/pt_BR/drafts.php
new file mode 100644
index 0000000000..0e6220ad8a
--- /dev/null
+++ b/packages/panel/resources/lang/pt_BR/drafts.php
@@ -0,0 +1,18 @@
+<?php
+
+return [
+    'flash_committed' => 'Alterações salvas.',
+    'restored' => 'Alterações não salvas de {time} restauradas.',
+    'discard' => 'Descartar',
+    'saving' => 'Salvando rascunho…',
+    'saved' => 'Rascunho salvo',
+    'conflict_title' => 'Resolver alterações conflitantes',
+    'conflict_description' => 'Outra pessoa alterou estes campos enquanto você editava. Escolha qual valor manter em cada campo; suas demais alterações serão salvas sem alteração.',
+    'keep_mine' => 'Manter o meu',
+    'take_theirs' => 'Usar o deles',
+    'your_value' => 'Seu valor',
+    'current_value' => 'Valor atual',
+    'base_note' => 'Era {value} quando você começou a editar',
+    'empty' => 'Vazio',
+    'apply' => 'Aplicar e salvar',
+];
diff --git a/packages/panel/resources/lang/ro/drafts.php b/packages/panel/resources/lang/ro/drafts.php
new file mode 100644
index 0000000000..b6a70cb355
--- /dev/null
+++ b/packages/panel/resources/lang/ro/drafts.php
@@ -0,0 +1,18 @@
+<?php
+
+return [
+    'flash_committed' => 'Modificările au fost salvate.',
+    'restored' => 'Modificările nesalvate din {time} au fost restaurate.',
+    'discard' => 'Renunță',
+    'saving' => 'Se salvează ciorna…',
+    'saved' => 'Ciornă salvată',
+    'conflict_title' => 'Rezolvați modificările în conflict',
+    'conflict_description' => 'Altcineva a modificat aceste câmpuri în timp ce editați. Alegeți ce valoare păstrați pentru fiecare câmp; celelalte modificări vor fi salvate neatinse.',
+    'keep_mine' => 'Păstrează-l pe al meu',
+    'take_theirs' => 'Preia-l pe al lor',
+    'your_value' => 'Valoarea dvs.',
+    'current_value' => 'Valoarea curentă',
+    'base_note' => 'Era {value} când ați început editarea',
+    'empty' => 'Gol',
+    'apply' => 'Aplică și salvează',
+];
diff --git a/packages/panel/resources/lang/tr/drafts.php b/packages/panel/resources/lang/tr/drafts.php
new file mode 100644
index 0000000000..5cab3b328f
--- /dev/null
+++ b/packages/panel/resources/lang/tr/drafts.php
@@ -0,0 +1,18 @@
+<?php
+
+return [
+    'flash_committed' => 'Değişiklikler kaydedildi.',
+    'restored' => '{time} tarihli kaydedilmemiş değişiklikler geri yüklendi.',
+    'discard' => 'Vazgeç',
+    'saving' => 'Taslak kaydediliyor…',
+    'saved' => 'Taslak kaydedildi',
+    'conflict_title' => 'Çakışan değişiklikleri çözün',
+    'conflict_description' => 'Siz düzenlerken başka biri bu alanları değiştirdi. Her alan için hangi değerin korunacağını seçin; diğer değişiklikleriniz olduğu gibi kaydedilecek.',
+    'keep_mine' => 'Benimkini koru',
+    'take_theirs' => 'Onlarınkini al',
+    'your_value' => 'Sizin değeriniz',
+    'current_value' => 'Geçerli değer',
+    'base_note' => 'Düzenlemeye başladığınızda {value} idi',
+    'empty' => 'Boş',
+    'apply' => 'Uygula ve kaydet',
+];
diff --git a/packages/panel/resources/lang/vi/drafts.php b/packages/panel/resources/lang/vi/drafts.php
new file mode 100644
index 0000000000..20e6703094
--- /dev/null
+++ b/packages/panel/resources/lang/vi/drafts.php
@@ -0,0 +1,18 @@
+<?php
+
+return [
+    'flash_committed' => 'Đã lưu các thay đổi.',
+    'restored' => 'Đã khôi phục các thay đổi chưa lưu từ {time}.',
+    'discard' => 'Hủy bỏ',
+    'saving' => 'Đang lưu bản nháp…',
+    'saved' => 'Đã lưu bản nháp',
+    'conflict_title' => 'Giải quyết các thay đổi xung đột',
+    'conflict_description' => 'Người khác đã thay đổi các trường này trong khi bạn chỉnh sửa. Chọn giá trị cần giữ cho từng trường; các thay đổi khác của bạn sẽ được lưu nguyên vẹn.',
+    'keep_mine' => 'Giữ của tôi',
+    'take_theirs' => 'Lấy của họ',
+    'your_value' => 'Giá trị của bạn',
+    'current_value' => 'Giá trị hiện tại',
+    'base_note' => 'Là {value} khi bạn bắt đầu chỉnh sửa',
+    'empty' => 'Trống',
+    'apply' => 'Áp dụng và lưu',
+];
diff --git a/packages/panel/resources/panel-package/index.js b/packages/panel/resources/panel-package/index.js
index f22ba2d8d4..025a3ecc8c 100644
--- a/packages/panel/resources/panel-package/index.js
+++ b/packages/panel/resources/panel-package/index.js
@@ -17,7 +17,10 @@ export const DataTable = ui().DataTable;
 export const Pagination = ui().Pagination;
 export const PageEmpty = ui().PageEmpty;
 export const StatusBadge = ui().StatusBadge;
-export const FlashMessage = ui().FlashMessage;
+
+// Notifications
+export const Toaster = ui().Toaster;
+export const useToasts = () => ui().useToasts();
 
 // Filters / stats
 export const FilterDropdown = ui().FilterDropdown;
@@ -42,6 +45,20 @@ export const Tooltip = ui().Tooltip;
 export const SideCard = ui().SideCard;
 export const Tabs = ui().Tabs;
 
+// Edit drafts
+export const DraftActions = ui().DraftActions;
+export const DraftConflictDialog = ui().DraftConflictDialog;
+export const useEditDraft = (...args) => ui().useEditDraft(...args);
+export const http = {
+    get: (...args) => ui().http.get(...args),
+    post: (...args) => ui().http.post(...args),
+    patch: (...args) => ui().http.patch(...args),
+    delete: (...args) => ui().http.delete(...args),
+};
+export const DraftConflictError = ui().DraftConflictError;
+export const HttpError = ui().HttpError;
+export const ValidationError = ui().ValidationError;
+
 // Primitives
 export const Button = ui().Button;
 export const Icon = ui().Icon;
diff --git a/packages/panel/src/Contracts/DraftManager.php b/packages/panel/src/Contracts/DraftManager.php
new file mode 100644
index 0000000000..cd3a5661fc
--- /dev/null
+++ b/packages/panel/src/Contracts/DraftManager.php
@@ -0,0 +1,39 @@
+<?php
+
+namespace Lunar\Panel\Contracts;
+
+use Illuminate\Contracts\Auth\Authenticatable;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Validation\ValidationException;
+use Lunar\Panel\Drafts\CommitResult;
+use Lunar\Panel\Models\EditDraft;
+
+interface DraftManager
+{
+    public function find(Model $draftable, Authenticatable $staff): ?EditDraft;
+
+    /**
+     * Upsert the staff member's draft, replacing `data` wholesale with the
+     * incoming diff: base snapshots are captured for newly-present keys and
+     * dropped for keys no longer present. An empty diff deletes the draft
+     * (the form returned to clean) and returns null.
+     *
+     * @param  array<string, mixed>  $data
+     */
+    public function merge(DraftableResource $resource, Model $draftable, Authenticatable $staff, array $data): ?EditDraft;
+
+    public function discard(Model $draftable, Authenticatable $staff): void;
+
+    /**
+     * Attempt to commit: overlay the request's final diff onto the stored
+     * draft, apply any snapshot rebases from conflict resolution, validate
+     * the full payload, then detect per-field conflicts. Applies everything
+     * or nothing — any conflict means no field is written.
+     *
+     * @param  array<string, mixed>  $data
+     * @param  array<string, mixed>  $rebase  field key to the current-DB value the client resolved against
+     *
+     * @throws ValidationException
+     */
+    public function commit(DraftableResource $resource, Model $draftable, Authenticatable $staff, array $data, array $rebase = []): CommitResult;
+}
diff --git a/packages/panel/src/Contracts/DraftableResource.php b/packages/panel/src/Contracts/DraftableResource.php
new file mode 100644
index 0000000000..ef542373b3
--- /dev/null
+++ b/packages/panel/src/Contracts/DraftableResource.php
@@ -0,0 +1,65 @@
+<?php
+
+namespace Lunar\Panel\Contracts;
+
+use Illuminate\Database\Eloquent\Model;
+
+/**
+ * Per-resource draft definition: which field keys a form drafts, how their
+ * current database values read (normalised for comparison), and how a
+ * resolved value set commits. Registered through Section::draftables().
+ */
+interface DraftableResource
+{
+    /** @return class-string<Model> */
+    public function model(): string;
+
+    /**
+     * The field keys this resource drafts; autosave and commit reject any
+     * key outside this set.
+     *
+     * @return array<int, string>
+     */
+    public function fields(): array;
+
+    /**
+     * The current, normalised database value of every draftable field key.
+     *
+     * @return array<string, mixed>
+     */
+    public function currentValues(Model $record): array;
+
+    /**
+     * Normalise incoming draft values into the same shape currentValues()
+     * reports, so equality comparison is meaningful (e.g. empty string to
+     * null for nullable text columns, sorted unique ids for relation keys).
+     *
+     * @param  array<string, mixed>  $data
+     * @return array<string, mixed>
+     */
+    public function normalize(array $data): array;
+
+    /**
+     * Validation rules for a full commit payload (every field key present).
+     *
+     * @return array<string, mixed>
+     */
+    public function rules(Model $record): array;
+
+    /**
+     * Apply a validated, conflict-free full value set to the record. Always
+     * delegates to the core action contracts; the panel never writes model
+     * fields directly.
+     *
+     * @param  array<string, mixed>  $values
+     */
+    public function commit(Model $record, array $values): void;
+
+    /**
+     * Field key to lang key, for conflict-dialog field labels. Keys without
+     * an entry fall back to the raw field key.
+     *
+     * @return array<string, string>
+     */
+    public function labels(): array;
+}
diff --git a/packages/panel/src/Drafts/CommitResult.php b/packages/panel/src/Drafts/CommitResult.php
new file mode 100644
index 0000000000..910ce536b7
--- /dev/null
+++ b/packages/panel/src/Drafts/CommitResult.php
@@ -0,0 +1,27 @@
+<?php
+
+namespace Lunar\Panel\Drafts;
+
+final class CommitResult
+{
+    /**
+     * @param  array<int, array{key: string, label: string, mine: mixed, base: mixed, theirs: mixed}>  $conflicts
+     */
+    private function __construct(
+        public readonly bool $committed,
+        public readonly array $conflicts,
+    ) {}
+
+    public static function committed(): self
+    {
+        return new self(true, []);
+    }
+
+    /**
+     * @param  array<int, array{key: string, label: string, mine: mixed, base: mixed, theirs: mixed}>  $conflicts
+     */
+    public static function conflicted(array $conflicts): self
+    {
+        return new self(false, $conflicts);
+    }
+}
diff --git a/packages/panel/src/Drafts/DraftManager.php b/packages/panel/src/Drafts/DraftManager.php
new file mode 100644
index 0000000000..eeeab46c6f
--- /dev/null
+++ b/packages/panel/src/Drafts/DraftManager.php
@@ -0,0 +1,219 @@
+<?php
+
+namespace Lunar\Panel\Drafts;
+
+use Illuminate\Contracts\Auth\Authenticatable;
+use Illuminate\Contracts\Validation\Factory as ValidationFactory;
+use Illuminate\Database\DatabaseManager;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Validation\ValidationException;
+use Lunar\Panel\Contracts\DraftableResource;
+use Lunar\Panel\Contracts\DraftManager as DraftManagerContract;
+use Lunar\Panel\Models\EditDraft;
+
+class DraftManager implements DraftManagerContract
+{
+    public function __construct(
+        protected ValidationFactory $validator,
+        protected DatabaseManager $db,
+    ) {}
+
+    public function find(Model $draftable, Authenticatable $staff): ?EditDraft
+    {
+        return EditDraft::query()
+            ->where('draftable_type', $draftable->getMorphClass())
+            ->where('draftable_id', $draftable->getKey())
+            ->where('staff_id', $staff->getAuthIdentifier())
+            ->first();
+    }
+
+    public function merge(DraftableResource $resource, Model $draftable, Authenticatable $staff, array $data): ?EditDraft
+    {
+        $data = $resource->normalize($data);
+
+        $this->assertKnownFields($resource, $data);
+
+        if ($data === []) {
+            $this->discard($draftable, $staff);
+
+            return null;
+        }
+
+        $draft = $this->find($draftable, $staff) ?? $this->newDraft($draftable, $staff);
+
+        $snapshot = $this->snapshotFor($draft, $data, $resource->currentValues($draftable));
+
+        return $this->persist($draft, $data, $snapshot);
+    }
+
+    public function discard(Model $draftable, Authenticatable $staff): void
+    {
+        $this->find($draftable, $staff)?->delete();
+    }
+
+    public function commit(DraftableResource $resource, Model $draftable, Authenticatable $staff, array $data, array $rebase = []): CommitResult
+    {
+        $data = $resource->normalize($data);
+        $rebase = $resource->normalize($rebase);
+
+        $this->assertKnownFields($resource, $data);
+        $this->assertKnownFields($resource, $rebase);
+
+        $draft = $this->find($draftable, $staff);
+
+        // Overlay the request's final diff onto the stored draft — unlike
+        // autosave's wholesale replace, commit must not drop fields another
+        // tab may have drafted since this client last loaded.
+        $merged = [...($draft?->data ?? []), ...$data];
+
+        if ($merged === []) {
+            return CommitResult::committed();
+        }
+
+        $current = $resource->currentValues($draftable);
+
+        $snapshot = $this->snapshotFor($draft, $merged, $current);
+
+        // A rebase pins a resolved field's snapshot to the current-DB value
+        // the user was shown; if the DB moves again before this commit lands,
+        // the field conflicts again rather than silently overwriting.
+        foreach ($rebase as $key => $value) {
+            if (array_key_exists($key, $merged)) {
+                $snapshot[$key] = $value;
+            }
+        }
+
+        $draft = $this->persist($draft ?? $this->newDraft($draftable, $staff), $merged, $snapshot);
+
+        $this->validator
+            ->make([...$current, ...$merged], $resource->rules($draftable))
+            ->validate();
+
+        if ($conflicts = $this->detectConflicts($resource, $merged, $snapshot, $current)) {
+            return CommitResult::conflicted($conflicts);
+        }
+
+        $this->db->connection()->transaction(function () use ($resource, $draftable, $current, $merged, $draft): void {
+            $resource->commit($draftable, [...$current, ...$merged]);
+            $draft->delete();
+        });
+
+        return CommitResult::committed();
+    }
+
+    /**
+     * @param  array<string, mixed>  $data
+     * @param  array<string, mixed>  $snapshot
+     * @param  array<string, mixed>  $current
+     * @return array<int, array{key: string, label: string, mine: mixed, base: mixed, theirs: mixed}>
+     */
+    protected function detectConflicts(DraftableResource $resource, array $data, array $snapshot, array $current): array
+    {
+        $conflicts = [];
+
+        foreach ($data as $key => $mine) {
+            $base = $snapshot[$key] ?? null;
+            $theirs = $current[$key] ?? null;
+
+            if (! $this->valuesMatch($base, $theirs)) {
+                $conflicts[] = [
+                    'key' => $key,
+                    'label' => __($resource->labels()[$key] ?? $key),
+                    'mine' => $mine,
+                    'base' => $base,
+                    'theirs' => $theirs,
+                ];
+            }
+        }
+
+        return $conflicts;
+    }
+
+    /**
+     * The base snapshot for a draft about to hold $data: existing snapshot
+     * entries are preserved (a field's base stays fixed for the life of the
+     * draft), newly-drafted keys capture the record's current value, and keys
+     * no longer drafted are dropped.
+     *
+     * @param  array<string, mixed>  $data
+     * @param  array<string, mixed>  $current
+     * @return array<string, mixed>
+     */
+    protected function snapshotFor(?EditDraft $draft, array $data, array $current): array
+    {
+        $existing = $draft?->base_snapshot ?? [];
+
+        $snapshot = [];
+
+        foreach (array_keys($data) as $key) {
+            $snapshot[$key] = array_key_exists($key, $existing)
+                ? $existing[$key]
+                : ($current[$key] ?? null);
+        }
+
+        return $snapshot;
+    }
+
+    /**
+     * @param  array<string, mixed>  $data
+     * @param  array<string, mixed>  $snapshot
+     */
+    protected function persist(EditDraft $draft, array $data, array $snapshot): EditDraft
+    {
+        $draft->fill(['data' => $data, 'base_snapshot' => $snapshot])->save();
+
+        return $draft;
+    }
+
+    protected function newDraft(Model $draftable, Authenticatable $staff): EditDraft
+    {
+        return new EditDraft([
+            'draftable_type' => $draftable->getMorphClass(),
+            'draftable_id' => $draftable->getKey(),
+            'staff_id' => $staff->getAuthIdentifier(),
+        ]);
+    }
+
+    /**
+     * Values match when their normalised JSON encodings are identical —
+     * associative arrays compare order-insensitively, lists order-sensitively.
+     */
+    protected function valuesMatch(mixed $a, mixed $b): bool
+    {
+        return $this->encode($a) === $this->encode($b);
+    }
+
+    protected function encode(mixed $value): string
+    {
+        return (string) json_encode($this->sortKeys($value));
+    }
+
+    protected function sortKeys(mixed $value): mixed
+    {
+        if (! is_array($value)) {
+            return $value;
+        }
+
+        $value = array_map(fn (mixed $item): mixed => $this->sortKeys($item), $value);
+
+        if (! array_is_list($value)) {
+            ksort($value);
+        }
+
+        return $value;
+    }
+
+    /**
+     * @param  array<string, mixed>  $data
+     *
+     * @throws ValidationException
+     */
+    protected function assertKnownFields(DraftableResource $resource, array $data): void
+    {
+        if ($unknown = array_diff(array_keys($data), $resource->fields())) {
+            throw ValidationException::withMessages([
+                'data' => 'Unknown draft field ['.implode(', ', $unknown).'].',
+            ]);
+        }
+    }
+}
diff --git a/packages/panel/src/Drafts/DraftableResource.php b/packages/panel/src/Drafts/DraftableResource.php
new file mode 100644
index 0000000000..bfab5c9506
--- /dev/null
+++ b/packages/panel/src/Drafts/DraftableResource.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace Lunar\Panel\Drafts;
+
+use Lunar\Panel\Contracts\DraftableResource as DraftableResourceContract;
+
+abstract class DraftableResource implements DraftableResourceContract
+{
+    /**
+     * @param  array<string, mixed>  $data
+     * @return array<string, mixed>
+     */
+    public function normalize(array $data): array
+    {
+        return $data;
+    }
+
+    /** @return array<string, string> */
+    public function labels(): array
+    {
+        return [];
+    }
+}
diff --git a/packages/panel/src/Http/Controllers/Customers/CustomerEditController.php b/packages/panel/src/Http/Controllers/Customers/CustomerEditController.php
index 13ea5d881a..829e2436e6 100644
--- a/packages/panel/src/Http/Controllers/Customers/CustomerEditController.php
+++ b/packages/panel/src/Http/Controllers/Customers/CustomerEditController.php
@@ -16,7 +16,9 @@
 use Lunar\Core\Models\Customer;
 use Lunar\Core\Models\CustomerGroup;
 use Lunar\Core\Models\Order;
+use Lunar\Panel\Contracts\DraftManager;
 use Lunar\Panel\Http\Requests\Customers\CustomerRequest;
+use Lunar\Panel\PanelManager;
 use Spatie\Activitylog\Models\Activity;
 
 class CustomerEditController
@@ -33,10 +35,13 @@ class CustomerEditController
         '10y' => ['months' => 120, 'bucket' => 'year'],
     ];
 
-    public function edit(Request $request, Customer $customer): Response
+    public function edit(Request $request, Customer $customer, PanelManager $panel, DraftManager $drafts): Response
     {
         $customer->load('customerGroups:id,name');
 
+        $staff = $panel->user();
+        $draft = $staff ? $drafts->find($customer, $staff) : null;
+
         $addresses = $customer->addresses()->latest()->get()->map(fn (Address $address) => [
             'id' => $address->id,
             'title' => $address->title,
@@ -141,6 +146,10 @@ public function edit(Request $request, Customer $customer): Response
             'orders' => $orders,
             'stats' => $stats,
             'orderChart' => $this->orderChart($request, $customer),
+            'draft' => $draft ? [
+                'data' => $draft->data,
+                'updated_at' => $draft->updated_at?->toJSON(),
+            ] : null,
             'urls' => [
                 'index' => route('panel.customers.index'),
                 'update' => route('panel.customers.update', $customer),
@@ -148,6 +157,8 @@ public function edit(Request $request, Customer $customer): Response
                 'addressesStore' => route('panel.customers.addresses.store', $customer),
                 'usersStore' => route('panel.customers.users.store', $customer),
                 'notesUpdate' => route('panel.customers.notes.update', $customer),
+                'draft' => route('panel.customers.draft.update', $customer),
+                'draftCommit' => route('panel.customers.draft.commit', $customer),
             ],
         ]);
     }
diff --git a/packages/panel/src/Http/Controllers/EditDraftController.php b/packages/panel/src/Http/Controllers/EditDraftController.php
new file mode 100644
index 0000000000..7e889be8d7
--- /dev/null
+++ b/packages/panel/src/Http/Controllers/EditDraftController.php
@@ -0,0 +1,100 @@
+<?php
+
+namespace Lunar\Panel\Http\Controllers;
+
+use Illuminate\Contracts\Auth\Authenticatable;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+use Illuminate\Http\Response;
+use Lunar\Panel\Contracts\DraftableResource;
+use Lunar\Panel\Contracts\DraftManager;
+use Lunar\Panel\PanelManager;
+
+/**
+ * Shared endpoints behind every resource's draft routes. Sections register
+ * the three routes against their own model binding; the bound record's
+ * registered DraftableResource supplies the per-resource behaviour. All
+ * endpoints operate on the current staff member's own draft only.
+ */
+class EditDraftController
+{
+    public function update(Request $request, PanelManager $panel, DraftManager $drafts): JsonResponse
+    {
+        [$record, $resource] = $this->draftable($request, $panel);
+
+        $data = $request->validate(['data' => ['present', 'array']])['data'];
+
+        $draft = $drafts->merge($resource, $record, $this->staff($panel), $data);
+
+        return response()->json([
+            'data' => $draft?->data ?? (object) [],
+            'updated_at' => $draft?->updated_at?->toJSON(),
+        ]);
+    }
+
+    public function destroy(Request $request, PanelManager $panel, DraftManager $drafts): Response
+    {
+        [$record] = $this->draftable($request, $panel);
+
+        $drafts->discard($record, $this->staff($panel));
+
+        return response()->noContent();
+    }
+
+    public function commit(Request $request, PanelManager $panel, DraftManager $drafts): JsonResponse
+    {
+        [$record, $resource] = $this->draftable($request, $panel);
+
+        $payload = $request->validate([
+            'data' => ['sometimes', 'array'],
+            'rebase' => ['sometimes', 'array'],
+        ]);
+
+        $result = $drafts->commit(
+            $resource,
+            $record,
+            $this->staff($panel),
+            $payload['data'] ?? [],
+            $payload['rebase'] ?? [],
+        );
+
+        if (! $result->committed) {
+            return response()->json(['conflicts' => $result->conflicts], 409);
+        }
+
+        $request->session()->flash('success', __('panel::drafts.flash_committed'));
+
+        return response()->json(['committed' => true]);
+    }
+
+    /**
+     * The bound draftable record and its registered resource definition: the
+     * first route-bound Eloquent model, 404 when nothing is bound or no
+     * definition covers it.
+     *
+     * @return array{0: Model, 1: DraftableResource}
+     */
+    protected function draftable(Request $request, PanelManager $panel): array
+    {
+        $record = collect($request->route()?->parameters() ?? [])
+            ->first(fn (mixed $parameter): bool => $parameter instanceof Model);
+
+        abort_unless($record instanceof Model, 404);
+
+        $resource = $panel->draftableFor($record);
+
+        abort_unless((bool) $resource, 404);
+
+        return [$record, $resource];
+    }
+
+    protected function staff(PanelManager $panel): Authenticatable
+    {
+        $staff = $panel->user();
+
+        abort_unless((bool) $staff, 401);
+
+        return $staff;
+    }
+}
diff --git a/packages/panel/src/Http/Middleware/HandlePanelInertiaRequests.php b/packages/panel/src/Http/Middleware/HandlePanelInertiaRequests.php
index 3e7a405e6f..f328fbf6ab 100644
--- a/packages/panel/src/Http/Middleware/HandlePanelInertiaRequests.php
+++ b/packages/panel/src/Http/Middleware/HandlePanelInertiaRequests.php
@@ -26,6 +26,7 @@ public function share(Request $request): array
             'flash' => [
                 'success' => fn () => $request->session()->get('success'),
                 'error' => fn () => $request->session()->get('error'),
+                'info' => fn () => $request->session()->get('info'),
             ],
             'panel' => [
                 'name' => config('lunar.panel.name', 'Lunar'),
diff --git a/packages/panel/src/Models/EditDraft.php b/packages/panel/src/Models/EditDraft.php
new file mode 100644
index 0000000000..48acfffd98
--- /dev/null
+++ b/packages/panel/src/Models/EditDraft.php
@@ -0,0 +1,63 @@
+<?php
+
+namespace Lunar\Panel\Models;
+
+use Illuminate\Database\Eloquent\Builder;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\MassPrunable;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+use Illuminate\Database\Eloquent\Relations\MorphTo;
+use Lunar\Core\Models\Base;
+use Lunar\Core\Models\Staff;
+use Lunar\Panel\Database\Factories\EditDraftFactory;
+
+/**
+ * A staff member's in-progress edit of one record: `data` holds the changed
+ * field values, `base_snapshot` the database value each field had when it
+ * first entered the draft. One draft per staff member per record.
+ */
+class EditDraft extends Base
+{
+    use HasFactory;
+    use MassPrunable;
+
+    /** @var array<int, string> */
+    protected $guarded = [];
+
+    /** @var array<string, string> */
+    protected $casts = [
+        'data' => 'array',
+        'base_snapshot' => 'array',
+    ];
+
+    protected static function newFactory(): EditDraftFactory
+    {
+        return EditDraftFactory::new();
+    }
+
+    public function draftable(): MorphTo
+    {
+        return $this->morphTo();
+    }
+
+    public function staff(): BelongsTo
+    {
+        return $this->belongsTo(Staff::class);
+    }
+
+    /**
+     * Drafts untouched beyond the configured TTL: their base snapshots are too
+     * stale for trustworthy conflict comparison, so they prune rather than
+     * resume.
+     *
+     * @return Builder<static>
+     */
+    public function prunable(): Builder
+    {
+        return static::query()->where(
+            'updated_at',
+            '<',
+            now()->subDays((int) config('lunar.panel.drafts.ttl_days', 7)),
+        );
+    }
+}
diff --git a/packages/panel/src/PanelManager.php b/packages/panel/src/PanelManager.php
index 531f330fba..29c3cf85e6 100644
--- a/packages/panel/src/PanelManager.php
+++ b/packages/panel/src/PanelManager.php
@@ -4,9 +4,12 @@
 
 use Closure;
 use Illuminate\Contracts\Auth\Authenticatable;
+use Illuminate\Database\Eloquent\Model;
 use Illuminate\Support\Facades\Log;
 use Illuminate\Support\Str;
 use Lunar\Panel\Actions\PageActionResolver;
+use Lunar\Panel\Contracts\DraftableResource;
+use Lunar\Panel\Models\EditDraft;
 use Lunar\Panel\Navigation\NavigationRegistry;
 use Lunar\Panel\Sections\ProvidesNavigation;
 use Lunar\Panel\Sections\Section;
@@ -33,6 +36,9 @@ class PanelManager
     /** @var array<string, string[]> */
     protected array $pageActions = [];
 
+    /** @var array<class-string<Model>, DraftableResource> */
+    protected array $draftables = [];
+
     /** @var Closure[] */
     protected array $routeRegistrars = [];
 
@@ -133,6 +139,10 @@ private function processEntity(string $sectionKey, ProvidesNavigation $entity):
             }
         }
 
+        foreach ($entity->draftables() as $definitionClass) {
+            $this->draftable($definitionClass);
+        }
+
         if ($viteConfig = $entity->vite()) {
             $this->vite($this->viteKeyFor($sectionKey, $entity), $viteConfig);
         }
@@ -209,6 +219,41 @@ public function resolvePageActions(string $pageId): PageActionResolver
         return new PageActionResolver($this->getPageActions($pageId), $this->user());
     }
 
+    /**
+     * Register a draftable-resource definition, keyed by its model class.
+     * Registration also removes a record's drafts when the record is deleted,
+     * so drafts never point at gone records.
+     *
+     * @param  class-string<DraftableResource>  $definitionClass
+     */
+    public function draftable(string $definitionClass): static
+    {
+        /** @var DraftableResource $definition */
+        $definition = app($definitionClass);
+
+        $model = $definition->model();
+
+        if (isset($this->draftables[$model])) {
+            Log::warning("Lunar Panel: draftable resource for [{$model}] is already registered and will be overwritten.");
+        } else {
+            $model::deleted(function (Model $record): void {
+                EditDraft::query()
+                    ->where('draftable_type', $record->getMorphClass())
+                    ->where('draftable_id', $record->getKey())
+                    ->delete();
+            });
+        }
+
+        $this->draftables[$model] = $definition;
+
+        return $this;
+    }
+
+    public function draftableFor(Model $model): ?DraftableResource
+    {
+        return $this->draftables[$model::class] ?? null;
+    }
+
     /**
      * Expose translator namespaces to the panel frontend: every lang group
      * under each namespace is served by the translations endpoint as
diff --git a/packages/panel/src/PanelServiceProvider.php b/packages/panel/src/PanelServiceProvider.php
index 33f61fe9d3..cf51304ca5 100644
--- a/packages/panel/src/PanelServiceProvider.php
+++ b/packages/panel/src/PanelServiceProvider.php
@@ -2,6 +2,7 @@
 
 namespace Lunar\Panel;
 
+use Illuminate\Console\Scheduling\Schedule;
 use Illuminate\Support\Facades\Gate;
 use Illuminate\Support\Facades\Route;
 use Illuminate\Support\ServiceProvider;
@@ -9,9 +10,12 @@
 use Lunar\Panel\Auth\EmailTwoFactor;
 use Lunar\Panel\Console\Commands\InstallPanelCommand;
 use Lunar\Panel\Console\Commands\LinkPanelAssetsCommand;
+use Lunar\Panel\Contracts\DraftManager as DraftManagerContract;
+use Lunar\Panel\Drafts\DraftManager;
 use Lunar\Panel\Facades\Panel;
 use Lunar\Panel\Http\Middleware\Authenticate;
 use Lunar\Panel\Http\Middleware\HandlePanelInertiaRequests;
+use Lunar\Panel\Models\EditDraft;
 use Lunar\Panel\Navigation\NavigationItem;
 use Lunar\Panel\Sections\Sales\SalesSection;
 use Lunar\Panel\Sections\Settings\ChannelsSection;
@@ -35,6 +39,8 @@ public function register(): void
 
         $this->app->singleton(AppAuthentication::class);
         $this->app->singleton(EmailTwoFactor::class);
+
+        $this->app->singleton(DraftManagerContract::class, DraftManager::class);
     }
 
     public function boot(): void
@@ -42,6 +48,10 @@ public function boot(): void
         $this->loadViewsFrom("{$this->root}/resources/views", 'panel');
         $this->loadTranslationsFrom("{$this->root}/resources/lang", 'panel');
 
+        if (! config('lunar.database.disable_migrations', false)) {
+            $this->loadMigrationsFrom("{$this->root}/database/migrations");
+        }
+
         if ($this->app->runningInConsole()) {
             collect($this->configFiles)->each(function ($config) {
                 $this->publishes([
@@ -58,6 +68,10 @@ public function boot(): void
                 InstallPanelCommand::class,
                 LinkPanelAssetsCommand::class,
             ]);
+
+            $this->callAfterResolving(Schedule::class, function (Schedule $schedule): void {
+                $schedule->command('model:prune', ['--model' => [EditDraft::class]])->daily();
+            });
         }
 
         $this->registerPermissionGate();
diff --git a/packages/panel/src/Sections/ProvidesNavigation.php b/packages/panel/src/Sections/ProvidesNavigation.php
index fc0bde15ae..cb34914d6e 100644
--- a/packages/panel/src/Sections/ProvidesNavigation.php
+++ b/packages/panel/src/Sections/ProvidesNavigation.php
@@ -3,6 +3,7 @@
 namespace Lunar\Panel\Sections;
 
 use Closure;
+use Lunar\Panel\Contracts\DraftableResource;
 use Lunar\Panel\Navigation\NavigationRegistry;
 use Lunar\Panel\Slots\SlotRegistry;
 
@@ -28,6 +29,14 @@ public function tableExtensions(): array;
      */
     public function pageActions(): array;
 
+    /**
+     * Draftable-resource definitions for edit forms, e.g.
+     * [CustomerDraftResource::class].
+     *
+     * @return array<int, class-string<DraftableResource>>
+     */
+    public function draftables(): array;
+
     /**
      * @return array{input?: string|string[], hotFile?: string|null, buildDirectory?: string, __buildSourcePath?: string}|string|null
      */
diff --git a/packages/panel/src/Sections/Sales/CustomerDraftResource.php b/packages/panel/src/Sections/Sales/CustomerDraftResource.php
new file mode 100644
index 0000000000..07443538ea
--- /dev/null
+++ b/packages/panel/src/Sections/Sales/CustomerDraftResource.php
@@ -0,0 +1,109 @@
+<?php
+
+namespace Lunar\Panel\Sections\Sales;
+
+use Illuminate\Database\Eloquent\Model;
+use Lunar\Core\Contracts\Actions\Customers\UpdatesCustomer;
+use Lunar\Core\Models\Customer;
+use Lunar\Panel\Drafts\DraftableResource;
+use Lunar\Panel\Http\Requests\Customers\CustomerRequest;
+
+class CustomerDraftResource extends DraftableResource
+{
+    /**
+     * Text columns that are nullable in the database but bound to inputs that
+     * submit an empty string; normalised to null so equality against the
+     * stored value holds.
+     */
+    private const NULLABLE_TEXT_FIELDS = ['title', 'company_name', 'tax_identifier', 'account_ref'];
+
+    public function __construct(protected UpdatesCustomer $updatesCustomer) {}
+
+    public function model(): string
+    {
+        return Customer::class;
+    }
+
+    public function fields(): array
+    {
+        return [
+            'title',
+            'first_name',
+            'last_name',
+            'company_name',
+            'tax_identifier',
+            'account_ref',
+            'customer_group_ids',
+        ];
+    }
+
+    public function currentValues(Model $record): array
+    {
+        /** @var Customer $record */
+        return [
+            'title' => $record->title,
+            'first_name' => $record->first_name,
+            'last_name' => $record->last_name,
+            'company_name' => $record->company_name,
+            'tax_identifier' => $record->tax_identifier,
+            'account_ref' => $record->account_ref,
+            'customer_group_ids' => $this->sortedIds($record->customerGroups()->allRelatedIds()->all()),
+        ];
+    }
+
+    public function normalize(array $data): array
+    {
+        foreach (self::NULLABLE_TEXT_FIELDS as $field) {
+            if (array_key_exists($field, $data) && $data[$field] === '') {
+                $data[$field] = null;
+            }
+        }
+
+        if (array_key_exists('customer_group_ids', $data)) {
+            $data['customer_group_ids'] = $this->sortedIds((array) $data['customer_group_ids']);
+        }
+
+        return $data;
+    }
+
+    public function rules(Model $record): array
+    {
+        return (new CustomerRequest)->rules();
+    }
+
+    public function commit(Model $record, array $values): void
+    {
+        /** @var Customer $record */
+        $this->updatesCustomer->execute(
+            $record,
+            collect($values)->except('customer_group_ids')->all(),
+            $values['customer_group_ids'] ?? [],
+        );
+    }
+
+    public function labels(): array
+    {
+        return [
+            'title' => 'panel::customers.field_title',
+            'first_name' => 'panel::customers.field_first_name',
+            'last_name' => 'panel::customers.field_last_name',
+            'company_name' => 'panel::customers.field_company_name',
+            'tax_identifier' => 'panel::customers.field_tax_identifier',
+            'account_ref' => 'panel::customers.field_account_ref',
+            'customer_group_ids' => 'panel::customers.customer_groups',
+        ];
+    }
+
+    /**
+     * @param  array<int, mixed>  $ids
+     * @return array<int, int>
+     */
+    protected function sortedIds(array $ids): array
+    {
+        $ids = array_values(array_unique(array_map('intval', $ids)));
+
+        sort($ids);
+
+        return $ids;
+    }
+}
diff --git a/packages/panel/src/Sections/Sales/SalesSection.php b/packages/panel/src/Sections/Sales/SalesSection.php
index 749b62cae5..5712ba0200 100644
--- a/packages/panel/src/Sections/Sales/SalesSection.php
+++ b/packages/panel/src/Sections/Sales/SalesSection.php
@@ -4,12 +4,14 @@
 
 use Closure;
 use Illuminate\Support\Facades\Route;
+use Lunar\Panel\Contracts\DraftableResource;
 use Lunar\Panel\Http\Controllers\Customers\CustomerAddressController;
 use Lunar\Panel\Http\Controllers\Customers\CustomerCreateController;
 use Lunar\Panel\Http\Controllers\Customers\CustomerEditController;
 use Lunar\Panel\Http\Controllers\Customers\CustomerIndexController;
 use Lunar\Panel\Http\Controllers\Customers\CustomerNotesController;
 use Lunar\Panel\Http\Controllers\Customers\CustomerUserController;
+use Lunar\Panel\Http\Controllers\EditDraftController;
 use Lunar\Panel\Navigation\NavigationItem;
 use Lunar\Panel\Navigation\NavigationRegistry;
 use Lunar\Panel\Sections\Sales\Tables\CustomersTableExtension;
@@ -54,6 +56,14 @@ public function tableExtensions(): array
         ];
     }
 
+    /** @return array<int, class-string<DraftableResource>> */
+    public function draftables(): array
+    {
+        return [
+            CustomerDraftResource::class,
+        ];
+    }
+
     public function routes(): ?Closure
     {
         return function (): void {
@@ -66,6 +76,10 @@ public function routes(): ?Closure
                 Route::delete('/{customer}', [CustomerEditController::class, 'destroy'])->name('destroy');
                 Route::put('/{customer}/notes', [CustomerNotesController::class, 'update'])->name('notes.update');
 
+                Route::patch('/{customer}/draft', [EditDraftController::class, 'update'])->name('draft.update');
+                Route::delete('/{customer}/draft', [EditDraftController::class, 'destroy'])->name('draft.destroy');
+                Route::post('/{customer}/draft/commit', [EditDraftController::class, 'commit'])->name('draft.commit');
+
                 Route::scopeBindings()->group(function (): void {
                     Route::post('/{customer}/addresses', [CustomerAddressController::class, 'store'])->name('addresses.store');
                     Route::put('/{customer}/addresses/{address}', [CustomerAddressController::class, 'update'])->name('addresses.update');
diff --git a/packages/panel/src/Sections/Section.php b/packages/panel/src/Sections/Section.php
index 9d01e3302a..f1397d0a27 100644
--- a/packages/panel/src/Sections/Section.php
+++ b/packages/panel/src/Sections/Section.php
@@ -3,6 +3,7 @@
 namespace Lunar\Panel\Sections;
 
 use Closure;
+use Lunar\Panel\Contracts\DraftableResource;
 use Lunar\Panel\Navigation\NavigationRegistry;
 use Lunar\Panel\Slots\SlotRegistry;
 
@@ -48,6 +49,17 @@ public function pageActions(): array
         return [];
     }
 
+    /**
+     * Return draftable-resource definitions for edit forms in this section,
+     * e.g. [CustomerDraftResource::class].
+     *
+     * @return array<int, class-string<DraftableResource>>
+     */
+    public function draftables(): array
+    {
+        return [];
+    }
+
     /**
      * Return a Vite config to register for this section, or null to skip.
      *
diff --git a/packages/panel/src/Sections/SectionExtension.php b/packages/panel/src/Sections/SectionExtension.php
index 8dfa35d668..fff8143686 100644
--- a/packages/panel/src/Sections/SectionExtension.php
+++ b/packages/panel/src/Sections/SectionExtension.php
@@ -3,6 +3,7 @@
 namespace Lunar\Panel\Sections;
 
 use Closure;
+use Lunar\Panel\Contracts\DraftableResource;
 use Lunar\Panel\Navigation\NavigationRegistry;
 use Lunar\Panel\Slots\SlotRegistry;
 
@@ -40,6 +41,17 @@ public function pageActions(): array
         return [];
     }
 
+    /**
+     * Return draftable-resource definitions for edit forms this extension
+     * contributes, e.g. [CustomerDraftResource::class].
+     *
+     * @return array<int, class-string<DraftableResource>>
+     */
+    public function draftables(): array
+    {
+        return [];
+    }
+
     /**
      * Return a Vite config to register for this extension, or null to skip.
      * Registered under a key derived from the target section and this class
diff --git a/specs/0051-panel-edit-drafts.md b/specs/0051-panel-edit-drafts.md
new file mode 100644
index 0000000000..e78cef60f0
--- /dev/null
+++ b/specs/0051-panel-edit-drafts.md
@@ -0,0 +1,336 @@
+# 0051 — Panel edit drafts and field-level conflict detection
+
+- Status: implemented
+- Author: Glenn Jacobs
+- Created: 2026-07-17
+- TODO item: Panel edit drafts — autosaved pending edits with field-level conflict detection (spec 0051)
+
+## Problem
+
+Panel edit pages lose work and overwrite work.
+
+- **Lost work**: an edit form (`customers/Edit.vue`, `settings/channels/Edit.vue`) holds
+  state only in an Inertia `useForm`. Navigating away, a session timeout, or a browser
+  crash discards everything typed since the last save. There is no dirty-state guard and
+  no persistence of in-progress edits.
+- **Silent overwrites**: saves are last-write-wins. Two staff members editing the same
+  customer both submit the full field set; whoever saves second reverts the other's
+  changes without either noticing. Nothing in core or the panel detects concurrent
+  edits — no version column, no `updated_at` comparison, no lock (the activity log
+  records what happened, after the fact).
+
+Row-level optimistic locking (reject the save if `updated_at` moved) would fix the
+overwrite but at the wrong granularity: two staff editing *different* fields on the same
+record would block each other for no reason.
+
+## Proposal
+
+A drafts layer in `lunarphp/panel`: in-progress edits autosave to an `edit_drafts` row
+(one per staff member per record), and commits detect conflicts **per field** by
+comparing each drafted field's base snapshot against the current database value. Staff
+editing disjoint fields never collide; staff editing the same field get a scoped
+resolution UI instead of a silent overwrite.
+
+The feature lives entirely in the panel package. Core stays headless — drafts exist only
+because of admin editing, so core gains no awareness of them; the `edit_drafts` table
+references core models purely through its polymorphic relation. The Filament admin is
+untouched (a Livewire-native equivalent can be built later if wanted; see Alternatives).
+
+First wiring target: the customer details form. Its field set (scalar columns plus the
+relation-backed `customer_group_ids` array) exercises both value shapes the design must
+handle, without the multi-form complexity of the addresses/users tabs. Channels and
+future sections follow by registering a definition — no new infrastructure.
+
+### Data model
+
+New table `edit_drafts` (standard `lunar.database.table_prefix`), the panel package's
+first migration (`packages/panel/database/migrations/`, extending
+`Lunar\Core\Database\Migration` for the prefix, loaded via `loadMigrationsFrom` as the
+stripe and opayo packages do):
+
+| Column | Type | Notes |
+|---|---|---|
+| `id` | bigint | PK |
+| `draftable_type` | string | morph alias via `Base::morphName()` (e.g. `customer`) |
+| `draftable_id` | unsignedBigInteger | all core models use bigint PKs |
+| `staff_id` | foreignId | constrained to the prefixed `staff` table, `cascadeOnDelete` |
+| `data` | json | changed fields only, keyed by field key: `{"first_name": "Glenn"}` |
+| `base_snapshot` | json | DB value of each drafted field at the moment it was first touched |
+| `created_at` / `updated_at` | timestamps | `updated_at` doubles as the staleness clock |
+
+Unique index on `(draftable_type, draftable_id, staff_id)` — one draft per staff member
+per record. Model: `Lunar\Panel\Models\EditDraft` with a `draftable()` morphTo and a
+`staff()` belongsTo. The owner column is `staff_id`, not `user_id`: the panel
+authenticates `Lunar\Core\Models\Staff` via the staff guard, and storefront users never
+touch drafts.
+
+#### The base snapshot
+
+When a field first enters `data`, its current database value is captured into
+`base_snapshot` under the same key. Subsequent edits to that field update `data` only —
+the snapshot stays fixed until commit or discard. Commit-time conflict detection is then
+a per-key comparison: `base_snapshot[key]` versus the current DB value. Match means no
+one else changed the field since the draft started tracking it; mismatch means someone
+did. No audit trail, version columns, or core changes required.
+
+#### Field keys and value normalisation
+
+A draft's `data`/`base_snapshot` keys are **field keys** — stable, dot-notation
+identifiers for independently-conflictable units of a form:
+
+- Scalar columns: the column name (`first_name`, `account_ref`).
+- Translated JSON columns (products later): one key per locale — `name.en`, `name.fr` —
+  so two staff translating into different languages never conflict.
+- Attribute data (products later): `attribute_data.{handle}`, comparing the raw
+  persisted value (`FieldType::jsonSerialize()`), since FieldType instances are not
+  meaningfully `==`-comparable but their raw values are.
+- Relation-backed form fields: a resource-defined key resolving to a normalised value —
+  `customer_group_ids` resolves to a sorted integer array of the current pivot ids.
+
+Values are normalised before both storage and comparison: JSON encoding with recursively
+sorted object keys, resource-defined per-field normalisation (empty string to null for
+nullable text columns, sorted unique ids for relation arrays). Comparison is equality of
+the normalised encodings. Related *rows* (prices, addresses) are not fields — they are
+separate editing surfaces out of scope here (see Out of scope).
+
+### Service layer
+
+New `Lunar\Panel\Drafts\` namespace, following the monorepo service-layer rules
+(constructor-promoted DI, interfaces in `Contracts/`, no facades-for-forwarding):
+
+- **`Contracts\DraftableResource`** — a per-resource definition, the seam that makes
+  drafts generic:
+  - `model(): string` — the draftable model class.
+  - `fields(): array` — the allowed field keys; autosave rejects keys outside this set.
+  - `currentValues(Model $record): array` — current normalised DB value per field key
+    (this is where `customer_group_ids` reads the pivot).
+  - `rules(Model $record): array` — validation rules for a full commit payload (the
+    customer definition reuses `CustomerRequest::rules()`).
+  - `commit(Model $record, array $values): void` — applies resolved values through the
+    existing core action contracts (`UpdatesCustomer` for customers); the panel never
+    writes model fields directly.
+  - `labels(): array` — field key to lang key, for the conflict dialog.
+- **`Contracts\DraftManager`** / **`Drafts\DraftManager`** — the operations, each taking
+  the record, the staff member, and the registered definition:
+  - `merge($record, $staff, array $data): EditDraft` — upsert the draft; replace `data`
+    wholesale with the incoming diff, capture `base_snapshot` entries for newly-present
+    keys via `currentValues()`, drop snapshot entries for keys no longer present. An
+    empty diff deletes the row (the form returned to clean).
+  - `discard($record, $staff): void` — delete the row.
+  - `commit($record, $staff, array $data, array $rebase = []): CommitResult` — merge
+    `$data` first (the client's final un-debounced diff), apply any `$rebase` snapshot
+    updates (see the resolution protocol), validate the merged full payload against
+    `rules()`, detect conflicts, and either apply everything through
+    `DraftableResource::commit()` and delete the draft, or return the conflict set
+    having applied **nothing**.
+- **Registry**: sections declare their draftable resources through a new
+  `Section::draftables(): array` hook (same optional-hook pattern as `tableExtensions()`
+  and `pageActions()`); `PanelManager` indexes them by morph alias. Registering a
+  definition also attaches a `deleted` listener to the model class that removes its
+  drafts, so drafts never point at gone records.
+
+#### Commit and conflict detection
+
+1. Merge the request's `data` diff into the draft (capturing snapshots for new keys).
+2. Validate the full payload — the record's `currentValues()` overlaid with the draft's
+   `data` — against `rules()`. Failures return 422 before any conflict work.
+3. For each key in `data`, compare `base_snapshot[key]` to the current DB value.
+4. **No conflicts**: apply the full value set via `DraftableResource::commit()` inside a
+   transaction, delete the draft, flash success into the session, return 200.
+5. **Any conflict**: apply nothing. Return 409 with, per conflicting field:
+   `{key, label, mine, base, theirs}` — the drafted value, the value the draft started
+   from, and the current DB value.
+
+Commits are **atomic**: a commit with conflicts applies no fields, including
+non-conflicting ones. The requirements sketch proposed applying clean fields
+immediately and 409-ing only the rest; that leaves the record in a half-intended state
+(change `first_name` + `last_name`, conflict on `last_name`, and the record briefly
+carries a mismatched name), splits one logical save into two writes with two activity
+entries, and means validation ran against a payload that is then only partially applied.
+Resolution is an immediate, in-dialog step — holding the clean fields in the draft for
+the seconds it takes costs nothing. Flagged in Open questions since it deviates from the
+initial requirements.
+
+The disjoint-fields case still works exactly as intended: staff A drafting `first_name`
+and staff B drafting `customer_group_ids` both commit cleanly, in either order, with no
+conflict shown to anyone. Only same-field edits collide.
+
+#### Resolution protocol
+
+On 409 the client shows the conflict dialog; the user resolves each field (keep mine /
+take theirs / manual merge). Re-commit sends the resolved values in `data` plus
+`rebase: {key: theirs}` — for each resolved key, the **current-DB value the user was
+shown**. The server sets `base_snapshot[key]` to the rebase value, then runs the normal
+commit flow. If the DB moved *again* between showing the dialog and re-committing, the
+rebase value no longer matches and the field conflicts again — the user never silently
+overwrites a version they did not see. (Rebasing to "current value at re-commit time"
+instead would be a time-of-check race; the client must pin the version it resolved
+against.)
+
+### HTTP layer
+
+Three routes per resource, registered inside the owning section's route closure next to
+the existing CRUD (inheriting auth middleware and the section's `can:` permission — for
+customers, `sales:manage-customers`), all handled by one shared
+`Http\Controllers\EditDraftController` that resolves the `DraftableResource` from the
+bound model's morph alias:
+
+| Method | Route | Purpose |
+|---|---|---|
+| `PATCH` | `customers/{customer}/draft` | `DraftManager::merge()`; returns `{data, updated_at}` |
+| `DELETE` | `customers/{customer}/draft` | discard |
+| `POST` | `customers/{customer}/draft/commit` | commit; 200 / 409 conflicts / 422 validation |
+
+There is no `GET /draft`: the edit page is an Inertia visit, so the edit controller
+includes a `draft` prop (`{data, updated_at}` or `null`) resolved for the current staff
+member. Only the draft owner is ever addressed — the routes operate on "the current
+user's draft for this record", so no cross-staff access exists to authorise.
+
+Commit is `POST` rather than the sketch's `PUT`: it is not idempotent (it mutates the
+record, deletes the draft, and writes activity/search side effects).
+
+Drafts are invisible to other staff until committed: no "someone has unsaved changes"
+indicator, no table badge, no locking. Conflicts surface exactly once, at commit, scoped
+to the fields that actually collided.
+
+### Inertia panel UI
+
+The panel currently performs every request through Inertia — deliberately unsuitable
+here, since Inertia's cycle is page-visit-shaped and its error contract is validation
+errors, not a 409 conflict payload. Autosave and commit therefore go through a new
+panel-owned fetch helper; everything else on the page stays Inertia.
+
+- **`resources/js/lib/http.ts`** — a thin wrapper over native `fetch` (no new npm
+  dependency): same-origin JSON requests, `X-XSRF-TOKEN` from the cookie, throws typed
+  `DraftConflictError` (carrying the 409 conflict set) and `ValidationError` (422
+  errors bag). This becomes the panel's sanctioned non-Inertia transport, exported on
+  `ui.ts` for add-ons with the same need.
+- **`resources/js/composables/useEditDraft.ts`** — the reusable form driver:
+  - Input: pristine server values, the `draft` prop, and the three endpoint URLs.
+  - Exposes reactive `values` (pristine overlaid with the draft), `isDirty`, autosave
+    state (`saving` / `savedAt`), `errors`, `conflicts`, and `commit()` / `discard()` /
+    `resolve()`.
+  - Autosave: a debounced (~750 ms) watcher diffs `values` against pristine and
+    `PATCH`es the diff; a diff shrinking to empty issues the `DELETE`. In-flight
+    autosaves are serialised so a stale response never clobbers newer state.
+  - `commit()` sends the current diff (not waiting out the debounce), on success clears
+    local draft state and `router.reload({preserveScroll: true})` — the endpoint
+    flashed success into the session, so the existing server-flash `FlashMessage`
+    displays it with no new toast mechanism. On `DraftConflictError` it populates
+    `conflicts`; on `ValidationError`, `errors` (rendered inline exactly as
+    `form.errors` is today).
+- **`resources/js/components/DraftConflictDialog.vue`** — a `Dialog`-based component
+  following the panel's `v-model:open` overlay convention. One row per conflicted
+  field: the translated label, "your value" and "current value" side by side (the base
+  value shown subtly for context), a keep-mine / take-theirs choice, and an editable
+  value input for manual merges. Confirming emits the resolutions; the composable
+  re-commits with the rebase payload. Cancelling leaves the draft intact.
+- **`customers/Edit.vue`** — the details form moves from `useForm` to `useEditDraft`.
+  When the page hydrates from an existing draft, a banner shows "restored unsaved
+  changes from {time}" with a discard action. Save commits. The notes, addresses, and
+  users forms keep their existing direct Inertia flows.
+- **Exports**: `useEditDraft`, `DraftConflictDialog`, and the http helper join `ui.ts`
+  (and the mirrored `@lunarphp/panel` index), so add-on edit pages get drafts by
+  registering a `DraftableResource` and consuming the same composable.
+- **Translations**: new `drafts.php` lang group (banner, autosave states, dialog copy,
+  flash messages, conflict labels) in `en` first, mirrored across all 16 locales.
+
+### Expiry
+
+Drafts untouched for 7 days (configurable, `lunar.panel.drafts.ttl_days`) are pruned:
+`EditDraft` implements `MassPrunable` with a `prunable()` scope on `updated_at`, and
+`PanelServiceProvider` schedules the prune daily via `callAfterResolving(Schedule::class)`
+— the same pattern core uses for `lunar:prune:carts`. A week-old base snapshot is stale
+enough that its conflict comparisons stop being trustworthy; pruning turns "resume a
+dead draft and fight phantom conflicts" into "start fresh".
+
+## Alternatives considered
+
+- **Row-level optimistic locking** (version column or `updated_at` check) — rejected:
+  blocks disjoint-field edits, the common concurrent case in a back office, and offers
+  no resolution path beyond "reload and retype".
+- **Partial apply on conflict** (the requirements sketch: apply clean fields, 409 the
+  rest) — rejected for atomic commit; reasoning inline above. Revisit if real usage
+  shows long-lived conflict-resolution sessions where holding clean fields hurts.
+- **Drafts in core** — rejected: core must stay headless; drafts exist only because of
+  admin editing. The polymorphic relation gives the panel everything it needs without
+  core awareness. If Filament later wants equivalent behaviour, build a Livewire-native
+  version or extract a shared service once this pattern is proven.
+- **axios for the non-Inertia calls** — rejected: the panel has no HTTP client today
+  and the need (JSON, CSRF header, typed 409/422) is a few dozen lines over native
+  `fetch`. Adding a runtime dependency to the panel bundle — and implicitly blessing it
+  for every add-on — is not warranted.
+- **Reusing Inertia partial visits for autosave** — rejected per the requirements:
+  autosave must not enter the page-visit cycle (scroll/focus/history side effects), and
+  commit's 409 payload has no home in Inertia's error contract.
+- **A "someone is editing" presence indicator** — deferred: it needs its own freshness
+  mechanism (polling or sockets) and reintroduces soft-lock social pressure the
+  field-level design exists to avoid. The conflict dialog already covers the case where
+  it matters.
+- **Full-snapshot drafts** (store every field, diff at commit) — rejected: diffs keep
+  payloads small and, more importantly, scope conflict detection to fields the user
+  actually touched — a full snapshot would flag conflicts on fields they never edited.
+
+## Migration impact
+
+- **Database**: one new table, `edit_drafts`, as the panel package's first migration
+  (panel-owned directory, not the core baseline — the table is a panel feature, and
+  non-core packages shipping their own migrations has precedent in stripe/opayo). No
+  changes to core tables.
+- **Breaking changes**: none. New surface only.
+- **Upgrade path**: none required; v2 is unreleased and v1 has no equivalent feature.
+- **Translations**: new `drafts.php` group across all 16 panel locales.
+- **Filament / admin impact**: none. Both panels continue to share the staff guard; a
+  Filament user and a panel drafter editing the same record are exactly the
+  concurrent-edit case the commit check catches.
+- **Public contract surface** (treated as contract from first release): the
+  `DraftableResource` and `DraftManager` contracts, `Section::draftables()`, the
+  `EditDraft` model and table, the three endpoint shapes and their 409/422 payloads,
+  the rebase protocol, the `draft` Inertia prop shape, and the `ui.ts` exports
+  (`useEditDraft`, `DraftConflictDialog`, the http helper). Config:
+  `lunar.panel.drafts.ttl_days`.
+
+## Open questions
+
+- ~~Atomic vs partial-apply commit~~ — resolved: implemented atomic (apply nothing when
+  any field conflicts), deviating from the initial requirements' partial apply for the
+  reasons argued inline.
+- ~~Should the customer notes sidebar form join the draft scope~~ — resolved: stays a
+  direct save; it is a separate endpoint and low-contention.
+- ~~Host-app models outside the core morph map~~ — resolved: FQCN morph aliases in
+  `draftable_type` are acceptable; registration does not require an alias.
+- ~~Multi-tab behaviour for the same staff member~~ — resolved: last-write-wins on the
+  single draft row (the unique index makes it safe); commit overlay-merges rather than
+  replacing, so a commit never drops fields another tab drafted. A same-user cross-tab
+  merge UI is deliberately out of scope.
+
+## References
+
+- Initial requirements: "Lunar v2: Pending Edit Drafts & Field-Level Conflict Detection"
+  (this spec supersedes it; deviations — staff ownership, atomic commit, fetch over
+  axios, POST commit — are called out inline).
+- [[0049-inertia-panel]] — panel architecture, section hooks, `ui.ts` add-on surface.
+- [[0019-attribute-system-redesign]] / [[0018-dedicated-name-description-fields]] — the
+  value shapes behind the field-key scheme.
+- [[0016-service-layer-di]] — action/contract conventions the commit path follows.
+- Prior art: Shopify admin's unsaved-changes bar (draft persistence UX); git's
+  three-way merge (base/mine/theirs resolution model).
+
+## Implementation plan
+
+- [x] Slice 1 — Persistence + service layer: `edit_drafts` migration, `EditDraft` model
+  (`MassPrunable` + scheduled prune), `DraftableResource` / `DraftManager` contracts and
+  implementation (merge/discard/commit, snapshot capture, normalisation, conflict
+  detection, rebase), `Section::draftables()` registry + deleted-record cleanup; unit
+  tests for the conflict matrix.
+- [x] Slice 2 — HTTP layer: shared `EditDraftController`, the three customer routes,
+  `CustomerDraftResource` (fields, group-ids resolver, `CustomerRequest` rules,
+  `UpdatesCustomer` commit), `draft` prop on the customer edit response, session flash
+  on commit; feature tests covering autosave lifecycle, 409/422/200 paths, rebase
+  re-commit, ownership, and pruning.
+- [x] Slice 3 — Frontend driver: `lib/http.ts` fetch wrapper with typed errors,
+  `useEditDraft` composable (debounced diff autosave, serialised in-flight requests,
+  commit/discard/resolve); vitest coverage.
+- [x] Slice 4 — UI wiring: `DraftConflictDialog`, customer `Edit.vue` on `useEditDraft`
+  with the restored-draft banner, `drafts.php` lang group across 16 locales, `ui.ts` /
+  `@lunarphp/panel` exports; Inertia page tests and a vitest pass over the dialog.
diff --git a/specs/README.md b/specs/README.md
index ba17a7ef2b..24fd8f19dd 100644
--- a/specs/README.md
+++ b/specs/README.md
@@ -75,3 +75,5 @@ Each spec carries a `Status:` line in its frontmatter / header:
 | 0047 | Promotions: a campaign layer over discounts | declined    |
 | 0048 | Rename `product_variants.purchasable` to `selling_policy` | implemented |
 | 0049 | Inertia admin panel (`lunarphp/panel`) | implemented |
+| 0050 | Panel order-value chart and public charting component | accepted    |
+| 0051 | Panel edit drafts and field-level conflict detection | implemented |
diff --git a/tests/panel/Feature/Customers/CustomerDraftTest.php b/tests/panel/Feature/Customers/CustomerDraftTest.php
new file mode 100644
index 0000000000..0fef40c318
--- /dev/null
+++ b/tests/panel/Feature/Customers/CustomerDraftTest.php
@@ -0,0 +1,219 @@
+<?php
+
+use Inertia\Testing\AssertableInertia as Assert;
+use Lunar\Core\Models\Customer;
+use Lunar\Core\Models\Staff;
+use Lunar\Panel\Models\EditDraft;
+use Lunar\Tests\Panel\TestCase;
+
+uses(TestCase::class);
+
+function actingStaff(): Staff
+{
+    $staff = Staff::factory()->create(['admin' => true]);
+
+    test()->actingAs($staff, 'staff');
+
+    return $staff;
+}
+
+it('autosaves a draft and returns its state', function () {
+    actingStaff();
+
+    $customer = Customer::factory()->create(['first_name' => 'Original']);
+
+    $this->patchJson(route('panel.customers.draft.update', $customer), [
+        'data' => ['first_name' => 'Changed'],
+    ])
+        ->assertOk()
+        ->assertJsonPath('data.first_name', 'Changed')
+        ->assertJsonPath('updated_at', fn (?string $value) => $value !== null);
+
+    expect(EditDraft::count())->toBe(1);
+});
+
+it('deletes the draft when an empty diff is autosaved', function () {
+    actingStaff();
+
+    $customer = Customer::factory()->create();
+
+    $this->patchJson(route('panel.customers.draft.update', $customer), [
+        'data' => ['first_name' => 'Changed'],
+    ])->assertOk();
+
+    $this->patchJson(route('panel.customers.draft.update', $customer), ['data' => []])
+        ->assertOk()
+        ->assertJsonPath('updated_at', null);
+
+    expect(EditDraft::count())->toBe(0);
+});
+
+it('rejects autosaves with unknown field keys', function () {
+    actingStaff();
+
+    $customer = Customer::factory()->create();
+
+    $this->patchJson(route('panel.customers.draft.update', $customer), [
+        'data' => ['admin_notes' => 'not draftable'],
+    ])->assertUnprocessable();
+});
+
+it('hydrates the edit page with the current staff member\'s draft', function () {
+    actingStaff();
+
+    $customer = Customer::factory()->create();
+
+    $this->patchJson(route('panel.customers.draft.update', $customer), [
+        'data' => ['first_name' => 'Changed'],
+    ])->assertOk();
+
+    $this->get(route('panel.customers.edit', $customer))
+        ->assertInertia(fn (Assert $page) => $page
+            ->where('draft.data.first_name', 'Changed')
+            ->whereNot('draft.updated_at', null)
+            ->where('urls.draft', route('panel.customers.draft.update', $customer))
+            ->where('urls.draftCommit', route('panel.customers.draft.commit', $customer))
+        );
+});
+
+it('keeps drafts invisible to other staff', function () {
+    actingStaff();
+
+    $customer = Customer::factory()->create();
+
+    $this->patchJson(route('panel.customers.draft.update', $customer), [
+        'data' => ['first_name' => 'Changed'],
+    ])->assertOk();
+
+    $this->actingAs(Staff::factory()->create(['admin' => true]), 'staff');
+
+    $this->get(route('panel.customers.edit', $customer))
+        ->assertInertia(fn (Assert $page) => $page->where('draft', null));
+});
+
+it('discards a draft', function () {
+    actingStaff();
+
+    $customer = Customer::factory()->create();
+
+    $this->patchJson(route('panel.customers.draft.update', $customer), [
+        'data' => ['first_name' => 'Changed'],
+    ])->assertOk();
+
+    $this->deleteJson(route('panel.customers.draft.destroy', $customer))
+        ->assertNoContent();
+
+    expect(EditDraft::count())->toBe(0);
+});
+
+it('commits a draft, applies the changes and flashes success', function () {
+    actingStaff();
+
+    $customer = Customer::factory()->create(['first_name' => 'Original']);
+
+    $this->patchJson(route('panel.customers.draft.update', $customer), [
+        'data' => ['first_name' => 'Changed'],
+    ])->assertOk();
+
+    $this->postJson(route('panel.customers.draft.commit', $customer))
+        ->assertOk()
+        ->assertJsonPath('committed', true)
+        ->assertSessionHas('success');
+
+    expect($customer->refresh()->first_name)->toBe('Changed')
+        ->and(EditDraft::count())->toBe(0);
+});
+
+it('merges the request diff into the draft at commit time', function () {
+    actingStaff();
+
+    $customer = Customer::factory()->create(['first_name' => 'Original', 'company_name' => 'Acme']);
+
+    $this->patchJson(route('panel.customers.draft.update', $customer), [
+        'data' => ['first_name' => 'Changed'],
+    ])->assertOk();
+
+    // The un-debounced final keystrokes ride along with the commit.
+    $this->postJson(route('panel.customers.draft.commit', $customer), [
+        'data' => ['company_name' => 'Globex'],
+    ])->assertOk();
+
+    expect($customer->refresh()->first_name)->toBe('Changed')
+        ->and($customer->company_name)->toBe('Globex');
+});
+
+it('returns 409 with per-field detail when a drafted field conflicts', function () {
+    actingStaff();
+
+    $customer = Customer::factory()->create(['first_name' => 'Original', 'company_name' => 'Acme']);
+
+    $this->patchJson(route('panel.customers.draft.update', $customer), [
+        'data' => ['first_name' => 'Mine', 'company_name' => 'Globex'],
+    ])->assertOk();
+
+    $customer->update(['first_name' => 'Theirs']);
+
+    $this->postJson(route('panel.customers.draft.commit', $customer))
+        ->assertStatus(409)
+        ->assertJsonCount(1, 'conflicts')
+        ->assertJsonPath('conflicts.0.key', 'first_name')
+        ->assertJsonPath('conflicts.0.label', __('panel::customers.field_first_name'))
+        ->assertJsonPath('conflicts.0.mine', 'Mine')
+        ->assertJsonPath('conflicts.0.base', 'Original')
+        ->assertJsonPath('conflicts.0.theirs', 'Theirs');
+
+    // Atomic: nothing applied, the draft survives for resolution.
+    expect($customer->refresh()->company_name)->toBe('Acme')
+        ->and(EditDraft::count())->toBe(1);
+});
+
+it('commits resolved conflicts sent with a rebase payload', function () {
+    actingStaff();
+
+    $customer = Customer::factory()->create(['first_name' => 'Original']);
+
+    $this->patchJson(route('panel.customers.draft.update', $customer), [
+        'data' => ['first_name' => 'Mine'],
+    ])->assertOk();
+
+    $customer->update(['first_name' => 'Theirs']);
+
+    $this->postJson(route('panel.customers.draft.commit', $customer))->assertStatus(409);
+
+    $this->postJson(route('panel.customers.draft.commit', $customer), [
+        'data' => ['first_name' => 'Mine'],
+        'rebase' => ['first_name' => 'Theirs'],
+    ])->assertOk();
+
+    expect($customer->refresh()->first_name)->toBe('Mine');
+});
+
+it('returns 422 when the merged payload fails validation', function () {
+    actingStaff();
+
+    $customer = Customer::factory()->create(['first_name' => 'Original']);
+
+    $this->patchJson(route('panel.customers.draft.update', $customer), [
+        'data' => ['first_name' => ''],
+    ])->assertOk();
+
+    $this->postJson(route('panel.customers.draft.commit', $customer))
+        ->assertUnprocessable()
+        ->assertJsonValidationErrors('first_name');
+
+    expect($customer->refresh()->first_name)->toBe('Original');
+});
+
+it('requires the manage-customers permission', function () {
+    $this->actingAs(Staff::factory()->create(['admin' => false]), 'staff');
+
+    $customer = Customer::factory()->create();
+
+    $this->patchJson(route('panel.customers.draft.update', $customer), [
+        'data' => ['first_name' => 'Changed'],
+    ])->assertForbidden();
+
+    $this->postJson(route('panel.customers.draft.commit', $customer))->assertForbidden();
+
+    $this->deleteJson(route('panel.customers.draft.destroy', $customer))->assertForbidden();
+});
diff --git a/tests/panel/Feature/Drafts/DraftManagerTest.php b/tests/panel/Feature/Drafts/DraftManagerTest.php
new file mode 100644
index 0000000000..e94e0d4d37
--- /dev/null
+++ b/tests/panel/Feature/Drafts/DraftManagerTest.php
@@ -0,0 +1,278 @@
+<?php
+
+use Illuminate\Validation\ValidationException;
+use Lunar\Core\Models\Customer;
+use Lunar\Core\Models\CustomerGroup;
+use Lunar\Core\Models\Staff;
+use Lunar\Panel\Contracts\DraftManager;
+use Lunar\Panel\Models\EditDraft;
+use Lunar\Panel\Sections\Sales\CustomerDraftResource;
+use Lunar\Tests\Panel\TestCase;
+
+uses(TestCase::class);
+
+function draftManager(): DraftManager
+{
+    return app(DraftManager::class);
+}
+
+function customerDraftResource(): CustomerDraftResource
+{
+    return app(CustomerDraftResource::class);
+}
+
+it('captures a base snapshot when a field first enters the draft', function () {
+    $staff = Staff::factory()->create();
+    $customer = Customer::factory()->create(['first_name' => 'Original']);
+
+    $draft = draftManager()->merge(customerDraftResource(), $customer, $staff, ['first_name' => 'Changed']);
+
+    expect($draft->data)->toBe(['first_name' => 'Changed'])
+        ->and($draft->base_snapshot)->toBe(['first_name' => 'Original']);
+});
+
+it('keeps the base snapshot fixed across further edits to the same field', function () {
+    $staff = Staff::factory()->create();
+    $customer = Customer::factory()->create(['first_name' => 'Original']);
+
+    draftManager()->merge(customerDraftResource(), $customer, $staff, ['first_name' => 'First edit']);
+
+    // The record moves on underneath; the snapshot must not follow it.
+    $customer->update(['first_name' => 'Moved']);
+
+    $draft = draftManager()->merge(customerDraftResource(), $customer, $staff, ['first_name' => 'Second edit']);
+
+    expect($draft->data)->toBe(['first_name' => 'Second edit'])
+        ->and($draft->base_snapshot)->toBe(['first_name' => 'Original']);
+});
+
+it('replaces data wholesale on merge, dropping snapshots for reverted fields', function () {
+    $staff = Staff::factory()->create();
+    $customer = Customer::factory()->create(['first_name' => 'Original', 'company_name' => 'Acme']);
+
+    draftManager()->merge(customerDraftResource(), $customer, $staff, [
+        'first_name' => 'Changed',
+        'company_name' => 'Globex',
+    ]);
+
+    $draft = draftManager()->merge(customerDraftResource(), $customer, $staff, ['company_name' => 'Globex']);
+
+    expect($draft->data)->toBe(['company_name' => 'Globex'])
+        ->and($draft->base_snapshot)->toBe(['company_name' => 'Acme']);
+});
+
+it('deletes the draft when the diff shrinks to empty', function () {
+    $staff = Staff::factory()->create();
+    $customer = Customer::factory()->create();
+
+    draftManager()->merge(customerDraftResource(), $customer, $staff, ['first_name' => 'Changed']);
+
+    expect(EditDraft::count())->toBe(1);
+
+    $draft = draftManager()->merge(customerDraftResource(), $customer, $staff, []);
+
+    expect($draft)->toBeNull()
+        ->and(EditDraft::count())->toBe(0);
+});
+
+it('rejects field keys outside the resource definition', function () {
+    $staff = Staff::factory()->create();
+    $customer = Customer::factory()->create();
+
+    draftManager()->merge(customerDraftResource(), $customer, $staff, ['admin_notes' => 'sneaky']);
+})->throws(ValidationException::class);
+
+it('normalises empty strings to null for nullable text fields', function () {
+    $staff = Staff::factory()->create();
+    $customer = Customer::factory()->create(['company_name' => null]);
+
+    // '' from the form equals the stored null, so nothing is dirty.
+    $draft = draftManager()->merge(customerDraftResource(), $customer, $staff, ['company_name' => '']);
+
+    expect($draft->data)->toBe(['company_name' => null]);
+
+    $result = draftManager()->commit(customerDraftResource(), $customer, $staff, []);
+
+    expect($result->committed)->toBeTrue();
+});
+
+it('normalises customer group ids to a sorted unique set', function () {
+    $staff = Staff::factory()->create();
+    $groups = CustomerGroup::factory()->count(2)->create();
+    [$low, $high] = $groups->sortBy('id')->values();
+
+    $customer = Customer::factory()->create();
+    $customer->customerGroups()->sync([$low->id, $high->id]);
+
+    // Same membership in a different order is not a change.
+    $draft = draftManager()->merge(customerDraftResource(), $customer, $staff, [
+        'customer_group_ids' => [(string) $high->id, $low->id, $low->id],
+    ]);
+
+    expect($draft->data['customer_group_ids'])->toBe([$low->id, $high->id]);
+
+    $result = draftManager()->commit(customerDraftResource(), $customer, $staff, []);
+
+    expect($result->committed)->toBeTrue()
+        ->and($customer->refresh()->customerGroups)->toHaveCount(2);
+});
+
+it('commits cleanly when no other write touched the drafted fields', function () {
+    $staff = Staff::factory()->create();
+    $customer = Customer::factory()->create(['first_name' => 'Original']);
+
+    draftManager()->merge(customerDraftResource(), $customer, $staff, ['first_name' => 'Changed']);
+
+    $result = draftManager()->commit(customerDraftResource(), $customer, $staff, []);
+
+    expect($result->committed)->toBeTrue()
+        ->and($result->conflicts)->toBe([])
+        ->and($customer->refresh()->first_name)->toBe('Changed')
+        ->and(EditDraft::count())->toBe(0);
+});
+
+it('lets two staff editing disjoint fields both commit without conflict', function () {
+    $staffA = Staff::factory()->create();
+    $staffB = Staff::factory()->create();
+    $customer = Customer::factory()->create(['first_name' => 'Original', 'company_name' => 'Acme']);
+
+    draftManager()->merge(customerDraftResource(), $customer, $staffA, ['first_name' => 'Alice']);
+    draftManager()->merge(customerDraftResource(), $customer, $staffB, ['company_name' => 'Globex']);
+
+    $resultA = draftManager()->commit(customerDraftResource(), $customer, $staffA, []);
+    $resultB = draftManager()->commit(customerDraftResource(), $customer->refresh(), $staffB, []);
+
+    expect($resultA->committed)->toBeTrue()
+        ->and($resultB->committed)->toBeTrue()
+        ->and($customer->refresh()->first_name)->toBe('Alice')
+        ->and($customer->company_name)->toBe('Globex');
+});
+
+it('flags a conflict when another write changed a drafted field, applying nothing', function () {
+    $staff = Staff::factory()->create();
+    $customer = Customer::factory()->create(['first_name' => 'Original', 'company_name' => 'Acme']);
+
+    draftManager()->merge(customerDraftResource(), $customer, $staff, [
+        'first_name' => 'Mine',
+        'company_name' => 'Globex',
+    ]);
+
+    // A concurrent editor wins the race on first_name.
+    $customer->update(['first_name' => 'Theirs']);
+
+    $result = draftManager()->commit(customerDraftResource(), $customer, $staff, []);
+
+    expect($result->committed)->toBeFalse()
+        ->and($result->conflicts)->toHaveCount(1)
+        ->and($result->conflicts[0])->toMatchArray([
+            'key' => 'first_name',
+            'mine' => 'Mine',
+            'base' => 'Original',
+            'theirs' => 'Theirs',
+        ])
+        // Atomic: the clean company_name change must not have applied either.
+        ->and($customer->refresh()->company_name)->toBe('Acme')
+        ->and(EditDraft::count())->toBe(1);
+});
+
+it('commits after a rebase pinning the resolved field to the value the user saw', function () {
+    $staff = Staff::factory()->create();
+    $customer = Customer::factory()->create(['first_name' => 'Original']);
+
+    draftManager()->merge(customerDraftResource(), $customer, $staff, ['first_name' => 'Mine']);
+    $customer->update(['first_name' => 'Theirs']);
+
+    expect(draftManager()->commit(customerDraftResource(), $customer, $staff, [])->committed)->toBeFalse();
+
+    $result = draftManager()->commit(
+        customerDraftResource(),
+        $customer,
+        $staff,
+        ['first_name' => 'Mine'],
+        rebase: ['first_name' => 'Theirs'],
+    );
+
+    expect($result->committed)->toBeTrue()
+        ->and($customer->refresh()->first_name)->toBe('Mine');
+});
+
+it('re-conflicts when the record moves again after the user resolved', function () {
+    $staff = Staff::factory()->create();
+    $customer = Customer::factory()->create(['first_name' => 'Original']);
+
+    draftManager()->merge(customerDraftResource(), $customer, $staff, ['first_name' => 'Mine']);
+    $customer->update(['first_name' => 'Theirs']);
+
+    expect(draftManager()->commit(customerDraftResource(), $customer, $staff, [])->committed)->toBeFalse();
+
+    // The user resolved against 'Theirs', but a third write lands first.
+    $customer->update(['first_name' => 'Newer still']);
+
+    $result = draftManager()->commit(
+        customerDraftResource(),
+        $customer,
+        $staff,
+        ['first_name' => 'Mine'],
+        rebase: ['first_name' => 'Theirs'],
+    );
+
+    expect($result->committed)->toBeFalse()
+        ->and($result->conflicts[0]['theirs'])->toBe('Newer still')
+        ->and($customer->refresh()->first_name)->toBe('Newer still');
+});
+
+it('validates the full payload before conflict detection', function () {
+    $staff = Staff::factory()->create();
+    $customer = Customer::factory()->create(['first_name' => 'Original']);
+
+    draftManager()->merge(customerDraftResource(), $customer, $staff, ['first_name' => '']);
+
+    draftManager()->commit(customerDraftResource(), $customer, $staff, []);
+})->throws(ValidationException::class);
+
+it('treats a commit with no draft and no diff as a no-op success', function () {
+    $staff = Staff::factory()->create();
+    $customer = Customer::factory()->create();
+
+    $result = draftManager()->commit(customerDraftResource(), $customer, $staff, []);
+
+    expect($result->committed)->toBeTrue();
+});
+
+it('keeps one draft per staff member per record', function () {
+    $staffA = Staff::factory()->create();
+    $staffB = Staff::factory()->create();
+    $customer = Customer::factory()->create();
+
+    draftManager()->merge(customerDraftResource(), $customer, $staffA, ['first_name' => 'A']);
+    draftManager()->merge(customerDraftResource(), $customer, $staffA, ['first_name' => 'A2']);
+    draftManager()->merge(customerDraftResource(), $customer, $staffB, ['first_name' => 'B']);
+
+    expect(EditDraft::count())->toBe(2)
+        ->and(draftManager()->find($customer, $staffA)->data['first_name'])->toBe('A2')
+        ->and(draftManager()->find($customer, $staffB)->data['first_name'])->toBe('B');
+});
+
+it('removes drafts when their record is deleted', function () {
+    $staff = Staff::factory()->create();
+    $customer = Customer::factory()->create();
+
+    draftManager()->merge(customerDraftResource(), $customer, $staff, ['first_name' => 'Changed']);
+
+    $customer->delete();
+
+    expect(EditDraft::count())->toBe(0);
+});
+
+it('prunes drafts untouched beyond the configured ttl', function () {
+    EditDraft::factory()->create();
+
+    $this->travel(8)->days();
+
+    $fresh = EditDraft::factory()->create();
+
+    $this->artisan('model:prune', ['--model' => [EditDraft::class]]);
+
+    expect(EditDraft::count())->toBe(1)
+        ->and(EditDraft::first()->id)->toBe($fresh->id);
+});