<!-- #region PageHeader [C:2] [TYPE Component] [SEMANTICS page-header, title, layout, atom, header] -->
<!-- @BRIEF Page header component with title, subtitle, and action slot. -->
<!-- @LAYER UI -->
<!--
@SEMANTICS: page-header, layout-atom
@PURPOSE:   Standardized page header with title and action area.
@LAYER     Atom
@RELATION  DEPENDS_ON -> [EXT:frontend:Utils]

@UX_STATE: TitleOnly -> Header shows page title without optional slots.
@UX_STATE: WithContext -> Subtitle and action slots expand the header composition.
-->

<script lang="ts">
  // [SECTION: IMPORTS]
  import { cn } from "$lib/utils.js";
  // [/SECTION: IMPORTS]

  // [SECTION: PROPS]
  let {
    title = "",
    class: className = "",
    subtitle = null,
    actions = null,
    ...rest
  } = $props();
  // [/SECTION: PROPS]
</script>

<!-- [SECTION: TEMPLATE] -->
<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-text">{title}</h1>
    {@render subtitle?.()}
  </div>
  <div class="flex items-center gap-4">
    {@render actions?.()}
  </div>
</header>
<!-- [/SECTION: TEMPLATE] -->

<!-- #endregion PageHeader -->
