ReasoningDisclosureexperimental

<script lang="ts">
  import { ReasoningDisclosure, type ChatReasoningPart } from '@urbicon-ui/blocks';

  // A finished reasoning trace. `durationMs` drives the "Thought for Xs" label;
  // the body stays collapsed by default so it never crowds the answer.
  const reasoning: ChatReasoningPart = {
    type: 'reasoning',
    durationMs: 4200,
    text: `The user is asking for a **date range**, so a single DatePicker will not do.

- \`DatePicker\` binds one \`Date\`.
- For two bounds I want the range preset, keeping one popover.

I'll suggest \`DatePicker\` with \`mode="range"\` and note the \`onValueChange\` shape.`
  };
</script>

<ReasoningDisclosure {reasoning} />

<script lang="ts">
  import { onDestroy } from 'svelte';
  import { Button, ReasoningDisclosure, type ChatReasoningPart } from '@urbicon-ui/blocks';

  const full = `Let me work through the layout.

First, the sidebar is fixed-width on desktop but collapses under \`md\`. That points at **SidebarLayout**, not a hand-rolled grid.

Then the main column needs its own scroll region so the header can pin. \`fit="viewport"\` on the content handles that.`;

  // The caller drives `streaming` and grows `text` from the transport; while
  // streaming the header pulses "Thinking", then settles to the duration.
  let reasoning = $state<ChatReasoningPart>({ type: 'reasoning', text: '' });
  let streaming = $state(false);
  let timer: ReturnType<typeof setInterval> | undefined;

  function stream() {
    clearInterval(timer);
    const startedAt = Date.now();
    let i = 0;
    reasoning = { type: 'reasoning', text: '' };
    streaming = true;
    timer = setInterval(() => {
      i += 4;
      if (i >= full.length) {
        clearInterval(timer);
        streaming = false;
        reasoning = { type: 'reasoning', text: full, durationMs: Date.now() - startedAt };
        return;
      }
      reasoning = { ...reasoning, text: full.slice(0, i) };
    }, 40);
  }

  onDestroy(() => clearInterval(timer));
</script>

<div class="space-y-3">
  <ReasoningDisclosure {reasoning} {streaming} defaultOpen />
  <Button size="sm" variant="outlined" onclick={stream}>Stream reasoning</Button>
</div>

<script lang="ts">
  import { ReasoningDisclosure, type ChatReasoningPart } from '@urbicon-ui/blocks';

  const reasoning: ChatReasoningPart = {
    type: 'reasoning',
    durationMs: 3000,
    text: 'Kurz abgewogen: `Toast` fuer die Bestaetigung, kein `Dialog` — die Aktion ist nicht destruktiv.'
  };

  // formatDuration receives whole seconds; thinkingLabel / reasoningLabel cover
  // the streaming and no-duration cases. Together they fully localize the header.
  const formatDuration = (s: number) => `${s} Sekunden nachgedacht`;
</script>

<ReasoningDisclosure
  {reasoning}
  {formatDuration}
  thinkingLabel="Denke nach"
  reasoningLabel="Überlegung"
/>