@hina-ui/vue 1.7.5 → 1.7.6

package/dist/shared/behavior/spoiler/worklet.ts

@@ -0,0 +1,199 @@
+declare function registerPaint(name: string, painter: unknown): void
+
+const workletMain = () => {
+  const M = Math
+
+  const lcgrand =
+    (seed = 1) =>
+    (a = 0, b = 1) =>
+      a +
+      (M.abs(b - a) * (M.imul(48271, (seed = M.imul(214013, seed) + 2531011)) & 0x7fffffff)) /
+        0x7fffffff
+
+  const pol2vec = (l: number, a = 0) => [l * M.cos(a), l * M.sin(a)] as const
+  const vecmag = ([x, y]: readonly number[]) => M.sqrt(x! * x! + y! * y!)
+  const vecnorm = ([x, y]: readonly number[], l = vecmag([x!, y!])) =>
+    l === 0 ? ([0, 0] as const) : ([x! / l, y! / l] as const)
+
+  const trapezoidalWave = (l: number, a: number, b: number) => {
+    const s = M.max(a, l - b)
+    return (t: number) => {
+      if (t < a) return M.max(0, t / a)
+      if (t > s) return M.max(0, 1 - (t - s) / (l - s))
+      return 1
+    }
+  }
+
+  const cycle = (x: number, n: number) => ((x % n) + n) % n
+  const mirror = (x: number, n: number, r: number) => (x < r ? n + x : x > n - r ? x - n : x)
+  const clamp = (min: number, x: number, max: number) => M.max(min, M.min(x, max))
+
+  const cycleBounds = ([x, y]: readonly number[], [w, h]: readonly number[], r: number) => {
+    const tx = cycle(x!, w!)
+    const ty = cycle(y!, h!)
+    return [
+      [tx, ty],
+      [mirror(tx, w!, r), mirror(ty, h!, r)],
+    ] as const
+  }
+
+  const easeOutCubic = (t: number) => --t * t * t + 1
+
+  type World = { t: number; tStop: number; tStart: number; n: number }
+
+  const animateFadeInOut = (world: World, idx: number, duration: number) => {
+    const direction = world.tStop <= world.t ? 'out' : 'in'
+    const animationStartT = direction === 'in' ? world.tStart : world.tStop
+    const t = animationStartT + ((2 / 3) * duration * idx) / world.n
+    const fadeFor = (1 / 3) * duration
+
+    let progress = 0
+    if (direction === 'in') {
+      progress = (fadeFor + t - world.t) / fadeFor || 0
+    } else {
+      progress = (world.t - t) / fadeFor || 1
+    }
+
+    return easeOutCubic(1 - clamp(0, progress, 1))
+  }
+
+  const FAKE_WORDS = [5, 3, 4, 4, 2, 4, 7, 6, 8, 6, 3, 1, 6]
+
+  const makeWordDistribution = (line: number, em: number, space: number) => {
+    let marker = 0
+    let i = 0
+    let wordslen = 0
+    const chunks: [number, number][] = []
+
+    do {
+      const endOfWord = M.min(line, marker + FAKE_WORDS[i++ % FAKE_WORDS.length]! * em)
+      wordslen += endOfWord - marker
+      chunks.push([marker, (marker = endOfWord)])
+    } while ((marker += space) < line)
+
+    if (chunks.length >= 0) chunks[chunks.length - 1]![1] = line
+
+    return (t: number) => {
+      const w = t * wordslen
+      let m = 0
+      for (const [start, end] of chunks) {
+        const wordLength = end - start
+        if (m < w && w <= m + wordLength) return start + w - m
+        m += wordLength
+      }
+      return 0
+    }
+  }
+
+  const getVar = (props: { get(name: string): unknown }, name: string) => {
+    const val = props.get(name)
+    if (typeof val === 'string') return val
+    return String(val ?? '')
+  }
+
+  class HnSpoilerWorklet {
+    static get contextOptions() {
+      return { alpha: true }
+    }
+
+    static get inputProperties() {
+      return [
+        '--hn-nz-t',
+        '--hn-nz-stop',
+        '--hn-nz-fade',
+        '--hn-nz-gap',
+        '--hn-nz-accent',
+        '--hn-nz-words',
+        '--hn-nz-density',
+      ]
+    }
+
+    paint(
+      ctx: CanvasRenderingContext2D,
+      size: { width: number; height: number },
+      props: { get(name: string): unknown },
+    ) {
+      const rand = lcgrand(4011505)
+
+      const accent = (getVar(props, '--hn-nz-accent') || '0 0% 0%').split(' ')
+      const mimicWords = getVar(props, '--hn-nz-words').trim() === 'true'
+      const vmin = 2
+      const vmax = 12
+      const width = size.width
+      const height = size.height
+      const gaps = (getVar(props, '--hn-nz-gap') || '0px 0px').split(' ').map(parseFloat)
+      const hgap = gaps[0] ?? 0
+      const vgap = gaps[1] ?? 0
+      const density = parseFloat(getVar(props, '--hn-nz-density')) || 0.08
+      const sizedev = (globalThis as { devicePixelRatio?: number }).devicePixelRatio! > 1 ? 0.5 : 0
+      const fadeDuration = parseFloat(getVar(props, '--hn-nz-fade')) || 0
+
+      const world: World = {
+        t: parseFloat(getVar(props, '--hn-nz-t') || '0'),
+        tStop: parseFloat(getVar(props, '--hn-nz-stop') || 'Infinity'),
+        tStart: 0,
+        n: M.round(M.min(5000, density * (width - 2 * hgap) * (height - 2 * vgap))),
+      }
+
+      const lineWidth = width - 2 * hgap
+      const lineHeight = height - 2 * vgap
+
+      const wordDist = mimicWords
+        ? makeWordDistribution(lineWidth, lineHeight, M.max(12, lineHeight / 4))
+        : (x: number) => x * (width - 2 * hgap)
+
+      ctx.clearRect(0, 0, size.width, size.height)
+
+      for (let i = 0; i < world.n; ++i) {
+        const x0 = hgap + wordDist(rand())
+        const y0 = rand(vgap, height - vgap)
+        const v0mag = rand(vmin, vmax)
+        const size0 = rand(1, 1 + sizedev)
+
+        const l = parseInt(accent[2] ?? '0')
+        const ldir = l > 50 ? -1 : 1
+        const lightness = M.floor(clamp(0, l + ldir * rand(0, 30), 100))
+
+        const v0 = pol2vec(v0mag, rand(0, M.PI * 2))
+        const vx0 = v0[0]
+        const vy0 = v0[1]
+        vecnorm(v0)
+
+        const shape = rand() > 0.5 ? 'square' : 'circle'
+        const lifetime = rand(0.3, 1.5)
+        const respawn = rand(0, 1)
+        const visibilityFn = trapezoidalWave(lifetime, 0.15, 0.3)
+        const phase = rand(0, lifetime + respawn)
+
+        const cantSpawnNoMore =
+          M.floor((world.tStop + phase) / (lifetime + respawn)) <
+          M.floor((world.t + phase) / (lifetime + respawn))
+        if (cantSpawnNoMore) continue
+
+        const t = M.min(lifetime, (world.t + phase) % (lifetime + respawn))
+        const x = x0 + vx0 * t
+        const y = y0 + vy0 * t
+
+        const fade = animateFadeInOut(world, i, fadeDuration)
+        const alpha = fade * (1 - t / lifetime)
+        const psize = fade * (size0 * visibilityFn(t))
+
+        for (const [wx, wy] of cycleBounds([x, y], [width, height], psize / 2)) {
+          ctx.beginPath()
+          ctx.fillStyle = `hsl(${accent[0]} ${accent[1]} ${lightness}% / ${M.round(alpha * 100)}%)`
+          if (shape === 'square') {
+            ctx.rect(wx!, wy!, psize, psize)
+          } else {
+            ctx.arc(wx!, wy!, psize / 2, 0, M.PI * 2)
+          }
+          ctx.closePath()
+          ctx.fill()
+        }
+      }
+    }
+  }
+
+  registerPaint('hn-spoiler', HnSpoilerWorklet)
+}
+
+export const workletSource = `(${workletMain.toString()})()`

package/dist/shared/behavior/toast.ts

@@ -0,0 +1,243 @@
+import { DURATION } from '../motion'
+
+export type ToastTone = 'neutral' | 'success' | 'danger' | 'warning' | 'info' | 'loading'
+
+export type ToasterPosition =
+  'bottom-end' | 'bottom-start' | 'bottom-center' | 'top-end' | 'top-start' | 'top-center'
+
+export interface ToastAction {
+  label: string
+  onClick?: () => void
+}
+
+export interface ToastItem<C = unknown> {
+  id: number | string
+  tone: ToastTone
+  message: string
+  description?: string
+  duration: number
+  open: boolean
+  action?: ToastAction
+  cancel?: ToastAction
+  component?: C
+  componentProps?: Record<string, unknown>
+  onDismiss?: (id: number | string) => void
+  onAutoClose?: (id: number | string) => void
+}
+
+export interface ToastOptions {
+  id?: number | string
+  tone?: ToastTone
+  description?: string
+  duration?: number
+  action?: ToastAction
+  cancel?: ToastAction
+  onDismiss?: (id: number | string) => void
+  onAutoClose?: (id: number | string) => void
+}
+
+type MessageInput<T> = string | { message: string; description?: string } | T
+
+export interface ToastPromiseMessages<T> {
+  loading: string
+  success: MessageInput<(value: T) => string | { message: string; description?: string }>
+  error: MessageInput<(reason: unknown) => string | { message: string; description?: string }>
+}
+
+export type ToastTonedOptions = Omit<ToastOptions, 'tone'>
+
+export interface ToastStoreOptions<C> {
+  state: { items: ToastItem<C>[] }
+  raw?: (component: C) => C
+  notify?: () => void
+}
+
+const MAX_VISIBLE = 5
+const SETTLE_DELAY = (DURATION.exit + 0.06) * 1000
+
+interface Timer {
+  handle: ReturnType<typeof setTimeout> | undefined
+  remaining: number
+  startedAt: number
+}
+
+interface InternalOptions<C> extends ToastOptions {
+  component?: C
+  componentProps?: Record<string, unknown>
+}
+
+function defaultDuration(tone: ToastTone) {
+  return tone === 'loading' ? 0 : 4000
+}
+
+function resolveMessage(
+  input: MessageInput<(v: never) => string | { message: string; description?: string }>,
+  value: unknown,
+): { message: string; description?: string } {
+  const raw = typeof input === 'function' ? (input as (v: unknown) => unknown)(value) : input
+  if (typeof raw === 'string') return { message: raw }
+  return raw as { message: string; description?: string }
+}
+
+export function createToastStore<C>(options: ToastStoreOptions<C>) {
+  const state = options.state
+  const wrap = options.raw ?? ((component: C) => component)
+  const notify = options.notify ?? (() => {})
+
+  let seed = 0
+  const timers = new Map<number | string, Timer>()
+  const pauseReasons = new Set<string>()
+
+  function fire(id: number | string) {
+    timers.delete(id)
+    const item = state.items.find(t => t.id === id)
+    if (item) close(item, 'auto')
+  }
+
+  function startTimer(item: ToastItem<C>) {
+    stopTimer(item.id)
+    if (item.duration <= 0) return
+    const timer: Timer = { handle: undefined, remaining: item.duration, startedAt: Date.now() }
+    timers.set(item.id, timer)
+    if (pauseReasons.size === 0) timer.handle = setTimeout(() => fire(item.id), timer.remaining)
+  }
+
+  function stopTimer(id: number | string) {
+    const timer = timers.get(id)
+    if (timer?.handle) clearTimeout(timer.handle)
+    timers.delete(id)
+  }
+
+  function pauseTimers(reason: string) {
+    if (pauseReasons.has(reason)) return
+    const wasRunning = pauseReasons.size === 0
+    pauseReasons.add(reason)
+    if (!wasRunning) return
+    for (const timer of timers.values()) {
+      if (!timer.handle) continue
+      clearTimeout(timer.handle)
+      timer.handle = undefined
+      timer.remaining = Math.max(0, timer.remaining - (Date.now() - timer.startedAt))
+    }
+  }
+
+  function resumeTimers(reason: string) {
+    pauseReasons.delete(reason)
+    if (pauseReasons.size > 0) return
+    for (const [id, timer] of timers) {
+      if (timer.handle) continue
+      timer.startedAt = Date.now()
+      timer.handle = setTimeout(() => fire(id), timer.remaining)
+    }
+  }
+
+  function settle(item: ToastItem<C>) {
+    const index = state.items.indexOf(item)
+    if (index >= 0) state.items.splice(index, 1)
+    notify()
+  }
+
+  function close(item: ToastItem<C>, source: 'manual' | 'auto') {
+    if (!item.open) return
+    item.open = false
+    stopTimer(item.id)
+    notify()
+    if (source === 'auto') item.onAutoClose?.(item.id)
+    item.onDismiss?.(item.id)
+    setTimeout(() => settle(item), SETTLE_DELAY)
+  }
+
+  function dismiss(id?: number | string) {
+    for (const item of state.items) {
+      if (id !== undefined && item.id !== id) continue
+      close(item, 'manual')
+    }
+  }
+
+  function push(message: string, options: InternalOptions<C> = {}) {
+    const tone = options.tone ?? 'neutral'
+    const existing =
+      options.id !== undefined ? state.items.find(t => t.id === options.id) : undefined
+
+    if (existing && existing.open) {
+      existing.tone = tone
+      existing.message = message
+      existing.description = options.description
+      existing.duration = options.duration ?? defaultDuration(tone)
+      existing.action = options.action
+      existing.cancel = options.cancel
+      existing.component = options.component ? wrap(options.component) : undefined
+      existing.componentProps = options.componentProps
+      if (options.onDismiss) existing.onDismiss = options.onDismiss
+      if (options.onAutoClose) existing.onAutoClose = options.onAutoClose
+      startTimer(existing)
+      notify()
+      return existing.id
+    }
+
+    if (existing) settle(existing)
+
+    const item: ToastItem<C> = {
+      id: options.id ?? ++seed,
+      tone,
+      message,
+      description: options.description,
+      duration: options.duration ?? defaultDuration(tone),
+      open: true,
+      action: options.action,
+      cancel: options.cancel,
+      component: options.component ? wrap(options.component) : undefined,
+      componentProps: options.componentProps,
+      onDismiss: options.onDismiss,
+      onAutoClose: options.onAutoClose,
+    }
+    state.items.push(item)
+    startTimer(item)
+    notify()
+
+    const visible = state.items.filter(t => t.open)
+    for (const stale of visible.slice(0, Math.max(0, visible.length - MAX_VISIBLE))) {
+      close(stale, 'manual')
+    }
+    return item.id
+  }
+
+  function promiseToast<T>(
+    promise: Promise<T>,
+    messages: ToastPromiseMessages<T>,
+    options: ToastTonedOptions = {},
+  ): Promise<T> {
+    const id = push(messages.loading, { ...options, tone: 'loading', duration: 0 })
+    promise
+      .then(value => {
+        const done = resolveMessage(messages.success, value)
+        push(done.message, { ...options, id, tone: 'success', description: done.description })
+      })
+      .catch(reason => {
+        const done = resolveMessage(messages.error, reason)
+        push(done.message, { ...options, id, tone: 'danger', description: done.description })
+      })
+    return promise
+  }
+
+  const toast = Object.assign((message: string, options?: ToastOptions) => push(message, options), {
+    success: (message: string, options?: ToastTonedOptions) =>
+      push(message, { ...options, tone: 'success' }),
+    danger: (message: string, options?: ToastTonedOptions) =>
+      push(message, { ...options, tone: 'danger' }),
+    warning: (message: string, options?: ToastTonedOptions) =>
+      push(message, { ...options, tone: 'warning' }),
+    info: (message: string, options?: ToastTonedOptions) =>
+      push(message, { ...options, tone: 'info' }),
+    loading: (message: string, options?: ToastTonedOptions) =>
+      push(message, { ...options, tone: 'loading' }),
+    custom: (component: C, options?: ToastTonedOptions & { props?: Record<string, unknown> }) => {
+      const { props: componentProps, ...rest } = options ?? {}
+      return push('', { ...rest, component, componentProps })
+    },
+    promise: promiseToast,
+    dismiss,
+  })
+
+  return { toast, dismiss, pauseTimers, resumeTimers }
+}

package/dist/shared/lib/anchor.ts

@@ -0,0 +1,83 @@
+import { prefersReducedMotion } from '../motion'
+
+export interface AnchorItem {
+  id: string
+  label: string
+  children?: AnchorItem[]
+}
+
+export type AnchorSlotItem<T extends AnchorItem> =
+  T | (T extends { children?: AnchorItem[] } ? NonNullable<T['children']>[number] : never)
+
+export interface SpyEntry {
+  id: string
+  label: string
+  depth: number
+}
+
+export interface AnchorEntry<T extends AnchorItem> extends SpyEntry {
+  item: AnchorSlotItem<T>
+}
+
+export const SCROLL_SPY_OPTIONS = {
+  rootMargin: '0px 0px -15% 0px',
+  threshold: [0, Number.EPSILON],
+}
+
+export function anchorEntries<T extends AnchorItem>(items: T[]): AnchorEntry<T>[] {
+  return items.flatMap(item => [
+    { id: item.id, label: item.label, depth: 0, item: item as AnchorSlotItem<T> },
+    ...(item.children ?? []).map(child => ({
+      id: child.id,
+      label: child.label,
+      depth: 1,
+      item: child as AnchorSlotItem<T>,
+    })),
+  ])
+}
+
+export function coveredEntries<E extends SpyEntry>(entries: E[], visible: ReadonlySet<string>) {
+  return entries.filter(entry => visible.has(entry.id))
+}
+
+export function coveredSpan(entries: SpyEntry[], visible: ReadonlySet<string>) {
+  const rows = entries.flatMap((entry, index) => (visible.has(entry.id) ? [index] : []))
+  return rows.length ? `${rows[0]! + 1} / ${rows.at(-1)! + 2}` : undefined
+}
+
+export function sameTargets(next: SpyEntry[], previous: SpyEntry[]) {
+  return (
+    next.length === previous.length &&
+    next.every((entry, index) => entry.id === previous[index]?.id)
+  )
+}
+
+export function hashTarget(entries: SpyEntry[]) {
+  const hash = decodeURIComponent(location.hash.slice(1))
+  return hash && entries.some(entry => entry.id === hash) ? hash : undefined
+}
+
+export function spyTargets(entries: SpyEntry[]) {
+  return entries.map(({ id }) => document.getElementById(id))
+}
+
+export function applyIntersections(
+  intersecting: Set<string>,
+  observed: IntersectionObserverEntry[],
+  current: string | undefined,
+): ReadonlySet<string> {
+  for (const entry of observed) {
+    if (entry.isIntersecting && entry.intersectionRatio > 0) intersecting.add(entry.target.id)
+    else intersecting.delete(entry.target.id)
+  }
+  return intersecting.size ? new Set(intersecting) : new Set(current ? [current] : [])
+}
+
+export function jumpToAnchor(event: { preventDefault(): void }, id: string) {
+  const el = document.getElementById(id)
+  if (!el) return false
+  event.preventDefault()
+  el.scrollIntoView({ behavior: prefersReducedMotion() ? 'auto' : 'smooth', block: 'start' })
+  history.replaceState(history.state, '', `#${id}`)
+  return true
+}

package/dist/shared/lib/banner.ts

@@ -0,0 +1,10 @@
+export type SlideDirection = 1 | -1
+
+export function stepBetween(previous: number, next: number, count: number): SlideDirection {
+  if (count < 2) return 1
+  const from = ((previous % count) + count) % count
+  const to = ((next % count) + count) % count
+  if (to === (from + 1) % count) return 1
+  if (to === (from - 1 + count) % count) return -1
+  return to > from ? 1 : -1
+}

package/dist/shared/lib/calendar/format.ts

@@ -0,0 +1,23 @@
+import { getLocalTimeZone, type DateValue } from '@internationalized/date'
+
+const local = (date: DateValue) => date.toDate(getLocalTimeZone())
+
+export function formatMonthHeading(tag: string, date: DateValue) {
+  return new Intl.DateTimeFormat(tag, { year: 'numeric', month: 'long' }).format(local(date))
+}
+
+export function formatYearHeading(tag: string, date: DateValue) {
+  return new Intl.DateTimeFormat(tag, { year: 'numeric' }).format(local(date))
+}
+
+export function formatMonthName(tag: string, date: DateValue) {
+  return new Intl.DateTimeFormat(tag, { month: 'short' }).format(local(date))
+}
+
+export function formatDigits(tag: string, value: number) {
+  return new Intl.NumberFormat(tag, { useGrouping: false }).format(value)
+}
+
+export function formatYearsHeading(tag: string, cells: DateValue[]) {
+  return `${formatDigits(tag, cells[0]!.year)} – ${formatDigits(tag, cells.at(-1)!.year)}`
+}

package/dist/shared/lib/caret.ts

@@ -0,0 +1,48 @@
+const MIRRORED = [
+  'font-family',
+  'font-size',
+  'font-weight',
+  'font-style',
+  'font-variant',
+  'font-feature-settings',
+  'line-height',
+  'letter-spacing',
+  'word-spacing',
+  'text-indent',
+  'text-transform',
+  'tab-size',
+  'direction',
+  'padding-top',
+  'padding-right',
+  'padding-bottom',
+  'padding-left',
+  'border-top-width',
+  'border-right-width',
+  'border-bottom-width',
+  'border-left-width',
+]
+
+export function caretTop(node: HTMLTextAreaElement, at = node.selectionEnd): number {
+  const style = getComputedStyle(node)
+  const mirror = node.ownerDocument.createElement('div')
+  for (const prop of MIRRORED) mirror.style.setProperty(prop, style.getPropertyValue(prop))
+  Object.assign(mirror.style, {
+    position: 'absolute',
+    top: '0',
+    insetInlineStart: '-9999px',
+    visibility: 'hidden',
+    pointerEvents: 'none',
+    boxSizing: 'border-box',
+    width: `${node.offsetWidth}px`,
+    whiteSpace: 'pre-wrap',
+    overflowWrap: 'break-word',
+  })
+  mirror.textContent = node.value.slice(0, at)
+  const marker = node.ownerDocument.createElement('span')
+  marker.textContent = node.value.slice(at) || '​'
+  mirror.append(marker)
+  node.ownerDocument.body.append(mirror)
+  const top = marker.offsetTop
+  mirror.remove()
+  return top
+}

package/dist/shared/lib/collapse.ts

@@ -0,0 +1,29 @@
+export type CollapseAxis = 'y' | 'x'
+
+export function collapseGapOf(parent: Element | null, axis: CollapseAxis = 'y') {
+  if (!parent) return '0px'
+  const style = getComputedStyle(parent)
+  const stacked = style.display.includes('flex') || style.display.includes('grid')
+  const gap = axis === 'y' ? style.rowGap : style.columnGap
+  return stacked && gap !== 'normal' ? gap : '0px'
+}
+
+export function writeCollapseGap(el: Element, parent: Element | null, axis: CollapseAxis = 'y') {
+  ;(el as HTMLElement).style.setProperty('--hn-collapse-gap', collapseGapOf(parent, axis))
+}
+
+export function collapseHooks(axis: CollapseAxis = 'y', parentOf?: () => Element | null) {
+  function beforeEnter(el: Element) {
+    writeCollapseGap(el, el.parentElement ?? parentOf?.() ?? null, axis)
+  }
+
+  function beforeLeave(el: Element) {
+    writeCollapseGap(el, el.parentElement, axis)
+  }
+
+  function afterEnter(el: Element) {
+    ;(el as HTMLElement).style.removeProperty('--hn-collapse-gap')
+  }
+
+  return { beforeEnter, afterEnter, beforeLeave }
+}

package/dist/shared/lib/command-palette/hotkey.ts

@@ -0,0 +1,27 @@
+export interface Hotkey {
+  key: string
+  mod: boolean
+  shift: boolean
+  alt: boolean
+}
+
+export function parseHotkey(spec: string): Hotkey {
+  const parts = spec
+    .toLowerCase()
+    .split('+')
+    .map(part => part.trim())
+    .filter(Boolean)
+  const modifiers = parts.slice(0, -1)
+  return {
+    key: parts.at(-1) ?? '',
+    mod: modifiers.includes('mod'),
+    shift: modifiers.includes('shift'),
+    alt: modifiers.includes('alt'),
+  }
+}
+
+export function matchesHotkey(event: KeyboardEvent, hotkey: Hotkey): boolean {
+  if (event.key.toLowerCase() !== hotkey.key) return false
+  const mod = event.metaKey || event.ctrlKey
+  return mod === hotkey.mod && event.shiftKey === hotkey.shift && event.altKey === hotkey.alt
+}