Resizable

<script lang="ts">
  import { Resizable } from 'sv5ui';
</script>

<!-- The group fills its parent, so give the parent a height. -->
<div class="h-64 overflow-hidden rounded-xl border border-outline-variant">
  <Resizable
    panes={[
      { id: 'list', defaultSize: 35, content: list },
      { id: 'detail', content: detail }
    ]}
  />
</div>

{#snippet list()}
  <div class="h-full p-4">Conversations</div>
{/snippet}

{#snippet detail()}
  <div class="h-full p-4">Message</div>
{/snippet}

<!-- A pane without defaultSize shares whatever the others leave, so the
     detail pane above starts at 65. -->

<!-- horizontal (default): panes sit side by side, handles are vertical -->
<Resizable direction="horizontal" {panes} />

<!-- vertical: panes stack, handles are horizontal. The arrow keys follow the
     axis, so Up and Down drive a vertical group. -->
<Resizable direction="vertical" {panes} />

<!-- A pane's content is just a snippet, so a group can hold another group.
     This is the usual editor shell: a sidebar, then a stack of editor and
     terminal, then an inspector. -->
<Resizable
  panes={[
    { id: 'files', defaultSize: 22, minSize: '160px', collapsible: true, content: files },
    { id: 'center', minSize: 30, content: center },
    { id: 'inspector', defaultSize: 22, collapsible: true, content: inspector }
  ]}
/>

{#snippet center()}
  <Resizable
    direction="vertical"
    panes={[
      { id: 'editor', defaultSize: 70, minSize: 20, content: editor },
      { id: 'terminal', minSize: 15, collapsible: true, content: terminal }
    ]}
  />
{/snippet}

<!-- Each group keeps its own percentages, so the inner layout survives a
     drag of the outer one. -->

<Resizable
  panes={[
    {
      id: 'sidebar',
      defaultSize: 25,
      // A percentage is measured against the group.
      minSize: 15,
      maxSize: 40,
      content: sidebar
    },
    {
      id: 'main',
      // A pixel string is resolved against the measured group instead, which
      // is what you want for content with a real minimum width. It keeps
      // meaning the same thing when the window is resized.
      minSize: '320px',
      content: main
    }
  ]}
/>

<script lang="ts">
  import { Resizable } from 'sv5ui';

  let sizes = $state<number[]>([]);
</script>

<!-- Drag the first handle all the way right. The middle pane shrinks to its
     minimum, and instead of stopping there the drag carries on into the
     third pane. That is chained resizing, and it is what keeps a multi-pane
     layout from feeling stuck. -->
<Resizable
  bind:sizes
  panes={[
    { id: 'a', defaultSize: 25, minSize: 15, content: a },
    { id: 'b', defaultSize: 40, minSize: 15, content: b },
    { id: 'c', defaultSize: 35, minSize: 15, content: c }
  ]}
/>

<p>{sizes.map((n) => n.toFixed(1)).join(' / ')}</p>

<!-- collapsible lets a pane snap shut when it is dragged past its minimum,
     and spring back when it is dragged out again. It only collapses when the
     drag has enough left over to swallow the whole pane, so a small
     overshoot does not close it by accident. -->
<Resizable
  onCollapse={(id, collapsed) => console.log(id, collapsed)}
  panes={[
    {
      id: 'sidebar',
      defaultSize: 25,
      minSize: 15,
      collapsible: true,
      // collapsedSize keeps a sliver on screen instead of closing fully,
      // which is how an icon rail is built.
      collapsedSize: 6,
      content: sidebar
    },
    { id: 'main', content: main }
  ]}
/>

<!-- Enter on a focused handle collapses or restores the pane before it. -->

<!-- resizable: false pins a pane. The handles beside it stop responding to
     the pointer and the keyboard, and a chained drag starting anywhere else
     in the group never takes space from it either. -->
<Resizable
  panes={[
    { id: 'rail', defaultSize: 12, resizable: false, content: rail },
    { id: 'list', defaultSize: 30, minSize: 15, content: list },
    { id: 'reader', minSize: 20, content: reader }
  ]}
/>

<script lang="ts">
  import { Resizable, Button } from 'sv5ui';

  // sizes is bindable in both directions: it reports the current layout, and
  // assigning an array applies it. The values are percentages and are
  // normalized to add up to 100, so [1, 1] and [50, 50] mean the same thing.
  let sizes = $state<number[]>([30, 70]);
</script>

<Resizable bind:sizes {panes} />

<Button label="Even" onclick={() => (sizes = [50, 50])} />
<Button label="Reading" onclick={() => (sizes = [20, 80])} />

<!-- storageKey writes the layout to localStorage on every settled change,
     alongside the list of pane ids. -->
<Resizable storageKey="workspace-layout" {panes} />

<!-- What is stored looks like this:
     { "ids": ["sidebar", "main"], "sizes": [24.5, 75.5] }

     On mount the stored layout is only restored when its ids still match the
     current panes. Add, remove or rename a pane and the old entry is ignored
     and the defaults apply, so yesterday's proportions are never stretched
     over a layout they were not measured for.

     Every storage access is wrapped in try/catch, so private mode or a
     browser that blocks site data degrades to a non-persistent group rather
     than an exception. -->

<script lang="ts">
  import { Resizable, Button, type ResizableApi } from 'sv5ui';

  let api = $state<ResizableApi>();
</script>

<Resizable bind:api {panes} />

<Button label="Hide sidebar" onclick={() => api?.collapse('sidebar')} />
<Button label="Show sidebar" onclick={() => api?.expand('sidebar')} />
<Button label="Toggle" onclick={() => api?.toggle('sidebar')} />

<!-- resize sets one pane exactly; the neighbours absorb the difference -->
<Button label="Sidebar to 30%" onclick={() => api?.resize('sidebar', 30)} />

<!-- setSizes replaces the whole layout, reset returns to the defaultSize
     values declared on the panes -->
<Button label="Thirds" onclick={() => api?.setSizes([33.3, 33.3, 33.4])} />
<Button label="Reset" onclick={() => api?.reset()} />

<p>{api?.sizes.join(', ')} · collapsed: {api?.collapsed.join(', ')}</p>

<!-- expand() restores the size the pane had before it collapsed, and falls
     back to its minimum when there is no earlier size to return to. -->

<script lang="ts">
  import { Resizable, Icon } from 'sv5ui';
</script>

<Resizable {panes}>
  {#snippet handle({ index, active, direction })}
    <Icon
      name={direction === 'horizontal' ? 'lucide:grip-vertical' : 'lucide:grip-horizontal'}
      class={active ? 'size-4 text-primary' : 'size-4 text-on-surface/40'}
    />
  {/snippet}
</Resizable>

<!-- The snippet replaces the grip inside the handle, not the handle itself,
     so the hit area, the focus ring and the separator semantics stay. -->

<Resizable
  {panes}
  onSizesChange={(sizes) => (layout = sizes)}
  onResizeStart={(index) => console.log('handle', index)}
  onResizeEnd={(sizes) => save(sizes)}
  onCollapse={(id, collapsed) => console.log(id, collapsed)}
/>

<!-- onSizesChange fires for every layout change, whichever input caused it:
     a drag, an arrow key, an api call or an assignment to bind:sizes.
     onResizeStart and onResizeEnd bracket a pointer drag, which makes
     onResizeEnd the right place to persist a layout by hand. -->

<script lang="ts">
  import { Resizable, ScrollArea } from 'sv5ui';
</script>

<!-- A pane clips its content: the slot is overflow-hidden so a wide child
     cannot push the layout around. Long content therefore needs its own
     scroller, and ScrollArea is the one that keeps the styling consistent. -->
<Resizable panes={[{ id: 'list', defaultSize: 30, content: list }, { id: 'body', content: body }]} />

{#snippet list()}
  <ScrollArea class="h-full">
    {#each conversations as item (item.id)}
      <Row {item} />
    {/each}
  </ScrollArea>
{/snippet}

<!-- color tints the handle on hover and while dragging -->
<Resizable color="secondary" {panes} />

<!-- size sets the thickness of the handle and its grip -->
<Resizable size="lg" {panes} />

<!-- disabled freezes the layout: no dragging, no keyboard -->
<Resizable disabled {panes} />

<!-- Four slots. Pane classes can also be set per pane through pane.class -->
<Resizable
  {panes}
  ui={{
    root: 'rounded-xl border border-outline-variant',
    handle: 'bg-transparent hover:bg-primary/20',
    grip: 'bg-primary'
  }}
/>

import { defineConfig } from 'sv5ui';

defineConfig({
  resizable: {
    defaultVariants: { color: 'secondary', size: 'sm' },
    slots: { handle: 'bg-outline-variant' }
  }
});