css refactor

frontend/src/lib/ui/PageHeader.svelte

@@ -6,22 +6,35 @@
 @LAYER:     Atom
 -->
 
-<script lang="ts">
+<script>
+  // [SECTION: IMPORTS]
+  import { cn } from "$lib/utils.js";
+  // [/SECTION: IMPORTS]
+
   // [SECTION: PROPS]
-  export let title: string = "";
+  let {
+    title = "",
+    class: className = "",
+    subtitle,
+    actions,
+    ...rest
+  } = $props();
   // [/SECTION: PROPS]
 </script>
 
 <!-- [SECTION: TEMPLATE] -->
-<header class="flex items-center justify-between mb-8">
+<header
+  class={cn("flex items-center justify-between mb-8", className)}
+  {...rest}
+>
   <div class="space-y-1">
     <h1 class="text-3xl font-bold tracking-tight text-gray-900">{title}</h1>
-    <slot name="subtitle" />
+    {@render subtitle?.()}
   </div>
   <div class="flex items-center gap-4">
-    <slot name="actions" />
+    {@render actions?.()}
   </div>
 </header>
 <!-- [/SECTION: TEMPLATE] -->
 
-<!-- [/DEF:PageHeader:Component] -->
+<!-- [/DEF:PageHeader:Component] -->