<!-- #region UI.Skeleton [C:2] [TYPE Component] [SEMANTICS skeleton,loading,placeholder,ui,atom] -->
<!-- @ingroup UI -->
<!-- @BRIEF Loading skeleton placeholder with line, card, circle, and table-row variants. -->
<!-- @LAYER UI -->
<!-- @UX_STATE Loading -> Animated pulse placeholder matching target element shape. -->
<script lang="ts">
  let {
    variant = "line" as "line" | "card" | "circle" | "row",
    width = "" as string,
    height = "" as string,
    cols = 3 as number,
    rows = 3 as number,
    class: className = "",
  } = $props();
</script>

{#if variant === "line"}
  <div
    class="animate-pulse bg-surface-muted rounded {width || 'w-full'} {height || 'h-4'} {className}"
  ></div>

{:else if variant === "card"}
  <div
    class="animate-pulse bg-surface-muted rounded-lg {width || 'w-full'} {height || 'h-24'} {className}"
  ></div>

{:else if variant === "circle"}
  <div
    class="animate-pulse bg-surface-muted rounded-full {width || 'w-10'} {height || 'h-10'} {className}"
  ></div>

{:else if variant === "row"}
  <div class="animate-pulse space-y-3 {className}">
    {#each Array(rows) as _}
      <div class="flex items-center gap-4">
        {#each Array(cols) as _}
          <div class="h-4 bg-surface-muted rounded flex-1"></div>
        {/each}
      </div>
    {/each}
  </div>
{/if}
<!-- #endregion UI.Skeleton -->
