@dnax/ui 0.0.1

package/components/QMessageScrollerProvider.vue

@@ -0,0 +1,198 @@
+<script lang="ts">
+// QMessageScrollerProvider — possède l'état de scroll (équivalent MessageScrollerProvider shadcn-vue).
+// Contexte : autoScroll, ancrage des tours, visibilité, commandes de scroll.
+import { computed, inject } from "vue"
+import type { InjectionKey, Ref } from "vue"
+
+export interface MessageScrollerItemReg {
+  id: string
+  el: Ref<HTMLElement | null>
+  anchor: boolean
+}
+
+export interface ScrollToOptions {
+  align?: "start" | "center" | "end"
+  behavior?: ScrollBehavior
+  scrollMargin?: number
+}
+
+export interface MessageScrollerContext {
+  autoScroll: Readonly<Ref<boolean>>
+  defaultPosition: Readonly<Ref<"start" | "end" | "last-anchor">>
+  peek: Readonly<Ref<number>>
+  margin: Readonly<Ref<number>>
+  threshold: Readonly<Ref<number>>
+  viewportEl: Ref<HTMLElement | null>
+  contentEl: Ref<HTMLElement | null>
+  pinned: Readonly<Ref<boolean>>
+  scrollable: Readonly<Ref<{ start: boolean; end: boolean }>>
+  currentAnchorId: Readonly<Ref<string | null>>
+  visibleIds: Readonly<Ref<string[]>>
+  items: Readonly<Ref<MessageScrollerItemReg[]>>
+  registerItem: (item: MessageScrollerItemReg) => void
+  unregisterItem: (id: string) => void
+  updateScrollState: () => void
+  scrollToEnd: (opts?: { behavior?: ScrollBehavior }) => void
+  scrollToStart: (opts?: { behavior?: ScrollBehavior }) => void
+  scrollToMessage: (id: string, opts?: ScrollToOptions) => boolean
+}
+
+export const qMessageScrollerKey: InjectionKey<MessageScrollerContext> = Symbol("q-message-scroller")
+
+/** Commande le transcript depuis l'extérieur (saut vers un message, début, fin). */
+export function useMessageScroller() {
+  const ctx = inject(qMessageScrollerKey, null)
+  if (!ctx) throw new Error("useMessageScroller doit être utilisé dans un QMessageScrollerProvider")
+  return {
+    scrollToMessage: ctx.scrollToMessage,
+    scrollToEnd: ctx.scrollToEnd,
+    scrollToStart: ctx.scrollToStart,
+  }
+}
+
+/** Position du lecteur : anchor courant + messages visibles. */
+export function useMessageScrollerVisibility() {
+  const ctx = inject(qMessageScrollerKey, null)
+  return computed(() => ({
+    currentAnchorId: ctx?.currentAnchorId.value ?? null,
+    visibleMessageIds: ctx?.visibleIds.value ?? [],
+  }))
+}
+
+/** Bords encore scrollables (lecture du scroll en JS). */
+export function useMessageScrollerScrollable() {
+  const ctx = inject(qMessageScrollerKey, null)
+  return computed(() => ctx?.scrollable.value ?? { start: false, end: false })
+}
+</script>
+
+<script setup lang="ts">
+// QMessageScrollerProvider — :auto-scroll :default-scroll-position :scroll-previous-item-peek :scroll-margin
+import { nextTick, provide, ref, shallowRef } from "vue"
+
+interface Props {
+  /** Suit le live edge tant que le lecteur est en bas */
+  autoScroll?: boolean
+  /** Position d'ouverture : start | end | last-anchor */
+  defaultScrollPosition?: "start" | "end" | "last-anchor"
+  /** Distance (px) d'un bord avant d'être considéré scrollable */
+  scrollEdgeThreshold?: number
+  /** Aperçu (px) du message précédent gardé visible lors de l'ancrage */
+  scrollPreviousItemPeek?: number
+  /** Décalage (px) appliqué en plus lors d'un scrollToMessage */
+  scrollMargin?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  autoScroll: false,
+  defaultScrollPosition: "end",
+  scrollEdgeThreshold: 8,
+  scrollPreviousItemPeek: 64,
+  scrollMargin: 0,
+})
+
+const viewportEl = ref<HTMLElement | null>(null)
+const contentEl = ref<HTMLElement | null>(null)
+const pinned = ref(true)
+const scrollable = ref({ start: false, end: false })
+// shallowRef : ne pas dé-unwrappe les Ref internes des enregistrements
+const items = shallowRef<MessageScrollerItemReg[]>([])
+const currentAnchorId = ref<string | null>(null)
+const visibleIds = ref<string[]>([])
+
+const updateScrollState = () => {
+  const v = viewportEl.value
+  if (!v) return
+  const atEnd = v.scrollHeight - v.scrollTop - v.clientHeight <= props.scrollEdgeThreshold
+  pinned.value = atEnd
+  scrollable.value = {
+    start: v.scrollTop > props.scrollEdgeThreshold,
+    end: !atEnd,
+  }
+  // Visibilité (coordonnées relatives au content, positionné)
+  const top = v.scrollTop
+  const bottom = top + v.clientHeight
+  const vis: string[] = []
+  let lastAnchor: string | null = null
+  for (const it of items.value) {
+    const el = it.el.value
+    if (!el) continue
+    const t = el.offsetTop
+    const b = t + el.offsetHeight
+    if (b >= top && t <= bottom) vis.push(it.id)
+    if (it.anchor && t <= bottom) lastAnchor = it.id
+  }
+  visibleIds.value = vis
+  if (lastAnchor) currentAnchorId.value = lastAnchor
+}
+
+const scrollToEnd = (opts: { behavior?: ScrollBehavior } = {}) => {
+  const v = viewportEl.value
+  if (!v) return
+  v.scrollTo({ top: v.scrollHeight, behavior: opts.behavior ?? "smooth" })
+}
+
+const scrollToStart = (opts: { behavior?: ScrollBehavior } = {}) => {
+  const v = viewportEl.value
+  if (!v) return
+  v.scrollTo({ top: 0, behavior: opts.behavior ?? "smooth" })
+}
+
+const scrollToMessage = (id: string, opts: ScrollToOptions = {}): boolean => {
+  const v = viewportEl.value
+  const reg = items.value.find((i) => i.id === id)
+  const el = reg?.el.value
+  if (!v || !el) return false
+  const margin = opts.scrollMargin ?? props.scrollMargin
+  let top = el.offsetTop - margin
+  if (opts.align === "center") top = el.offsetTop - (v.clientHeight - el.offsetHeight) / 2
+  else if (opts.align === "end") top = el.offsetTop + el.offsetHeight - v.clientHeight
+  v.scrollTo({ top, behavior: opts.behavior ?? "smooth" })
+  return true
+}
+
+// Ancrage d'un tour : quand un nouvel item scrollAnchor est ajouté (pas au montage initial),
+// le viewport le place près du haut avec un aperçu du message précédent.
+const registerItem = (item: MessageScrollerItemReg) => {
+  const wasEmpty = items.value.length === 0
+  items.value = [...items.value, item]
+  if (!wasEmpty && item.anchor) {
+    nextTick(() => {
+      const v = viewportEl.value
+      const el = item.el.value
+      if (v && el) {
+        v.scrollTo({ top: Math.max(0, el.offsetTop - props.scrollPreviousItemPeek), behavior: "auto" })
+      }
+    })
+  }
+}
+
+const unregisterItem = (id: string) => {
+  items.value = items.value.filter((i) => i.id !== id)
+}
+
+provide<MessageScrollerContext>(qMessageScrollerKey, {
+  autoScroll: computed(() => props.autoScroll),
+  defaultPosition: computed(() => props.defaultScrollPosition),
+  peek: computed(() => props.scrollPreviousItemPeek),
+  margin: computed(() => props.scrollMargin),
+  threshold: computed(() => props.scrollEdgeThreshold),
+  viewportEl,
+  contentEl,
+  pinned,
+  scrollable,
+  currentAnchorId,
+  visibleIds,
+  items,
+  registerItem,
+  unregisterItem,
+  updateScrollState,
+  scrollToEnd,
+  scrollToStart,
+  scrollToMessage,
+})
+</script>
+
+<template>
+  <slot />
+</template>

package/components/QMessageScrollerViewport.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+// QMessageScrollerViewport — zone scrollable native (équivalent MessageScrollerViewport).
+// Preserve la position quand l'historique est prépandu (MutationObserver), suit le live edge
+// quand autoScroll est actif, applique la position d'ouverture par défaut.
+import { inject, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue"
+import { qMessageScrollerKey } from "./QMessageScrollerProvider.vue"
+
+interface Props {
+  /** Garde la vue quand des messages sont ajoutés au-dessus */
+  preserveScrollOnPrepend?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  preserveScrollOnPrepend: true,
+})
+
+const ctx = inject(qMessageScrollerKey, null)
+const viewportRef = ref<HTMLElement | null>(null)
+
+let resizeObserver: ResizeObserver | null = null
+let mutationObserver: MutationObserver | null = null
+let preservedScrollHeight = 0
+
+const onScroll = () => ctx?.updateScrollState()
+
+// Prépend (historique chargé au-dessus) : garde le lecteur en place.
+const onMutation = (records: MutationRecord[]) => {
+  const content = ctx?.contentEl.value
+  const viewport = ctx?.viewportEl.value
+  if (!content || !viewport || !ctx) return
+
+  const prepend = records.some(
+    (r) => r.addedNodes.length > 0 && r.previousSibling === null && r.target === content,
+  )
+
+  if (prepend) {
+    preservedScrollHeight = content.scrollHeight
+    requestAnimationFrame(() => {
+      if (ctx.pinned.value && ctx.autoScroll.value) {
+        ctx.scrollToEnd({ behavior: "auto" })
+      }
+      else if (props.preserveScrollOnPrepend) {
+        const delta = content.scrollHeight - preservedScrollHeight
+        if (delta > 0) viewport.scrollTop += delta
+      }
+      ctx.updateScrollState()
+    })
+  }
+  else if (ctx.pinned.value && ctx.autoScroll.value) {
+    viewport.scrollTop = viewport.scrollHeight
+    ctx.updateScrollState()
+  }
+}
+
+// Position d'ouverture par défaut (start / end / last-anchor)
+const applyDefaultPosition = async () => {
+  await nextTick()
+  requestAnimationFrame(() => {
+    if (!ctx) return
+    const pos = ctx.defaultPosition.value
+    if (pos === "end") ctx.scrollToEnd({ behavior: "auto" })
+    else if (pos === "start") ctx.scrollToStart({ behavior: "auto" })
+    else if (pos === "last-anchor") {
+      const anchors = ctx.items.value.filter((i) => i.anchor)
+      const last = anchors[anchors.length - 1]
+      if (last) ctx.scrollToMessage(last.id, { align: "start", behavior: "auto", scrollMargin: ctx.margin.value })
+    }
+    ctx.updateScrollState()
+  })
+}
+
+onMounted(() => {
+  if (!ctx) return
+  ctx.viewportEl.value = viewportRef.value
+  applyDefaultPosition()
+
+  watch(
+    () => ctx.contentEl.value,
+    (el) => {
+      if (!el) return
+      resizeObserver = new ResizeObserver(() => {
+        if (ctx && ctx.pinned.value && ctx.autoScroll.value) ctx.scrollToEnd({ behavior: "auto" })
+        ctx?.updateScrollState()
+      })
+      resizeObserver.observe(el)
+      mutationObserver = new MutationObserver(onMutation)
+      mutationObserver.observe(el, { childList: true })
+    },
+  )
+})
+
+onBeforeUnmount(() => {
+  resizeObserver?.disconnect()
+  mutationObserver?.disconnect()
+})
+</script>
+
+<template>
+  <div
+    ref="viewportRef"
+    class="q-msg-scroller__viewport"
+    role="region"
+    aria-label="Messages"
+    tabindex="0"
+    @scroll="onScroll"
+  >
+    <slot />
+  </div>
+</template>

package/components/QNavMenu.vue

@@ -0,0 +1,75 @@
+<script lang="ts">
+// QNavMenu — barre de navigation type NavigationMenu shadcn-vue, style Quasar.
+// Fournit le contexte (item ouvert, enregistrement des triggers) via provide/inject.
+import type { InjectionKey, Ref } from "vue"
+
+export interface NavMenuContext {
+  openName: Readonly<Ref<string | null>>
+  setOpen: (name: string | null) => void
+  registerTrigger: (name: string, el: Ref<HTMLElement | null>) => void
+}
+
+export const qNavMenuKey: InjectionKey<NavMenuContext> = Symbol("q-nav-menu")
+</script>
+
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, provide, ref, shallowRef } from "vue"
+
+const openName = ref<string | null>(null)
+const triggers = shallowRef<{ name: string; el: Ref<HTMLElement | null> }[]>([])
+const rootEl = ref<HTMLElement | null>(null)
+
+const context: NavMenuContext = {
+  openName,
+  setOpen: (name) => {
+    openName.value = name
+  },
+  registerTrigger: (name, el) => {
+    triggers.value = [...triggers.value, { name, el }]
+  },
+}
+provide(qNavMenuKey, context)
+
+// Fermeture au clic extérieur
+const onDocMousedown = (e: MouseEvent) => {
+  if (rootEl.value && !rootEl.value.contains(e.target as Node)) openName.value = null
+}
+
+// Clavier : flèches/Home/End déplacent le focus, Échap ferme
+const onKeydown = (e: KeyboardEvent) => {
+  if (e.key === "Escape") {
+    openName.value = null
+    return
+  }
+  if (e.key !== "ArrowRight" && e.key !== "ArrowLeft" && e.key !== "Home" && e.key !== "End") return
+  if (!rootEl.value) return
+  const list = Array.from(
+    rootEl.value.querySelectorAll(".q-nav-menu__trigger, .q-nav-menu__item"),
+  ) as HTMLElement[]
+  if (list.length === 0) return
+  const active = document.activeElement as HTMLElement | null
+  const index = active ? list.indexOf(active) : -1
+  let target: HTMLElement | undefined
+  if (e.key === "ArrowRight") target = list[(index + 1) % list.length]
+  else if (e.key === "ArrowLeft") target = list[(index - 1 + list.length) % list.length]
+  else if (e.key === "Home") target = list[0]
+  else if (e.key === "End") target = list[list.length - 1]
+  if (target) {
+    e.preventDefault()
+    target.focus()
+  }
+}
+
+onMounted(() => {
+  if (typeof document !== "undefined") document.addEventListener("mousedown", onDocMousedown)
+})
+onBeforeUnmount(() => {
+  if (typeof document !== "undefined") document.removeEventListener("mousedown", onDocMousedown)
+})
+</script>
+
+<template>
+  <nav ref="rootEl" class="q-nav-menu" @keydown="onKeydown">
+    <slot />
+  </nav>
+</template>

package/components/QNavMenuContent.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+// QNavMenuContent — panneau du menu déroulant (équivalent NavigationMenuContent).
+// À placer dans le slot par défaut d'un QNavMenuTrigger.
+</script>
+
+<template>
+  <div class="q-nav-menu__panel">
+    <slot />
+  </div>
+</template>

package/components/QNavMenuItem.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+// QNavMenuItem — lien/bouton de navigation (équivalent NavigationMenuLink).
+import { computed, inject } from "vue"
+import { Icon } from "@iconify/vue"
+import { cn } from "../lib/utils"
+import { qNavMenuKey } from "./QNavMenu.vue"
+
+interface Props {
+  label?: string
+  /** Icône Iconify (ex. : "lucide:home") */
+  icon?: string
+  /** Lien natif (<a>) ; sinon bouton */
+  href?: string
+  /** État actif (aria-current="page") */
+  active?: boolean
+  activeClass?: string
+  disable?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  active: false,
+  activeClass: "",
+  disable: false,
+})
+
+const emit = defineEmits<{ click: [event: MouseEvent] }>()
+
+const menu = inject(qNavMenuKey, null)
+
+const onClick = (e: MouseEvent) => {
+  if (props.disable) return
+  menu?.setOpen(null) // ferme les dropdowns après navigation
+  emit("click", e)
+}
+
+const itemClasses = computed(() =>
+  cn(
+    "q-nav-menu__item",
+    props.active && "q-nav-menu__item--active",
+    props.active && props.activeClass,
+    props.disable && "q-nav-menu__item--disabled",
+  ),
+)
+</script>
+
+<template>
+  <component
+    :is="href ? 'a' : 'button'"
+    :href="href || undefined"
+    :disabled="href ? undefined : disable"
+    class="q-nav-menu__item"
+    :class="itemClasses"
+    :aria-current="active ? 'page' : undefined"
+    @click="onClick"
+  >
+    <Icon :icon="icon" v-if="icon" class="q-nav-menu__item-icon" aria-hidden="true" />
+    <span v-if="label" class="q-nav-menu__item-label">{{ label }}</span>
+    <slot v-else />
+  </component>
+</template>

package/components/QNavMenuTrigger.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+// QNavMenuTrigger — bouton de menu avec dropdown ; le contenu du slot par défaut
+// est le panneau déroulant (positionné sous le trigger, ouvert au hover/clic).
+import { computed, inject, onBeforeUnmount, onMounted, ref } from "vue"
+import { Icon } from "@iconify/vue"
+import { icons } from "../lib/icons"
+import { cn } from "../lib/utils"
+import { qNavMenuKey } from "./QNavMenu.vue"
+
+let triggerSeq = 0
+
+interface Props {
+  /** Identifiant (auto-généré si absent) */
+  name?: string
+  label?: string
+  /** Icône Iconify à gauche (ex. : "lucide:star") */
+  icon?: string
+  disable?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disable: false,
+})
+
+const menu = inject(qNavMenuKey, null)
+const resolvedName = props.name ?? `q-nav-${triggerSeq++}`
+const el = ref<HTMLElement | null>(null)
+
+onMounted(() => menu?.registerTrigger(resolvedName, el))
+
+const isOpen = computed(() => menu?.openName.value === resolvedName)
+
+const open = () => {
+  if (closeTimer) {
+    clearTimeout(closeTimer)
+    closeTimer = undefined
+  }
+  if (!props.disable) menu?.setOpen(resolvedName)
+}
+const close = () => {
+  if (isOpen.value) menu?.setOpen(null)
+}
+const toggle = () => {
+  if (props.disable) return
+  menu?.setOpen(isOpen.value ? null : resolvedName)
+}
+
+// Fermeture différée : laisse le temps de traverser l'espace (6px) entre le
+// trigger et le panneau — le mouseenter (re-entrée via le panneau) l'annule.
+let closeTimer: ReturnType<typeof setTimeout> | undefined
+const scheduleClose = () => {
+  if (closeTimer) clearTimeout(closeTimer)
+  closeTimer = setTimeout(() => {
+    closeTimer = undefined
+    close()
+  }, 150)
+}
+
+onBeforeUnmount(() => {
+  if (closeTimer) clearTimeout(closeTimer)
+})
+
+const triggerClasses = computed(() =>
+  cn("q-nav-menu__trigger", isOpen.value && "q-nav-menu__trigger--open"),
+)
+</script>
+
+<template>
+  <div ref="el" class="q-nav-menu__trigger-wrap" @mouseenter="open" @mouseleave="scheduleClose">
+    <button
+      type="button"
+      class="q-nav-menu__trigger"
+      :class="triggerClasses"
+      :disabled="disable"
+      :aria-expanded="isOpen ? 'true' : 'false'"
+      @click="toggle"
+    >
+      <Icon :icon="icon" v-if="icon" class="q-nav-menu__trigger-icon" aria-hidden="true" />
+      <span v-if="label" class="q-nav-menu__trigger-label">{{ label }}</span>
+      <slot name="trigger" />
+      <Icon
+        :icon="icons.chevronDown"
+        class="q-nav-menu__trigger-arrow"
+        :class="{ 'q-nav-menu__trigger-arrow--rotated': isOpen }"
+        aria-hidden="true"
+      />
+    </button>
+    <div
+      v-if="$slots.default"
+      class="q-nav-menu__content"
+      :class="{ 'q-nav-menu__content--open': isOpen }"
+    >
+      <slot />
+    </div>
+  </div>
+</template>

package/components/QNotifyProvider.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+// QNotifyProvider — notifications $q.notify (vue-sonner / shadcn Sonner).
+// Intégré dans QConfigProvider (rendu automatiquement par le plus externe),
+// mais utilisable aussi en autonome : <q-notify-provider />.
+import { Toaster } from "vue-sonner"
+
+interface Props {
+  /** Position des toasts (défaut : bottom-right) */
+  position?: "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right"
+  /** Couleurs riches par type (success/error/…) */
+  richColors?: boolean
+  /** Bouton fermer sur chaque toast */
+  closeButton?: boolean
+  /** Thème (défaut : light) */
+  theme?: "light" | "dark" | "system"
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  position: "bottom-right",
+  richColors: true,
+  closeButton: true,
+  theme: "light",
+})
+</script>
+
+<template>
+  <Toaster
+    :position="props.position"
+    :rich-colors="props.richColors"
+    :close-button="props.closeButton"
+    :theme="props.theme"
+  />
+</template>

package/components/QNotifyToast.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+// QNotifyToast — rendu custom d'une notification $q.notify avec couleur Quasar
+// (utilisé par lib/q.ts via toast.custom de vue-sonner).
+import { computed } from "vue"
+import { Icon } from "@iconify/vue"
+import { colorValue, contrastText } from "../lib/colors"
+
+interface Props {
+  message?: string | number
+  caption?: string
+  icon?: string
+  /** Couleur de fond (token ou hex) — sinon neutre */
+  color?: string
+  /** Libellé de l'action principale */
+  actionLabel?: string
+  /** Callback de l'action (fourni par $q.notify) */
+  onAction?: () => void
+  /** Ferme la notification (fourni par $q.notify) */
+  onDismiss?: () => void
+}
+
+const props = withDefaults(defineProps<Props>(), {})
+
+const bg = computed(() => (props.color ? colorValue(props.color) : undefined))
+const fg = computed(() => (props.color ? contrastText(props.color) : "#1d1d1d"))
+</script>
+
+<template>
+  <div
+    class="q-notify"
+    :style="bg ? { backgroundColor: bg, color: fg } : undefined"
+    role="status"
+  >
+    <Icon :icon="icon" v-if="icon" class="q-notify__icon" aria-hidden="true" />
+    <div class="q-notify__body">
+      <div v-if="message" class="q-notify__message">{{ message }}</div>
+      <div v-if="caption" class="q-notify__caption" :style="bg ? { color: fg } : undefined">
+        {{ caption }}
+      </div>
+    </div>
+    <button
+      v-if="actionLabel"
+      type="button"
+      class="q-notify__action"
+      :style="bg ? { color: fg } : undefined"
+      @click="onAction?.()"
+    >
+      {{ actionLabel }}
+    </button>
+    <button
+      v-if="onDismiss"
+      type="button"
+      class="q-notify__close"
+      aria-label="Fermer"
+      @click="onDismiss()"
+    >
+      ✕
+    </button>
+  </div>
+</template>