@stacksjs/defaults 0.70.362 → 0.70.365

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

@@ -47,12 +47,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 order details" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="dialog" aria-modal="true" aria-labelledby="order-details-title" class="overflow-y-auto relative max-h-[90dvh] max-w-2xl 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="order-details-title" class="font-semibold text-gray-900 text-lg dark:text-white">Order {{ record()?.id || 'not recorded' }}</h2><p class="mt-1 text-gray-400 text-sm dark:text-neutral-500">{{ record()?.customerName || 'Unassigned customer' }}</p></div><span class="px-2 py-1 font-semibold text-gray-700 text-xs dark:text-neutral-200 bg-gray-100 dark:bg-neutral-700 rounded-full">{{ label(record()?.status || 'UNKNOWN') }}</span></div>
-      <dl class="grid gap-4 grid-cols-2 mt-6">
+<Modal
+  :isOpen="open()"
+  :title="`Order ${record()?.id || 'not recorded'}`"
+  :description="record()?.customerName || 'Unassigned customer'"
+  size="lg"
+  @close="emit('close')"
+>
+  <template #header-trailing>
+    <span class="px-2 py-1 font-semibold text-gray-700 text-xs dark:text-neutral-200 bg-gray-100 dark:bg-neutral-700 rounded-full">{{ label(record()?.status || 'UNKNOWN') }}</span>
+  </template>
+      <dl class="grid gap-4 grid-cols-2">
         <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Total</dt><dd class="mt-1 font-semibold text-gray-900 text-sm dark:text-white">{{ formatMoney(record()?.totalAmount || 0, record()?.currency || 'USD') }}</dd></div>
         <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Order type</dt><dd class="mt-1 text-gray-900 text-sm dark:text-white">{{ label(record()?.orderType || 'UNKNOWN') }}</dd></div>
         <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Items</dt><dd class="mt-1 text-gray-900 text-sm dark:text-white">{{ record()?.itemCount || 0 }}</dd></div>
@@ -67,7 +72,7 @@ function deleteRecord(): void {
         <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Coupon relation ID</dt><dd class="mt-1 font-mono text-gray-900 text-sm dark:text-white">{{ record()?.couponId || 'Not linked' }}</dd></div>
         <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Applied coupon reference</dt><dd class="mt-1 font-mono text-gray-900 text-sm dark:text-white">{{ record()?.appliedCouponId || 'Not linked' }}</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"><Button variant="danger" @click="deleteRecord()">Delete</Button><div class="flex gap-2"><Button variant="secondary" @click="emit('close')">Close</Button><Button @click="editRecord()">Edit order</Button></div></footer>
-  </section>
-</div>
+  <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 order</Button></div></div>
+  </template>
+</Modal>

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

@@ -107,17 +107,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 order dialog" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="dialog" aria-modal="true" aria-labelledby="order-dialog-title" class="overflow-y-auto relative max-h-[92dvh] max-w-3xl 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="order-dialog-title" class="font-semibold text-gray-900 text-lg dark:text-white">{{ mode() === 'edit' ? 'Edit order' : 'Add order' }}</h2>
-        <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Store fields and relationships declared by the native Order 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 order' : 'Add order'"
+  description="Store fields and relationships declared by the native Order model."
+  size="xl"
+  @close="emit('close')"
+>
+    <form id="order-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"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Customer</span><select x-model="customerId" 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 customer</option><template :for="option in customers()" :key="option.id"><option :value="option.id">{{ option.label }}</option></template></select></label>
           <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Status</span><select x-model="status" 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"><template :for="option in statuses()" :key="option"><option :value="option">{{ label(option) }}</option></template></select></label>
           <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Order type</span><select x-model="orderType" 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"><template :for="option in orderTypes()" :key="option"><option :value="option">{{ label(option) }}</option></template></select></label>
@@ -133,8 +134,8 @@ function errorMessages(): string[] {
           <label class="block sm:col-span-2"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Delivery address</span><textarea x-model="deliveryAddress" rows="3" 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 sm:col-span-2"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Special instructions</span><textarea x-model="specialInstructions" rows="3" 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>
-      </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 order' : 'Add order' }}</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="order-form" :loading="busy()" :disabled="!valid()">{{ mode() === 'edit' ? 'Save order' : 'Add order' }}</Button></div>
+  </template>
+</Modal>

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

@@ -56,30 +56,35 @@ 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 checkout dialog" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="dialog" aria-modal="true" aria-labelledby="pos-checkout-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="pos-checkout-title" class="font-semibold text-gray-900 text-lg dark:text-white">Review cash sale</h2>
-        <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">The server will recompute prices and tax before the atomic write.</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="Review cash sale"
+  description="The server will recompute prices and tax before the atomic write."
+  :closable="!busy()"
+  @close="emit('close')"
+>
+  <form id="pos-checkout-form" @submit.prevent="submit">
+    <div :if="error()" class="mb-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 class="grid gap-4 grid-cols-1 sm:grid-cols-2 mt-5">
-          <label class="block sm:col-span-2"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Customer</span><select x-model="customerId" 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="">Guest sale</option><template :for="customer in customers()" :key="customer.id"><option :value="customer.id">{{ customer.label }}{{ customer.email ? ' · ' + customer.email : '' }}</option></template></select></label>
-          <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Order type</span><select x-model="orderType" 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="TAKEOUT">Takeout</option><option value="DINE_IN">Dine in</option></select></label>
-          <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Payment</span><select x-model="paymentMethod" 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"><template :for="method in paymentMethods()" :key="method.id"><option :value="method.id">{{ method.label }}</option></template></select></label>
-          <label class="block sm:col-span-2"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Order instructions</span><textarea x-model="specialInstructions" rows="3" maxlength="1000" placeholder="Optional instructions for the whole sale" 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>
+    <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">Customer</span><select x-model="customerId" 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="">Guest sale</option><template :for="customer in customers()" :key="customer.id"><option :value="customer.id">{{ customer.label }}{{ customer.email ? ' · ' + customer.email : '' }}</option></template></select></label>
+      <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Order type</span><select x-model="orderType" 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="TAKEOUT">Takeout</option><option value="DINE_IN">Dine in</option></select></label>
+      <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Payment</span><select x-model="paymentMethod" 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"><template :for="method in paymentMethods()" :key="method.id"><option :value="method.id">{{ method.label }}</option></template></select></label>
+      <label class="block sm:col-span-2"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Order instructions</span><textarea x-model="specialInstructions" rows="3" maxlength="1000" placeholder="Optional instructions for the whole sale" 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>
 
-        <dl class="mt-5 p-4 space-y-2 bg-gray-50 dark:bg-neutral-900/60 rounded-lg">
-          <div class="flex items-center justify-between text-gray-500 text-sm dark:text-neutral-400"><dt>Units</dt><dd>{{ unitCount() }}</dd></div>
-          <div class="flex items-center justify-between text-gray-500 text-sm dark:text-neutral-400"><dt>Subtotal</dt><dd>{{ formatMoney(subtotal()) }}</dd></div>
-          <div class="flex items-center justify-between text-gray-500 text-sm dark:text-neutral-400"><dt>Tax</dt><dd>{{ formatMoney(taxAmount()) }}</dd></div>
-          <div class="flex items-center justify-between pt-2 font-semibold text-gray-900 dark:text-white border-gray-200 border-t dark:border-neutral-700"><dt>Cash due</dt><dd>{{ formatMoney(totalAmount()) }}</dd></div>
-        </dl>
-      </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()">Complete sale</Button></footer>
-    </form>
-  </section>
-</div>
+    <dl class="mt-5 p-4 space-y-2 bg-gray-50 dark:bg-neutral-900/60 rounded-lg">
+      <div class="flex items-center justify-between text-gray-500 text-sm dark:text-neutral-400"><dt>Units</dt><dd>{{ unitCount() }}</dd></div>
+      <div class="flex items-center justify-between text-gray-500 text-sm dark:text-neutral-400"><dt>Subtotal</dt><dd>{{ formatMoney(subtotal()) }}</dd></div>
+      <div class="flex items-center justify-between text-gray-500 text-sm dark:text-neutral-400"><dt>Tax</dt><dd>{{ formatMoney(taxAmount()) }}</dd></div>
+      <div class="flex items-center justify-between pt-2 font-semibold text-gray-900 dark:text-white border-gray-200 border-t dark:border-neutral-700"><dt>Cash due</dt><dd>{{ formatMoney(totalAmount()) }}</dd></div>
+    </dl>
+  </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" form="pos-checkout-form" :loading="busy()">Complete sale</Button>
+    </div>
+  </template>
+</Modal>

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

@@ -44,25 +44,32 @@ function formatDate(value: string): string {
 }
 </script>
 
-<div :if="open() && receipt()" class="flex fixed inset-0 z-50 items-center justify-center p-4 dashboard-modal-layer">
-  <button type="button" aria-label="Close receipt dialog" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="dialog" aria-modal="true" aria-labelledby="pos-receipt-title" class="overflow-y-auto relative max-h-[92dvh] 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-11 w-11 text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-950/40 rounded-full"><span class="h-6 w-6 i-hugeicons-checkmark-circle-02"></span></div>
-      <h2 id="pos-receipt-title" class="mt-4 font-semibold text-gray-900 text-lg dark:text-white">Sale recorded</h2>
-      <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Order {{ receipt()?.orderId }} · {{ formatDate(receipt()?.createdAt || '') }}</p>
-      <p :if="receipt()?.referenceNumber" class="mt-1 font-mono text-gray-400 text-xs dark:text-neutral-500">{{ receipt()?.referenceNumber }}</p>
+<Modal
+  :isOpen="open() && Boolean(receipt())"
+  title="Sale recorded"
+  :description="`Order ${receipt()?.orderId || ''} · ${formatDate(receipt()?.createdAt || '')}`"
+  size="sm"
+  @close="emit('close')"
+>
+  <template #header-leading>
+    <div class="flex flex-shrink-0 items-center justify-center h-11 w-11 text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-950/40 rounded-full">
+      <span class="h-6 w-6 i-hugeicons-checkmark-circle-02"></span>
+    </div>
+  </template>
 
-      <ul class="mt-5 divide-gray-100 divide-y dark:divide-neutral-700">
-        <template :for="line in (receipt()?.lines || [])" :key="line.productId"><li class="py-3"><div class="flex gap-3 items-start justify-between"><div><p class="font-medium text-gray-900 text-sm dark:text-white">{{ line.quantity }} × {{ line.name }}</p><p :if="line.specialInstructions" class="mt-1 text-gray-500 text-xs dark:text-neutral-400">{{ line.specialInstructions }}</p></div><p class="font-medium text-gray-700 text-sm whitespace-nowrap dark:text-neutral-200">{{ formatMoney(line.lineTotal) }}</p></div></li></template>
-      </ul>
+  <p :if="receipt()?.referenceNumber" class="font-mono text-gray-400 text-xs dark:text-neutral-500">{{ receipt()?.referenceNumber }}</p>
 
-      <dl class="mt-4 p-4 space-y-2 bg-gray-50 dark:bg-neutral-900/60 rounded-lg">
-        <div class="flex items-center justify-between text-gray-500 text-sm dark:text-neutral-400"><dt>Subtotal</dt><dd>{{ formatMoney(receipt()?.subtotal || 0) }}</dd></div>
-        <div class="flex items-center justify-between text-gray-500 text-sm dark:text-neutral-400"><dt>Tax<span :if="receipt()?.taxRate"> ({{ receipt()?.taxRate }}%)</span></dt><dd>{{ formatMoney(receipt()?.taxAmount || 0) }}</dd></div>
-        <div class="flex items-center justify-between pt-2 font-semibold text-gray-900 dark:text-white border-gray-200 border-t dark:border-neutral-700"><dt>Cash paid</dt><dd>{{ formatMoney(receipt()?.totalAmount || 0) }}</dd></div>
-      </dl>
-    </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 @click="emit('close')">Start next sale</Button></footer>
-  </section>
-</div>
+  <ul class="mt-5 divide-gray-100 divide-y dark:divide-neutral-700">
+    <template :for="line in (receipt()?.lines || [])" :key="line.productId"><li class="py-3"><div class="flex gap-3 items-start justify-between"><div><p class="font-medium text-gray-900 text-sm dark:text-white">{{ line.quantity }} × {{ line.name }}</p><p :if="line.specialInstructions" class="mt-1 text-gray-500 text-xs dark:text-neutral-400">{{ line.specialInstructions }}</p></div><p class="font-medium text-gray-700 text-sm whitespace-nowrap dark:text-neutral-200">{{ formatMoney(line.lineTotal) }}</p></div></li></template>
+  </ul>
+
+  <dl class="mt-4 p-4 space-y-2 bg-gray-50 dark:bg-neutral-900/60 rounded-lg">
+    <div class="flex items-center justify-between text-gray-500 text-sm dark:text-neutral-400"><dt>Subtotal</dt><dd>{{ formatMoney(receipt()?.subtotal || 0) }}</dd></div>
+    <div class="flex items-center justify-between text-gray-500 text-sm dark:text-neutral-400"><dt>Tax<span :if="receipt()?.taxRate"> ({{ receipt()?.taxRate }}%)</span></dt><dd>{{ formatMoney(receipt()?.taxAmount || 0) }}</dd></div>
+    <div class="flex items-center justify-between pt-2 font-semibold text-gray-900 dark:text-white border-gray-200 border-t dark:border-neutral-700"><dt>Cash paid</dt><dd>{{ formatMoney(receipt()?.totalAmount || 0) }}</dd></div>
+  </dl>
+
+  <template #footer>
+    <Button @click="emit('close')">Start next sale</Button>
+  </template>
+</Modal>

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

@@ -5,19 +5,19 @@ const open = useReactiveProp('open', false)
 const record = useReactiveProp('record', null as CommerceProductRecord | null)
 const busy = useReactiveProp('busy', false)
 const emit = defineEmits()
+const description = derived(() => `Delete "${record()?.name || 'Unnamed product'}" permanently?`)
+const warning = derived(() => record()?.variantCount || record()?.unitCount || record()?.reviewCount
+  ? 'Related variants, units, or reviews may cause deletion to be rejected.'
+  : '')
 </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 dialog" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="dialog" aria-modal="true" aria-labelledby="product-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-delete-title" class="font-semibold text-gray-900 text-lg dark:text-white">Delete product</h2>
-    <p class="mt-2 text-gray-500 text-sm dark:text-neutral-400">
-      Delete "{{ record()?.name || 'Unnamed product' }}" permanently?
-      <span :if="record()?.variantCount || record()?.unitCount || record()?.reviewCount">Related variants, units, or reviews may cause deletion to be rejected.</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</Button>
-    </footer>
-  </section>
-</div>
+<ConfirmDialog
+  :isOpen="open()"
+  title="Delete product"
+  :description="description()"
+  :warning="warning()"
+  confirmLabel="Delete product"
+  :busy="busy()"
+  @close="emit('close')"
+  @confirm="emit('confirm')"
+/>

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

@@ -107,17 +107,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 dialog" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="dialog" aria-modal="true" aria-labelledby="product-dialog-title" class="overflow-y-auto relative max-h-[92dvh] max-w-3xl 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-dialog-title" class="font-semibold text-gray-900 text-lg dark:text-white">{{ mode() === 'edit' ? 'Edit product' : 'Add product' }}</h2>
-        <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Store fields and belongs-to relationships declared by the native Product 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' : 'Add product'"
+  description="Store fields and belongs-to relationships declared by the native Product model."
+  size="xl"
+  @close="emit('close')"
+>
+    <form id="product-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">Description</span><textarea x-model="description" rows="3" 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">Price ({{ currency() }})</span><input x-model="price" type="number" min="1" 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>
@@ -130,8 +131,8 @@ function errorMessages(): string[] {
           <label class="block sm:col-span-2"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Allergens</span><input x-model="allergens" type="text" placeholder="Comma-separated, for example: Gluten, Soy" 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">Nutritional information (JSON object)</span><textarea x-model="nutritionalInfo" rows="4" spellcheck="false" :aria-invalid="!nutritionValid()" 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"></textarea><span :if="!nutritionValid()" class="block mt-1 text-red-600 text-xs dark:text-red-400">Enter a valid JSON object.</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"><Button variant="secondary" :disabled="busy()" @click="emit('close')">Cancel</Button><Button type="submit" :loading="busy()" :disabled="!valid()">{{ mode() === 'edit' ? 'Save product' : 'Add product' }}</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-form" :loading="busy()" :disabled="!valid()">{{ mode() === 'edit' ? 'Save product' : 'Add product' }}</Button></div>
+  </template>
+</Modal>

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

@@ -5,23 +5,15 @@ const open = useReactiveProp('open', false)
 const review = useReactiveProp('review', null as ReviewRecord | null)
 const busy = useReactiveProp('busy', false)
 const emit = defineEmits()
+const description = derived(() => `Delete "${review()?.title || 'Untitled review'}" permanently? This cannot be undone.`)
 </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 review dialog" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="dialog" aria-modal="true" aria-labelledby="review-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">
-    <div class="flex gap-4 items-start">
-      <span class="flex flex-shrink-0 items-center justify-center h-10 w-10 text-red-700 dark:text-red-300 bg-red-100 dark:bg-red-950/40 rounded-full">
-        <span class="h-5 w-5 i-hugeicons-waste"></span>
-      </span>
-      <div>
-        <h2 id="review-delete-title" class="font-semibold text-gray-900 text-lg dark:text-white">Delete review</h2>
-        <p class="mt-2 text-gray-500 text-sm dark:text-neutral-400">Delete "{{ review()?.title || 'Untitled review' }}" permanently? This cannot be undone.</p>
-      </div>
-    </div>
-    <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 review</Button>
-    </footer>
-  </section>
-</div>
+<ConfirmDialog
+  :isOpen="open()"
+  title="Delete review"
+  :description="description()"
+  confirmLabel="Delete review"
+  :busy="busy()"
+  @close="emit('close')"
+  @confirm="emit('confirm')"
+/>

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

@@ -49,18 +49,19 @@ 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 edit review dialog" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="dialog" aria-modal="true" aria-labelledby="review-edit-title" class="overflow-hidden relative 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="review-edit-title" class="font-semibold text-gray-900 text-lg dark:text-white">Edit review</h2>
-        <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">{{ review()?.customerName }} on {{ review()?.productName }}</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="Edit review"
+  :description="`${review()?.customerName || 'Unknown customer'} on ${review()?.productName || 'Unknown product'}`"
+  size="lg"
+  @close="emit('close')"
+>
+    <form id="review-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">Title</span>
             <input x-model="title" 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" />
@@ -90,11 +91,11 @@ function errorMessages(): string[] {
             </label>
           </div>
         </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="!title().trim() || !content().trim()">Save review</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="review-form" :loading="busy()" :disabled="!title().trim() || !content().trim()">Save review</Button>
+    </div>
+  </template>
+</Modal>

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>