FloatingPanel experimental

<script lang="ts">
  import * as FloatingPanel from '@odbd/svelte/floating-panel'
</script>

<!-- 데스크톱 창 패턴 그대로 시연한다: 기본은 닫힘, 트리거로 열고, 뷰포트
     전체가 이동 범위다(경계를 좁히고 싶을 때만 getBoundaryEl을 쓴다).
     positioner는 fixed라 미리보기 카드의 overflow에 잘리지 않는다. -->
<div class="floating-panel-demo">
  <FloatingPanel.Root defaultSize={{ width: 320, height: 200 }}>
    <FloatingPanel.Trigger>패널 열기</FloatingPanel.Trigger>
    <FloatingPanel.Positioner>
      <FloatingPanel.Content>
        <FloatingPanel.DragTrigger>
          <FloatingPanel.Header>
            <FloatingPanel.Title>띄움 패널</FloatingPanel.Title>
            <FloatingPanel.Control>
              <!-- 세 트리거를 모두 렌더하면 recipe가 control의 data-staged로
                   최소화/최대화 ↔ 복원을 전환한다 -->
              <FloatingPanel.StageTrigger stage="minimized" aria-label="최소화"
                >_</FloatingPanel.StageTrigger
              >
              <FloatingPanel.StageTrigger stage="maximized" aria-label="최대화"
                >▣</FloatingPanel.StageTrigger
              >
              <FloatingPanel.StageTrigger stage="default" aria-label="복원"
                >❐</FloatingPanel.StageTrigger
              >
              <FloatingPanel.CloseTrigger aria-label="닫기">✕</FloatingPanel.CloseTrigger>
            </FloatingPanel.Control>
          </FloatingPanel.Header>
        </FloatingPanel.DragTrigger>
        <FloatingPanel.Body
          >헤더를 끌어 패널을 옮기고 모서리를 끌어 크기를 바꾸세요.</FloatingPanel.Body
        >
        <FloatingPanel.ResizeTrigger axis="se" />
      </FloatingPanel.Content>
    </FloatingPanel.Positioner>
  </FloatingPanel.Root>
</div>

<style>
  .floating-panel-demo {
    display: grid;
    justify-items: center;
  }

  .floating-panel-demo :global(.odbd-floating-panel__trigger) {
    inline-size: fit-content;
  }
</style>