ClientOnly experimental

<script lang="ts">
  import { ClientOnly } from '@odbd/svelte/client-only'

  // ClientOnly의 fallback은 서버(SSR)와 첫 하이드레이션에서 보인다. 차이를 눈으로
  // 확인하려면 서브트리를 remount하면 된다 — remount 직후 한 프레임은 fallback이,
  // 곧바로 클라이언트 콘텐츠가 나타난다.
  let mountKey = $state(0)
  let lastMountedAt = $state<string | null>(null)
</script>

<div class="client-only-demo">
  <p class="client-only-caption">
    fallback은 서버 렌더와 하이드레이션 직전 상태예요. remount하면 fallback → 클라이언트 콘텐츠
    전환을 직접 볼 수 있어요.
  </p>

  {#key mountKey}
    <div class="client-only-stage">
      <ClientOnly>
        {#snippet fallback()}
          <p class="client-only-fallback">서버 렌더(자리표시자): 시각을 아직 알 수 없어요.</p>
        {/snippet}
        <p class="client-only-value">
          클라이언트 렌더: {new Date().toLocaleTimeString()}
        </p>
      </ClientOnly>
    </div>
  {/key}

  <button
    type="button"
    class="odbd-button"
    data-variant="outline"
    data-size="sm"
    onclick={() => {
      mountKey += 1
      lastMountedAt = new Date().toLocaleTimeString()
    }}
  >
    서브트리 remount
  </button>

  {#if lastMountedAt}
    <p class="client-only-meta">마지막 remount: {lastMountedAt}</p>
  {/if}
</div>

<style>
  .client-only-demo {
    display: grid;
    gap: var(--odbd-space-3);
    justify-items: start;
    max-width: 30rem;
  }

  .client-only-caption {
    margin: 0;
    color: var(--odbd-color-muted-foreground);
    font-size: var(--odbd-font-size-sm);
  }

  .client-only-stage {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 3rem;
    padding: var(--odbd-space-4);
    border: 1px dashed var(--odbd-color-border);
    border-radius: var(--odbd-radius-md);
    background: var(--odbd-color-muted);
  }

  .client-only-fallback {
    margin: 0;
    color: var(--odbd-color-muted-foreground);
    font-size: var(--odbd-font-size-sm);
  }

  .client-only-value {
    margin: 0;
    color: var(--odbd-color-foreground);
  }

  .client-only-meta {
    margin: 0;
    color: var(--odbd-color-muted-foreground);
    font-size: var(--odbd-font-size-sm);
  }
</style>