@stacksjs/defaults 0.70.362 → 0.70.365

package/resources/components/Dashboard/Commerce/CommerceVariantDeleteDialog.stx

@@ -5,13 +5,15 @@ const open = useReactiveProp('open', false)
 const record = useReactiveProp('record', null as ProductVariantRecord | null)
 const busy = useReactiveProp('busy', false)
 const emit = defineEmits()
+const description = derived(() => `${record()?.variant || 'This product variant'} will be permanently removed.${record()?.productName ? ` The linked product ${record()?.productName} will remain.` : ''}`)
 </script>
 
-<div :if="open()" class="flex fixed inset-0 z-50 items-center justify-center p-4 dashboard-modal-layer">
-  <button type="button" aria-label="Close delete product variant dialog" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="dialog" aria-modal="true" aria-labelledby="product-variant-delete-title" class="relative p-6 max-w-md w-full bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700 shadow-xl">
-    <h2 id="product-variant-delete-title" class="font-semibold text-gray-900 text-lg dark:text-white">Delete product variant?</h2>
-    <p class="mt-2 text-gray-600 text-sm dark:text-neutral-300"><span class="font-medium">{{ record()?.variant }}</span> will be permanently removed. <span :if="record()?.productName">The linked product {{ record()?.productName }} will remain.</span></p>
-    <footer class="flex gap-2 justify-end mt-6"><Button variant="secondary" :disabled="busy()" @click="emit('close')">Cancel</Button><Button variant="danger" :loading="busy()" @click="emit('confirm')">Delete product variant</Button></footer>
-  </section>
-</div>
+<ConfirmDialog
+  :isOpen="open()"
+  title="Delete product variant?"
+  :description="description()"
+  confirmLabel="Delete product variant"
+  :busy="busy()"
+  @close="emit('close')"
+  @confirm="emit('confirm')"
+/>

package/resources/components/Dashboard/Commerce/CommerceVariantDialog.stx

@@ -56,17 +56,18 @@ function errorMessages(): string[] {
 }
 </script>
 
-<div :if="open()" class="flex fixed inset-0 z-50 items-center justify-center p-4 dashboard-modal-layer">
-  <button type="button" aria-label="Close product variant dialog" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="dialog" aria-modal="true" aria-labelledby="product-variant-dialog-title" class="relative max-w-lg w-full bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700 shadow-xl">
-    <form @submit.prevent="submit">
-      <div class="p-6">
-        <h2 id="product-variant-dialog-title" class="font-semibold text-gray-900 text-lg dark:text-white">{{ mode() === 'edit' ? 'Edit product variant' : 'Add product variant' }}</h2>
-        <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Fields and product assignment follow the ProductVariant model.</p>
-        <ul :if="errorMessages().length > 0" class="mt-5 p-3 space-y-1 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">
+<Modal
+  :isOpen="open()"
+  :title="mode() === 'edit' ? 'Edit product variant' : 'Add product variant'"
+  description="Fields and product assignment follow the ProductVariant model."
+  size="md"
+  @close="emit('close')"
+>
+    <form id="product-variant-form" @submit.prevent="submit">
+        <ul :if="errorMessages().length > 0" class="mb-5 p-3 space-y-1 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">
           <template :for="message in errorMessages()" :key="message"><li>{{ message }}</li></template>
         </ul>
-        <div class="mt-5 space-y-4">
+        <div class="space-y-4">
           <div class="grid gap-4 sm:grid-cols-2">
             <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Variant</span><input x-model="variant" type="text" maxlength="100" required class="mt-1 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" /></label>
             <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Type</span><input x-model="type" type="text" list="product-variant-types" maxlength="50" required class="mt-1 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" /><datalist id="product-variant-types"><template :for="variantType in types()" :key="variantType"><option :value="variantType"></option></template></datalist></label>
@@ -76,11 +77,11 @@ function errorMessages(): string[] {
           <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Options</span><textarea x-model="options" rows="3" placeholder="Small, Medium, Large" class="mt-1 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700"></textarea><span class="block mt-1 text-gray-500 text-xs dark:text-neutral-400">Separate options with commas or new lines.</span></label>
           <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Status</span><select x-model="status" class="mt-1 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700"><option value="active">Active</option><option value="inactive">Inactive</option><option value="draft">Draft</option></select></label>
         </div>
-      </div>
-      <footer class="flex gap-2 justify-end px-6 py-4 bg-gray-50 dark:bg-neutral-900/50 border-gray-200 border-t dark:border-neutral-700">
-        <Button variant="secondary" :disabled="busy()" @click="emit('close')">Cancel</Button>
-        <Button type="submit" :loading="busy()" :disabled="!variant().trim() || !type().trim()">{{ mode() === 'edit' ? 'Save product variant' : 'Add product variant' }}</Button>
-      </footer>
     </form>
-  </section>
-</div>
+  <template #footer>
+    <div class="flex gap-2 justify-end w-full">
+        <Button variant="secondary" :disabled="busy()" @click="emit('close')">Cancel</Button>
+        <Button type="submit" form="product-variant-form" :loading="busy()" :disabled="!variant().trim() || !type().trim()">{{ mode() === 'edit' ? 'Save product variant' : 'Add product variant' }}</Button>
+    </div>
+  </template>
+</Modal>

package/resources/components/Dashboard/Commerce/Delivery/DeliveryRouteDeleteDialog.stx

@@ -9,20 +9,16 @@ const record = useReactiveProp('record', null as DeliveryRouteRecord | null)
 const busy = useReactiveProp('busy', false)
 const error = useReactiveProp('error', '')
 const emit = defineEmits()
+const description = derived(() => `Delete route #${record()?.id} for ${record()?.driver || 'the selected driver'} permanently.`)
 </script>
 
-<div :if="open() && record()" class="flex fixed inset-0 z-50 items-center justify-center p-4 dashboard-modal-layer">
-  <button type="button" aria-label="Close route delete confirmation" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="alertdialog" aria-modal="true" aria-labelledby="delivery-route-delete-title" class="relative max-w-md w-full bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700 shadow-xl">
-    <div class="p-6">
-      <div class="flex items-center justify-center h-10 w-10 text-red-700 dark:text-red-300 bg-red-50 dark:bg-red-950/40 rounded-full"><span class="h-5 w-5 i-hugeicons-delete-02"></span></div>
-      <h2 id="delivery-route-delete-title" class="mt-4 font-semibold text-gray-900 text-lg dark:text-white">Delete delivery route?</h2>
-      <p class="mt-2 text-gray-500 text-sm dark:text-neutral-400">Delete route #{{ record()?.id }} for {{ record()?.driver }} permanently.</p>
-      <div :if="error()" class="mt-4 p-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">{{ error() }}</div>
-    </div>
-    <footer class="flex gap-2 justify-end px-6 py-4 bg-gray-50 dark:bg-neutral-900/50 border-gray-200 border-t dark:border-neutral-700">
-      <Button :disabled="busy()" variant="secondary" @click="emit('close')">Cancel</Button>
-      <Button :loading="busy()" variant="danger" @click="emit('confirm')">Delete route</Button>
-    </footer>
-  </section>
-</div>
+<ConfirmDialog
+  :isOpen="open() && Boolean(record())"
+  title="Delete delivery route?"
+  :description="description()"
+  confirmLabel="Delete route"
+  :busy="busy()"
+  :error="error()"
+  @close="emit('close')"
+  @confirm="emit('confirm')"
+/>

package/resources/components/Dashboard/Commerce/Delivery/DeliveryRouteDialog.stx

@@ -115,16 +115,17 @@ function submit(): void {
 }
 </script>
 
-<div :if="open()" class="flex fixed inset-0 z-50 items-center justify-center p-4 dashboard-modal-layer">
-  <button type="button" aria-label="Close delivery route dialog" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="dialog" aria-modal="true" aria-labelledby="delivery-route-dialog-title" class="overflow-y-auto relative max-h-[92dvh] max-w-xl w-full bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700 shadow-xl">
-    <form @submit.prevent="submit()">
-      <div class="p-6">
-        <h2 id="delivery-route-dialog-title" class="font-semibold text-gray-900 text-lg dark:text-white">{{ mode() === 'edit' ? 'Edit delivery route' : 'Add delivery route' }}</h2>
-        <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Assign a persisted driver and record the operational route metrics.</p>
-        <div :if="error()" class="mt-4 p-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">{{ error() }}</div>
+<Modal
+  :isOpen="open()"
+  :title="mode() === 'edit' ? 'Edit delivery route' : 'Add delivery route'"
+  description="Assign a persisted driver and record the operational route metrics."
+  size="lg"
+  @close="emit('close')"
+>
+    <form id="delivery-route-form" @submit.prevent="submit()">
+        <div :if="error()" class="mb-5 p-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">{{ error() }}</div>
 
-        <div class="mt-5 space-y-4">
+        <div class="space-y-4">
           <label class="block">
             <span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Driver</span>
             <select x-model="driverId" required class="mt-1 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700">
@@ -143,11 +144,11 @@ function submit(): void {
           </div>
           <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Last active</span><input x-model="lastActive" type="datetime-local" required class="mt-1 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" /></label>
         </div>
-      </div>
-      <footer class="flex gap-2 justify-end px-6 py-4 bg-gray-50 dark:bg-neutral-900/50 border-gray-200 border-t dark:border-neutral-700">
-        <Button :disabled="busy()" variant="secondary" @click="emit('close')">Cancel</Button>
-        <Button type="submit" :loading="busy()">{{ mode() === 'edit' ? 'Save changes' : 'Add route' }}</Button>
-      </footer>
     </form>
-  </section>
-</div>
+  <template #footer>
+    <div class="flex gap-2 justify-end w-full">
+      <Button :disabled="busy()" variant="secondary" @click="emit('close')">Cancel</Button>
+      <Button type="submit" form="delivery-route-form" :loading="busy()">{{ mode() === 'edit' ? 'Save changes' : 'Add route' }}</Button>
+    </div>
+  </template>
+</Modal>

package/resources/components/Dashboard/Commerce/Delivery/DigitalDeliveryDeleteDialog.stx

@@ -9,20 +9,16 @@ const record = useReactiveProp('record', null as DigitalDeliveryRecord | null)
 const busy = useReactiveProp('busy', false)
 const error = useReactiveProp('error', '')
 const emit = defineEmits()
+const description = derived(() => `Delete ${record()?.name || 'the selected digital delivery'} permanently.`)
 </script>
 
-<div :if="open() && record()" class="flex fixed inset-0 z-50 items-center justify-center p-4 dashboard-modal-layer">
-  <button type="button" aria-label="Close digital delivery deletion" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="alertdialog" aria-modal="true" aria-labelledby="digital-delivery-delete-title" class="relative max-w-md w-full bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700 shadow-xl">
-    <div class="p-6">
-      <div class="flex items-center justify-center h-10 w-10 text-red-700 dark:text-red-300 bg-red-50 dark:bg-red-950/40 rounded-full"><span class="h-5 w-5 i-hugeicons-delete-02"></span></div>
-      <h2 id="digital-delivery-delete-title" class="mt-4 font-semibold text-gray-900 text-lg dark:text-white">Delete digital delivery?</h2>
-      <p class="mt-2 text-gray-500 text-sm dark:text-neutral-400">Delete {{ record()?.name }} permanently.</p>
-      <div :if="error()" class="mt-4 p-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">{{ error() }}</div>
-    </div>
-    <footer class="flex gap-2 justify-end px-6 py-4 bg-gray-50 dark:bg-neutral-900/50 border-gray-200 border-t dark:border-neutral-700">
-      <Button :disabled="busy()" variant="secondary" @click="emit('close')">Cancel</Button>
-      <Button :loading="busy()" variant="danger" @click="emit('confirm')">Delete method</Button>
-    </footer>
-  </section>
-</div>
+<ConfirmDialog
+  :isOpen="open() && Boolean(record())"
+  title="Delete digital delivery?"
+  :description="description()"
+  confirmLabel="Delete delivery"
+  :busy="busy()"
+  :error="error()"
+  @close="emit('close')"
+  @confirm="emit('confirm')"
+/>

package/resources/components/Dashboard/Commerce/Delivery/DigitalDeliveryDialog.stx

@@ -79,16 +79,17 @@ function submit(): void {
 }
 </script>
 
-<div :if="open()" class="flex fixed inset-0 z-50 items-center justify-center p-4 dashboard-modal-layer">
-  <button type="button" aria-label="Close digital delivery dialog" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="dialog" aria-modal="true" aria-labelledby="digital-delivery-dialog-title" class="overflow-y-auto relative max-h-[92dvh] max-w-xl w-full bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700 shadow-xl">
-    <form @submit.prevent="submit()">
-      <div class="p-6">
-        <h2 id="digital-delivery-dialog-title" class="font-semibold text-gray-900 text-lg dark:text-white">{{ mode() === 'edit' ? 'Edit digital delivery' : 'Add digital delivery' }}</h2>
-        <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Configure access, expiry, download limits, and fulfillment behavior.</p>
-        <div :if="error()" class="mt-4 p-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">{{ error() }}</div>
+<Modal
+  :isOpen="open()"
+  :title="mode() === 'edit' ? 'Edit digital delivery' : 'Add digital delivery'"
+  description="Configure access, expiry, download limits, and fulfillment behavior."
+  size="lg"
+  @close="emit('close')"
+>
+    <form id="digital-delivery-form" @submit.prevent="submit()">
+        <div :if="error()" class="mb-5 p-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">{{ error() }}</div>
 
-        <div class="mt-5 space-y-4">
+        <div class="space-y-4">
           <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Method name</span><input x-model="name" type="text" required maxlength="255" autocomplete="off" placeholder="Secure download" class="mt-1 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" /></label>
           <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Description</span><textarea x-model="description" required rows="3" placeholder="Explain how customers receive and access files." class="mt-1 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700 resize-y"></textarea></label>
           <div class="grid gap-4 grid-cols-1 sm:grid-cols-2">
@@ -101,11 +102,11 @@ function submit(): void {
           </div>
           <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Status</span><select x-model="status" class="mt-1 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700"><option value="active">Active</option><option value="inactive">Inactive</option></select></label>
         </div>
-      </div>
-      <footer class="flex gap-2 justify-end px-6 py-4 bg-gray-50 dark:bg-neutral-900/50 border-gray-200 border-t dark:border-neutral-700">
-        <Button :disabled="busy()" variant="secondary" @click="emit('close')">Cancel</Button>
-        <Button type="submit" :loading="busy()">{{ mode() === 'edit' ? 'Save changes' : 'Add method' }}</Button>
-      </footer>
     </form>
-  </section>
-</div>
+  <template #footer>
+    <div class="flex gap-2 justify-end w-full">
+      <Button :disabled="busy()" variant="secondary" @click="emit('close')">Cancel</Button>
+      <Button type="submit" form="digital-delivery-form" :loading="busy()">{{ mode() === 'edit' ? 'Save changes' : 'Add method' }}</Button>
+    </div>
+  </template>
+</Modal>

package/resources/components/Dashboard/Commerce/Delivery/DriverDeleteDialog.stx

@@ -9,20 +9,16 @@ const record = useReactiveProp('record', null as DriverRecord | null)
 const busy = useReactiveProp('busy', false)
 const error = useReactiveProp('error', '')
 const emit = defineEmits()
+const description = derived(() => `Delete ${record()?.name || 'the selected driver'} permanently. Drivers referenced by delivery routes may be protected by the database.`)
 </script>
 
-<div :if="open() && record()" class="flex fixed inset-0 z-50 items-center justify-center p-4 dashboard-modal-layer">
-  <button type="button" aria-label="Close delete confirmation" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="alertdialog" aria-modal="true" aria-labelledby="driver-delete-title" class="relative max-w-md w-full bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700 shadow-xl">
-    <div class="p-6">
-      <div class="flex items-center justify-center h-10 w-10 text-red-700 dark:text-red-300 bg-red-50 dark:bg-red-950/40 rounded-full"><span class="h-5 w-5 i-hugeicons-delete-02"></span></div>
-      <h2 id="driver-delete-title" class="mt-4 font-semibold text-gray-900 text-lg dark:text-white">Delete driver?</h2>
-      <p class="mt-2 text-gray-500 text-sm dark:text-neutral-400">Delete {{ record()?.name }} permanently. Drivers referenced by delivery routes may be protected by the database.</p>
-      <div :if="error()" class="mt-4 p-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">{{ error() }}</div>
-    </div>
-    <footer class="flex gap-2 justify-end px-6 py-4 bg-gray-50 dark:bg-neutral-900/50 border-gray-200 border-t dark:border-neutral-700">
-      <Button :disabled="busy()" variant="secondary" @click="emit('close')">Cancel</Button>
-      <Button :loading="busy()" variant="danger" @click="emit('confirm')">Delete driver</Button>
-    </footer>
-  </section>
-</div>
+<ConfirmDialog
+  :isOpen="open() && Boolean(record())"
+  title="Delete driver?"
+  :description="description()"
+  confirmLabel="Delete driver"
+  :busy="busy()"
+  :error="error()"
+  @close="emit('close')"
+  @confirm="emit('confirm')"
+/>

package/resources/components/Dashboard/Commerce/Delivery/DriverDialog.stx

@@ -84,16 +84,17 @@ function submit(): void {
 }
 </script>
 
-<div :if="open()" class="flex fixed inset-0 z-50 items-center justify-center p-4 dashboard-modal-layer">
-  <button type="button" aria-label="Close driver dialog" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="dialog" aria-modal="true" aria-labelledby="driver-dialog-title" class="overflow-y-auto relative max-h-[92dvh] max-w-lg w-full bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700 shadow-xl">
-    <form @submit.prevent="submit()">
-      <div class="p-6">
-        <h2 id="driver-dialog-title" class="font-semibold text-gray-900 text-lg dark:text-white">{{ mode() === 'edit' ? 'Edit driver' : 'Add driver' }}</h2>
-        <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Manage operational identity, vehicle assignment, availability, and the optional User relationship.</p>
-        <div :if="error()" class="mt-4 p-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">{{ error() }}</div>
+<Modal
+  :isOpen="open()"
+  :title="mode() === 'edit' ? 'Edit driver' : 'Add driver'"
+  description="Manage operational identity, vehicle assignment, availability, and the optional User relationship."
+  size="md"
+  @close="emit('close')"
+>
+    <form id="driver-form" @submit.prevent="submit()">
+        <div :if="error()" class="mb-5 p-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">{{ error() }}</div>
 
-        <div class="mt-5 space-y-4">
+        <div class="space-y-4">
           <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Driver name</span><input x-model="name" type="text" required maxlength="255" autocomplete="name" placeholder="Alex Morgan" class="mt-1 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" /></label>
           <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Phone</span><input x-model="phone" type="tel" required maxlength="255" autocomplete="tel" placeholder="+1 555 0100" class="mt-1 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" /></label>
           <div class="grid gap-4 grid-cols-1 sm:grid-cols-2">
@@ -109,11 +110,11 @@ function submit(): void {
             </select>
           </label>
         </div>
-      </div>
-      <footer class="flex gap-2 justify-end px-6 py-4 bg-gray-50 dark:bg-neutral-900/50 border-gray-200 border-t dark:border-neutral-700">
-        <Button :disabled="busy()" variant="secondary" @click="emit('close')">Cancel</Button>
-        <Button type="submit" :loading="busy()">{{ mode() === 'edit' ? 'Save changes' : 'Add driver' }}</Button>
-      </footer>
     </form>
-  </section>
-</div>
+  <template #footer>
+    <div class="flex gap-2 justify-end w-full">
+      <Button :disabled="busy()" variant="secondary" @click="emit('close')">Cancel</Button>
+      <Button type="submit" form="driver-form" :loading="busy()">{{ mode() === 'edit' ? 'Save changes' : 'Add driver' }}</Button>
+    </div>
+  </template>
+</Modal>

package/resources/components/Dashboard/Commerce/Delivery/LicenseKeyDeleteDialog.stx

@@ -9,20 +9,16 @@ const record = useReactiveProp('record', null as LicenseKeyRecord | null)
 const busy = useReactiveProp('busy', false)
 const error = useReactiveProp('error', '')
 const emit = defineEmits()
+const description = derived(() => `Delete ${record()?.key || 'the selected license key'} permanently.`)
 </script>
 
-<div :if="open() && record()" class="flex fixed inset-0 z-50 items-center justify-center p-4 dashboard-modal-layer">
-  <button type="button" aria-label="Close license key deletion" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="alertdialog" aria-modal="true" aria-labelledby="license-key-delete-title" class="relative max-w-md w-full bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700 shadow-xl">
-    <div class="p-6">
-      <div class="flex items-center justify-center h-10 w-10 text-red-700 dark:text-red-300 bg-red-50 dark:bg-red-950/40 rounded-full"><span class="h-5 w-5 i-hugeicons-delete-02"></span></div>
-      <h2 id="license-key-delete-title" class="mt-4 font-semibold text-gray-900 text-lg dark:text-white">Delete license key?</h2>
-      <p class="mt-2 text-gray-500 text-sm dark:text-neutral-400">Delete <span class="font-mono">{{ record()?.key }}</span> permanently.</p>
-      <div :if="error()" class="mt-4 p-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">{{ error() }}</div>
-    </div>
-    <footer class="flex gap-2 justify-end px-6 py-4 bg-gray-50 dark:bg-neutral-900/50 border-gray-200 border-t dark:border-neutral-700">
-      <Button :disabled="busy()" variant="secondary" @click="emit('close')">Cancel</Button>
-      <Button :loading="busy()" variant="danger" @click="emit('confirm')">Delete key</Button>
-    </footer>
-  </section>
-</div>
+<ConfirmDialog
+  :isOpen="open() && Boolean(record())"
+  title="Delete license key?"
+  :description="description()"
+  confirmLabel="Delete key"
+  :busy="busy()"
+  :error="error()"
+  @close="emit('close')"
+  @confirm="emit('confirm')"
+/>

package/resources/components/Dashboard/Commerce/Delivery/LicenseKeyDialog.stx

@@ -121,16 +121,17 @@ function submit(): void {
 }
 </script>
 
-<div :if="open()" class="flex fixed inset-0 z-50 items-center justify-center p-4 dashboard-modal-layer">
-  <button type="button" aria-label="Close license key dialog" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="dialog" aria-modal="true" aria-labelledby="license-key-dialog-title" class="overflow-y-auto relative max-h-[92dvh] max-w-xl w-full bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700 shadow-xl">
-    <form @submit.prevent="submit()">
-      <div class="p-6">
-        <h2 id="license-key-dialog-title" class="font-semibold text-gray-900 text-lg dark:text-white">{{ mode() === 'edit' ? 'Edit license key' : 'Add license key' }}</h2>
-        <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Generate a unique key and optionally assign its customer, product, and order relationships.</p>
-        <div :if="error()" class="mt-4 p-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">{{ error() }}</div>
+<Modal
+  :isOpen="open()"
+  :title="mode() === 'edit' ? 'Edit license key' : 'Add license key'"
+  description="Generate a unique key and optionally assign its customer, product, and order relationships."
+  size="lg"
+  @close="emit('close')"
+>
+    <form id="license-key-form" @submit.prevent="submit()">
+        <div :if="error()" class="mb-5 p-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">{{ error() }}</div>
 
-        <div class="mt-5 space-y-4">
+        <div class="space-y-4">
           <div>
             <label for="license-key-value" class="font-medium text-gray-700 text-sm dark:text-neutral-200">License key</label>
             <span class="flex gap-2 mt-1">
@@ -149,11 +150,11 @@ function submit(): void {
           </div>
           <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Status</span><select x-model="status" class="mt-1 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700"><option value="unassigned">Unassigned</option><option value="active">Active</option><option value="inactive">Inactive</option></select></label>
         </div>
-      </div>
-      <footer class="flex gap-2 justify-end px-6 py-4 bg-gray-50 dark:bg-neutral-900/50 border-gray-200 border-t dark:border-neutral-700">
-        <Button :disabled="busy()" variant="secondary" @click="emit('close')">Cancel</Button>
-        <Button type="submit" :loading="busy()">{{ mode() === 'edit' ? 'Save changes' : 'Add key' }}</Button>
-      </footer>
     </form>
-  </section>
-</div>
+  <template #footer>
+    <div class="flex gap-2 justify-end w-full">
+      <Button :disabled="busy()" variant="secondary" @click="emit('close')">Cancel</Button>
+      <Button type="submit" form="license-key-form" :loading="busy()">{{ mode() === 'edit' ? 'Save changes' : 'Add key' }}</Button>
+    </div>
+  </template>
+</Modal>

package/resources/components/Dashboard/Commerce/Delivery/ShippingMethodDeleteDialog.stx

@@ -9,20 +9,16 @@ const record = useReactiveProp('record', null as ShippingMethodRecord | null)
 const busy = useReactiveProp('busy', false)
 const error = useReactiveProp('error', '')
 const emit = defineEmits()
+const description = derived(() => `Delete ${record()?.name || 'the selected shipping method'} permanently. Methods referenced by shipping zones may be protected by the database.`)
 </script>
 
-<div :if="open() && record()" class="flex fixed inset-0 z-50 items-center justify-center p-4 dashboard-modal-layer">
-  <button type="button" aria-label="Close delete confirmation" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="alertdialog" aria-modal="true" aria-labelledby="shipping-method-delete-title" class="relative max-w-md w-full bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700 shadow-xl">
-    <div class="p-6">
-      <div class="flex items-center justify-center h-10 w-10 text-red-700 dark:text-red-300 bg-red-50 dark:bg-red-950/40 rounded-full"><span class="h-5 w-5 i-hugeicons-delete-02"></span></div>
-      <h2 id="shipping-method-delete-title" class="mt-4 font-semibold text-gray-900 text-lg dark:text-white">Delete shipping method?</h2>
-      <p class="mt-2 text-gray-500 text-sm dark:text-neutral-400">Delete {{ record()?.name }} permanently. Methods referenced by shipping zones may be protected by the database.</p>
-      <div :if="error()" class="mt-4 p-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">{{ error() }}</div>
-    </div>
-    <footer class="flex gap-2 justify-end px-6 py-4 bg-gray-50 dark:bg-neutral-900/50 border-gray-200 border-t dark:border-neutral-700">
-      <Button :disabled="busy()" variant="secondary" @click="emit('close')">Cancel</Button>
-      <Button :loading="busy()" variant="danger" @click="emit('confirm')">Delete method</Button>
-    </footer>
-  </section>
-</div>
+<ConfirmDialog
+  :isOpen="open() && Boolean(record())"
+  title="Delete shipping method?"
+  :description="description()"
+  confirmLabel="Delete method"
+  :busy="busy()"
+  :error="error()"
+  @close="emit('close')"
+  @confirm="emit('confirm')"
+/>

package/resources/components/Dashboard/Commerce/Delivery/ShippingMethodDialog.stx

@@ -65,16 +65,17 @@ function submit(): void {
 }
 </script>
 
-<div :if="open()" class="flex fixed inset-0 z-50 items-center justify-center p-4 dashboard-modal-layer">
-  <button type="button" aria-label="Close shipping method dialog" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="dialog" aria-modal="true" aria-labelledby="shipping-method-dialog-title" class="overflow-y-auto relative max-h-[92dvh] max-w-lg w-full bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700 shadow-xl">
-    <form @submit.prevent="submit">
-      <div class="p-6">
-        <h2 id="shipping-method-dialog-title" class="font-semibold text-gray-900 text-lg dark:text-white">{{ mode() === 'edit' ? 'Edit shipping method' : 'Add shipping method' }}</h2>
-        <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Rates are stored as integer minor units to keep pricing exact.</p>
-        <div :if="error()" class="mt-4 p-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">{{ error() }}</div>
+<Modal
+  :isOpen="open()"
+  :title="mode() === 'edit' ? 'Edit shipping method' : 'Add shipping method'"
+  description="Rates are stored as integer minor units to keep pricing exact."
+  size="md"
+  @close="emit('close')"
+>
+    <form id="shipping-method-form" @submit.prevent="submit">
+        <div :if="error()" class="mb-5 p-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">{{ error() }}</div>
 
-        <div class="mt-5 space-y-4">
+        <div class="space-y-4">
           <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Method name</span><input x-model="name" type="text" required maxlength="100" autocomplete="off" placeholder="Ground shipping" class="mt-1 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" /></label>
           <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Description</span><textarea x-model="description" rows="3" maxlength="500" placeholder="How and when this method is used" class="mt-1 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700"></textarea></label>
           <div class="grid gap-4 grid-cols-1 sm:grid-cols-2">
@@ -83,11 +84,11 @@ function submit(): void {
           </div>
           <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Status</span><select x-model="status" class="mt-1 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700"><option value="active">Active</option><option value="inactive">Inactive</option><option value="draft">Draft</option></select></label>
         </div>
-      </div>
-      <footer class="flex gap-2 justify-end px-6 py-4 bg-gray-50 dark:bg-neutral-900/50 border-gray-200 border-t dark:border-neutral-700">
-        <Button :disabled="busy()" variant="secondary" @click="emit('close')">Cancel</Button>
-        <Button type="submit" :loading="busy()">{{ mode() === 'edit' ? 'Save changes' : 'Add method' }}</Button>
-      </footer>
     </form>
-  </section>
-</div>
+  <template #footer>
+    <div class="flex gap-2 justify-end w-full">
+      <Button :disabled="busy()" variant="secondary" @click="emit('close')">Cancel</Button>
+      <Button type="submit" form="shipping-method-form" :loading="busy()">{{ mode() === 'edit' ? 'Save changes' : 'Add method' }}</Button>
+    </div>
+  </template>
+</Modal>

package/resources/components/Dashboard/Commerce/Delivery/ShippingRateDeleteDialog.stx

@@ -10,20 +10,16 @@ const record = useReactiveProp('record', null as ShippingRateRecord | null)
 const busy = useReactiveProp('busy', false)
 const error = useReactiveProp('error', '')
 const emit = defineEmits()
+const description = derived(() => `Delete the ${record()?.shipping_method?.name || 'selected method'} rate for ${record()?.shipping_zone?.name || 'the selected zone'} permanently.`)
 </script>
 
-<div :if="open() && record()" class="flex fixed inset-0 z-50 items-center justify-center p-4 dashboard-modal-layer">
-  <button type="button" aria-label="Close delete confirmation" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="alertdialog" aria-modal="true" aria-labelledby="shipping-rate-delete-title" class="relative max-w-md w-full bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700 shadow-xl">
-    <div class="p-6">
-      <div class="flex items-center justify-center h-10 w-10 text-red-700 dark:text-red-300 bg-red-50 dark:bg-red-950/40 rounded-full"><span class="h-5 w-5 i-hugeicons-delete-02"></span></div>
-      <h2 id="shipping-rate-delete-title" class="mt-4 font-semibold text-gray-900 text-lg dark:text-white">Delete shipping rate?</h2>
-      <p class="mt-2 text-gray-500 text-sm dark:text-neutral-400">Delete the {{ record()?.shipping_method?.name || 'selected method' }} rate for {{ record()?.shipping_zone?.name || 'the selected zone' }} permanently.</p>
-      <div :if="error()" class="mt-4 p-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">{{ error() }}</div>
-    </div>
-    <footer class="flex gap-2 justify-end px-6 py-4 bg-gray-50 dark:bg-neutral-900/50 border-gray-200 border-t dark:border-neutral-700">
-      <Button :disabled="busy()" variant="secondary" @click="emit('close')">Cancel</Button>
-      <Button :loading="busy()" variant="danger" @click="emit('confirm')">Delete rate</Button>
-    </footer>
-  </section>
-</div>
+<ConfirmDialog
+  :isOpen="open() && Boolean(record())"
+  title="Delete shipping rate?"
+  :description="description()"
+  confirmLabel="Delete rate"
+  :busy="busy()"
+  :error="error()"
+  @close="emit('close')"
+  @confirm="emit('confirm')"
+/>

package/resources/components/Dashboard/Commerce/Delivery/ShippingRateDialog.stx

@@ -83,16 +83,17 @@ function submit(): void {
 }
 </script>
 
-<div :if="open()" class="flex fixed inset-0 z-50 items-center justify-center p-4 dashboard-modal-layer">
-  <button type="button" aria-label="Close shipping rate dialog" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="dialog" aria-modal="true" aria-labelledby="shipping-rate-dialog-title" class="overflow-y-auto relative max-h-[92dvh] max-w-lg w-full bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700 shadow-xl">
-    <form @submit.prevent="submit()">
-      <div class="p-6">
-        <h2 id="shipping-rate-dialog-title" class="font-semibold text-gray-900 text-lg dark:text-white">{{ mode() === 'edit' ? 'Edit shipping rate' : 'Add shipping rate' }}</h2>
-        <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Connect a persisted method and zone to an exact weight band.</p>
-        <div :if="error()" class="mt-4 p-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">{{ error() }}</div>
+<Modal
+  :isOpen="open()"
+  :title="mode() === 'edit' ? 'Edit shipping rate' : 'Add shipping rate'"
+  description="Connect a persisted method and zone to an exact weight band."
+  size="md"
+  @close="emit('close')"
+>
+    <form id="shipping-rate-form" @submit.prevent="submit()">
+        <div :if="error()" class="mb-5 p-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">{{ error() }}</div>
 
-        <div class="mt-5 space-y-4">
+        <div class="space-y-4">
           <label class="block">
             <span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Shipping method</span>
             <select x-model="methodId" required class="mt-1 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700">
@@ -113,11 +114,11 @@ function submit(): void {
           </div>
           <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Rate</span><input x-model="amount" type="number" required min="0" step="0.01" inputmode="decimal" placeholder="5.99" class="mt-1 px-3 py-2 w-full tabular-nums text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" /></label>
         </div>
-      </div>
-      <footer class="flex gap-2 justify-end px-6 py-4 bg-gray-50 dark:bg-neutral-900/50 border-gray-200 border-t dark:border-neutral-700">
-        <Button :disabled="busy()" variant="secondary" @click="emit('close')">Cancel</Button>
-        <Button type="submit" :loading="busy()">{{ mode() === 'edit' ? 'Save changes' : 'Add rate' }}</Button>
-      </footer>
     </form>
-  </section>
-</div>
+  <template #footer>
+    <div class="flex gap-2 justify-end w-full">
+      <Button :disabled="busy()" variant="secondary" @click="emit('close')">Cancel</Button>
+      <Button type="submit" form="shipping-rate-form" :loading="busy()">{{ mode() === 'edit' ? 'Save changes' : 'Add rate' }}</Button>
+    </div>
+  </template>
+</Modal>