@stacksjs/defaults 0.70.358 → 0.70.363

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

@@ -5,19 +5,19 @@ const open = useReactiveProp('open', false)
 const record = useReactiveProp('record', null as TaxRateRecord | null)
 const busy = useReactiveProp('busy', false)
 const emit = defineEmits()
+const description = derived(() => `${record()?.name || 'This tax rate'} will be permanently removed.`)
+const warning = derived(() => record()?.isDefault
+  ? 'This rate is marked as default. No replacement is selected automatically.'
+  : '')
 </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 tax rate dialog" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="dialog" aria-modal="true" aria-labelledby="tax-rate-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="tax-rate-delete-title" class="font-semibold text-gray-900 text-lg dark:text-white">Delete tax rate?</h2>
-    <p class="mt-2 text-gray-600 text-sm dark:text-neutral-300"><span class="font-medium">{{ record()?.name }}</span> will be permanently removed.</p>
-    <p :if="record()?.isDefault" class="mt-3 p-3 text-amber-800 text-sm dark:text-amber-200 bg-amber-50 dark:bg-amber-950/30 rounded-lg">This rate is marked as default. No replacement is selected automatically.</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 tax rate
-      </Button>
-    </footer>
-  </section>
-</div>
+<ConfirmDialog
+  :isOpen="open()"
+  title="Delete tax rate?"
+  :description="description()"
+  :warning="warning()"
+  confirmLabel="Delete tax rate"
+  :busy="busy()"
+  @close="emit('close')"
+  @confirm="emit('confirm')"
+/>

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

@@ -66,17 +66,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 tax rate dialog" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="dialog" aria-modal="true" aria-labelledby="tax-rate-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="tax-rate-dialog-title" class="font-semibold text-gray-900 text-lg dark:text-white">{{ mode() === 'edit' ? 'Edit tax rate' : 'Add tax rate' }}</h2>
-        <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">All fields follow the TaxRate model validation rules.</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 tax rate' : 'Add tax rate'"
+  description="All fields follow the TaxRate model validation rules."
+  size="md"
+  @close="emit('close')"
+>
+    <form id="tax-rate-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">
           <label class="block">
             <span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Name</span>
             <input x-model="name" type="text" maxlength="255" 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" />
@@ -136,13 +137,13 @@ function errorMessages(): string[] {
             </span>
           </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">
+    </form>
+  <template #footer>
+    <div class="flex gap-2 justify-end w-full">
         <Button variant="secondary" :disabled="busy()" @click="emit('close')">Cancel</Button>
-        <Button type="submit" :loading="busy()" :disabled="!name().trim() || !type().trim() || !country().trim() || rate() < 0 || rate() > 100">
+        <Button type="submit" form="tax-rate-form" :loading="busy()" :disabled="!name().trim() || !type().trim() || !country().trim() || rate() < 0 || rate() > 100">
           {{ mode() === 'edit' ? 'Save tax rate' : 'Add tax rate' }}
         </Button>
-      </footer>
-    </form>
-  </section>
-</div>
+    </div>
+  </template>
+</Modal>

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

@@ -49,7 +49,7 @@ function formatDate(value: string): string {
                   renaming the rate must not change the bill.
                 --}}
                 <span :if="record.code" class="px-2 py-0.5 font-mono text-gray-600 text-xs dark:text-neutral-300 bg-gray-100 dark:bg-neutral-700 rounded-full">{{ record.code }}</span>
-                <span :if="record.exemptible" class="px-2 py-0.5 font-medium text-amber-700 text-xs dark:text-amber-300 bg-amber-50 dark:bg-amber-950/40 rounded-full" title="Not charged to a customer who qualifies for an exemption">Exemptible</span>
+                <span :if="record.exemptible" class="px-2 py-0.5 font-medium text-amber-700 text-xs dark:text-amber-300 bg-amber-50 dark:bg-amber-950/40 rounded-full" x-tooltip="Not charged to a customer who qualifies for an exemption" title="Not charged to a customer who qualifies for an exemption">Exemptible</span>
               </div>
               <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">{{ record.type }}</p>
             </td>

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

@@ -5,22 +5,19 @@ const open = useReactiveProp('open', false)
 const record = useReactiveProp('record', null as ProductUnitRecord | null)
 const busy = useReactiveProp('busy', false)
 const emit = defineEmits()
+const description = derived(() => `${record()?.name || 'This product unit'} will be permanently removed.${record()?.productName ? ` The linked product ${record()?.productName} will remain.` : ''}`)
+const warning = derived(() => record()?.isDefault
+  ? `This is the current default for ${record()?.type || 'this unit type'}. No replacement is selected automatically.`
+  : '')
 </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 unit dialog" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="dialog" aria-modal="true" aria-labelledby="product-unit-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-unit-delete-title" class="font-semibold text-gray-900 text-lg dark:text-white">Delete product unit?</h2>
-    <p class="mt-2 text-gray-600 text-sm dark:text-neutral-300">
-      <span class="font-medium">{{ record()?.name }}</span> will be permanently removed.
-      <span :if="record()?.productName">The linked product {{ record()?.productName }} will remain.</span>
-    </p>
-    <p :if="record()?.isDefault" class="mt-3 p-3 text-amber-800 text-sm dark:text-amber-200 bg-amber-50 dark:bg-amber-950/30 rounded-lg">This is the current default for {{ record()?.type }}. No replacement is selected automatically.</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 unit
-      </Button>
-    </footer>
-  </section>
-</div>
+<ConfirmDialog
+  :isOpen="open()"
+  title="Delete product unit?"
+  :description="description()"
+  :warning="warning()"
+  confirmLabel="Delete product unit"
+  :busy="busy()"
+  @close="emit('close')"
+  @confirm="emit('confirm')"
+/>

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

@@ -59,17 +59,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 unit dialog" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="dialog" aria-modal="true" aria-labelledby="product-unit-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-unit-dialog-title" class="font-semibold text-gray-900 text-lg dark:text-white">{{ mode() === 'edit' ? 'Edit product unit' : 'Add product unit' }}</h2>
-        <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Fields and relationships come from the ProductUnit 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 unit' : 'Add product unit'"
+  description="Fields and relationships come from the ProductUnit model."
+  size="md"
+  @close="emit('close')"
+>
+    <form id="product-unit-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">Name</span>
@@ -110,13 +111,13 @@ function errorMessages(): string[] {
             </span>
           </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">
+    </form>
+  <template #footer>
+    <div class="flex gap-2 justify-end w-full">
         <Button variant="secondary" :disabled="busy()" @click="emit('close')">Cancel</Button>
-        <Button type="submit" :loading="busy()" :disabled="!name().trim() || !abbreviation().trim() || !type().trim()">
+        <Button type="submit" form="product-unit-form" :loading="busy()" :disabled="!name().trim() || !abbreviation().trim() || !type().trim()">
           {{ mode() === 'edit' ? 'Save product unit' : 'Add product unit' }}
         </Button>
-      </footer>
-    </form>
-  </section>
-</div>
+    </div>
+  </template>
+</Modal>

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')"
+/>