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()}