@stacksjs/defaults 0.70.362 → 0.70.365

package/resources/components/Dashboard/Content/SeoDashboard.stx

@@ -32,6 +32,12 @@ interface SeoEntry extends PostRow {
   score: number
 }
 
+interface SeoDraft {
+  focusKeyword: string | null
+  metaDescription: string | null
+  canonicalUrl: string | null
+}
+
 const entries = state<SeoEntry[]>([])
 const loading = state(true)
 const saving = state(false)
@@ -40,9 +46,6 @@ const editError = state('')
 const searchQuery = state('')
 const scoreFilter = state<'all' | 'good' | 'medium' | 'poor'>('all')
 const editingEntry = state<SeoEntry | null>(null)
-const editFocusKeyword = state('')
-const editMetaDescription = state('')
-const editCanonical = state('')
 
 function seoScore(post: PostRow): number {
   const title = String(post.title || '').trim()
@@ -143,9 +146,6 @@ function formatDate(value?: string | null): string {
 
 function openEdit(entry: SeoEntry): void {
   editingEntry.set(entry)
-  editFocusKeyword.set(entry.focus_keyword || '')
-  editMetaDescription.set(entry.meta_description || '')
-  editCanonical.set(entry.canonical_url || '')
   editError.set('')
 }
 
@@ -156,7 +156,7 @@ function closeEdit(): void {
   editError.set('')
 }
 
-async function saveEdit(): Promise<void> {
+async function saveEdit(draft: SeoDraft): Promise<void> {
   const entry = editingEntry()
   if (!entry || saving())
     return
@@ -170,9 +170,9 @@ async function saveEdit(): Promise<void> {
         method: 'PATCH',
         body: {
           fields: {
-            focus_keyword: editFocusKeyword().trim() || null,
-            meta_description: editMetaDescription().trim() || null,
-            canonical_url: editCanonical().trim() || null,
+            focus_keyword: draft.focusKeyword,
+            meta_description: draft.metaDescription,
+            canonical_url: draft.canonicalUrl,
           },
         },
       },
@@ -311,79 +311,13 @@ void loadEntries()
     @endif
   </Card>
 
-  <div
-    :if="editingEntry()"
-    class="flex fixed inset-0 z-50 items-center justify-center p-4 bg-black/40 dashboard-modal-layer"
-    @click="closeEdit()"
-  >
-    <form
-      role="dialog"
-      aria-modal="true"
-      aria-labelledby="seo-edit-title"
-      class="overflow-hidden max-w-lg w-full bg-white dark:bg-neutral-900 rounded-xl shadow-2xl"
-      @click.stop
-      @submit.prevent="saveEdit()"
-    >
-      <div class="flex items-center justify-between px-5 py-4 border-b border-neutral-200/60 dark:border-white/10">
-        <div>
-          <h2 id="seo-edit-title" class="font-semibold text-neutral-900 dark:text-white">Edit SEO metadata</h2>
-          <p class="mt-1 text-neutral-500 text-xs dark:text-neutral-400">{{ editingEntry()?.title }}</p>
-        </div>
-        <Button variant="ghost" size="sm" iconOnly ariaLabel="Close SEO editor" @click="closeEdit()">
-          <span class="block h-4 w-4 i-hugeicons-cancel-01"></span>
-        </Button>
-      </div>
-
-      <div class="p-5 space-y-4">
-        @if(editError())
-          <div role="alert" class="px-3 py-2 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-500/10 border border-red-200 rounded-lg dark:border-red-500/20">
-            {{ editError() }}
-          </div>
-        @endif
-
-        <div>
-          <label for="seo-focus-keyword" class="block font-medium text-neutral-700 text-sm dark:text-neutral-300">Focus keyword</label>
-          <input
-            id="seo-focus-keyword"
-            type="text"
-            maxlength="100"
-            x-model="editFocusKeyword"
-            class="block mt-1.5 px-3 py-2 w-full text-neutral-900 text-sm dark:text-white bg-white dark:bg-white/5 border border-black/10 rounded-lg dark:border-white/15 focus:border-blue-500/50 focus:outline-none focus:ring-2 focus:ring-blue-500/30"
-          >
-        </div>
-        <div>
-          <div class="flex items-center justify-between">
-            <label for="seo-meta-description" class="block font-medium text-neutral-700 text-sm dark:text-neutral-300">Meta description</label>
-            <span class="tabular-nums text-neutral-400 text-xs">{{ editMetaDescription().length }}/160</span>
-          </div>
-          <textarea
-            id="seo-meta-description"
-            rows="4"
-            maxlength="160"
-            x-model="editMetaDescription"
-            class="block mt-1.5 px-3 py-2 w-full text-neutral-900 text-sm dark:text-white bg-white dark:bg-white/5 border border-black/10 rounded-lg dark:border-white/15 focus:border-blue-500/50 focus:outline-none focus:ring-2 focus:ring-blue-500/30"
-          ></textarea>
-        </div>
-        <div>
-          <label for="seo-canonical-url" class="block font-medium text-neutral-700 text-sm dark:text-neutral-300">Canonical URL</label>
-          <input
-            id="seo-canonical-url"
-            type="url"
-            placeholder="https://example.com/post"
-            x-model="editCanonical"
-            class="block mt-1.5 px-3 py-2 w-full text-neutral-900 text-sm dark:text-white placeholder:text-neutral-400 bg-white dark:bg-white/5 border border-black/10 rounded-lg dark:border-white/15 focus:border-blue-500/50 focus:outline-none focus:ring-2 focus:ring-blue-500/30"
-          >
-        </div>
-      </div>
-
-      <div class="flex gap-2 items-center justify-end px-5 py-4 bg-neutral-50 dark:bg-white/[0.03] border-neutral-200/60 border-t dark:border-white/10">
-        <Button type="button" variant="secondary" size="sm" :disabled="saving()" @click="closeEdit()">Cancel</Button>
-        <Button type="submit" variant="primary" size="sm" :disabled="saving()">
-          <span :if="!saving()">Save metadata</span>
-          <span :if="saving()">Saving...</span>
-        </Button>
-      </div>
-    </form>
-  </div>
+  <SeoEditorDialog
+    :open="Boolean(editingEntry())"
+    :entry="editingEntry()"
+    :busy="saving()"
+    :error="editError()"
+    @close="closeEdit"
+    @submit="saveEdit"
+  />
 </div>
 </template>

package/resources/components/Dashboard/Content/SeoEditorDialog.stx

@@ -0,0 +1,108 @@
+<script client>
+interface SeoEntry {
+  title: string
+  focus_keyword?: string | null
+  meta_description?: string | null
+  canonical_url?: string | null
+}
+
+interface SeoDraft {
+  focusKeyword: string | null
+  metaDescription: string | null
+  canonicalUrl: string | null
+}
+
+const open = useReactiveProp('open', false)
+const entry = useReactiveProp('entry', null as SeoEntry | null)
+const busy = useReactiveProp('busy', false)
+const error = useReactiveProp('error', '')
+const focusKeyword = state('')
+const metaDescription = state('')
+const canonicalUrl = state('')
+const emit = defineEmits()
+let wasOpen = false
+
+effect(() => {
+  const isOpen = open()
+  if (isOpen && !wasOpen) {
+    const record = entry()
+    focusKeyword.set(record?.focus_keyword || '')
+    metaDescription.set(record?.meta_description || '')
+    canonicalUrl.set(record?.canonical_url || '')
+  }
+  wasOpen = isOpen
+})
+
+function close(): void {
+  if (!busy())
+    emit('close')
+}
+
+function submit(): void {
+  const draft: SeoDraft = {
+    focusKeyword: focusKeyword().trim() || null,
+    metaDescription: metaDescription().trim() || null,
+    canonicalUrl: canonicalUrl().trim() || null,
+  }
+  emit('submit', draft)
+}
+</script>
+
+<Modal
+  :isOpen="open()"
+  title="Edit SEO metadata"
+  :description="entry()?.title || ''"
+  :closable="!busy()"
+  @close="close"
+>
+  <form id="seo-editor-form" class="space-y-4" @submit.prevent="submit">
+    <div>
+      <label for="seo-focus-keyword" class="block font-medium text-neutral-700 text-sm dark:text-neutral-300">Focus keyword</label>
+      <input
+        id="seo-focus-keyword"
+        name="focus_keyword"
+        type="text"
+        maxlength="100"
+        x-model="focusKeyword"
+        class="block mt-1.5 px-3 py-2 w-full text-neutral-900 text-sm dark:text-white bg-white dark:bg-white/5 border border-black/10 rounded-lg dark:border-white/15 focus:border-blue-500/50 focus:outline-none focus:ring-2 focus:ring-blue-500/30"
+      >
+    </div>
+    <div>
+      <div class="flex items-center justify-between">
+        <label for="seo-meta-description" class="block font-medium text-neutral-700 text-sm dark:text-neutral-300">Meta description</label>
+        <span class="tabular-nums text-neutral-400 text-xs">{{ metaDescription().length }}/160</span>
+      </div>
+      <textarea
+        id="seo-meta-description"
+        name="meta_description"
+        rows="4"
+        maxlength="160"
+        x-model="metaDescription"
+        class="block mt-1.5 px-3 py-2 w-full text-neutral-900 text-sm dark:text-white bg-white dark:bg-white/5 border border-black/10 rounded-lg dark:border-white/15 focus:border-blue-500/50 focus:outline-none focus:ring-2 focus:ring-blue-500/30"
+      ></textarea>
+    </div>
+    <div>
+      <label for="seo-canonical-url" class="block font-medium text-neutral-700 text-sm dark:text-neutral-300">Canonical URL</label>
+      <input
+        id="seo-canonical-url"
+        name="canonical_url"
+        type="url"
+        inputmode="url"
+        placeholder="https://example.com/post"
+        x-model="canonicalUrl"
+        class="block mt-1.5 px-3 py-2 w-full text-neutral-900 text-sm dark:text-white placeholder:text-neutral-400 bg-white dark:bg-white/5 border border-black/10 rounded-lg dark:border-white/15 focus:border-blue-500/50 focus:outline-none focus:ring-2 focus:ring-blue-500/30"
+      >
+    </div>
+  </form>
+
+  <div :if="error()" role="alert" class="mt-4 px-3 py-2 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-500/10 border border-red-200 rounded-lg dark:border-red-500/20">
+    {{ error() }}
+  </div>
+
+  <template #footer>
+    <div class="flex gap-2 items-center justify-end w-full">
+      <Button type="button" variant="secondary" :disabled="busy()" @click="close">Cancel</Button>
+      <Button type="submit" form="seo-editor-form" :loading="busy()">Save metadata</Button>
+    </div>
+  </template>
+</Modal>

package/resources/components/Dashboard/Content/TaxonomyEditorDialog.stx

@@ -0,0 +1,106 @@
+<script client>
+interface TaxonomyDraft {
+  name: string
+  slug: string
+  description: string
+}
+
+const open = useReactiveProp('open', false)
+const kind = useReactiveProp('kind', 'category')
+const busy = useReactiveProp('busy', false)
+const error = useReactiveProp('error', '')
+const name = state('')
+const slug = state('')
+const description = state('')
+const slugTouched = state(false)
+const emit = defineEmits()
+let wasOpen = false
+
+function slugify(value: string): string {
+  return value
+    .normalize('NFKD')
+    .replace(/[\u0300-\u036F]/g, '')
+    .trim()
+    .toLowerCase()
+    .replace(/['"]/g, '')
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+}
+
+effect(() => {
+  const isOpen = open()
+  if (isOpen && !wasOpen) {
+    name.set('')
+    slug.set('')
+    description.set('')
+    slugTouched.set(false)
+  }
+  wasOpen = isOpen
+})
+
+effect(() => {
+  if (!open() || slugTouched())
+    return
+  slug.set(slugify(name()))
+})
+
+function markSlugTouched(): void {
+  slugTouched.set(true)
+}
+
+function normalizeSlug(): void {
+  const normalized = slugify(slug())
+  if (normalized !== slug())
+    slug.set(normalized)
+}
+
+function close(): void {
+  if (!busy())
+    emit('close')
+}
+
+function submit(): void {
+  const draft: TaxonomyDraft = {
+    name: name().trim(),
+    slug: slugify(slug()),
+    description: description().trim(),
+  }
+  emit('submit', draft)
+}
+</script>
+
+<Modal
+  :isOpen="open()"
+  :title="'New ' + kind()"
+  description="Add a reusable classification for your published content."
+  :closable="!busy()"
+  @close="close"
+>
+  <form id="taxonomy-editor-form" class="grid gap-4" @submit.prevent="submit">
+    <label>
+      <span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Name</span>
+      <input x-model="name" name="name" required maxlength="255" 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>
+      <span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Slug</span>
+      <input x-model="slug" name="slug" required maxlength="255" 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" @input="markSlugTouched" @blur="normalizeSlug" />
+    </label>
+    <label>
+      <span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Description</span>
+      <textarea x-model="description" name="description" rows="3" maxlength="1000" 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>
+  </form>
+
+  <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>
+
+  <template #footer>
+    <div class="flex gap-2 justify-end w-full">
+      <Button :disabled="busy()" variant="secondary" @click="close">Cancel</Button>
+      <Button type="submit" form="taxonomy-editor-form" :disabled="!name().trim() || !slug().trim()" :loading="busy()">
+        Create {{ kind() }}
+      </Button>
+    </div>
+  </template>
+</Modal>

package/resources/components/Dashboard/CreateRecordModal.stx

@@ -63,87 +63,76 @@ function close(): void {
 }
 </script>
 
-<template :if="open()">
-  <div class="fixed inset-0 overflow-y-auto z-[55] dashboard-modal-layer" @keydown.escape="close">
-    <button type="button" class="fixed inset-0 w-full bg-black/50 backdrop-blur-sm cursor-default" aria-label="Close create record dialog" @click="close"></button>
-
-    <div class="flex relative items-center justify-center p-4 min-h-full">
-      <section role="dialog" aria-modal="true" :aria-label="'Create ' + modelName()" class="overflow-hidden relative max-w-lg w-full bg-white dark:bg-neutral-900 rounded-xl shadow-2xl">
-        <form @submit.prevent="submit">
-          <header class="flex gap-4 items-start justify-between px-5 py-4 bg-neutral-50/80 dark:bg-neutral-800/80 border-b border-neutral-200 dark:border-neutral-700">
-            <div>
-              <h2 class="font-semibold text-base text-neutral-900 dark:text-white">
-                Create {{ modelName() }}
-              </h2>
-              <p class="mt-0.5 text-neutral-500 text-xs dark:text-neutral-400">
-                Fields come from the model's fillable attributes and useApi store contract.
-              </p>
-            </div>
-            <Button type="button" variant="ghost" size="sm" iconOnly ariaLabel="Close create record dialog" @click="close">
-              <span class="block h-4 w-4 i-hugeicons-cancel-01"></span>
-            </Button>
-          </header>
-
-          <div class="overflow-y-auto px-5 py-4 space-y-4 max-h-[65vh]">
-            <div :if="error()" role="alert" class="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>
-
-            <template :for="field in fields()">
-              <label :if="field.type === 'boolean'" class="flex gap-3 items-start p-3 border border-neutral-200 rounded-lg dark:border-neutral-700">
-                <input
-                  type="checkbox"
-                  :checked="Boolean(values()[field.name])"
-                  :disabled="busy()"
-                  class="mt-0.5 h-4 w-4 text-blue-600 border-neutral-300 rounded"
-                  @change="setValue(field.name, $event.target.checked)"
-                />
-                <span>
-                  <span class="block font-medium text-neutral-700 text-sm dark:text-neutral-200">{{ field.label }}</span>
-                  <span :if="fieldError(field.name)" class="block mt-0.5 text-red-600 text-xs dark:text-red-400">{{ fieldError(field.name) }}</span>
-                </span>
-              </label>
-
-              <Select
-                :if="field.type === 'enum'"
-                :value="fieldValue(field.name)"
-                :options="field.options"
-                :label="field.label"
-                :ariaLabel="field.label"
-                :required="field.required"
-                :disabled="busy()"
-                :error="fieldError(field.name)"
-                @update:value="setValue(field.name, $event)"
-              />
-
-              <Input
-                :if="field.type !== 'boolean' && field.type !== 'enum'"
-                :value="fieldValue(field.name)"
-                :type="inputType(field)"
-                :label="field.label"
-                :ariaLabel="field.label"
-                :required="field.required"
-                :disabled="busy()"
-                :error="fieldError(field.name)"
-                @update:value="setValue(field.name, $event)"
-              />
-            </template>
-
-            <p :if="fields().length === 0" class="py-8 text-center text-neutral-500 text-sm dark:text-neutral-400">
-              This model exposes no safe fillable fields.
-            </p>
-          </div>
-
-          <footer class="flex gap-2 items-center justify-end px-5 py-4 bg-neutral-50/50 dark:bg-neutral-800/50 border-neutral-200 border-t dark:border-neutral-700">
-            <Button :disabled="busy()" variant="secondary" @click="close">
-              Cancel
-            </Button>
-            <Button type="submit" :disabled="busy() || fields().length === 0" :loading="busy()">
-              {{ busy() ? 'Creating' : `Create ${modelName()}` }}
-            </Button>
-          </footer>
-        </form>
-      </section>
+<Modal
+  :isOpen="open()"
+  :title="'Create ' + modelName()"
+  description="Fields come from the model's fillable attributes and useApi store contract."
+  :closable="!busy()"
+  @close="close"
+>
+  <form id="create-record-form" @submit.prevent="submit">
+    <div class="overflow-y-auto space-y-4 max-h-[65vh]">
+      <div :if="error()" role="alert" class="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>
+
+      <template :for="field in fields()">
+        <label :if="field.type === 'boolean'" class="flex gap-3 items-start p-3 border border-neutral-200 rounded-lg dark:border-neutral-700">
+          <input
+            :name="field.name"
+            type="checkbox"
+            :checked="Boolean(values()[field.name])"
+            :disabled="busy()"
+            class="mt-0.5 h-4 w-4 text-blue-600 border-neutral-300 rounded"
+            @change="setValue(field.name, $event.target.checked)"
+          />
+          <span>
+            <span class="block font-medium text-neutral-700 text-sm dark:text-neutral-200">{{ field.label }}</span>
+            <span :if="fieldError(field.name)" class="block mt-0.5 text-red-600 text-xs dark:text-red-400">{{ fieldError(field.name) }}</span>
+          </span>
+        </label>
+
+        <Select
+          :if="field.type === 'enum'"
+          :name="field.name"
+          :value="fieldValue(field.name)"
+          :options="field.options"
+          :label="field.label"
+          :ariaLabel="field.label"
+          :required="field.required"
+          :disabled="busy()"
+          :error="fieldError(field.name)"
+          @update:value="setValue(field.name, $event)"
+        />
+
+        <Input
+          :if="field.type !== 'boolean' && field.type !== 'enum'"
+          :name="field.name"
+          :value="fieldValue(field.name)"
+          :type="inputType(field)"
+          :label="field.label"
+          :ariaLabel="field.label"
+          :required="field.required"
+          :disabled="busy()"
+          :error="fieldError(field.name)"
+          @update:value="setValue(field.name, $event)"
+        />
+      </template>
+
+      <p :if="fields().length === 0" class="py-8 text-center text-neutral-500 text-sm dark:text-neutral-400">
+        This model exposes no safe fillable fields.
+      </p>
+    </div>
+  </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="create-record-form" :disabled="busy() || fields().length === 0" :loading="busy()">
+        {{ busy() ? 'Creating' : `Create ${modelName()}` }}
+      </Button>
     </div>
-  </div>
-</template>
+  </template>
+</Modal>

package/resources/components/Dashboard/Email/InboxMessageList.stx

@@ -68,7 +68,7 @@ function listClass(): string {
                 <p class="mt-1 text-gray-500 text-xs truncate dark:text-neutral-400">{{ email.preview }}</p>
               </div>
               <div class="flex flex-shrink-0 gap-2 items-center">
-                <span :if="email.hasAttachments" class="h-4 w-4 text-gray-400 i-hugeicons-attachment-01" title="Has attachments"></span>
+                <span :if="email.hasAttachments" class="h-4 w-4 text-gray-400 i-hugeicons-attachment-01" x-tooltip="Has attachments" title="Has attachments"></span>
                 <time class="text-gray-500 text-xs dark:text-neutral-400" :datetime="email.date">{{ formatDate(email.date) }}</time>
               </div>
             </div>

package/resources/components/Dashboard/GlobalSearch.stx

@@ -10,7 +10,6 @@ const isOpen = state(false)
 const selectedIndex = state(0)
 const error = state('')
 const searchInput = useRef('globalSearchInput')
-let searchTimer: ReturnType<typeof setTimeout> | null = null
 let searchRequest: AbortController | null = null
 
 function flatResults(): SearchResultItem[] {
@@ -74,13 +73,9 @@ async function runSearch(value: string): Promise<void> {
   }
 }
 
-function scheduleSearch(value: string): void {
-  if (searchTimer) clearTimeout(searchTimer)
-  searchTimer = setTimeout(() => {
-    searchTimer = null
-    void runSearch(value)
-  }, 250)
-}
+const scheduleSearch = useDebounce((value: string) => {
+  void runSearch(value)
+}, 250)
 
 function moveUp(): void {
   const items = flatResults()
@@ -137,7 +132,6 @@ function handleGlobalKeydown(event: KeyboardEvent): void {
 useEventListener('keydown', handleGlobalKeydown)
 
 onDestroy(() => {
-  if (searchTimer) clearTimeout(searchTimer)
   searchRequest?.abort()
 })
 </script>

package/resources/components/Dashboard/Infrastructure/CloudDetailsDialog.stx

@@ -6,19 +6,7 @@ const item = useReactiveProp('item', null as DashboardCloudResource | null)
 const emit = defineEmits()
 </script>
 
-<div :if="open() && item()" class="flex fixed inset-0 z-50 items-center justify-center p-4 dashboard-modal-layer">
-  <button type="button" aria-label="Close cloud resource details" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="dialog" aria-modal="true" aria-labelledby="cloud-resource-title" class="overflow-y-auto relative max-h-[90vh] max-w-lg w-full bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700 shadow-xl">
-    <header class="flex gap-4 items-start justify-between px-5 py-4 border-b border-neutral-200 dark:border-neutral-700">
-      <div>
-        <p class="capitalize text-neutral-500 text-xs dark:text-neutral-400">{{ item()?.category }} resource</p>
-        <h2 id="cloud-resource-title" class="mt-1 font-semibold text-lg text-neutral-900 dark:text-white">{{ item()?.name }}</h2>
-      </div>
-      <Button variant="ghost" iconOnly ariaLabel="Close cloud resource details" @click="emit('close')">
-        <span class="block h-5 w-5 i-hugeicons-cancel-01"></span>
-      </Button>
-    </header>
-    <div class="p-5">
+<Modal :isOpen="open() && Boolean(item())" :title="item()?.name || 'Cloud resource'" :description="`${item()?.category || 'Cloud'} resource`" size="md" @close="emit('close')">
       <div class="flex gap-3 items-center">
         <CloudStatusBadge :status="item()?.status || 'inactive'" />
         <span class="capitalize text-neutral-500 text-sm dark:text-neutral-400">{{ item()?.type }}</span>
@@ -31,6 +19,4 @@ const emit = defineEmits()
         </div>
       </dl>
       <p :if="(item()?.details || []).length === 0" class="mt-5 p-3 text-neutral-500 text-sm dark:text-neutral-400 bg-neutral-50 dark:bg-neutral-800 rounded-lg">No additional configuration fields are recorded for this resource.</p>
-    </div>
-  </section>
-</div>
+</Modal>

package/resources/components/Dashboard/Infrastructure/DnsRecordDialog.stx

@@ -10,25 +10,13 @@ function ttlLabel(): 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 DNS record details" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="dialog" aria-modal="true" aria-labelledby="dns-record-title" class="overflow-y-auto relative max-h-[90vh] max-w-lg w-full bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700 shadow-xl">
-    <header class="flex gap-4 items-start justify-between px-5 py-4 border-b border-neutral-200 dark:border-neutral-700">
-      <div>
-        <p class="text-neutral-500 text-xs dark:text-neutral-400">Configured DNS record</p>
-        <h2 id="dns-record-title" class="mt-1 font-semibold text-lg text-neutral-900 dark:text-white">{{ record()?.type }} · {{ record()?.name }}</h2>
-      </div>
-      <Button variant="ghost" iconOnly ariaLabel="Close DNS record details" @click="emit('close')">
-        <span class="block h-5 w-5 i-hugeicons-cancel-01"></span>
-      </Button>
-    </header>
-    <dl class="grid gap-5 sm:grid-cols-2 p-5 text-sm">
+<Modal :isOpen="open() && Boolean(record())" :title="`${record()?.type || 'DNS'} · ${record()?.name || 'record'}`" description="Configured DNS record" size="md" @close="emit('close')">
+    <dl class="grid gap-5 sm:grid-cols-2 text-sm">
       <div><dt class="text-neutral-500 dark:text-neutral-400">Type</dt><dd class="mt-1 font-semibold text-neutral-900 dark:text-white">{{ record()?.type }}</dd></div>
       <div><dt class="text-neutral-500 dark:text-neutral-400">Name</dt><dd class="mt-1 break-all font-mono text-neutral-900 dark:text-white">{{ record()?.name }}</dd></div>
       <div class="sm:col-span-2"><dt class="text-neutral-500 dark:text-neutral-400">Value</dt><dd class="mt-1 break-all font-mono text-neutral-900 dark:text-white">{{ record()?.value || 'Not set' }}</dd></div>
       <div><dt class="text-neutral-500 dark:text-neutral-400">TTL</dt><dd class="mt-1 font-medium text-neutral-900 dark:text-white">{{ ttlLabel() }}</dd></div>
       <div :if="record()?.priority !== null"><dt class="text-neutral-500 dark:text-neutral-400">Priority</dt><dd class="mt-1 font-medium text-neutral-900 dark:text-white">{{ record()?.priority }}</dd></div>
     </dl>
-    <p class="mb-5 mx-5 p-3 text-neutral-500 text-xs dark:text-neutral-400 bg-neutral-50 dark:bg-neutral-800 rounded-lg">Source: config/dns.ts</p>
-  </section>
-</div>
+    <p class="mt-5 p-3 text-neutral-500 text-xs dark:text-neutral-400 bg-neutral-50 dark:bg-neutral-800 rounded-lg">Source: config/dns.ts</p>
+</Modal>