SplitPaneexperimental

<div class="border-border-subtle h-80 w-full overflow-hidden rounded-xl border">
  <SplitPane bind:ratio={ideRatio} defaultRatio={0.28} min="18%" max="55%">
    {#snippet start()}
      <nav aria-label="Demo sidebar" class="bg-surface-elevated h-full overflow-auto p-3">
        <p class="text-text-tertiary mb-2 px-1 text-xs font-semibold tracking-wide uppercase">
          Explorer
        </p>
        <ul class="space-y-0.5 text-sm">
          <li class="text-text-secondary flex items-center gap-2 px-1 py-1">
            <FolderOpenIcon class="size-4" /> src
          </li>
          <li class="text-text-secondary flex items-center gap-2 px-1 py-1 pl-5">
            <FileIcon class="size-4" /> App.svelte
          </li>
          <li
            class="text-text-primary bg-primary-subtle flex items-center gap-2 rounded px-1 py-1 pl-5 font-medium"
          >
            <FileIcon class="size-4" /> main.ts
          </li>
          <li class="text-text-secondary flex items-center gap-2 px-1 py-1 pl-5">
            <FileIcon class="size-4" /> styles.css
          </li>
          <li class="text-text-secondary flex items-center gap-2 px-1 py-1">
            <FileIcon class="size-4" /> README.md
          </li>
        </ul>
      </nav>
    {/snippet}
    {#snippet end()}
      <main class="h-full overflow-auto p-4 font-mono text-sm">
        <p class="text-text-tertiary">// main.ts</p>
        <p class="text-text-secondary">import App from './App.svelte';</p>
        <p class="text-text-secondary">import './styles.css';</p>
        <p class="text-text-secondary mt-2">export default new App(options);</p>
      </main>
    {/snippet}
  </SplitPane>
</div>

<div class="border-border-subtle h-96 w-full overflow-hidden rounded-xl border">
  <SplitPane orientation="vertical" defaultRatio={0.55} min="20%" max="85%">
    {#snippet start()}
      <section aria-label="Preview" class="bg-surface-elevated h-full overflow-auto p-4">
        <p class="text-text-primary mb-1 text-sm font-semibold">Preview</p>
        <p class="text-text-secondary text-sm leading-relaxed">
          Rendered output goes here. Resize the divider below to give the log more room when
          you need to read a long stack trace.
        </p>
      </section>
    {/snippet}
    {#snippet end()}
      <section aria-label="Build log" class="h-full overflow-auto p-4 font-mono text-xs">
        <p class="text-success">✓ build succeeded in 412ms</p>
        <p class="text-text-tertiary">→ 24 modules transformed</p>
        <p class="text-text-tertiary">→ dist/index.js 12.4 kB</p>
        <p class="text-text-secondary">! 1 unused export in utils.ts</p>
        <p class="text-text-tertiary">→ watching for changes…</p>
      </section>
    {/snippet}
  </SplitPane>
</div>

<div class="w-full space-y-3">
  <div class="flex items-center gap-3">
    <Badge intent={sidebarCollapsed ? 'neutral' : 'success'} variant="soft" size="sm">
      {sidebarCollapsed ? 'sidebar collapsed' : 'sidebar visible'}
    </Badge>
    <span class="text-text-tertiary text-xs"
      >Drag the divider left, or focus it and press Enter.</span
    >
  </div>
  <div class="border-border-subtle h-72 w-full overflow-hidden rounded-xl border">
    <SplitPane
      collapsible
      defaultRatio={0.3}
      min="15%"
      max="60%"
      onCollapsedChange={(c) => (sidebarCollapsed = c)}
    >
      {#snippet start()}
        <nav aria-label="Demo sidebar" class="bg-surface-elevated h-full overflow-auto p-3">
          <p class="text-text-primary mb-2 text-sm font-semibold">Filters</p>
          <ul class="text-text-secondary space-y-1 text-sm">
            <li>Status</li>
            <li>Assignee</li>
            <li>Priority</li>
            <li>Label</li>
          </ul>
        </nav>
      {/snippet}
      {#snippet end()}
        <main class="h-full overflow-auto p-4">
          <p class="text-text-secondary text-sm leading-relaxed">
            Main content. Collapse the sidebar to reclaim its width. Re-expand it by pressing
            Enter on the divider, and the previous ratio is restored.
          </p>
        </main>
      {/snippet}
    </SplitPane>
  </div>
</div>

<div class="border-border-subtle h-96 w-full overflow-hidden rounded-xl border">
  <SplitPane defaultRatio={0.42} min="25%" max="65%">
    {#snippet start()}
      <div class="flex h-full flex-col">
        <div class="flex-1 space-y-3 overflow-auto p-4">
          <div class="bg-surface-elevated ml-auto max-w-[80%] rounded-2xl px-3 py-2 text-sm">
            Build me a pricing table.
          </div>
          <div class="text-text-secondary flex max-w-[85%] items-start gap-2 text-sm">
            <SparklesIcon class="text-primary mt-0.5 size-4 shrink-0" />
            <span>Done. The component is rendering in the panel on the right.</span>
          </div>
        </div>
        <div class="border-border-subtle border-t p-3">
          <div
            class="border-border-default text-text-tertiary rounded-xl border px-3 py-2 text-sm"
          >
            Ask a follow-up…
          </div>
        </div>
      </div>
    {/snippet}
    {#snippet end()}
      <section aria-label="Preview" class="bg-surface-elevated h-full overflow-auto p-6">
        <p class="text-text-primary mb-4 text-sm font-semibold">Artifact preview</p>
        <div class="border-border-subtle grid grid-cols-3 gap-3">
          {#each ['Starter', 'Pro', 'Team'] as tier (tier)}
            <div class="border-border-subtle rounded-xl border p-3 text-center">
              <p class="text-text-primary text-sm font-semibold">{tier}</p>
              <p class="text-text-tertiary text-xs">per month</p>
            </div>
          {/each}
        </div>
      </section>
    {/snippet}
  </SplitPane>
</div>