@stacksjs/defaults 0.70.362 → 0.70.365

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

@@ -15,23 +15,9 @@ function formatDate(value: string | undefined): 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 log details" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="dialog" aria-modal="true" aria-labelledby="log-details-title" class="overflow-y-auto relative max-h-[90vh] max-w-2xl 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 class="min-w-0">
-        <div class="flex gap-2 items-center">
-          <p class="text-neutral-500 text-xs dark:text-neutral-400">Log #{{ record()?.id }}</p>
-          <LogLevelBadge :type="record()?.type || 'unknown'" />
-        </div>
-        <h2 id="log-details-title" class="mt-2 font-semibold text-lg text-neutral-900 dark:text-white">{{ record()?.message }}</h2>
-      </div>
-      <Button variant="ghost" iconOnly ariaLabel="Close log 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()?.message || 'Log details'" :description="`Log #${record()?.id || 'not recorded'}`" size="lg" @close="emit('close')">
+  <template #header-trailing><LogLevelBadge :type="record()?.type || 'unknown'" /></template>
+    <dl class="grid gap-5 sm:grid-cols-2 text-sm">
       <div><dt class="text-neutral-500 dark:text-neutral-400">Occurred</dt><dd class="mt-1 text-neutral-900 dark:text-white">{{ formatDate(record()?.timestamp) }}</dd></div>
       <div><dt class="text-neutral-500 dark:text-neutral-400">Persisted</dt><dd class="mt-1 text-neutral-900 dark:text-white">{{ formatDate(record()?.createdAt) }}</dd></div>
       <div><dt class="text-neutral-500 dark:text-neutral-400">Source</dt><dd class="mt-1 font-mono text-neutral-900 dark:text-white">{{ record()?.source || 'Not recorded' }}</dd></div>
@@ -42,5 +28,4 @@ function formatDate(value: string | undefined): string {
         <dd><pre class="overflow-x-auto mt-2 p-4 font-mono text-neutral-800 text-xs whitespace-pre-wrap dark:text-neutral-200 bg-neutral-50 dark:bg-neutral-950 border border-neutral-200 rounded-lg dark:border-neutral-800">{{ record()?.stacktrace }}</pre></dd>
       </div>
     </dl>
-  </section>
-</div>
+</Modal>

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

@@ -6,26 +6,16 @@ const mailbox = useReactiveProp('mailbox', null as DashboardMailbox | null)
 const emit = defineEmits()
 </script>
 
-<div :if="open() && mailbox()" class="flex fixed inset-0 z-50 items-center justify-center p-4 dashboard-modal-layer">
-  <button type="button" aria-label="Close mailbox details" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="dialog" aria-modal="true" aria-labelledby="mailbox-details-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 mailbox</p>
-        <h2 id="mailbox-details-title" class="mt-1 break-all font-semibold text-lg text-neutral-900 dark:text-white">{{ mailbox()?.email }}</h2>
-      </div>
-      <Button variant="ghost" iconOnly ariaLabel="Close mailbox 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(mailbox())" :title="mailbox()?.email || 'Mailbox'" description="Configured mailbox" 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">Username</dt><dd class="mt-1 font-mono text-neutral-900 dark:text-white">{{ mailbox()?.username }}</dd></div>
       <div><dt class="text-neutral-500 dark:text-neutral-400">State</dt><dd class="mt-1"><CloudStatusBadge :status="mailbox()?.status || 'inactive'" /></dd></div>
       <div class="sm:col-span-2"><dt class="text-neutral-500 dark:text-neutral-400">Address</dt><dd class="mt-1 break-all font-mono text-neutral-900 dark:text-white">{{ mailbox()?.email }}</dd></div>
     </dl>
-    <div class="flex gap-3 justify-end px-5 py-4 bg-neutral-50 dark:bg-neutral-800/60 border-neutral-200 border-t dark:border-neutral-700">
+  <template #footer>
+    <div class="flex gap-3 justify-end w-full">
       <Button tag="a" href="/inbox/activity" variant="secondary">Mail activity</Button>
       <Button tag="a" href="/inbox">Open inbox</Button>
     </div>
-  </section>
-</div>
+  </template>
+</Modal>

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

@@ -0,0 +1,105 @@
+<script client>
+interface ServerDefinition {
+  id: string
+  key: string
+  name: string
+  role: string
+  region: string
+  size: string
+  instances: number
+  diskGb: number | null
+  diskType: string | null
+  encrypted: boolean
+  domain: string | null
+  database: string | null
+}
+
+interface CloudOperation {
+  phase: string
+  sourceType: string | null
+  targetType: string | null
+  updatedAt: string | null
+  attempts: number
+}
+
+interface ServerDeployment {
+  id: string
+  stackName: string
+  environment: string | null
+  serverName: string
+  provider: string
+  publicIp: string | null
+  sshUser: string | null
+  recordedAt: string
+  status: 'attention' | 'deployed'
+  operation: CloudOperation | null
+}
+
+const server = useReactiveProp('server', null as ServerDefinition | null)
+const deployment = useReactiveProp('deployment', null as ServerDeployment | null)
+const emit = defineEmits()
+const title = derived(() => server()?.name || deployment()?.serverName || 'Server details')
+const detailsPath = derived(() => {
+  const identifier = server()?.key || deployment()?.id
+  return identifier ? `/servers/${encodeURIComponent(identifier)}` : '/servers'
+})
+
+function formatDate(value: string | null | undefined): string {
+  if (!value)
+    return 'Not recorded'
+  const date = new Date(value)
+  return Number.isNaN(date.getTime())
+    ? 'Not recorded'
+    : new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short' }).format(date)
+}
+
+function diskLabel(value: ServerDefinition | null): string {
+  if (!value || value.diskGb === null)
+    return 'Not set'
+  return `${value.diskGb} GB${value.diskType ? ` ${value.diskType}` : ''}`
+}
+</script>
+
+<Modal
+  :isOpen="Boolean(server() || deployment())"
+  :title="title()"
+  :description="server() ? 'Configuration' : 'Deployment state'"
+  size="lg"
+  @close="emit('close')"
+>
+  <dl :if="server()" class="grid gap-x-6 gap-y-4 grid-cols-1 sm:grid-cols-2 text-sm">
+    <div><dt class="text-neutral-500 dark:text-neutral-400">Role</dt><dd class="mt-1 font-medium text-neutral-900 dark:text-white">{{ server()?.role }}</dd></div>
+    <div><dt class="text-neutral-500 dark:text-neutral-400">Region</dt><dd class="mt-1 font-medium text-neutral-900 dark:text-white">{{ server()?.region }}</dd></div>
+    <div><dt class="text-neutral-500 dark:text-neutral-400">Size</dt><dd class="mt-1 font-medium text-neutral-900 dark:text-white">{{ server()?.size }}</dd></div>
+    <div><dt class="text-neutral-500 dark:text-neutral-400">Instances</dt><dd class="mt-1 font-medium text-neutral-900 dark:text-white">{{ server()?.instances }}</dd></div>
+    <div><dt class="text-neutral-500 dark:text-neutral-400">Disk</dt><dd class="mt-1 font-medium text-neutral-900 dark:text-white">{{ diskLabel(server()) }}</dd></div>
+    <div><dt class="text-neutral-500 dark:text-neutral-400">Encryption</dt><dd class="mt-1 font-medium text-neutral-900 dark:text-white">{{ server()?.encrypted ? 'Enabled' : 'Not enabled' }}</dd></div>
+    <div><dt class="text-neutral-500 dark:text-neutral-400">Domain</dt><dd class="mt-1 font-medium text-neutral-900 dark:text-white">{{ server()?.domain || 'Not set' }}</dd></div>
+    <div><dt class="text-neutral-500 dark:text-neutral-400">Database</dt><dd class="mt-1 font-medium text-neutral-900 dark:text-white">{{ server()?.database || 'Not set' }}</dd></div>
+  </dl>
+
+  <div :if="deployment()">
+    <dl class="grid gap-x-6 gap-y-4 grid-cols-1 sm:grid-cols-2 text-sm">
+      <div><dt class="text-neutral-500 dark:text-neutral-400">Stack</dt><dd class="mt-1 font-medium text-neutral-900 dark:text-white">{{ deployment()?.stackName }}</dd></div>
+      <div><dt class="text-neutral-500 dark:text-neutral-400">Environment</dt><dd class="mt-1 font-medium text-neutral-900 dark:text-white">{{ deployment()?.environment || 'Not mapped' }}</dd></div>
+      <div><dt class="text-neutral-500 dark:text-neutral-400">Provider</dt><dd class="mt-1 capitalize font-medium text-neutral-900 dark:text-white">{{ deployment()?.provider }}</dd></div>
+      <div><dt class="text-neutral-500 dark:text-neutral-400">Public IPv4</dt><dd class="mt-1 font-mono text-neutral-900 dark:text-white">{{ deployment()?.publicIp || 'Not recorded' }}</dd></div>
+      <div><dt class="text-neutral-500 dark:text-neutral-400">SSH user</dt><dd class="mt-1 font-medium text-neutral-900 dark:text-white">{{ deployment()?.sshUser || 'Not recorded' }}</dd></div>
+      <div><dt class="text-neutral-500 dark:text-neutral-400">State recorded</dt><dd class="mt-1 font-medium text-neutral-900 dark:text-white">{{ formatDate(deployment()?.recordedAt) }}</dd></div>
+    </dl>
+    <div :if="deployment()?.operation" class="mt-6 p-4 text-amber-900 dark:text-amber-100 bg-amber-50 dark:bg-amber-950/30 border border-amber-200 rounded-xl dark:border-amber-900/70">
+      <div class="flex gap-3 items-center justify-between"><h3 class="font-semibold text-sm">Resize operation</h3><CloudStatusBadge :status="deployment()?.status || 'attention'" /></div>
+      <p class="mt-2 text-sm">Phase {{ deployment()?.operation?.phase }}. Requested {{ deployment()?.operation?.sourceType || 'current size' }} to {{ deployment()?.operation?.targetType || 'target size' }}.</p>
+      <p class="mt-2 text-amber-700 text-xs dark:text-amber-300">Updated {{ formatDate(deployment()?.operation?.updatedAt) }} · {{ deployment()?.operation?.attempts || 0 }} attempts</p>
+    </div>
+  </div>
+
+  <template #footer>
+    <div class="flex justify-end w-full">
+      <Button tag="a" :href="detailsPath()" @click="emit('close')">
+        Open full details
+        <span class="h-4 w-4 i-hugeicons-arrow-right-01"></span>
+      </Button>
+    </div>
+  </template>
+</Modal>

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

@@ -140,10 +140,6 @@ const attentionDeployments = derived(() => deployments().filter(deployment => de
 const dnsResource = derived(() => network().find(resource => resource.id === 'network:dns') ?? null)
 const loadBalancer = derived(() => network().find(resource => resource.id === 'network:load-balancer') ?? null)
 const hasResults = derived(() => filteredServers().length > 0 || filteredDeployments().length > 0)
-const selectedServerDisk = derived(() => {
-  const server = selectedServer()
-  return server ? diskLabel(server) : ''
-})
 
 function formatDate(value: string | null): string {
   if (!value)
@@ -183,11 +179,6 @@ function closeInspector(): void {
   selectedDeployment.set(null)
 }
 
-function selectedDetailsPath(): string {
-  const identifier = selectedServer()?.key || selectedDeployment()?.id
-  return identifier ? `/servers/${encodeURIComponent(identifier)}` : '/servers'
-}
-
 async function loadServers(): Promise<void> {
   loading.set(true)
   loadError.set('')
@@ -214,11 +205,6 @@ async function loadServers(): Promise<void> {
   }
 }
 
-useEventListener('keydown', (event: KeyboardEvent) => {
-  if (event.key === 'Escape')
-    closeInspector()
-})
-
 onMount(() => {
   void loadServers()
 })
@@ -384,49 +370,9 @@ onMount(() => {
     </div>
   </section>
 
-  <div :if="selectedServer() || selectedDeployment()" class="flex fixed inset-0 z-50 items-center justify-center p-4 bg-black/50 dashboard-modal-layer" @click.self="closeInspector">
-    <section role="dialog" aria-modal="true" aria-labelledby="server-inspector-title" class="overflow-y-auto relative p-6 max-h-[90dvh] max-w-xl w-full bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700 shadow-xl">
-      <div class="flex gap-4 items-start justify-between">
-        <div>
-          <p class="font-semibold text-blue-600 text-xs uppercase dark:text-blue-400">{{ selectedServer() ? 'Configuration' : 'Deployment state' }}</p>
-          <h2 id="server-inspector-title" class="mt-1 font-semibold text-neutral-900 text-xl dark:text-white">{{ selectedServer()?.name || selectedDeployment()?.serverName }}</h2>
-        </div>
-        <Button variant="ghost" iconOnly ariaLabel="Close server details" @click="closeInspector"><span class="h-5 w-5 i-hugeicons-cancel-01"></span></Button>
-      </div>
-
-      <dl :if="selectedServer()" class="grid gap-x-6 gap-y-4 grid-cols-1 sm:grid-cols-2 mt-6 text-sm">
-        <div><dt class="text-neutral-500 dark:text-neutral-400">Role</dt><dd class="mt-1 font-medium text-neutral-900 dark:text-white">{{ selectedServer()?.role }}</dd></div>
-        <div><dt class="text-neutral-500 dark:text-neutral-400">Region</dt><dd class="mt-1 font-medium text-neutral-900 dark:text-white">{{ selectedServer()?.region }}</dd></div>
-        <div><dt class="text-neutral-500 dark:text-neutral-400">Size</dt><dd class="mt-1 font-medium text-neutral-900 dark:text-white">{{ selectedServer()?.size }}</dd></div>
-        <div><dt class="text-neutral-500 dark:text-neutral-400">Instances</dt><dd class="mt-1 font-medium text-neutral-900 dark:text-white">{{ selectedServer()?.instances }}</dd></div>
-        <div><dt class="text-neutral-500 dark:text-neutral-400">Disk</dt><dd class="mt-1 font-medium text-neutral-900 dark:text-white">{{ selectedServerDisk() }}</dd></div>
-        <div><dt class="text-neutral-500 dark:text-neutral-400">Encryption</dt><dd class="mt-1 font-medium text-neutral-900 dark:text-white">{{ selectedServer()?.encrypted ? 'Enabled' : 'Not enabled' }}</dd></div>
-        <div><dt class="text-neutral-500 dark:text-neutral-400">Domain</dt><dd class="mt-1 font-medium text-neutral-900 dark:text-white">{{ selectedServer()?.domain || 'Not set' }}</dd></div>
-        <div><dt class="text-neutral-500 dark:text-neutral-400">Database</dt><dd class="mt-1 font-medium text-neutral-900 dark:text-white">{{ selectedServer()?.database || 'Not set' }}</dd></div>
-      </dl>
-
-      <div :if="selectedDeployment()" class="mt-6">
-        <dl class="grid gap-x-6 gap-y-4 grid-cols-1 sm:grid-cols-2 text-sm">
-          <div><dt class="text-neutral-500 dark:text-neutral-400">Stack</dt><dd class="mt-1 font-medium text-neutral-900 dark:text-white">{{ selectedDeployment()?.stackName }}</dd></div>
-          <div><dt class="text-neutral-500 dark:text-neutral-400">Environment</dt><dd class="mt-1 font-medium text-neutral-900 dark:text-white">{{ selectedDeployment()?.environment || 'Not mapped' }}</dd></div>
-          <div><dt class="text-neutral-500 dark:text-neutral-400">Provider</dt><dd class="mt-1 capitalize font-medium text-neutral-900 dark:text-white">{{ selectedDeployment()?.provider }}</dd></div>
-          <div><dt class="text-neutral-500 dark:text-neutral-400">Public IPv4</dt><dd class="mt-1 font-mono text-neutral-900 dark:text-white">{{ selectedDeployment()?.publicIp || 'Not recorded' }}</dd></div>
-          <div><dt class="text-neutral-500 dark:text-neutral-400">SSH user</dt><dd class="mt-1 font-medium text-neutral-900 dark:text-white">{{ selectedDeployment()?.sshUser || 'Not recorded' }}</dd></div>
-          <div><dt class="text-neutral-500 dark:text-neutral-400">State recorded</dt><dd class="mt-1 font-medium text-neutral-900 dark:text-white">{{ formatDate(selectedDeployment()?.recordedAt || null) }}</dd></div>
-        </dl>
-        <div :if="selectedDeployment()?.operation" class="mt-6 p-4 text-amber-900 dark:text-amber-100 bg-amber-50 dark:bg-amber-950/30 border border-amber-200 rounded-xl dark:border-amber-900/70">
-          <div class="flex gap-3 items-center justify-between"><h3 class="font-semibold text-sm">Resize operation</h3><CloudStatusBadge :status="selectedDeployment()?.status || 'attention'" /></div>
-          <p class="mt-2 text-sm">Phase {{ selectedDeployment()?.operation?.phase }}. Requested {{ selectedDeployment()?.operation?.sourceType || 'current size' }} to {{ selectedDeployment()?.operation?.targetType || 'target size' }}.</p>
-          <p class="mt-2 text-amber-700 text-xs dark:text-amber-300">Updated {{ formatDate(selectedDeployment()?.operation?.updatedAt || null) }} · {{ selectedDeployment()?.operation?.attempts || 0 }} attempts</p>
-        </div>
-      </div>
-
-      <div class="flex justify-end mt-6 pt-5 border-neutral-200 border-t dark:border-neutral-700">
-        <Button tag="a" :href="selectedDetailsPath()" @click="closeInspector">
-          Open full details
-          <span class="h-4 w-4 i-hugeicons-arrow-right-01"></span>
-        </Button>
-      </div>
-    </section>
-  </div>
+  <ServerInspectorDialog
+    :server="selectedServer()"
+    :deployment="selectedDeployment()"
+    @close="closeInspector"
+  />
 </div>

package/resources/components/Dashboard/Jobs/JobHistory.stx

@@ -13,7 +13,6 @@ const selectedStatus = state('all')
 const searchQuery = state('')
 const isLoading = state(true)
 const loadError = state('')
-let searchTimer: ReturnType<typeof setTimeout> | undefined
 
 function totalPages(): number {
   return Math.max(1, Math.ceil(total() / perPage()))
@@ -32,11 +31,7 @@ function reloadFilters(): void {
   void loadJobs()
 }
 
-function reloadSearch(): void {
-  if (searchTimer)
-    clearTimeout(searchTimer)
-  searchTimer = setTimeout(reloadFilters, 250)
-}
+const reloadSearch = useDebounce(reloadFilters, 250)
 
 async function loadJobs(): Promise<void> {
   isLoading.set(true)
@@ -93,11 +88,6 @@ async function handleRetry(id: string | CustomEvent<string>): Promise<void> {
 onMount(() => {
   void loadJobs()
 })
-
-onDestroy(() => {
-  if (searchTimer)
-    clearTimeout(searchTimer)
-})
 </script>
 
 <div class="space-y-6">

package/resources/components/Dashboard/Library/ComponentsDashboard.stx

@@ -28,7 +28,6 @@ const loadError = state('')
 const search = state('')
 const selectedCategory = state('All')
 const dialogOpen = state(false)
-const componentName = state('')
 const saving = state(false)
 const saveError = state('')
 
@@ -79,7 +78,6 @@ async function loadComponents(): Promise<void> {
 }
 
 function openCreate(): void {
-  componentName.set('')
   saveError.set('')
   dialogOpen.set(true)
 }
@@ -89,20 +87,16 @@ function closeCreate(): void {
     dialogOpen.set(false)
 }
 
-function validName(): boolean {
-  return /^[A-Z][A-Za-z0-9]*$/.test(componentName().trim())
-}
-
-async function createComponent(): Promise<void> {
+async function createComponent(name: string): Promise<void> {
   saving.set(true)
   saveError.set('')
   try {
     await dashboardApi('/api/dashboard/library/components', {
       method: 'POST',
-      body: { name: componentName().trim() },
+      body: { name },
     })
     dialogOpen.set(false)
-    pushToast('success', 'Component created', { detail: `${componentName().trim()}.stx` })
+    pushToast('success', 'Component created', { detail: `${name}.stx` })
     await loadComponents()
   }
   catch (error) {
@@ -243,54 +237,11 @@ onMount(() => {
   </section>
 </div>
 
-<div :if="dialogOpen()" class="flex fixed inset-y-0 right-0 z-[55] items-center justify-center p-4 dashboard-modal-layer">
-  <button type="button" aria-label="Close component dialog" class="absolute inset-0 bg-black/45" @click="closeCreate()"></button>
-  <section
-    role="dialog"
-    aria-modal="true"
-    aria-label="Create component"
-    class="relative max-w-md w-full bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700 shadow-xl"
-  >
-    <form @submit.prevent="createComponent()">
-      <div class="p-6">
-        <h2 class="font-semibold text-gray-900 text-lg dark:text-white">Create component</h2>
-        <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Uses the native Stacks component scaffold in resources/components.</p>
-        <div
-          :if="saveError()"
-          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"
-          :text="saveError()"
-        ></div>
-        <label class="block mt-5">
-          <span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Name</span>
-          <input
-            x-model.trim="componentName"
-            required
-            pattern="[A-Z][A-Za-z0-9]*"
-            placeholder="OrderSummary"
-            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"
-          >
-          <span class="block mt-1 text-gray-500 text-xs dark:text-neutral-400">Use a PascalCase component name.</span>
-        </label>
-      </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
-          type="button"
-          variant="secondary"
-          :disabled="saving()"
-          @click="closeCreate()"
-        >
-          Cancel
-        </Button>
-        <Button
-          type="submit"
-          variant="primary"
-          :loading="saving()"
-          :disabled="saving() || !validName()"
-        >
-          Create component
-        </Button>
-      </footer>
-    </form>
-  </section>
-</div>
+<SourceScaffoldDialog
+  :open="dialogOpen()"
+  kind="component"
+  :busy="saving()"
+  :error="saveError()"
+  @close="closeCreate"
+  @submit="createComponent"
+/>

package/resources/components/Dashboard/Library/FunctionsDashboard.stx

@@ -20,7 +20,6 @@ const loading = state(true)
 const loadError = state('')
 const search = state('')
 const dialogOpen = state(false)
-const functionName = state('')
 const saving = state(false)
 const saveError = state('')
 
@@ -61,7 +60,6 @@ async function loadFunctions(): Promise<void> {
 }
 
 function openCreate(): void {
-  functionName.set('')
   saveError.set('')
   dialogOpen.set(true)
 }
@@ -71,20 +69,16 @@ function closeCreate(): void {
     dialogOpen.set(false)
 }
 
-function validName(): boolean {
-  return /^[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/.test(functionName().trim())
-}
-
-async function createFunction(): Promise<void> {
+async function createFunction(name: string): Promise<void> {
   saving.set(true)
   saveError.set('')
   try {
     await dashboardApi('/api/dashboard/library/functions', {
       method: 'POST',
-      body: { name: functionName().trim() },
+      body: { name },
     })
     dialogOpen.set(false)
-    pushToast('success', 'Function created', { detail: `${functionName().trim()}.ts` })
+    pushToast('success', 'Function created', { detail: `${name}.ts` })
     await loadFunctions()
   }
   catch (error) {
@@ -122,9 +116,11 @@ onMount(() => { void loadFunctions() })
   </section>
 </div>
 
-<div :if="dialogOpen()" class="flex fixed inset-y-0 right-0 z-[55] items-center justify-center p-4 dashboard-modal-layer">
-  <button type="button" aria-label="Close function dialog" class="absolute inset-0 bg-black/45" @click="closeCreate()"></button>
-  <section role="dialog" aria-modal="true" aria-label="Create function" class="relative max-w-md w-full bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700 shadow-xl">
-    <form @submit.prevent="createFunction()"><div class="p-6"><h2 class="font-semibold text-gray-900 text-lg dark:text-white">Create function</h2><p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Uses the native Stacks function scaffold in resources/functions.</p><div :if="saveError()" 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">{{ saveError() }}</div><label class="block mt-5"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Name</span><input x-model.trim="functionName" required pattern="[a-z][a-z0-9]*(?:-[a-z0-9]+)*" placeholder="send-invoice" 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" /><span class="block mt-1 text-gray-500 text-xs dark:text-neutral-400">Lowercase kebab-case. The generated export uses camelCase.</span></label></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 type="button" variant="secondary" :disabled="saving()" @click="closeCreate()">Cancel</Button><Button type="submit" variant="primary" :loading="saving()" :disabled="saving() || !validName()">Create function</Button></footer></form>
-  </section>
-</div>
+<SourceScaffoldDialog
+  :open="dialogOpen()"
+  kind="function"
+  :busy="saving()"
+  :error="saveError()"
+  @close="closeCreate"
+  @submit="createFunction"
+/>

package/resources/components/Dashboard/Library/SourceScaffoldDialog.stx

@@ -0,0 +1,95 @@
+<script client>
+type SourceKind = 'component' | 'function'
+
+const open = useReactiveProp('open', false)
+const kind = useReactiveProp('kind', 'component' as SourceKind)
+const busy = useReactiveProp('busy', false)
+const error = useReactiveProp('error', '')
+const sourceName = state('')
+const emit = defineEmits()
+const actionLabel = derived(() => `Create ${kind()}`)
+let wasOpen = false
+
+effect(() => {
+  const isOpen = open()
+  if (isOpen && !wasOpen)
+    sourceName.set('')
+  wasOpen = isOpen
+})
+
+function description(): string {
+  return kind() === 'component'
+    ? 'Uses the native Stacks component scaffold in resources/components.'
+    : 'Uses the native Stacks function scaffold in resources/functions.'
+}
+
+function pattern(): string {
+  return kind() === 'component'
+    ? '[A-Z][A-Za-z0-9]*'
+    : '[a-z][a-z0-9]*(?:-[a-z0-9]+)*'
+}
+
+function placeholder(): string {
+  return kind() === 'component' ? 'OrderSummary' : 'send-invoice'
+}
+
+function hint(): string {
+  return kind() === 'component'
+    ? 'Use a PascalCase component name.'
+    : 'Use lowercase kebab-case. The generated export uses camelCase.'
+}
+
+function valid(): boolean {
+  const value = sourceName().trim()
+  return kind() === 'component'
+    ? /^[A-Z][A-Za-z0-9]*$/.test(value)
+    : /^[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/.test(value)
+}
+
+function close(): void {
+  if (!busy())
+    emit('close')
+}
+
+function submit(): void {
+  if (valid())
+    emit('submit', sourceName().trim())
+}
+</script>
+
+<Modal
+  :isOpen="open()"
+  :title="actionLabel()"
+  :description="description()"
+  size="sm"
+  :closable="!busy()"
+  @close="close"
+>
+  <form id="source-scaffold-form" @submit.prevent="submit">
+    <label class="block">
+      <span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Name</span>
+      <input
+        x-model.trim="sourceName"
+        name="name"
+        required
+        :pattern="pattern()"
+        :placeholder="placeholder()"
+        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"
+      >
+      <span class="block mt-1 text-gray-500 text-xs dark:text-neutral-400">{{ hint() }}</span>
+    </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 type="button" variant="secondary" :disabled="busy()" @click="close">Cancel</Button>
+      <Button type="submit" form="source-scaffold-form" :loading="busy()" :disabled="!valid()">
+        {{ actionLabel() }}
+      </Button>
+    </div>
+  </template>
+</Modal>

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

@@ -0,0 +1,93 @@
+<script client>
+interface AssignmentOption {
+  name: string
+  description?: string | null
+}
+
+interface GuardOption {
+  value: string
+  label: string
+}
+
+const open = useReactiveProp('open', false)
+const title = useReactiveProp('title', 'Manage assignments')
+const description = useReactiveProp('description', '')
+const options = useReactiveProp('options', [] as AssignmentOption[])
+const initialSelected = useReactiveProp('selected', [] as string[])
+const guard = useReactiveProp('guard', '')
+const guardOptions = useReactiveProp('guardOptions', [] as GuardOption[])
+const loading = useReactiveProp('loading', false)
+const busy = useReactiveProp('busy', false)
+const emptyMessage = useReactiveProp('emptyMessage', 'No assignments are available.')
+const selected = state<string[]>([])
+const guardValue = state('')
+const emit = defineEmits()
+
+effect(() => {
+  selected.set([...initialSelected()])
+})
+
+effect(() => {
+  guardValue.set(guard())
+})
+
+function toggle(name: string): void {
+  const current = selected()
+  selected.set(current.includes(name)
+    ? current.filter(value => value !== name)
+    : [...current, name])
+}
+
+function changeGuard(): void {
+  emit('guard-change', guardValue())
+}
+
+function close(): void {
+  if (!busy())
+    emit('close')
+}
+
+function save(): void {
+  if (!loading() && !busy())
+    emit('save', [...selected()])
+}
+</script>
+
+<Drawer
+  :isOpen="open()"
+  :title="title()"
+  :description="description()"
+  :closable="!busy()"
+  @close="close"
+>
+  <div :if="guardOptions().length > 0" class="px-5 py-3 border-b border-zinc-200 dark:border-zinc-800">
+    <label for="assignment-guard" class="block mb-1.5 font-medium text-zinc-600 text-xs dark:text-zinc-400">Guard</label>
+    <select id="assignment-guard" x-model="guardValue" name="guard" class="px-3 py-1.5 w-full text-zinc-900 text-sm 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" @change="changeGuard">
+      <template :for="option in guardOptions()">
+        <option :value="option.value">{{ option.label }}</option>
+      </template>
+    </select>
+  </div>
+
+  <div class="px-5 py-4 space-y-2">
+    <div :if="loading()" class="flex gap-2 items-center py-6 text-zinc-500 text-sm">
+      <span class="h-4 w-4 animate-spin i-hugeicons-loading-03"></span>
+      Loading assignments...
+    </div>
+    <div :if="!loading() && options().length === 0" class="text-zinc-500 text-sm">{{ emptyMessage() }}</div>
+    <template :if="!loading()" :for="option in options()">
+      <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 name="assignments" type="checkbox" :value="option.name" :checked="selected().includes(option.name)" class="h-4 w-4 text-violet-600 border-zinc-300 rounded dark:border-zinc-700 focus:ring-violet-500" @change="toggle(option.name)" />
+        <span class="text-zinc-900 text-sm dark:text-zinc-100">{{ option.name }}</span>
+        <span class="text-zinc-500 text-xs">{{ option.description || '' }}</span>
+      </label>
+    </template>
+  </div>
+
+  <template #footer>
+    <div class="flex gap-2 items-center justify-end w-full">
+      <Button variant="secondary" :disabled="busy()" @click="close">Cancel</Button>
+      <Button :disabled="loading()" :loading="busy()" @click="save">Save</Button>
+    </div>
+  </template>
+</Drawer>