<script setup lang="ts">
export type StandardUiState = 'LOADING' | 'EMPTY' | 'WARN' | 'ERROR' | 'EXPIRED' | 'UNAUTHORIZED' | 'FORBIDDEN' | 'READONLY' | 'DIRTY' | 'CONFLICT' | 'PROCESSING' | 'PARTIAL' | 'READY'
withDefaults(defineProps<{ state: StandardUiState; title?: string; message?: string; traceId?: string; retryable?: boolean }>(), { state: 'READY', retryable: false })
defineEmits<{ retry: [] }>()
</script>
<template>
  <div v-if="state !== 'READY'" class="ks-state" :data-state="state" role="status" :aria-busy="state === 'LOADING' || state === 'PROCESSING'">
    <strong>{{ title ?? state }}</strong><p v-if="message">{{ message }}</p><small v-if="traceId">Trace: {{ traceId }}</small><button v-if="retryable" type="button" @click="$emit('retry')">다시 시도</button><slot />
  </div><slot v-else name="ready" />
</template>
<style scoped>.ks-state { padding: var(--ks-space-4); border: 1px solid var(--ks-color-neutral-300); border-left-width: .35rem; border-radius: var(--ks-radius-sm); background: #fff; }.ks-state[data-state='WARN'],.ks-state[data-state='PARTIAL']{border-left-color:var(--ks-color-warning)}.ks-state[data-state='ERROR'],.ks-state[data-state='CONFLICT']{border-left-color:var(--ks-color-danger)}.ks-state p{margin:var(--ks-space-1) 0}.ks-state small{display:block;color:var(--ks-color-neutral-600)}</style>
