@stacksjs/defaults 0.70.358 → 0.70.363

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>

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

@@ -9,20 +9,16 @@ const record = useReactiveProp('record', null as ShippingZoneRecord | null)
 const busy = useReactiveProp('busy', false)
 const error = useReactiveProp('error', '')
 const emit = defineEmits()
+const description = derived(() => `Delete ${record()?.name || 'the selected shipping zone'} permanently. Zones referenced by shipping rates 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-zone-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-zone-delete-title" class="mt-4 font-semibold text-gray-900 text-lg dark:text-white">Delete shipping zone?</h2>
-      <p class="mt-2 text-gray-500 text-sm dark:text-neutral-400">Delete {{ record()?.name }} permanently. Zones referenced by shipping rates 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 zone</Button>
-    </footer>
-  </section>
-</div>
+<ConfirmDialog
+  :isOpen="open() && Boolean(record())"
+  title="Delete shipping zone?"
+  :description="description()"
+  confirmLabel="Delete zone"
+  :busy="busy()"
+  :error="error()"
+  @close="emit('close')"
+  @confirm="emit('confirm')"
+/>

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

@@ -107,16 +107,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 zone dialog" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="dialog" aria-modal="true" aria-labelledby="shipping-zone-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="shipping-zone-dialog-title" class="font-semibold text-gray-900 text-lg dark:text-white">{{ mode() === 'edit' ? 'Edit shipping zone' : 'Add shipping zone' }}</h2>
-        <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Separate list values with commas or new lines. Values are stored as normalized JSON arrays.</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 zone' : 'Add shipping zone'"
+  description="Separate list values with commas or new lines. Values are stored as normalized JSON arrays."
+  size="lg"
+  @close="emit('close')"
+>
+    <form id="shipping-zone-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">Zone name</span><input x-model="name" type="text" required maxlength="100" autocomplete="off" placeholder="North America" 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">Shipping method</span>
@@ -130,11 +131,11 @@ function submit(): void {
           <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Postal codes</span><textarea x-model="postalCodes" rows="2" maxlength="1000" placeholder="90001, 90002" 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>
           <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 zone' }}</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-zone-form" :loading="busy()">{{ mode() === 'edit' ? 'Save changes' : 'Add zone' }}</Button>
+    </div>
+  </template>
+</Modal>

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

@@ -40,16 +40,17 @@ function refundable(): boolean {
 }
 </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 payment details" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="dialog" aria-modal="true" aria-labelledby="payment-details-title" class="relative max-w-xl 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-start justify-between">
-        <div><p class="text-gray-400 text-xs dark:text-neutral-500">Payment #{{ record()?.id }}</p><h2 id="payment-details-title" class="mt-1 font-semibold text-gray-900 text-lg dark:text-white">{{ money(record()?.amount || 0, record()?.currency || 'USD') }}</h2></div>
-        <span class="px-2 py-1 capitalize font-medium text-gray-700 text-xs dark:text-neutral-200 bg-gray-100 dark:bg-neutral-700 rounded-full">{{ label(record()?.status || '') }}</span>
-      </div>
-
-      <dl class="grid gap-x-6 gap-y-4 sm:grid-cols-2 mt-6">
+<Modal
+  :isOpen="open() && Boolean(record())"
+  :title="money(record()?.amount || 0, record()?.currency || 'USD')"
+  :description="`Payment #${record()?.id || 'not recorded'}`"
+  size="lg"
+  @close="emit('close')"
+>
+  <template #header-trailing>
+    <span class="px-2 py-1 capitalize font-medium text-gray-700 text-xs dark:text-neutral-200 bg-gray-100 dark:bg-neutral-700 rounded-full">{{ label(record()?.status || '') }}</span>
+  </template>
+      <dl class="grid gap-x-6 gap-y-4 sm:grid-cols-2">
         <template :for="item in detailRows()" :key="item.label">
           <div><dt class="text-gray-400 text-xs dark:text-neutral-500">{{ item.label }}</dt><dd class="mt-1 break-all text-gray-800 text-sm dark:text-neutral-100">{{ item.value }}</dd></div>
         </template>
@@ -59,10 +60,10 @@ function refundable(): boolean {
 
       <div :if="record()?.notes" class="mt-5 p-3 text-gray-600 text-sm dark:text-neutral-300 bg-gray-50 dark:bg-neutral-900/60 rounded-lg">{{ record()?.notes }}</div>
       <div :if="refundable()" class="mt-5 p-3 text-amber-800 text-xs dark:text-amber-200 bg-amber-50 dark:bg-amber-950/30 border border-amber-200 rounded-lg dark:border-amber-900">Only record a refund after the payment processor confirms it. This updates the local ledger and does not contact the processor.</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">
+  <template #footer>
+    <div class="flex gap-2 justify-end w-full">
       <Button variant="secondary" @click="emit('close')">Close</Button>
       <Button :if="refundable()" @click="emit('request-refund')">Record refund</Button>
-    </footer>
-  </section>
-</div>
+    </div>
+  </template>
+</Modal>

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

@@ -51,20 +51,21 @@ function submit(): void {
 }
 </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 refund dialog" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="dialog" aria-modal="true" aria-labelledby="payment-refund-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">
-    <form @submit.prevent="submit">
-      <div class="p-6">
-        <h2 id="payment-refund-title" class="font-semibold text-gray-900 text-lg dark:text-white">Record confirmed refund</h2>
-        <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Payment #{{ record()?.id }} has {{ money(remaining(), record()?.currency || 'USD') }} remaining.</p>
-        <label class="block mt-5"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Refund amount</span><input x-model="amount" type="number" min="0.01" :max="remaining() / 100" step="0.01" 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>
+<Modal
+  :isOpen="open() && Boolean(record())"
+  title="Record confirmed refund"
+  :description="`Payment #${record()?.id || 'not recorded'} has ${money(remaining(), record()?.currency || 'USD')} remaining.`"
+  size="sm"
+  @close="emit('close')"
+>
+    <form id="payment-refund-form" @submit.prevent="submit">
+        <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Refund amount</span><input x-model="amount" type="number" min="0.01" :max="remaining() / 100" step="0.01" 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>
         <p class="mt-2 text-amber-700 text-xs dark:text-amber-300">This records an already confirmed processor refund. It does not initiate money movement.</p>
-      </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="!valid()">Record refund</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="payment-refund-form" :loading="busy()" :disabled="!valid()">Record refund</Button>
+    </div>
+  </template>
+</Modal>

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

@@ -5,16 +5,15 @@ const open = useReactiveProp('open', false)
 const record = useReactiveProp('record', null as PrintDeviceRecord | null)
 const busy = useReactiveProp('busy', false)
 const emit = defineEmits()
+const description = derived(() => `Delete "${record()?.name || 'Unnamed printer'}" permanently? Existing receipt logs remain separate records.`)
 </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 print device dialog" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="dialog" aria-modal="true" aria-labelledby="print-device-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="print-device-delete-title" class="font-semibold text-gray-900 text-lg dark:text-white">Delete print device</h2>
-    <p class="mt-2 text-gray-500 text-sm dark:text-neutral-400">Delete "{{ record()?.name || 'Unnamed printer' }}" permanently? Existing receipt logs remain separate records.</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 printer</Button>
-    </footer>
-  </section>
-</div>
+<ConfirmDialog
+  :isOpen="open()"
+  title="Delete print device"
+  :description="description()"
+  confirmLabel="Delete printer"
+  :busy="busy()"
+  @close="emit('close')"
+  @confirm="emit('confirm')"
+/>

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

@@ -38,15 +38,17 @@ function deleteRecord(): 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 print device details" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="dialog" aria-modal="true" aria-labelledby="print-device-details-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">
-    <div class="p-6">
-      <div class="flex gap-4 items-start justify-between">
-        <div><h2 id="print-device-details-title" class="font-semibold text-gray-900 text-lg dark:text-white">{{ record()?.name || 'Print device' }}</h2><p class="mt-1 font-mono text-gray-500 text-xs dark:text-neutral-400">{{ record()?.macAddress || 'No MAC address recorded' }}</p></div>
-        <span class="px-2 py-1 capitalize font-semibold text-gray-700 text-xs dark:text-neutral-200 bg-gray-100 dark:bg-neutral-700 rounded-full">{{ label(record()?.status || '') }}</span>
-      </div>
-      <dl class="grid gap-4 grid-cols-2 mt-6">
+<Modal
+  :isOpen="open()"
+  :title="record()?.name || 'Print device'"
+  :description="record()?.macAddress || 'No MAC address recorded'"
+  size="md"
+  @close="emit('close')"
+>
+  <template #header-trailing>
+    <span class="px-2 py-1 capitalize font-semibold text-gray-700 text-xs dark:text-neutral-200 bg-gray-100 dark:bg-neutral-700 rounded-full">{{ label(record()?.status || '') }}</span>
+  </template>
+      <dl class="grid gap-4 grid-cols-2">
         <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Location</dt><dd class="mt-1 text-gray-900 text-sm dark:text-white">{{ record()?.location || 'Not recorded' }}</dd></div>
         <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Terminal</dt><dd class="mt-1 font-mono text-gray-900 text-sm dark:text-white">{{ record()?.terminal || 'Not recorded' }}</dd></div>
         <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Recorded prints</dt><dd class="mt-1 font-mono text-gray-900 text-sm dark:text-white">{{ (record()?.printCount || 0).toLocaleString() }}</dd></div>
@@ -54,10 +56,10 @@ function deleteRecord(): void {
         <div class="col-span-2"><dt class="text-gray-400 text-xs dark:text-neutral-500">Last heartbeat</dt><dd class="mt-1 text-gray-900 text-sm dark:text-white">{{ formatDate(record()?.lastPing || 0) }}</dd></div>
         <div class="col-span-2"><dt class="text-gray-400 text-xs dark:text-neutral-500">Created</dt><dd class="mt-1 text-gray-900 text-sm dark:text-white">{{ formatDate(record()?.createdAt || '') }}</dd></div>
       </dl>
-    </div>
-    <footer class="flex gap-2 justify-between px-6 py-4 bg-gray-50 dark:bg-neutral-900/50 border-gray-200 border-t dark:border-neutral-700">
+  <template #footer>
+    <div class="flex gap-2 justify-between w-full">
       <Button variant="danger" @click="deleteRecord()">Delete</Button>
       <div class="flex gap-2"><Button variant="secondary" @click="emit('close')">Close</Button><Button @click="editRecord()">Edit printer</Button></div>
-    </footer>
-  </section>
-</div>
+    </div>
+  </template>
+</Modal>

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

@@ -58,28 +58,29 @@ 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 print device dialog" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="dialog" aria-modal="true" aria-labelledby="print-device-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="print-device-dialog-title" class="font-semibold text-gray-900 text-lg dark:text-white">{{ mode() === 'edit' ? 'Edit print device' : 'Add print device' }}</h2>
-        <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Store fields declared by the PrintDevice 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 print device' : 'Add print device'"
+  description="Store fields declared by the PrintDevice model."
+  size="md"
+  @close="emit('close')"
+>
+    <form id="print-device-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="grid gap-4 grid-cols-1 sm:grid-cols-2 mt-5">
+        <div class="grid gap-4 grid-cols-1 sm:grid-cols-2">
           <label class="block sm:col-span-2"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Name</span><input x-model="name" 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 sm:col-span-2"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">MAC address</span><input x-model="macAddress" type="text" maxlength="50" required spellcheck="false" class="mt-1 px-3 py-2 w-full font-mono 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">Location</span><input x-model="location" 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">Terminal</span><input x-model="terminal" type="text" maxlength="50" required spellcheck="false" class="mt-1 px-3 py-2 w-full font-mono 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 sm:col-span-2"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Operational 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="online">Online</option><option value="warning">Warning</option><option value="offline">Offline</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="!valid()">{{ mode() === 'edit' ? 'Save printer' : 'Add printer' }}</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="print-device-form" :loading="busy()" :disabled="!valid()">{{ mode() === 'edit' ? 'Save printer' : 'Add printer' }}</Button>
+    </div>
+  </template>
+</Modal>

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

@@ -5,12 +5,15 @@ const open = useReactiveProp('open', false)
 const record = useReactiveProp('record', null as PrintLogRecord | null)
 const busy = useReactiveProp('busy', false)
 const emit = defineEmits()
+const description = derived(() => `This permanently deletes ${record()?.document || `print log #${record()?.id}`} from the native Receipt history. It does not affect the printed document.`)
 </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 print log dialog" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="alertdialog" aria-modal="true" aria-labelledby="delete-print-log-title" aria-describedby="delete-print-log-description" 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-600 dark:text-red-300 bg-red-50 dark:bg-red-950/40 rounded-full"><span class="h-5 w-5 i-hugeicons-waste"></span></div><h2 id="delete-print-log-title" class="mt-4 font-semibold text-gray-900 text-lg dark:text-white">Delete print log?</h2><p id="delete-print-log-description" class="mt-2 text-gray-500 text-sm dark:text-neutral-400">This permanently deletes {{ record()?.document || 'print log #' + record()?.id }} from the native Receipt history. It does not affect the printed document.</p></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 variant="danger" :loading="busy()" @click="emit('confirm')">Delete print log</Button></footer>
-  </section>
-</div>
+<ConfirmDialog
+  :isOpen="open() && Boolean(record())"
+  title="Delete print log?"
+  :description="description()"
+  confirmLabel="Delete print log"
+  :busy="busy()"
+  @close="emit('close')"
+  @confirm="emit('confirm')"
+/>

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

@@ -29,14 +29,17 @@ function details(): Array<{ label: string, value: string }> {
 }
 </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 print log details" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="dialog" aria-modal="true" aria-labelledby="print-log-details-title" class="relative max-w-xl 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-start justify-between"><div><p class="text-gray-400 text-xs dark:text-neutral-500">Print log #{{ record()?.id }}</p><h2 id="print-log-details-title" class="mt-1 font-semibold text-gray-900 text-lg dark:text-white">{{ record()?.document || 'Untitled print job' }}</h2></div><span class="px-2 py-1 capitalize font-medium text-gray-700 text-xs dark:text-neutral-200 bg-gray-100 dark:bg-neutral-700 rounded-full">{{ record()?.status }}</span></div>
-      <dl class="grid gap-x-6 gap-y-4 sm:grid-cols-2 mt-6"><template :for="item in details()" :key="item.label"><div><dt class="text-gray-400 text-xs dark:text-neutral-500">{{ item.label }}</dt><dd class="mt-1 break-all text-gray-800 text-sm dark:text-neutral-100">{{ item.value }}</dd></div></template></dl>
+<Modal
+  :isOpen="open() && Boolean(record())"
+  :title="record()?.document || 'Untitled print job'"
+  :description="`Print log #${record()?.id || 'not recorded'}`"
+  size="lg"
+  @close="emit('close')"
+>
+  <template #header-trailing>
+    <span class="px-2 py-1 capitalize font-medium text-gray-700 text-xs dark:text-neutral-200 bg-gray-100 dark:bg-neutral-700 rounded-full">{{ record()?.status }}</span>
+  </template>
+      <dl class="grid gap-x-6 gap-y-4 sm:grid-cols-2"><template :for="item in details()" :key="item.label"><div><dt class="text-gray-400 text-xs dark:text-neutral-500">{{ item.label }}</dt><dd class="mt-1 break-all text-gray-800 text-sm dark:text-neutral-100">{{ item.value }}</dd></div></template></dl>
       <div :if="record()?.metadata && record()?.metadata !== '{}'" class="mt-5"><p class="text-gray-400 text-xs dark:text-neutral-500">Metadata</p><pre class="overflow-x-auto mt-1 p-3 text-gray-700 text-xs whitespace-pre-wrap dark:text-neutral-200 bg-gray-50 dark:bg-neutral-900/60 rounded-lg">{{ record()?.metadata }}</pre></div>
-    </div>
-    <footer class="flex 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" @click="emit('close')">Close</Button></footer>
-  </section>
-</div>
+  <template #footer><Button variant="secondary" @click="emit('close')">Close</Button></template>
+</Modal>