@hina-ui/vue 1.7.13 → 1.7.14

package/dist/shared/lib/tour.ts

@@ -1,11 +1,70 @@
 import { autoUpdate } from '@floating-ui/dom'
-import { hideOthers } from 'aria-hidden'
-import { isHighestLayer } from '../primitives/dismissable-layer'
+import { hideOutsideLayers, isHighestLayer } from '../primitives/dismissable-layer'
 import { getActiveElement, getTabbableCandidates } from '../primitives/focus-scope'
+import { cssTimeToMs } from './css-time'
 
 export type TourSide = 'top' | 'right' | 'bottom' | 'left'
 export type TourAlign = 'start' | 'center' | 'end'
-export type TourTarget = string | HTMLElement | (() => HTMLElement | null | undefined) | null
+
+export interface TourRectLike {
+  x?: number
+  y?: number
+  left?: number
+  top?: number
+  width: number
+  height: number
+}
+
+export interface TourVirtualElement {
+  getBoundingClientRect: () => TourRectLike
+  contextElement?: Element
+}
+
+export type TourTargetItem = string | Element | TourRectLike | TourVirtualElement
+export type TourTarget =
+  | TourTargetItem
+  | TourTargetItem[]
+  | (() => TourTargetItem | TourTargetItem[] | null | undefined)
+  | null
+
+export type TourPointerKind = 'mouse' | 'touch'
+export type TourCloseReason = 'finish' | 'skip' | 'escape' | 'close'
+
+export interface TourPoint {
+  x: number
+  y: number
+}
+
+export interface TourPointer {
+  move: (target: TourTarget | TourPoint, duration?: number) => Promise<void>
+  tap: () => Promise<void>
+  press: (duration?: number) => Promise<void>
+  drag: (
+    target: TourTarget | TourPoint,
+    duration?: number,
+    onMove?: (point: TourPoint) => void,
+  ) => Promise<void>
+  key: (key: string, duration?: number) => Promise<void>
+  hide: () => Promise<void>
+}
+
+export interface TourSpotlightOptions {
+  padding?: number
+  radius?: number
+  wait?: number
+}
+
+export interface TourPlayContext {
+  step: number
+  signal: AbortSignal
+  defer: (cleanup: () => void) => void
+  pointer: TourPointer
+  spotlight: (target?: TourTarget, options?: TourSpotlightOptions) => Promise<void>
+  waitFor: (target: TourTarget, timeout?: number) => Promise<boolean>
+  sleep: (ms: number) => Promise<void>
+}
+
+export type TourPlay = (context: TourPlayContext) => void | Promise<void>
 
 export interface TourStepBase {
   target?: TourTarget
@@ -16,8 +75,11 @@ export interface TourStepBase {
   padding?: number
   radius?: number
   blockTarget?: boolean
+  blockPage?: boolean
   scroll?: boolean
   beacon?: boolean
+  wait?: number
+  play?: TourPlay
 }
 
 export type TourBeforeChange = (
@@ -48,12 +110,100 @@ export function tourTargetBlocked(step: TourStepBase, blockTarget: boolean) {
   return step.blockTarget ?? blockTarget
 }
 
-export function resolveTourTarget(target: TourTarget | undefined): HTMLElement | null {
+export function tourPageBlocked(step: TourStepBase, blockPage: boolean) {
+  return step.blockPage ?? blockPage
+}
+
+export interface TourResolvedTarget {
+  elements: HTMLElement[]
+  virtual: boolean
+  rect: () => TourRect
+}
+
+function toRect(rect: TourRectLike): TourRect {
+  return {
+    x: rect.left ?? rect.x ?? 0,
+    y: rect.top ?? rect.y ?? 0,
+    width: rect.width,
+    height: rect.height,
+  }
+}
+
+export function unionRect(rects: TourRect[]): TourRect {
+  const left = Math.min(...rects.map(rect => rect.x))
+  const top = Math.min(...rects.map(rect => rect.y))
+  const right = Math.max(...rects.map(rect => rect.x + rect.width))
+  const bottom = Math.max(...rects.map(rect => rect.y + rect.height))
+  return { x: left, y: top, width: right - left, height: bottom - top }
+}
+
+type TourItemReader = { element: HTMLElement | null; read: () => TourRect }
+
+function readItem(item: TourTargetItem): TourItemReader | null {
+  if (typeof item === 'string') {
+    if (typeof document === 'undefined') return null
+    const element = document.querySelector<HTMLElement>(item)
+    return element ? { element, read: () => toRect(element.getBoundingClientRect()) } : null
+  }
+  if (typeof Element !== 'undefined' && item instanceof Element)
+    return { element: item as HTMLElement, read: () => toRect(item.getBoundingClientRect()) }
+  if (typeof (item as TourVirtualElement).getBoundingClientRect === 'function') {
+    const virtual = item as TourVirtualElement
+    return { element: null, read: () => toRect(virtual.getBoundingClientRect()) }
+  }
+  const rect = toRect(item as TourRectLike)
+  return { element: null, read: () => rect }
+}
+
+export function resolveTourTarget(target: TourTarget | undefined): TourResolvedTarget | null {
   if (!target) return null
-  if (typeof target === 'string')
-    return typeof document === 'undefined' ? null : document.querySelector<HTMLElement>(target)
-  if (typeof target === 'function') return target() ?? null
-  return target
+  const value = typeof target === 'function' ? target() : target
+  if (!value) return null
+  const items = Array.isArray(value) ? value : [value]
+  if (!items.length) return null
+  const readers: TourItemReader[] = []
+  for (const item of items) {
+    const reader = item ? readItem(item) : null
+    if (!reader) return null
+    readers.push(reader)
+  }
+  return {
+    elements: readers.flatMap(reader => (reader.element ? [reader.element] : [])),
+    virtual: readers.some(reader => !reader.element),
+    rect: () => unionRect(readers.map(reader => reader.read())),
+  }
+}
+
+export function waitForTourTarget(
+  target: TourTarget | undefined,
+  timeout: number,
+  signal?: AbortSignal,
+): Promise<TourResolvedTarget | null> {
+  const found = resolveTourTarget(target)
+  if (found || timeout <= 0 || signal?.aborted) return Promise.resolve(found)
+  return new Promise(resolve => {
+    const check = () => {
+      const resolved = resolveTourTarget(target)
+      if (resolved) finish(resolved)
+    }
+    const observer = new MutationObserver(check)
+    const interval = window.setInterval(check, 100)
+    const timer = window.setTimeout(() => finish(null), timeout)
+    const abort = () => finish(null)
+    function finish(value: TourResolvedTarget | null) {
+      observer.disconnect()
+      window.clearInterval(interval)
+      window.clearTimeout(timer)
+      signal?.removeEventListener('abort', abort)
+      resolve(value)
+    }
+    observer.observe(document.documentElement, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+    })
+    signal?.addEventListener('abort', abort)
+  })
 }
 
 export function clampTourStep(step: number | undefined, count: number) {
@@ -167,11 +317,17 @@ export async function runTourChange(
   }
 }
 
-export function tourReference(element: HTMLElement, padding = TOUR_PADDING) {
+export function tourCardGap(element?: Element | null) {
+  return cssTimeToMs(
+    getComputedStyle(element ?? document.documentElement).getPropertyValue('--hn-duration-exit'),
+  )
+}
+
+export function tourReference(read: () => TourRect | null, contextElement?: Element | null) {
   return {
-    contextElement: element,
+    contextElement: contextElement ?? undefined,
     getBoundingClientRect() {
-      const rect = spotlightRect(element.getBoundingClientRect(), padding)
+      const rect = read() ?? { x: 0, y: 0, width: 0, height: 0 }
       return {
         ...rect,
         left: rect.x,
@@ -183,23 +339,37 @@ export function tourReference(element: HTMLElement, padding = TOUR_PADDING) {
   }
 }
 
-export function watchTourTarget(element: HTMLElement, onChange: () => void) {
+export function watchTourTarget(resolved: TourResolvedTarget, onChange: () => void) {
   onChange()
-  return autoUpdate(element, document.documentElement, onChange)
+  const stops = resolved.elements.map(element =>
+    autoUpdate(element, document.documentElement, onChange),
+  )
+  if (resolved.virtual)
+    stops.push(
+      autoUpdate(
+        { getBoundingClientRect: () => DOMRect.fromRect(resolved.rect()) },
+        document.documentElement,
+        onChange,
+        { animationFrame: true },
+      ),
+    )
+  return () => {
+    for (const stop of stops) stop()
+  }
 }
 
-export function isFullyVisible(element: HTMLElement) {
-  const rect = element.getBoundingClientRect()
+export function isFullyVisible(rect: TourRect) {
   return (
-    rect.top >= 0 &&
-    rect.left >= 0 &&
-    rect.bottom <= window.innerHeight &&
-    rect.right <= window.innerWidth
+    rect.y >= 0 &&
+    rect.x >= 0 &&
+    rect.y + rect.height <= window.innerHeight &&
+    rect.x + rect.width <= window.innerWidth
   )
 }
 
-export function revealTourTarget(element: HTMLElement) {
-  if (isFullyVisible(element)) return
+export function revealTourTarget(resolved: TourResolvedTarget) {
+  const [element] = resolved.elements
+  if (!element || isFullyVisible(resolved.rect())) return
   const reduce = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches
   element.scrollIntoView({
     block: 'center',
@@ -210,15 +380,18 @@ export function revealTourTarget(element: HTMLElement) {
 
 export function hideOutsideTour(elements: (HTMLElement | null | undefined)[]) {
   const present = elements.filter((element): element is HTMLElement => !!element?.isConnected)
-  return present.length ? hideOthers(present) : () => {}
+  return present.length ? hideOutsideLayers(present) : () => {}
+}
+
+export function tourOwnsInput(layer: HTMLElement | null | undefined, scripted: boolean) {
+  return scripted || isHighestLayer(layer)
 }
 
 export function trapTourFocus(
   getContainers: () => (HTMLElement | null | undefined)[],
-  getLayer: () => HTMLElement | null | undefined,
+  enabled: () => boolean,
 ) {
   const containers = () => getContainers().filter((node): node is HTMLElement => !!node)
-  const enabled = () => isHighestLayer(getLayer())
   const inside = (node: Node | null) => !!node && containers().some(c => c.contains(node))
 
   function candidates() {
@@ -259,3 +432,8 @@ export function trapTourFocus(
     document.removeEventListener('keydown', onKeyDown, true)
   }
 }
+
+export function listenTourKeys(onKeyDown: (event: KeyboardEvent) => void) {
+  window.addEventListener('keydown', onKeyDown, true)
+  return () => window.removeEventListener('keydown', onKeyDown, true)
+}

package/dist/shared/locale/en-US.ts

@@ -43,6 +43,7 @@ export const enUS: UiMessages = {
     next: 'Next',
     finish: 'Done',
     skip: 'Skip tour',
+    replay: 'Replay',
     progress: (step, total) => `${step} / ${total}`,
     beacon: (step, title) => (title ? `Open step ${step}: ${title}` : `Open step ${step}`),
   },

package/dist/shared/locale/ja-JP.ts

@@ -43,6 +43,7 @@ export const jaJP: UiMessages = {
     next: '次へ',
     finish: '完了',
     skip: 'ガイドをスキップ',
+    replay: 'もう一度再生',
     progress: (step, total) => `${step} / ${total}`,
     beacon: (step, title) =>
       title ? `ステップ ${step} を開く：${title}` : `ステップ ${step} を開く`,

package/dist/shared/locale/types.ts

@@ -36,6 +36,7 @@ export interface UiMessages {
     next: string
     finish: string
     skip: string
+    replay: string
     progress: (step: number, total: number) => string
     beacon: (step: number, title: string) => string
   }

package/dist/shared/locale/zh-CN.ts

@@ -38,6 +38,7 @@ export const zhCN: UiMessages = {
     next: '下一步',
     finish: '完成',
     skip: '跳过引导',
+    replay: '重新演示',
     progress: (step, total) => `${step} / ${total}`,
     beacon: (step, title) => (title ? `查看第 ${step} 步：${title}` : `查看第 ${step} 步`),
   },

package/dist/shared/primitives/dialog/index.ts

@@ -1,4 +1,4 @@
-import { hideOthers } from 'aria-hidden'
+import { hideOutsideLayers } from '../dismissable-layer'
 
 export function dialogWarnings({
   titleName = 'DialogTitle',
@@ -40,7 +40,7 @@ export function hideOutside(element: Element) {
   try {
     insideClosedPopover = !!element.closest('[popover]:not(:popover-open)')
   } catch {}
-  return insideClosedPopover ? undefined : hideOthers(element)
+  return insideClosedPopover ? undefined : hideOutsideLayers([element])
 }
 
 interface OutsideEvent {

package/dist/shared/primitives/dismissable-layer/index.ts

@@ -1,3 +1,5 @@
+import { hideOthers } from 'aria-hidden'
+
 export type PointerDownOutsideEvent = CustomEvent<{ originalEvent: PointerEvent }>
 export type FocusOutsideEvent = CustomEvent<{ originalEvent: FocusEvent }>
 
@@ -35,11 +37,30 @@ export function addLayer(element: HTMLElement) {
   }
 }
 
+const branchInline = new Map<HTMLElement, string>()
+
+function syncBranchPointerEvents() {
+  const list = [...branches]
+  for (const branch of list) branch.style.pointerEvents = branchInline.get(branch) ?? ''
+  if (blocking.size === 0 || list.length === 0) return
+  const body = list[0]!.ownerDocument.body
+  const blocked = body.style.pointerEvents
+  body.style.pointerEvents = originalBodyPointerEvents ?? ''
+  const natural = list.map(branch => getComputedStyle(branch).pointerEvents)
+  body.style.pointerEvents = blocked
+  list.forEach((branch, index) => (branch.style.pointerEvents = natural[index]!))
+}
+
 export function addBranch(element: HTMLElement) {
+  if (!branches.has(element)) branchInline.set(element, element.style.pointerEvents)
   branches.add(element)
+  syncBranchPointerEvents()
   changed()
   return () => {
-    if (branches.delete(element)) changed()
+    if (!branches.delete(element)) return
+    element.style.pointerEvents = branchInline.get(element) ?? ''
+    branchInline.delete(element)
+    changed()
   }
 }
 
@@ -50,11 +71,13 @@ export function blockOutsidePointerEvents(element: HTMLElement) {
     body.style.pointerEvents = 'none'
   }
   blocking.add(element)
+  syncBranchPointerEvents()
   changed()
   return () => {
     if (!blocking.delete(element)) return
     if (blocking.size === 0 && originalBodyPointerEvents != null)
       body.style.pointerEvents = originalBodyPointerEvents
+    syncBranchPointerEvents()
     changed()
   }
 }
@@ -62,6 +85,7 @@ export function blockOutsidePointerEvents(element: HTMLElement) {
 export function releaseLayer(element: HTMLElement) {
   const removed = layers.delete(element)
   const unblocked = blocking.delete(element)
+  if (unblocked) syncBranchPointerEvents()
   if (removed || unblocked) changed()
 }
 
@@ -82,6 +106,7 @@ export function bodyPointerEventsDisabled() {
 }
 
 export function pointerEventsEnabled(element: HTMLElement | null | undefined) {
+  if (inBranch(element ?? null)) return true
   const highest = [...blocking].at(-1)
   return layerIndex(element) >= (highest ? [...layers].indexOf(highest) : -1)
 }
@@ -95,6 +120,28 @@ export function inBranch(target: EventTarget | null) {
   return [...branches].some(branch => branch.contains(target as Node | null))
 }
 
+export function hideOutsideLayers(targets: Element[]) {
+  const connected = () => [...branches].filter(branch => branch.isConnected)
+  let kept = connected()
+  const hide = () => {
+    const visible = [...targets.filter(target => target.isConnected), ...kept]
+    return visible.length ? hideOthers(visible) : () => {}
+  }
+  let undo = hide()
+  const stop = subscribeLayers(() => {
+    const next = connected()
+    if (next.length === kept.length && next.every((branch, index) => branch === kept[index])) return
+    kept = next
+    const previous = undo
+    undo = hide()
+    previous()
+  })
+  return () => {
+    stop()
+    undo()
+  }
+}
+
 export function isLayerExist(layer: HTMLElement, target: EventTarget | null) {
   if (!(target instanceof Element)) return false
   const targetLayer = target.closest('[data-dismissable-layer]')

package/dist/shared/primitives/focus-scope/index.ts

@@ -1,3 +1,5 @@
+import { inBranch } from '../dismissable-layer'
+
 export const AUTOFOCUS_ON_MOUNT = 'focusScope.autoFocusOnMount'
 export const AUTOFOCUS_ON_UNMOUNT = 'focusScope.autoFocusOnUnmount'
 const EVENT_OPTIONS = { bubbles: false, cancelable: true }
@@ -118,21 +120,21 @@ export function trapFocus(container: HTMLElement, scope: FocusScopeAPI) {
     if (scope.paused) return
     const target = event.target as HTMLElement | null
     if (container.contains(target)) lastFocused = target
-    else focus(lastFocused, { select: true })
+    else if (!inBranch(target)) focus(lastFocused, { select: true })
   }
 
   const handleFocusOut = (event: FocusEvent) => {
     if (scope.paused) return
     const related = event.relatedTarget as HTMLElement | null
     if (related === null) return
-    if (!container.contains(related)) focus(lastFocused, { select: true })
+    if (!container.contains(related) && !inBranch(related)) focus(lastFocused, { select: true })
   }
 
   const handleMutations = (mutations: MutationRecord[]) => {
     if (lastFocused === null) return
     if (!mutations.some(mutation => mutation.removedNodes.length > 0)) return
     const active = getActiveElement()
-    if (active && container.contains(active)) return
+    if (active && (container.contains(active) || inBranch(active))) return
     if (!container.contains(lastFocused)) focus(container)
   }
 

package/dist/shared/styles/semantic.css

@@ -88,6 +88,7 @@
   --hn-bg-subtle: #141414;
   --hn-bg-inset: var(--color-neutral-800);
   --hn-bg-scrim: rgb(0 0 0 / 0.6);
+  --hn-bg-veil: color-mix(in srgb, var(--hn-surface) 70%, transparent);
 
   --hn-fg-default: var(--color-neutral-150);
   --hn-fg-max: var(--color-neutral-0);

package/dist/shared/styles/tour.css

@@ -13,8 +13,42 @@
   }
 }
 
+@keyframes hn-tour-ripple {
+  from {
+    opacity: 0.6;
+    transform: translate(-50%, -50%) scale(0.2);
+  }
+  to {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+@keyframes hn-tour-press {
+  from {
+    opacity: 0.15;
+    transform: translate(-50%, -50%) scale(0.4);
+  }
+  to {
+    opacity: 0.45;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+@keyframes hn-tour-key-press {
+  50% {
+    scale: 0.92;
+  }
+}
+
 @utility hn-tour-mask {
-  transition: clip-path var(--hn-duration-base) var(--hn-ease-move);
+  &[data-hn-tour-mask] {
+    z-index: calc(var(--hn-z-overlay) + 1);
+  }
+
+  &[data-mask='dim'] {
+    backdrop-filter: none;
+  }
 
   &[data-state='open'][data-hn-tour-hole='shown'] {
     animation:
@@ -24,6 +58,77 @@
   &[data-state='open'][data-hn-tour-hole='hidden'] {
     animation:
       hn-fade-in var(--hn-duration-base) var(--hn-ease-enter),
-      hn-tour-hole-out var(--hn-duration-exit) var(--hn-ease-exit);
+      hn-tour-hole-out var(--hn-duration-base) var(--hn-ease-move);
+  }
+}
+
+@utility hn-tour-pointer {
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: calc(var(--hn-z-overlay) + 2);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--hn-duration-fast) var(--hn-ease-move);
+
+  &[data-state='shown'] {
+    opacity: 1;
+  }
+
+  & [data-hn-tour-pointer-glyph] {
+    transition: scale var(--hn-duration-fast) var(--hn-ease-press);
+  }
+  &[data-kind='mouse'] [data-hn-tour-pointer-glyph] {
+    transform-origin: 4px 2px;
+  }
+  &[data-pressed] [data-hn-tour-pointer-glyph] {
+    scale: 0.85;
+  }
+
+  & [data-hn-tour-ripple],
+  & [data-hn-tour-pointer-ring] {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 9999px;
+    pointer-events: none;
+  }
+  & [data-hn-tour-ripple] {
+    border: 2px solid var(--hn-accent);
+    animation: hn-tour-ripple var(--hn-duration-slow) var(--hn-ease-enter) forwards;
+  }
+  & [data-hn-tour-pointer-ring] {
+    background-color: var(--hn-accent);
+    opacity: 0;
+    transform: translate(-50%, -50%);
+  }
+  &[data-pressed='long'] [data-hn-tour-pointer-ring] {
+    animation: hn-tour-press var(--hn-tour-press, 800ms) linear forwards;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    & [data-hn-tour-ripple],
+    &[data-pressed='long'] [data-hn-tour-pointer-ring] {
+      animation: none;
+    }
+  }
+}
+
+@utility hn-tour-key {
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: calc(var(--hn-z-overlay) + 2);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--hn-duration-fast) var(--hn-ease-move);
+
+  &[data-state='shown'] {
+    opacity: 1;
+  }
+  &[data-state='shown'] > * {
+    animation: hn-tour-key-press var(--hn-duration-base) var(--hn-ease-press);
   }
 }

package/dist/shared/variants/image.ts

@@ -17,6 +17,9 @@ export const image = tv({
     lazy: {
       true: 'transition-opacity duration-(--hn-duration-base) ease-enter motion-reduce:transition-none',
     },
+    placeholder: {
+      true: '',
+    },
     fit: {
       cover: 'object-cover',
       contain: 'object-contain',
@@ -25,6 +28,31 @@ export const image = tv({
       'scale-down': 'object-scale-down',
     },
   },
+  compoundVariants: [
+    {
+      lazy: true,
+      placeholder: true,
+      class: 'duration-(--hn-duration-slow) ease-move',
+    },
+  ],
+  defaultVariants: { fit: 'cover' },
+})
+
+export const imageFrame = tv({
+  base: 'relative isolate block size-full',
+})
+
+export const imagePlaceholder = tv({
+  base: 'bg-center bg-no-repeat',
+  variants: {
+    fit: {
+      cover: 'bg-cover',
+      contain: 'bg-contain',
+      fill: 'bg-size-[100%_100%]',
+      none: 'bg-cover',
+      'scale-down': 'bg-contain',
+    },
+  },
   defaultVariants: { fit: 'cover' },
 })
 

package/dist/shared/variants/tour.ts

@@ -1,19 +1,21 @@
 import { tv } from '../lib/tv'
 
+const layer = 'z-[calc(var(--hn-z-overlay)+1)]'
+
 export const tourMask = tv({ base: 'hn-scrim hn-tour-mask' })
 
-export const tourBlocker = tv({ base: 'fixed z-(--hn-z-overlay)' })
+export const tourBlocker = tv({ base: `fixed ${layer}` })
 
 export const tourCard = tv({
-  base: 'relative z-(--hn-z-overlay) flex w-80 max-w-[calc(100vw-2rem)] flex-col gap-3 overflow-visible p-4 shadow-lg outline-none',
+  base: `relative ${layer} flex w-80 max-w-[calc(100vw-2rem)] flex-col gap-3 overflow-visible p-4 shadow-lg outline-none`,
 })
 
 export const tourCentered = tv({
-  base: 'pointer-events-none fixed inset-0 z-(--hn-z-overlay) grid place-items-center p-4 [&>*]:pointer-events-auto',
+  base: `pointer-events-none fixed inset-0 ${layer} grid place-items-center p-4 [&>*]:pointer-events-auto`,
 })
 
 export const tourBeacon = tv({
-  base: 'hn-focus-ring fixed z-(--hn-z-overlay) size-4 -translate-x-1/2 -translate-y-1/2 cursor-pointer rounded-full',
+  base: `hn-focus-ring fixed ${layer} size-4 -translate-x-1/2 -translate-y-1/2 cursor-pointer rounded-full`,
 })
 
 export const tourBeaconPulse = tv({
@@ -27,3 +29,19 @@ export const tourBeaconDot = tv({
 export const tourHeader = tv({ base: 'flex items-start gap-2' })
 
 export const tourFooter = tv({ base: 'flex items-center gap-2' })
+
+export const tourPointer = tv({ base: 'hn-tour-pointer' })
+
+export const tourPointerArrow = tv({
+  base: 'fill-fg stroke-surface absolute top-0 size-6 -translate-x-1 -translate-y-0.5 drop-shadow-md',
+})
+
+export const tourPointerTouch = tv({
+  base: 'bg-fg/30 ring-surface absolute top-0 block size-9 -translate-x-1/2 -translate-y-1/2 rounded-full shadow-md ring-2',
+})
+
+export const tourKey = tv({ base: 'hn-tour-key' })
+
+export const tourKeyCap = tv({
+  base: 'border-line bg-surface text-fg block min-w-8 -translate-x-1/2 rounded-md border px-2 py-1 text-center text-sm font-medium whitespace-nowrap shadow-md',
+})

package/dist/types/shared/src/lib/thumbhash.d.ts

@@ -0,0 +1,2 @@
+export declare function thumbhashToDataUrl(hash: string): string | null;
+//# sourceMappingURL=thumbhash.d.ts.map