ColorPicker experimental

<script lang="ts">
  import * as ColorPicker from '@odbd/svelte/color-picker'
  import { parseColor } from '@odbd/svelte/color-picker'

  const swatches = ['#d4401a', '#1a8a5c', '#c07800', '#5a7fa8']
</script>

<!-- 패널 상시 노출 시연은 inline 모드가 정답이다: defaultOpen + Positioner는
     팝업을 영구로 띄워 페이지 본문을 덮고, hydration 시점엔 popper 좌표가
     붙지 않아 컨테이닝 블록 원점에 부유한다. -->
<ColorPicker.Root
  defaultValue={parseColor('#d4401a').toFormat('hsba')}
  inline
  style="max-width: 30rem;"
>
  <ColorPicker.Label>대표 색상</ColorPicker.Label>
  <ColorPicker.Control>
    <ColorPicker.Trigger aria-label="색상 선택">
      <ColorPicker.ValueSwatch />
    </ColorPicker.Trigger>
    <ColorPicker.ChannelInput channel="hex" aria-label="색상값" />
  </ColorPicker.Control>
  <ColorPicker.Content>
    <ColorPicker.Area xChannel="saturation" yChannel="brightness">
      <ColorPicker.AreaBackground />
      <ColorPicker.AreaThumb />
    </ColorPicker.Area>

    <ColorPicker.ChannelSlider channel="hue">
      <ColorPicker.ChannelSliderLabel>색조</ColorPicker.ChannelSliderLabel>
      <ColorPicker.ChannelSliderTrack />
      <ColorPicker.ChannelSliderThumb />
      <ColorPicker.ChannelSliderValueText />
    </ColorPicker.ChannelSlider>

    <ColorPicker.ChannelSlider channel="alpha">
      <ColorPicker.ChannelSliderLabel>투명도</ColorPicker.ChannelSliderLabel>
      <ColorPicker.ChannelSliderTrack>
        <ColorPicker.TransparencyGrid />
      </ColorPicker.ChannelSliderTrack>
      <ColorPicker.ChannelSliderThumb />
      <ColorPicker.ChannelSliderValueText />
    </ColorPicker.ChannelSlider>

    <ColorPicker.SwatchGroup aria-label="빠른 색상">
      {#each swatches as swatch}
        <ColorPicker.SwatchTrigger value={swatch}>
          <ColorPicker.Swatch value={swatch}>
            <ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
          </ColorPicker.Swatch>
        </ColorPicker.SwatchTrigger>
      {/each}
    </ColorPicker.SwatchGroup>

    <!-- FormatSelect는 이 데모에 넣지 않는다: Area(yChannel=brightness)와
         hue ChannelSlider가 HSB 채널에 고정되어 있어, rgba/hsla로 전환하는
         순간 zag가 'Unknown color channel' 예외를 던진다. 포맷 전환 UI는
         채널 파트 전체를 포맷별 View로 감싸는 구성에서만 안전하다. -->
    <ColorPicker.View format="hsba">
      <ColorPicker.ChannelInput channel="hue" aria-label="색조 값" />
      <ColorPicker.ChannelInput channel="saturation" aria-label="채도" />
      <ColorPicker.ChannelInput channel="brightness" aria-label="명도" />
      <ColorPicker.ChannelInput channel="alpha" aria-label="알파" />
    </ColorPicker.View>
  </ColorPicker.Content>
  <ColorPicker.HiddenInput name="brand-color" />
</ColorPicker.Root>