From 615f2d3c4866a9e85f3eca398f3f02100c4df355 Mon Sep 17 00:00:00 2001
From: release-bot <release-bot@ci>
Date: Sun, 8 Feb 2026 21:59:00 +0100
Subject: [PATCH] feat(ui): allow custom snippets in ui section header

---
 packages/ui/src/routes/Section.svelte | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/routes/Section.svelte b/packages/ui/src/routes/Section.svelte
index 360b120..0e039b7 100644
--- a/packages/ui/src/routes/Section.svelte
+++ b/packages/ui/src/routes/Section.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
   import { type Snippet } from 'svelte';
-  let { title, value, children, class: _class } = $props<{
+  let { title, value, header, children, class: _class } = $props<{
     title?: string;
     value?: unknown;
+    header?: Snippet;
     children?: Snippet;
     class?: string;
   }>();
@@ -11,7 +12,13 @@
 <section class="border-outline border-1/2 bg-layer-1 rounded border mb-4 p-4 flex flex-col gap-4 {_class}">
   <h3 class="flex gap-2 font-bold">
     {title}
-    <p class="font-normal! opacity-50!">{value}</p>
+    <div class="flex gap-4 w-full font-normal opacity-50 max-w-[75%] whitespace-pre overflow-hidden text-clip">
+      {#if header}
+        {@render header()}
+      {:else}
+        {value}
+      {/if}
+    </div>
   </h3>
   <div>
     {@render children()}