@vestow/vue 0.1.0

package/src/components/video-player/VideoPlayer.vue

@@ -0,0 +1,472 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import type { VideoPlayerControl, VideoPlayerPlacement, VideoPlayerVolumeLayout } from './index'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { useI18n } from '../../composables/useI18n'
+import {
+  Gauge,
+  Maximize,
+  Minimize,
+  Pause,
+  Play,
+  RotateCcw,
+  RotateCw,
+  Volume1,
+  Volume2,
+  VolumeX,
+} from '../../lib/icons'
+import { cn } from '../../lib/utils'
+import { clampMediaTime, formatMediaTime, mediaVolumeLevel } from '../../variants/lib/media'
+import { Button } from '../button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../dropdown-menu'
+import { Slider } from '../slider'
+
+const props = withDefaults(
+  defineProps<ClassProps & {
+    src: string
+    /**
+     * Ảnh bìa. Có bìa thì player mở ra với một nút chạy lớn giữa khung và
+     * THANH ĐIỀU KHIỂN ẨN cho tới lần chạy đầu — trước đó nó không có gì để nói.
+     */
+    poster?: string
+    /** Hiện trên thanh điều khiển, cắt bớt khi hẹp. */
+    title?: string
+    autoplay?: boolean
+    loop?: boolean
+    muted?: boolean
+    preload?: 'none' | 'metadata' | 'auto'
+    /** Mục nào hiện trên thanh. Mặc định là đủ cả bảy. */
+    controls?: VideoPlayerControl[]
+    placement?: VideoPlayerPlacement
+    volumeLayout?: VideoPlayerVolumeLayout
+    skipSeconds?: number
+    rates?: number[]
+  }>(),
+  {
+    autoplay: false,
+    loop: false,
+    muted: false,
+    preload: 'metadata',
+    controls: () => ['play', 'skip', 'seek', 'time', 'rate', 'volume', 'fullscreen'],
+    placement: 'overlay',
+    volumeLayout: 'inline',
+    skipSeconds: 10,
+    rates: () => [0.5, 0.75, 1, 1.25, 1.5, 2],
+  },
+)
+
+const emit = defineEmits<{
+  play: []
+  pause: []
+  ended: []
+  timeupdate: [seconds: number]
+}>()
+
+const { t } = useI18n()
+
+/**
+ * Xin toàn màn hình cho CÁI VỎ, không cho thẻ `<video>`.
+ *
+ * Đưa chính thẻ video vào toàn màn hình thì trình duyệt thay bằng bộ điều khiển
+ * mặc định của nó và thanh của mình biến mất — đúng thứ component này đang dựng.
+ */
+const shell = ref<HTMLElement>()
+const video = ref<HTMLVideoElement>()
+
+const playing = ref(false)
+/**
+ * `started` KHÁC `playing`: nó chỉ bật một lần và không tắt lại.
+ *
+ * Dùng `playing` để ẩn tấm bìa thì bấm tạm dừng là bìa quay lại đè lên đúng
+ * khung hình người ta vừa dừng để nhìn.
+ */
+const started = ref(false)
+const currentTime = ref(0)
+const duration = ref(0)
+const volume = ref(1)
+const muted = ref(props.muted)
+const rate = ref('1')
+const fullscreen = ref(false)
+
+function has(control: VideoPlayerControl): boolean {
+  return props.controls.includes(control)
+}
+
+/** Bìa chỉ che khi chưa từng chạy; sau đó không bao giờ quay lại. */
+const showPoster = computed(() => props.poster !== undefined && !started.value)
+/** Có bìa thì thanh im lặng cho tới lần chạy đầu. */
+const showBar = computed(() => props.controls.length > 0 && !showPoster.value)
+
+const volumeIcon = computed(() => {
+  const level = mediaVolumeLevel(volume.value, muted.value)
+  if (level === 'off')
+    return VolumeX
+
+  return level === 'low' ? Volume1 : Volume2
+})
+
+/**
+ * Tắt thanh tua thì hai mốc thời gian gộp làm một ô `0:12 / 1:00`; bật thì
+ * chúng tách ra hai đầu thanh, đúng bố cục quen thuộc của một trình phát.
+ */
+const splitTime = computed(() => has('seek'))
+
+function toggle(): void {
+  const el = video.value
+  if (!el)
+    return
+
+  if (el.paused)
+    void el.play().catch(() => {})
+  else
+    el.pause()
+}
+
+function skip(seconds: number): void {
+  const el = video.value
+  if (!el)
+    return
+
+  el.currentTime = clampMediaTime(el.currentTime + seconds, el.duration)
+}
+
+function seek(value: number[] | undefined): void {
+  const el = video.value
+  if (!el || value?.[0] === undefined)
+    return
+
+  el.currentTime = clampMediaTime(value[0], el.duration)
+}
+
+/** Kéo âm lượng lên thì BỎ tắt tiếng luôn — không ai kéo thanh đó để vẫn im. */
+function changeVolume(value: number[] | undefined): void {
+  const el = video.value
+  if (!el || value?.[0] === undefined)
+    return
+
+  el.volume = value[0]
+  el.muted = value[0] === 0
+}
+
+function toggleMute(): void {
+  const el = video.value
+  if (el)
+    el.muted = !el.muted
+}
+
+/**
+ * Nhận `unknown` chứ không phải `string`: radio group của Reka phát ra
+ * `AcceptableValue`, trong đó có cả `null`.
+ */
+function changeRate(value: unknown): void {
+  if (typeof value !== 'string')
+    return
+
+  rate.value = value
+  if (video.value)
+    video.value.playbackRate = Number(value)
+}
+
+/**
+ * Nuốt lỗi là cố ý: `requestFullscreen()` bị từ chối khi tài liệu không có
+ * quyền — trong iframe thiếu `allowfullscreen` chẳng hạn — và một lỗi chưa bắt
+ * thì console đỏ lên trong khi người dùng chẳng có gì để làm.
+ */
+function toggleFullscreen(): void {
+  if (document.fullscreenElement)
+    void document.exitFullscreen()
+  else
+    void shell.value?.requestFullscreen().catch(() => {})
+}
+
+function syncFullscreen(): void {
+  fullscreen.value = document.fullscreenElement === shell.value
+}
+
+function onTimeUpdate(event: Event): void {
+  currentTime.value = (event.target as HTMLVideoElement).currentTime
+  emit('timeupdate', currentTime.value)
+}
+
+function onVolumeChange(event: Event): void {
+  const el = event.target as HTMLVideoElement
+  volume.value = el.volume
+  muted.value = el.muted
+}
+
+function onPlay(): void {
+  started.value = true
+  playing.value = true
+  emit('play')
+}
+
+function onPause(): void {
+  playing.value = false
+  emit('pause')
+}
+
+/**
+ * Tự chạy bằng `play()` chứ KHÔNG bằng thuộc tính `autoplay`.
+ *
+ * Thuộc tính đó không hỏi được `prefers-reduced-motion`, mà một vòng lặp tự
+ * chạy đúng là thứ tuỳ chọn ấy sinh ra để tắt. `play()` còn trả về Promise nên
+ * bắt được lúc trình duyệt từ chối — im lặng ở đây là đúng, người dùng vẫn còn
+ * khung hình đầu để nhìn.
+ *
+ * Gọi lúc mount là ĐỦ, dù lúc đó `readyState` còn 0 và `currentSrc` còn rỗng.
+ * Có lúc tưởng không đủ và đã thêm một lượt gọi lại ở `canplay`; đo kỹ thì đó
+ * là lỗi PHÉP ĐO chứ không phải của component — tab đang ẩn
+ * (`document.visibilityState === 'hidden'`) thì Chrome cho `play` và `playing`
+ * bắn ra rồi tự phát `pause` sau 2ms, không qua JS nào và Promise vẫn resolve.
+ * Đưa tab ra trước là chạy đúng. Đã gỡ lượt gọi thừa đó.
+ */
+function tryAutoplay(): void {
+  if (!props.autoplay || started.value)
+    return
+
+  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches)
+    return
+
+  void video.value?.play().catch(() => {})
+}
+
+onMounted(() => {
+  document.addEventListener('fullscreenchange', syncFullscreen)
+  tryAutoplay()
+})
+
+onBeforeUnmount(() => document.removeEventListener('fullscreenchange', syncFullscreen))
+</script>
+
+<template>
+  <div
+    ref="shell"
+    :class="cn('relative overflow-hidden rounded-xl border border-border bg-card', props.class)"
+  >
+    <div class="relative aspect-video w-full bg-muted">
+      <video
+        ref="video"
+        :src="props.src"
+        :loop="props.loop"
+        :muted="props.muted"
+        :preload="props.preload"
+        class="h-full w-full object-cover"
+        playsinline
+        @click="toggle"
+        @play="onPlay"
+        @pause="onPause"
+        @ended="emit('ended')"
+        @timeupdate="onTimeUpdate"
+        @loadedmetadata="duration = ($event.target as HTMLVideoElement).duration"
+        @volumechange="onVolumeChange"
+      />
+
+      <!--
+        `<video>` phải TỰ ĐÓNG. Để nó mở thì mọi thứ viết sau trở thành con của
+        nó, mà con của `<video>` là nội dung DỰ PHÒNG — chỉ hiện khi trình duyệt
+        không phát được. Tức tấm bìa và slot sẽ không bao giờ vẽ ra, và không có
+        lỗi nào báo. Đã dính một lần; chính lần eslint --fix thụt lại dòng mới
+        làm nó lộ ra.
+      -->
+
+      <!-- Nội dung tự do đặt trên khung hình: tiêu đề hero, nhãn, huy hiệu… -->
+      <slot name="overlay" />
+
+      <!--
+        Bìa vẽ bằng `<img>` chứ không bằng thuộc tính `poster`. Thuộc tính đó
+        không tự tắt được bằng state, và filter đặt lên `<video>` để làm dịu bìa
+        ở chế độ tối sẽ dính cả khung hình lúc đang chạy.
+      -->
+      <div v-if="showPoster" class="absolute inset-0">
+        <img :src="props.poster" alt="" class="h-full w-full object-cover">
+
+        <div class="absolute inset-0 grid place-items-center">
+          <Button
+            size="icon-lg"
+            class="size-16 rounded-full [&_svg]:size-6"
+            :aria-label="t('ui.videoPlayer.play')"
+            @click="toggle"
+          >
+            <Play class="translate-x-0.5 fill-current" />
+          </Button>
+        </div>
+      </div>
+    </div>
+
+    <!--
+      MỘT thanh duy nhất cho cả hai kiểu đặt, đổi bằng class chứ không nhân đôi
+      markup: nó là con của vỏ `relative`, nên `absolute` thì nổi lên khung hình
+      còn tĩnh thì tự cộng thêm chiều cao bên dưới.
+
+      Nền `bg-background/85` chứ không `bg-black/60`: đó là mặt nền của theme
+      nên nó đi theo bảng màu, thay vì là mảng duy nhất đứng im khi đổi theme.
+    -->
+    <div
+      v-if="showBar"
+      :class="cn(
+        'flex items-center gap-2',
+        props.placement === 'overlay'
+          ? 'absolute inset-x-2 bottom-2 rounded-lg border border-border bg-background/85 px-3 py-2 backdrop-blur-sm'
+          : 'border-t border-border px-3 py-2.5',
+      )"
+    >
+      <Button
+        v-if="has('skip')"
+        size="icon-sm"
+        variant="ghost"
+        :aria-label="t('ui.videoPlayer.skipBack', { seconds: props.skipSeconds })"
+        @click="skip(-props.skipSeconds)"
+      >
+        <RotateCcw />
+      </Button>
+
+      <Button
+        v-if="has('play')"
+        size="icon-sm"
+        variant="ghost"
+        :aria-label="playing ? t('ui.videoPlayer.pause') : t('ui.videoPlayer.play')"
+        @click="toggle"
+      >
+        <Pause v-if="playing" />
+        <Play v-else />
+      </Button>
+
+      <Button
+        v-if="has('skip')"
+        size="icon-sm"
+        variant="ghost"
+        :aria-label="t('ui.videoPlayer.skipForward', { seconds: props.skipSeconds })"
+        @click="skip(props.skipSeconds)"
+      >
+        <RotateCw />
+      </Button>
+
+      <p v-if="props.title" class="min-w-0 flex-1 truncate text-sm text-muted-foreground">
+        {{ props.title }}
+      </p>
+
+      <span
+        v-if="has('time')"
+        class="shrink-0 font-mono text-xs tabular-nums text-muted-foreground"
+      >
+        {{ formatMediaTime(currentTime) }}<template v-if="!splitTime"> / {{ formatMediaTime(duration) }}</template>
+      </span>
+
+      <Slider
+        v-if="has('seek')"
+        size="sm"
+        class="flex-1"
+        :model-value="[currentTime]"
+        :max="duration || 100"
+        :step="0.1"
+        :aria-label="t('ui.videoPlayer.seek')"
+        @update:model-value="seek"
+      />
+
+      <span
+        v-if="has('time') && splitTime"
+        class="shrink-0 font-mono text-xs tabular-nums text-muted-foreground"
+      >
+        {{ formatMediaTime(duration) }}
+      </span>
+
+      <DropdownMenu v-if="has('rate')">
+        <DropdownMenuTrigger as-child>
+          <Button
+            size="sm"
+            variant="ghost"
+            class="shrink-0 tabular-nums"
+            :aria-label="t('ui.videoPlayer.playbackSpeed')"
+          >
+            <Gauge />
+            {{ rate }}&times;
+          </Button>
+        </DropdownMenuTrigger>
+
+        <DropdownMenuContent align="end" class="w-36">
+          <DropdownMenuLabel>{{ t('ui.videoPlayer.playbackSpeed') }}</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuRadioGroup :model-value="rate" @update:model-value="changeRate">
+            <DropdownMenuRadioItem v-for="value in props.rates" :key="value" :value="String(value)">
+              {{ value }}&times;
+            </DropdownMenuRadioItem>
+          </DropdownMenuRadioGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <div v-if="has('volume')" class="group/volume relative flex shrink-0 items-center gap-2">
+        <Button
+          size="icon-sm"
+          variant="ghost"
+          :aria-label="muted ? t('ui.videoPlayer.unmute') : t('ui.videoPlayer.mute')"
+          @click="toggleMute"
+        >
+          <component :is="volumeIcon" />
+        </Button>
+
+        <Slider
+          v-if="props.volumeLayout === 'inline'"
+          size="sm"
+          class="w-20"
+          :model-value="[muted ? 0 : volume]"
+          :max="1"
+          :step="0.01"
+          :aria-label="t('ui.videoPlayer.volume')"
+          @update:model-value="changeVolume"
+        />
+
+        <!--
+          Bảng dọc ẩn bằng `opacity-0` + `pointer-events-none`, KHÔNG `invisible`.
+          Đã đo: `visibility: hidden` loại phần tử khỏi thứ tự Tab y hệt
+          `display: none`, nên núm trượt không nhận được tiêu điểm và
+          `group-focus-within` không bao giờ xảy ra — vế bàn phím tự vô hiệu hoá
+          chính nó.
+
+          Khoảng hở 8px nằm ở `pb-2` của LỚP NGOÀI chứ không ở `mb-2`: hộp định
+          vị phải chạm vào nút, nếu không con trỏ đi qua khe sẽ rời cả nhóm và
+          bảng chớp tắt giữa đường.
+        -->
+        <div
+          v-else
+          class="pointer-events-none absolute bottom-full left-1/2 -translate-x-1/2 pb-2 opacity-0 transition-opacity duration-(--duration-base) group-focus-within/volume:pointer-events-auto group-focus-within/volume:opacity-100 group-hover/volume:pointer-events-auto group-hover/volume:opacity-100"
+        >
+          <div class="flex flex-col items-center gap-2 rounded-lg border border-border bg-popover p-3 shadow-md">
+            <Slider
+              size="sm"
+              orientation="vertical"
+              class="data-[orientation=vertical]:h-24"
+              :model-value="[muted ? 0 : volume]"
+              :max="1"
+              :step="0.01"
+              :aria-label="t('ui.videoPlayer.volume')"
+              @update:model-value="changeVolume"
+            />
+            <span class="font-mono text-xs tabular-nums text-muted-foreground">
+              {{ Math.round((muted ? 0 : volume) * 100) }}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <Button
+        v-if="has('fullscreen')"
+        size="icon-sm"
+        variant="ghost"
+        class="shrink-0"
+        :aria-label="fullscreen ? t('ui.videoPlayer.exitFullscreen') : t('ui.videoPlayer.enterFullscreen')"
+        @click="toggleFullscreen"
+      >
+        <Minimize v-if="fullscreen" />
+        <Maximize v-else />
+      </Button>
+    </div>
+  </div>
+</template>

package/src/components/video-player/index.ts

@@ -0,0 +1,20 @@
+export { clampMediaTime, formatMediaTime, mediaVolumeLevel } from '../../variants/lib/media'
+
+/**
+ * Một mục trên thanh điều khiển.
+ *
+ * Bật/tắt bằng CÁCH CÓ MẶT trong mảng `controls`, không phải bằng bảy prop
+ * boolean riêng: một mảng đọc ra ngay là player này có gì, còn bảy boolean thì
+ * phải đọc cả bảy mới biết. Thứ tự trong mảng không quyết định thứ tự hiển thị
+ * — bố cục thanh là cố định để tám cách cấu hình vẫn ra một sản phẩm nhìn giống
+ * nhau, đó là điểm của việc gom về một component.
+ */
+export type VideoPlayerControl = 'play' | 'skip' | 'seek' | 'time' | 'rate' | 'volume' | 'fullscreen'
+
+/** Thanh điều khiển nổi trên khung hình, hay nằm dưới nó. */
+export type VideoPlayerPlacement = 'overlay' | 'below'
+
+/** Thanh âm lượng nằm ngay cạnh nút loa, hay ẩn trong một bảng dọc. */
+export type VideoPlayerVolumeLayout = 'inline' | 'popover'
+
+export { default as VideoPlayer } from './VideoPlayer.vue'

package/src/composables/index.ts

@@ -0,0 +1,15 @@
+export * from './useBase'
+export * from './useChartPalette'
+export * from './useColorMode'
+export * from './useConfirm'
+export * from './useDelayedFlag'
+export * from './useI18n'
+export * from './useIsMobile'
+export * from './useMenuAccent'
+export * from './useMenuAppearance'
+export * from './useMenuColor'
+export * from './usePalette'
+export * from './useStyle'
+export * from './useSurface'
+export * from './useTableQuery'
+export * from './useThemeController'

package/src/composables/useBase.ts

@@ -0,0 +1,32 @@
+import type { BaseId, BaseOption } from '@vestow/theme'
+import type { ComputedRef } from 'vue'
+import { bases, themeController } from '@vestow/theme'
+import { computed } from 'vue'
+import { useThemeState } from './useThemeController'
+
+export type { BaseId, BaseOption }
+// Danh sách họ trung tính là DỮ LIỆU, ở `@vestow/theme`.
+export { bases }
+
+export interface UseBaseReturn {
+  base: ComputedRef<BaseId>
+  bases: readonly BaseOption[]
+  setBase: (value: BaseId) => void
+}
+
+/**
+ * Họ màu của nhóm trung tính. Vỏ bọc Vue quanh `themeController`, cùng khuôn
+ * với `usePalette` / `useStyle` / `useChartPalette`.
+ *
+ * Trục này chỉ đổi `--tint-hue` và `--tint-scale` — xem đầu `bases.css` để biết
+ * vì sao hai token đó là đủ cho cả nhóm trung tính.
+ */
+export function useBase(): UseBaseReturn {
+  const state = useThemeState()
+
+  return {
+    base: computed(() => state.value.base),
+    bases,
+    setBase: themeController.setBase,
+  }
+}

package/src/composables/useChartPalette.ts

@@ -0,0 +1,33 @@
+import type { ChartId, ChartOption } from '@vestow/theme'
+import type { ComputedRef } from 'vue'
+import { chartPalettes, themeController } from '@vestow/theme'
+import { computed } from 'vue'
+import { useThemeState } from './useThemeController'
+
+export type { ChartId, ChartOption }
+// Danh sách bộ màu biểu đồ là DỮ LIỆU, ở `@vestow/theme`. Re-export để chỗ
+// gọi không phải nhớ nó nằm ở package nào.
+export { chartPalettes }
+
+export interface UseChartPaletteReturn {
+  chart: ComputedRef<ChartId>
+  chartPalettes: readonly ChartOption[]
+  setChart: (value: ChartId) => void
+}
+
+/**
+ * Bộ màu cho năm chuỗi dữ liệu của biểu đồ. Vỏ bọc Vue quanh `themeController`
+ * của `@vestow/theme`, cùng khuôn với `usePalette` / `useStyle`.
+ *
+ * Giá trị mặc định `theme` nghĩa là ĐI THEO bảng màu — controller gỡ hẳn
+ * `data-chart` khi ở giá trị đó, nên `palettes.css` lại là bên quyết định.
+ */
+export function useChartPalette(): UseChartPaletteReturn {
+  const state = useThemeState()
+
+  return {
+    chart: computed(() => state.value.chart),
+    chartPalettes,
+    setChart: themeController.setChart,
+  }
+}

package/src/composables/useColorMode.ts

@@ -0,0 +1,29 @@
+import type { ColorMode } from '@vestow/theme'
+import type { ComputedRef } from 'vue'
+import { themeController } from '@vestow/theme'
+import { computed } from 'vue'
+import { useThemeState } from './useThemeController'
+
+export type { ColorMode }
+
+export interface UseColorModeReturn {
+  mode: ComputedRef<ColorMode>
+  isDark: ComputedRef<boolean>
+  setMode: (value: ColorMode) => void
+  toggle: () => void
+}
+
+/**
+ * Chế độ sáng/tối. Vỏ bọc Vue quanh `themeController` của `@vestow/theme` —
+ * xem `useThemeController.ts` để biết vì sao logic không nằm ở đây.
+ */
+export function useColorMode(): UseColorModeReturn {
+  const state = useThemeState()
+
+  return {
+    mode: computed(() => state.value.colorMode),
+    isDark: computed(() => state.value.isDark),
+    setMode: themeController.setColorMode,
+    toggle: themeController.toggleColorMode,
+  }
+}

package/src/composables/useConfirm.ts

@@ -0,0 +1,81 @@
+import type { Ref, ShallowRef } from 'vue'
+import type { ButtonVariants } from '../components/button'
+import { ref, shallowRef } from 'vue'
+
+export interface ConfirmOptions {
+  title: string
+  description?: string
+  /**
+   * Nhãn nút xác nhận — **bắt buộc**, và phải là ĐỘNG TỪ nói rõ việc sắp xảy
+   * ra: `'Xoá 12 tệp'`, không phải `'Xác nhận'`.
+   *
+   * Trước đây trường này có mặc định `'Xác nhận'`. Bỏ đi vì mặc định luôn là
+   * thứ được dùng nhiều nhất, mà `'Xác nhận'` không nói người dùng đang đồng ý
+   * với cái gì — đúng kiểu nhãn mà hộp thoại phá huỷ không được dùng. Bắt khai
+   * tường minh thì người viết buộc phải nghĩ ra câu đó một lần.
+   *
+   * `cancelLabel` thì vẫn có mặc định: nó là đường AN TOÀN, bấm nhầm không mất
+   * gì, nên `'Huỷ'` đủ rõ.
+   */
+  confirmLabel: string
+  cancelLabel?: string
+  /** destructive cho hành động xoá / thu hồi quyền */
+  variant?: ButtonVariants['variant']
+}
+
+interface ConfirmState extends ConfirmOptions {
+  resolve: (value: boolean) => void
+}
+
+// State ở module scope: chỉ có 1 ConfirmDialog trong toàn app.
+const open = ref(false)
+const state = shallowRef<ConfirmState | null>(null)
+
+/**
+ * Hỏi xác nhận bằng Promise thay vì callback:
+ *
+ *   if (await confirm({ title: 'Xoá người dùng?', variant: 'destructive' }))
+ *     await api.deleteUser(id)
+ *
+ * Yêu cầu: đặt <ConfirmDialog /> một lần trong layout gốc.
+ */
+export interface UseConfirmReturn {
+  confirm: (options: ConfirmOptions) => Promise<boolean>
+}
+
+export function useConfirm(): UseConfirmReturn {
+  function confirm(options: ConfirmOptions): Promise<boolean> {
+    // Nếu đang có 1 confirm mở, từ chối cái cũ để không treo Promise.
+    state.value?.resolve(false)
+
+    return new Promise<boolean>((resolve) => {
+      state.value = { ...options, resolve }
+      open.value = true
+    })
+  }
+
+  return { confirm }
+}
+
+/** Chỉ ConfirmDialog dùng — không phải API công khai. */
+export interface ConfirmInternals {
+  open: Ref<boolean>
+  state: ShallowRef<ConfirmState | null>
+  settle: (result: boolean) => void
+  onOpenChange: (value: boolean) => void
+}
+
+export function useConfirmInternals(): ConfirmInternals {
+  function settle(result: boolean): void {
+    state.value?.resolve(result)
+    state.value = null
+    open.value = false
+  }
+
+  function onOpenChange(value: boolean): void {
+    if (!value)
+      settle(false)
+  }
+
+  return { open, state, settle, onOpenChange }
+}