@stacksjs/defaults 0.70.362 → 0.70.365

package/resources/components/Dashboard/Management/PermissionsDashboard.stx

@@ -175,17 +175,13 @@
 
   const selectedUser = state<UserRow | null>(null)
   const selectedUserGuard = state('web')
-  const userRolesDraft = state([])
   const savingUserRoles = state(false)
 
   async function loadSelectedUserRoles() {
     const user = selectedUser()
     if (!user) return
     const guardName = selectedUserGuard()
-    userRolesDraft.set([])
     await rbac.loadUserRoles(user.id, guardName)
-    if (selectedUser()?.id === user.id && selectedUserGuard() === guardName)
-      userRolesDraft.set([...rbac.userRoleNames(user.id, guardName)])
   }
 
   function selectUser(user: UserRow) {
@@ -199,21 +195,12 @@
     loadSelectedUserRoles()
   }
 
-  function toggleUserRoleDraft(roleName) {
-    const list = userRolesDraft()
-    userRolesDraft.set(
-      list.includes(roleName)
-        ? list.filter(n => n !== roleName)
-        : [...list, roleName],
-    )
-  }
-
-  async function saveUserRoles() {
+  async function saveUserRoles(roleNames: string[]) {
     const user = selectedUser()
     if (!user) return
     savingUserRoles.set(true)
     try {
-      await rbac.syncUserRoles(user.id, userRolesDraft(), selectedUserGuard())
+      await rbac.syncUserRoles(user.id, roleNames, selectedUserGuard())
     }
     finally {
       savingUserRoles.set(false)
@@ -222,14 +209,17 @@
 
   function closeUserDrawer() {
     selectedUser.set(null)
-    userRolesDraft.set([])
-  }
-
-  function isRoleInDraft(roleName) {
-    return userRolesDraft().includes(roleName)
   }
 
   const rolesForSelectedGuard = derived(() => roles().filter(role => role.guardName === selectedUserGuard()))
+  const selectedUserRoles = derived(() => {
+    const user = selectedUser()
+    return user ? rbac.userRoleNames(user.id, selectedUserGuard()) : []
+  })
+  const selectedUserName = derived(() => {
+    const user = selectedUser()
+    return user?.name || user?.email || (user ? `User #${user.id}` : '')
+  })
   const userRolesLoading = derived(() => {
     const user = selectedUser()
     return user ? Boolean(loadingPivots()[`user:${user.id}:${encodeURIComponent(selectedUserGuard())}`]) : false
@@ -238,31 +228,19 @@
   // ─── Role-permission matrix ───────────────────────────────────
 
   const selectedRole = state<RoleRow | null>(null)
-  const rolePermsDraft = state([])
   const savingRolePerms = state(false)
 
   async function selectRole(role: RoleRow) {
     selectedRole.set(role)
-    rolePermsDraft.set([])
     await rbac.loadRolePermissions(role.name, role.guardName)
-    rolePermsDraft.set([...rbac.rolePermissionNames(role.name, role.guardName)])
   }
 
-  function toggleRolePermDraft(permName) {
-    const list = rolePermsDraft()
-    rolePermsDraft.set(
-      list.includes(permName)
-        ? list.filter(n => n !== permName)
-        : [...list, permName],
-    )
-  }
-
-  async function saveRolePerms() {
+  async function saveRolePerms(permissionNames: string[]) {
     const role = selectedRole()
     if (!role) return
     savingRolePerms.set(true)
     try {
-      await rbac.syncRolePermissions(role.name, rolePermsDraft(), role.guardName)
+      await rbac.syncRolePermissions(role.name, permissionNames, role.guardName)
     }
     finally {
       savingRolePerms.set(false)
@@ -271,17 +249,20 @@
 
   function closeRoleDrawer() {
     selectedRole.set(null)
-    rolePermsDraft.set([])
-  }
-
-  function isPermInDraft(permName) {
-    return rolePermsDraft().includes(permName)
   }
 
   const permissionsForSelectedRole = derived(() => {
     const role = selectedRole()
     return role ? permissions().filter(permission => permission.guardName === role.guardName) : []
   })
+  const selectedRolePermissions = derived(() => {
+    const role = selectedRole()
+    return role ? rbac.rolePermissionNames(role.name, role.guardName) : []
+  })
+  const selectedRoleDescription = derived(() => {
+    const role = selectedRole()
+    return role ? `Guard: ${role.guardName}` : ''
+  })
 
   const rolePermissionsLoading = derived(() => {
     const role = selectedRole()
@@ -332,17 +313,6 @@
     }
   }
 
-  function handleKeydown(event: KeyboardEvent) {
-    if (event.key !== 'Escape' || pendingDelete())
-      return
-    if (selectedRole())
-      closeRoleDrawer()
-    else if (selectedUser())
-      closeUserDrawer()
-  }
-
-  useEventListener('keydown', handleKeydown)
-
   // ─── Tiny formatters ──────────────────────────────────────────
 
   function formatDate(iso) {
@@ -545,86 +515,34 @@
     </div>
   </div>
 
-  <!-- ─── User-role drawer (right-side panel) ───────────────── -->
-<div :if="selectedUser()" class="fixed inset-0 z-30 dashboard-modal-layer">
-    <button type="button" aria-label="Close role assignment drawer" class="fixed inset-0 w-full bg-black/50 cursor-default" @click="closeUserDrawer()"></button>
-    <aside role="dialog" aria-modal="true" aria-label="User role assignments" class="flex fixed inset-y-0 right-0 flex-col w-full sm:w-[28rem] bg-white dark:bg-neutral-900 shadow-xl">
-      <div class="flex items-center justify-between px-5 py-3 border-b border-zinc-200 dark:border-zinc-800">
-        <h3 class="font-medium text-sm text-zinc-900 dark:text-zinc-100">
-          Roles for <span :text="selectedUser().name || selectedUser().email || ('User #' + selectedUser().id)"></span>
-        </h3>
-        <Button variant="ghost" size="sm" iconOnly ariaLabel="Close role assignment drawer" @click="closeUserDrawer()">
-          <span class="block h-4 w-4 i-hugeicons-cancel-01"></span>
-        </Button>
-      </div>
-      <div class="px-5 py-3 border-b border-zinc-200 dark:border-zinc-800">
-        <label for="user-role-guard" class="block mb-1.5 font-medium text-xs text-zinc-600 dark:text-zinc-400">Guard</label>
-        <select id="user-role-guard" x-model="selectedUserGuard" @change="changeUserGuard(selectedUserGuard())" class="px-3 py-1.5 w-full text-sm text-zinc-900 dark:text-zinc-100 bg-white dark:bg-neutral-800 border border-zinc-300 rounded-md dark:border-zinc-700 focus:border-violet-500 focus:outline-none focus:ring-2 focus:ring-violet-500/20">
-          <template :for="option in guardOptions">
-            <option :value="option.value">{{ option.label }}</option>
-          </template>
-        </select>
-      </div>
-      <div class="overflow-y-auto flex-1 px-5 py-4 space-y-2">
-        <div :if="userRolesLoading()" class="flex gap-2 items-center py-6 text-sm text-zinc-500">
-          <span class="h-4 w-4 animate-spin i-hugeicons-loading-03"></span>
-          Loading assignments…
-        </div>
-        <div :if="!userRolesLoading() && rolesForSelectedGuard().length === 0" class="text-sm text-zinc-500">No roles are defined for this guard.</div>
-        <template :for="role in rolesForSelectedGuard">
-          <label class="flex gap-2 items-center px-2 py-1.5 hover:bg-zinc-50 dark:hover:bg-neutral-800 rounded-md cursor-pointer">
-            <input type="checkbox" :checked="isRoleInDraft(role.name)" @change="toggleUserRoleDraft(role.name)" class="h-4 w-4 text-violet-600 border-zinc-300 rounded dark:border-zinc-700 focus:ring-violet-500" />
-            <span class="text-sm text-zinc-900 dark:text-zinc-100">{{ role.name }}</span>
-            <span class="text-xs text-zinc-500">{{ role.description || '' }}</span>
-          </label>
-        </template>
-      </div>
-      <div class="flex gap-2 items-center justify-end px-5 py-3 border-t border-zinc-200 dark:border-zinc-800">
-        <Button variant="secondary" size="sm" :disabled="savingUserRoles()" @click="closeUserDrawer()">Cancel</Button>
-        <Button size="sm" :disabled="userRolesLoading()" :loading="savingUserRoles()" @click="saveUserRoles()">
-          Save
-        </Button>
-      </div>
-    </aside>
-  </div>
+  <AssignmentDrawer
+    :open="Boolean(selectedUser())"
+    title="Assign roles"
+    :description="selectedUserName()"
+    :options="rolesForSelectedGuard()"
+    :selected="selectedUserRoles()"
+    :guard="selectedUserGuard()"
+    :guardOptions="guardOptions()"
+    :loading="userRolesLoading()"
+    :busy="savingUserRoles()"
+    emptyMessage="No roles are defined for this guard."
+    @guard-change="changeUserGuard"
+    @close="closeUserDrawer"
+    @save="saveUserRoles"
+  />
 
-  <!-- ─── Role-permission drawer ────────────────────────────── -->
-<div :if="selectedRole()" class="fixed inset-0 z-30 dashboard-modal-layer">
-    <button type="button" aria-label="Close permission assignment drawer" class="fixed inset-0 w-full bg-black/50 cursor-default" @click="closeRoleDrawer()"></button>
-    <aside role="dialog" aria-modal="true" aria-label="Role permission assignments" class="flex fixed inset-y-0 right-0 flex-col w-full sm:w-[28rem] bg-white dark:bg-neutral-900 shadow-xl">
-      <div class="flex items-center justify-between px-5 py-3 border-b border-zinc-200 dark:border-zinc-800">
-        <h3 class="font-medium text-sm text-zinc-900 dark:text-zinc-100">
-          Permissions for <span :text="selectedRole().name"></span>
-        </h3>
-        <Button variant="ghost" size="sm" iconOnly ariaLabel="Close permission assignment drawer" @click="closeRoleDrawer()">
-          <span class="block h-4 w-4 i-hugeicons-cancel-01"></span>
-        </Button>
-      </div>
-      <div class="px-5 py-3 text-xs text-zinc-500 border-b border-zinc-200 dark:border-zinc-800">
-        Guard: <code class="text-zinc-700 dark:text-zinc-300">{{ selectedRole().guardName }}</code>
-      </div>
-      <div class="overflow-y-auto flex-1 px-5 py-4 space-y-2">
-        <div :if="rolePermissionsLoading()" class="flex gap-2 items-center py-6 text-sm text-zinc-500">
-          <span class="h-4 w-4 animate-spin i-hugeicons-loading-03"></span>
-          Loading assignments…
-        </div>
-        <div :if="!rolePermissionsLoading() && permissionsForSelectedRole().length === 0" class="text-sm text-zinc-500">No permissions are defined for this guard.</div>
-        <template :for="perm in permissionsForSelectedRole">
-          <label class="flex gap-2 items-center px-2 py-1.5 hover:bg-zinc-50 dark:hover:bg-neutral-800 rounded-md cursor-pointer">
-            <input type="checkbox" :checked="isPermInDraft(perm.name)" @change="toggleRolePermDraft(perm.name)" class="h-4 w-4 text-violet-600 border-zinc-300 rounded dark:border-zinc-700 focus:ring-violet-500" />
-            <span class="text-sm text-zinc-900 dark:text-zinc-100">{{ perm.name }}</span>
-            <span class="text-xs text-zinc-500">{{ perm.description || '' }}</span>
-          </label>
-        </template>
-      </div>
-      <div class="flex gap-2 items-center justify-end px-5 py-3 border-t border-zinc-200 dark:border-zinc-800">
-        <Button variant="secondary" size="sm" :disabled="savingRolePerms()" @click="closeRoleDrawer()">Cancel</Button>
-        <Button size="sm" :disabled="rolePermissionsLoading()" :loading="savingRolePerms()" @click="saveRolePerms()">
-          Save
-        </Button>
-      </div>
-    </aside>
-  </div>
+  <AssignmentDrawer
+    :open="Boolean(selectedRole())"
+    title="Assign permissions"
+    :description="selectedRoleDescription()"
+    :options="permissionsForSelectedRole()"
+    :selected="selectedRolePermissions()"
+    :loading="rolePermissionsLoading()"
+    :busy="savingRolePerms()"
+    emptyMessage="No permissions are defined for this guard."
+    @close="closeRoleDrawer"
+    @save="saveRolePerms"
+  />
 
   <ConfirmDialog
     :isOpen="Boolean(pendingDelete())"

package/resources/components/Dashboard/Marketing/CampaignDeliveryDialog.stx

@@ -66,11 +66,7 @@ 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 campaign delivery dialog" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="dialog" aria-modal="true" aria-labelledby="campaign-delivery-title" class="relative p-6 max-w-lg w-full bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700 shadow-xl">
-    <h2 id="campaign-delivery-title" class="font-semibold text-gray-900 text-lg dark:text-white">{{ heading() }}</h2>
-    <p class="mt-2 text-gray-500 text-sm dark:text-neutral-400">{{ description() }}</p>
+<Modal :isOpen="open()" :title="heading()" :description="description()" size="md" @close="emit('close')">
     <div class="mt-4 p-3 bg-gray-50 dark:bg-neutral-900/50 border border-gray-200 rounded-lg dark:border-neutral-700">
       <p class="font-medium text-gray-900 text-sm dark:text-white">{{ record()?.name || '' }}</p>
       <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">{{ record()?.emailListName || 'Not assigned' }} · {{ record()?.audienceSize.toLocaleString() || '0' }} active recipients</p>
@@ -81,7 +77,8 @@ function submit(): void {
       <span class="block mt-1 text-gray-500 text-xs dark:text-neutral-400">Uses your browser’s local time.</span>
     </label>
     <div :if="error()" role="alert" 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 class="flex gap-2 justify-end mt-6">
+  <template #footer>
+    <div class="flex gap-2 justify-end w-full">
       <Button :disabled="busy()" variant="secondary" @click="emit('close')">Close</Button>
       <template :if="mode() === 'cancel'">
         <Button :disabled="busy() || (mode() === 'schedule' && !scheduledAt())" :loading="busy()" variant="danger" @click="submit()">{{ confirmLabel() }}</Button>
@@ -90,5 +87,5 @@ function submit(): void {
         <Button :disabled="busy() || (mode() === 'schedule' && !scheduledAt())" :loading="busy()" @click="submit()">{{ confirmLabel() }}</Button>
       </template>
     </div>
-  </section>
-</div>
+  </template>
+</Modal>

package/resources/components/Dashboard/Marketing/CampaignDialog.stx

@@ -106,17 +106,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 campaign dialog" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="dialog" aria-modal="true" aria-labelledby="campaign-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="campaign-dialog-title" class="font-semibold text-gray-900 text-lg dark:text-white">{{ mode() === 'edit' ? 'Edit campaign' : 'Add campaign' }}</h2>
-        <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Persist campaign metadata through the Campaign model. Email delivery is started separately after review.</p>
+<Modal
+  :isOpen="open()"
+  :title="mode() === 'edit' ? 'Edit campaign' : 'Add campaign'"
+  description="Persist campaign metadata through the Campaign model. Email delivery is started separately after review."
+  size="xl"
+  @close="emit('close')"
+>
+    <form id="campaign-form" @submit.prevent="submit">
+        <div :if="error()" role="alert" 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 :if="error()" role="alert" 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 class="grid gap-4 sm:grid-cols-2 mt-5">
+        <div class="grid gap-4 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" minlength="3" maxlength="255" required autocomplete="off" 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" />
@@ -213,13 +213,13 @@ function submit(): void {
             </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">
+    </form>
+  <template #footer>
+    <div class="flex gap-2 justify-end w-full">
         <Button :disabled="busy()" variant="secondary" @click="emit('close')">Cancel</Button>
-        <Button type="submit" :disabled="busy() || !canSubmit()" :loading="busy()">
+        <Button type="submit" form="campaign-form" :disabled="busy() || !canSubmit()" :loading="busy()">
           {{ mode() === 'edit' ? 'Save campaign' : 'Add campaign' }}
         </Button>
-      </footer>
-    </form>
-  </section>
-</div>
+    </div>
+  </template>
+</Modal>

package/resources/components/Dashboard/Marketing/MarketingListDialog.stx

@@ -69,17 +69,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 email list dialog" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="dialog" aria-modal="true" aria-labelledby="marketing-list-dialog-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">
-    <form @submit.prevent="submit">
-      <div class="p-6">
-        <h2 id="marketing-list-dialog-title" class="font-semibold text-gray-900 text-lg dark:text-white">{{ mode() === 'edit' ? 'Edit email list' : 'Add email list' }}</h2>
-        <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Settings persist through the EmailList model and its generated API contract.</p>
+<Modal
+  :isOpen="open()"
+  :title="mode() === 'edit' ? 'Edit email list' : 'Add email list'"
+  description="Settings persist through the EmailList model and its generated API contract."
+  size="lg"
+  @close="emit('close')"
+>
+    <form id="marketing-list-form" @submit.prevent="submit">
+        <div :if="error()" role="alert" 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 :if="error()" role="alert" 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 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="100" required autocomplete="off" 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" />
@@ -117,13 +117,13 @@ function submit(): void {
             </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">
+    </form>
+  <template #footer>
+    <div class="flex gap-2 justify-end w-full">
         <Button :disabled="busy()" variant="secondary" @click="emit('close')">Cancel</Button>
-        <Button type="submit" :disabled="busy() || !name().trim() || !slug().trim()" :loading="busy()">
+        <Button type="submit" form="marketing-list-form" :disabled="busy() || !name().trim() || !slug().trim()" :loading="busy()">
           {{ mode() === 'edit' ? 'Save email list' : 'Add email list' }}
         </Button>
-      </footer>
-    </form>
-  </section>
-</div>
+    </div>
+  </template>
+</Modal>

package/resources/components/Dashboard/Marketing/MarketingListsTable.stx

@@ -52,7 +52,7 @@ function statusClass(status: string): string {
             <td class="px-4 py-4">
               <div class="flex gap-2 items-center">
                 <p class="font-medium text-gray-900 text-sm dark:text-white">{{ record.name }}</p>
-                <span :if="record.countDrift" title="Stored counters differ from membership rows" class="h-4 w-4 text-amber-500 i-hugeicons-alert-02"></span>
+                <span :if="record.countDrift" x-tooltip="Stored counters differ from membership rows" title="Stored counters differ from membership rows" class="h-4 w-4 text-amber-500 i-hugeicons-alert-02"></span>
               </div>
               <p class="mt-1 font-mono text-gray-500 text-xs dark:text-neutral-400">{{ record.slug }}</p>
               <p :if="record.description" class="mt-1 max-w-sm text-gray-500 text-xs dark:text-neutral-400">{{ record.description }}</p>

package/resources/components/Dashboard/Marketing/SocialPostDialog.stx

@@ -52,16 +52,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 social post dialog" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="dialog" aria-modal="true" aria-labelledby="social-post-dialog-title" class="relative max-w-2xl 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="social-post-dialog-title" class="font-semibold text-gray-900 text-lg dark:text-white">{{ mode() === 'edit' ? 'Edit social post' : 'Add social post' }}</h2>
-        <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Create or schedule a persisted SocialPost record. Platform delivery remains the responsibility of the configured publisher.</p>
-        <div :if="error()" role="alert" 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 social post' : 'Add social post'"
+  description="Create or schedule a persisted SocialPost record. Platform delivery remains the responsibility of the configured publisher."
+  size="lg"
+  @close="emit('close')"
+>
+    <form id="social-post-form" @submit.prevent="submit">
+        <div :if="error()" role="alert" 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">Content</span>
             <textarea x-model="content" rows="5" maxlength="2000" 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"></textarea>
@@ -109,13 +110,13 @@ function submit(): void {
             <input x-model="imageUrl" type="url" maxlength="2000" placeholder="https://example.com/image.jpg" 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">
+    </form>
+  <template #footer>
+    <div class="flex gap-2 justify-end w-full">
         <Button :disabled="busy()" variant="secondary" @click="emit('close')">Cancel</Button>
-        <Button type="submit" :disabled="busy() || !content().trim() || (status() === 'scheduled' && !scheduledAt())" :loading="busy()">
+        <Button type="submit" form="social-post-form" :disabled="busy() || !content().trim() || (status() === 'scheduled' && !scheduledAt())" :loading="busy()">
           {{ mode() === 'edit' ? 'Save social post' : 'Add social post' }}
         </Button>
-      </footer>
-    </form>
-  </section>
-</div>
+    </div>
+  </template>
+</Modal>

package/resources/components/Dashboard/Models/EditRecordModal.stx

@@ -0,0 +1,81 @@
+<script client>
+interface EditField {
+  name: string
+  label: string
+  value: string
+  readonly: boolean
+}
+
+const open = useReactiveProp('open', false)
+const modelName = useReactiveProp('modelName', 'Record')
+const fields = useReactiveProp('fields', [] as EditField[])
+const busy = useReactiveProp('busy', false)
+const values = state<Record<string, string>>({})
+const emit = defineEmits()
+let hydrationKey = ''
+
+effect(() => {
+  if (!open()) {
+    hydrationKey = ''
+    return
+  }
+
+  const key = fields().map(field => `${field.name}:${field.value}`).join('|')
+  if (key === hydrationKey)
+    return
+
+  hydrationKey = key
+  values.set(Object.fromEntries(fields().map(field => [field.name, field.value])))
+})
+
+function updateValue(field: string, event: Event): void {
+  values.set({ ...values(), [field]: (event.target as HTMLInputElement).value })
+}
+
+function submit(): void {
+  emit('submit', Object.fromEntries(
+    fields()
+      .filter(field => !field.readonly)
+      .map(field => [field.name, values()[field.name]]),
+  ))
+}
+
+function close(): void {
+  if (!busy())
+    emit('close')
+}
+</script>
+
+<Modal
+  :isOpen="open()"
+  :title="'Edit ' + modelName()"
+  description="Only changed writable fields will be sent through the model API."
+  :closable="!busy()"
+  @close="close"
+>
+  <form id="model-edit-form" class="overflow-y-auto space-y-3 max-h-[65vh]" @submit.prevent="submit">
+    <template :for="field in fields()">
+      <div class="flex flex-col gap-1.5">
+        <label :for="'model-edit-' + field.name" class="font-medium text-[12px] text-neutral-600 dark:text-neutral-300">{{ field.label }}</label>
+        <input
+          :id="'model-edit-' + field.name"
+          :name="field.readonly ? undefined : field.name"
+          type="text"
+          :value="values()[field.name] ?? field.value"
+          :readonly="field.readonly"
+          class="px-2.5 py-1.5 text-[13px] text-neutral-900 dark:text-neutral-100 read-only:text-neutral-500 dark:read-only:text-neutral-400 bg-white dark:bg-white/10 read-only:bg-neutral-50 dark:read-only:bg-white/5 border border-black/10 rounded-lg dark:border-white/15 focus:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
+          @input="updateValue(field.name, $event)"
+        >
+      </div>
+    </template>
+  </form>
+
+  <template #footer>
+    <div class="flex gap-2 items-center justify-end w-full">
+      <Button :disabled="busy()" variant="secondary" @click="close">Cancel</Button>
+      <Button type="submit" form="model-edit-form" :loading="busy()">
+        {{ busy() ? 'Saving' : 'Save changes' }}
+      </Button>
+    </div>
+  </template>
+</Modal>

package/resources/components/Dashboard/Models/ModelRecordActions.stx

@@ -0,0 +1,30 @@
+<script client>
+const record = useReactiveProp('record', {} as Record<string, unknown>)
+const modelName = useReactiveProp('modelName', 'Record')
+const canUpdate = useReactiveProp('canUpdate', false)
+const canDestroy = useReactiveProp('canDestroy', false)
+const emit = defineEmits()
+</script>
+
+<div class="flex gap-1 items-center justify-end">
+  <Button
+    :if="canUpdate()"
+    variant="ghost"
+    size="sm"
+    iconOnly
+    :ariaLabel="'Edit ' + modelName() + ' ' + record().id"
+    @click="emit('edit', record())"
+  >
+    <span class="h-4 w-4 i-hugeicons-edit-02"></span>
+  </Button>
+  <Button
+    :if="canDestroy()"
+    variant="ghost"
+    size="sm"
+    iconOnly
+    :ariaLabel="'Delete ' + modelName() + ' ' + record().id"
+    @click="emit('delete', record())"
+  >
+    <span class="h-4 w-4 text-red-500 i-hugeicons-delete-02"></span>
+  </Button>
+</div>