@hina-ui/vue 1.7.5 → 1.7.7

package/dist/shared/lib/highlighter.ts

@@ -0,0 +1,98 @@
+import type { HighlighterCore, ThemedToken } from 'shiki/core'
+
+const langLoaders: Record<string, () => Promise<{ default: unknown }>> = {
+  typescript: () => import('shiki/langs/typescript.mjs'),
+  tsx: () => import('shiki/langs/tsx.mjs'),
+  javascript: () => import('shiki/langs/javascript.mjs'),
+  jsx: () => import('shiki/langs/jsx.mjs'),
+  vue: () => import('shiki/langs/vue.mjs'),
+  html: () => import('shiki/langs/html.mjs'),
+  css: () => import('shiki/langs/css.mjs'),
+  json: () => import('shiki/langs/json.mjs'),
+  bash: () => import('shiki/langs/bash.mjs'),
+  markdown: () => import('shiki/langs/markdown.mjs'),
+  yaml: () => import('shiki/langs/yaml.mjs'),
+  sql: () => import('shiki/langs/sql.mjs'),
+  prisma: () => import('shiki/langs/prisma.mjs'),
+  diff: () => import('shiki/langs/diff.mjs'),
+}
+
+const langAliases: Record<string, string> = {
+  ts: 'typescript',
+  js: 'javascript',
+  sh: 'bash',
+  shell: 'bash',
+  zsh: 'bash',
+  md: 'markdown',
+  yml: 'yaml',
+}
+
+let core: Promise<HighlighterCore> | undefined
+const loadedLangs = new Set<string>()
+
+function getCore() {
+  core ??= (async () => {
+    const [{ createHighlighterCore }, { createJavaScriptRegexEngine }, light, dark] =
+      await Promise.all([
+        import('shiki/core'),
+        import('shiki/engine/javascript'),
+        import('shiki/themes/vitesse-light.mjs'),
+        import('shiki/themes/vitesse-dark.mjs'),
+      ])
+    return createHighlighterCore({
+      themes: [light.default, dark.default],
+      langs: [],
+      engine: createJavaScriptRegexEngine({ forgiving: true }),
+    })
+  })()
+  return core
+}
+
+function escape(text: string): string {
+  return text
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+}
+
+function inlineStyle(style: ThemedToken['htmlStyle']): string {
+  if (!style) return ''
+  if (typeof style === 'string') return style
+  return Object.entries(style)
+    .map(([key, value]) => `${key}:${value}`)
+    .join(';')
+}
+
+export function tokensToHtml(lines: ThemedToken[][]): string {
+  return lines
+    .map(line =>
+      line
+        .map(
+          token =>
+            `<span style="${escape(inlineStyle(token.htmlStyle))}">${escape(token.content)}</span>`,
+        )
+        .join(''),
+    )
+    .join('\n')
+}
+
+export async function tokenize(code: string, lang: string): Promise<ThemedToken[][] | null> {
+  const resolved = langAliases[lang] ?? lang
+  const load = langLoaders[resolved]
+  if (!load) return null
+
+  const highlighter = await getCore()
+  if (!loadedLangs.has(resolved)) {
+    await highlighter.loadLanguage(
+      (await load()).default as Parameters<HighlighterCore['loadLanguage']>[0],
+    )
+    loadedLangs.add(resolved)
+  }
+
+  return highlighter.codeToTokens(code, {
+    lang: resolved,
+    themes: { light: 'vitesse-light', dark: 'vitesse-dark' },
+    defaultColor: false,
+  }).tokens
+}

package/dist/shared/lib/iris-origin.ts

@@ -0,0 +1,40 @@
+export interface IrisOrigin {
+  x: number
+  y: number
+}
+
+export function irisOrigin(
+  rects: readonly DOMRect[],
+  clientX: number,
+  clientY: number,
+): IrisOrigin | null {
+  const valid = rects.filter(r => r.width > 0 && r.height > 0)
+  if (valid.length === 0) return null
+
+  const totalWidth = valid.reduce((sum, r) => sum + r.width, 0)
+  const lineHeight = valid[0]!.height
+
+  let virtualX: number | null = null
+  let virtualY = 0
+  let walked = 0
+  for (const r of valid) {
+    const inside =
+      clientY >= r.top - 2 &&
+      clientY <= r.bottom + 2 &&
+      clientX >= r.left - 2 &&
+      clientX <= r.right + 2
+    if (inside) {
+      virtualX = walked + (clientX - r.left)
+      virtualY = clientY - r.top
+      break
+    }
+    walked += r.width
+  }
+
+  if (virtualX === null || totalWidth === 0 || lineHeight === 0) return null
+
+  return {
+    x: (virtualX / totalWidth) * 100,
+    y: (virtualY / lineHeight) * 100,
+  }
+}

package/dist/shared/lib/lightbox/clip.ts

@@ -0,0 +1,117 @@
+import type { Rect } from './pose'
+
+export interface Corner {
+  x: number
+  y: number
+}
+
+export type Corners = [Corner, Corner, Corner, Corner]
+
+function emptyCorners(): Corners {
+  return [
+    { x: 0, y: 0 },
+    { x: 0, y: 0 },
+    { x: 0, y: 0 },
+    { x: 0, y: 0 },
+  ]
+}
+
+function length(value: string, size: number): number {
+  const number = Number.parseFloat(value) || 0
+  return value.endsWith('%') ? (number * size) / 100 : number
+}
+
+function cornersOf(style: CSSStyleDeclaration, width: number, height: number): Corners {
+  const corners = [
+    style.borderTopLeftRadius,
+    style.borderTopRightRadius,
+    style.borderBottomRightRadius,
+    style.borderBottomLeftRadius,
+  ].map(value => {
+    const [x = '0', y = x] = value.split(/\s+/)
+    return { x: length(x, width), y: length(y, height) }
+  }) as Corners
+  const [tl, tr, br, bl] = corners
+  const factor = Math.min(
+    1,
+    width / (tl.x + tr.x || 1),
+    width / (bl.x + br.x || 1),
+    height / (tl.y + bl.y || 1),
+    height / (tr.y + br.y || 1),
+  )
+  return corners.map(corner => ({ x: corner.x * factor, y: corner.y * factor })) as Corners
+}
+
+function paddingBox(node: Element, style: CSSStyleDeclaration) {
+  const box = node.getBoundingClientRect()
+  const width = node instanceof HTMLElement ? node.offsetWidth : box.width
+  const height = node instanceof HTMLElement ? node.offsetHeight : box.height
+  const sx = width ? box.width / width : 1
+  const sy = height ? box.height / height : 1
+  const left = Number.parseFloat(style.borderLeftWidth) || 0
+  const right = Number.parseFloat(style.borderRightWidth) || 0
+  const top = Number.parseFloat(style.borderTopWidth) || 0
+  const bottom = Number.parseFloat(style.borderBottomWidth) || 0
+  const corners = cornersOf(style, width, height)
+  const borders = [
+    [left, top],
+    [right, top],
+    [right, bottom],
+    [left, bottom],
+  ]
+  return {
+    rect: {
+      x: box.x + left * sx,
+      y: box.y + top * sy,
+      width: Math.max(0, box.width - (left + right) * sx),
+      height: Math.max(0, box.height - (top + bottom) * sy),
+    },
+    corners: corners.map((corner, index) => ({
+      x: Math.max(0, corner.x - borders[index]![0]!) * sx,
+      y: Math.max(0, corner.y - borders[index]![1]!) * sy,
+    })) as Corners,
+  }
+}
+
+function points(rect: Rect) {
+  return [
+    [rect.x, rect.y],
+    [rect.x + rect.width, rect.y],
+    [rect.x + rect.width, rect.y + rect.height],
+    [rect.x, rect.y + rect.height],
+  ]
+}
+
+export function clipOf(el: Element | null | undefined, box: Rect) {
+  let rect = { x: box.x, y: box.y, width: box.width, height: box.height }
+  const clips: ReturnType<typeof paddingBox>[] = []
+  for (let node = el; node; node = node.parentElement) {
+    const style = getComputedStyle(node)
+    const clipX = node === el || /^(hidden|clip|scroll|auto)$/.test(style.overflowX)
+    const clipY = node === el || /^(hidden|clip|scroll|auto)$/.test(style.overflowY)
+    if (!clipX && !clipY) continue
+    const clip = paddingBox(node, style)
+    const x = clipX ? Math.max(rect.x, clip.rect.x) : rect.x
+    const y = clipY ? Math.max(rect.y, clip.rect.y) : rect.y
+    const right = clipX
+      ? Math.min(rect.x + rect.width, clip.rect.x + clip.rect.width)
+      : rect.x + rect.width
+    const bottom = clipY
+      ? Math.min(rect.y + rect.height, clip.rect.y + clip.rect.height)
+      : rect.y + rect.height
+    rect = { x, y, width: Math.max(0, right - x), height: Math.max(0, bottom - y) }
+    if (clipX && clipY) clips.push(clip)
+  }
+  const corners = emptyCorners()
+  const visible = points(rect)
+  for (const clip of clips) {
+    const edges = points(clip.rect)
+    for (let index = 0; index < 4; index += 1) {
+      if (visible[index]!.some((value, axis) => Math.abs(value - edges[index]![axis]!) > 0.5))
+        continue
+      corners[index]!.x = Math.max(corners[index]!.x, clip.corners[index]!.x)
+      corners[index]!.y = Math.max(corners[index]!.y, clip.corners[index]!.y)
+    }
+  }
+  return { rect, corners }
+}

package/dist/shared/lib/lightbox/download.ts

@@ -0,0 +1,29 @@
+export function fileNameOf(url: string, fallback = 'image'): string {
+  try {
+    const parsed = new URL(url, 'http://localhost')
+    if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') return fallback
+    const name = decodeURIComponent(parsed.pathname.split('/').filter(Boolean).pop() ?? '')
+    return name || fallback
+  } catch {
+    return fallback
+  }
+}
+
+export async function saveImage(url: string): Promise<'saved' | 'opened'> {
+  try {
+    const response = await fetch(url, { mode: 'cors' })
+    if (!response.ok) throw new Error(String(response.status))
+    const blob = await response.blob()
+    const href = URL.createObjectURL(blob)
+    const anchor = Object.assign(document.createElement('a'), {
+      href,
+      download: fileNameOf(url),
+    })
+    anchor.click()
+    setTimeout(() => URL.revokeObjectURL(href), 0)
+    return 'saved'
+  } catch {
+    window.open(url, '_blank', 'noopener')
+    return 'opened'
+  }
+}

package/dist/shared/lib/lightbox/gesture.ts

@@ -0,0 +1,54 @@
+import type { Point } from './zoom'
+
+export interface Touch extends Point {
+  time: number
+}
+
+export const DRAG_THRESHOLD = 4
+export const TAP_MAX_DISTANCE = 10
+export const TAP_MAX_MS = 300
+export const DOUBLE_TAP_MS = 300
+export const DOUBLE_TAP_DISTANCE = 25
+export const WHEEL_LINE = 16
+export const TRACKPAD_INTENSITY = 0.01
+
+export const FLING = {
+  power: 0.8,
+  timeConstant: 750,
+  bounceStiffness: 200,
+  bounceDamping: 40,
+  restDelta: 1,
+  restSpeed: 10,
+} as const
+
+export function midpoint(a: Point, b: Point): Point {
+  return { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 }
+}
+
+export function distance(a: Point, b: Point): number {
+  return Math.hypot(b.x - a.x, b.y - a.y)
+}
+
+export function dragAxis(start: Point, current: Point): 'x' | 'y' | null {
+  const dx = Math.abs(current.x - start.x)
+  const dy = Math.abs(current.y - start.y)
+  if (Math.max(dx, dy) < DRAG_THRESHOLD) return null
+  return dx > dy ? 'x' : 'y'
+}
+
+export function isTap(start: Touch, end: Touch): boolean {
+  return distance(start, end) <= TAP_MAX_DISTANCE && end.time - start.time <= TAP_MAX_MS
+}
+
+export function isDoubleTap(previous: Touch | null, next: Touch): boolean {
+  if (!previous) return false
+  return (
+    next.time - previous.time <= DOUBLE_TAP_MS && distance(previous, next) <= DOUBLE_TAP_DISTANCE
+  )
+}
+
+export function wheelDelta(deltaY: number, deltaMode: number, stageHeight: number): number {
+  if (deltaMode === 1) return deltaY * WHEEL_LINE
+  if (deltaMode === 2) return deltaY * stageHeight
+  return deltaY
+}

package/dist/shared/lib/lightbox/paging.ts

@@ -0,0 +1,33 @@
+import { rubberBand } from './zoom'
+
+export const PAGE_COMMIT = 0.2
+export const PAGE_VELOCITY = 400
+export const PAGE_PROJECTION = 0.25
+
+export function pageSteps(offset: number, velocity: number, width: number): number {
+  if (width <= 0) return 0
+  if (Math.abs(offset) < width * PAGE_COMMIT && Math.abs(velocity) < PAGE_VELOCITY) return 0
+  const projected = offset + velocity * PAGE_PROJECTION
+  if (projected === 0) return 0
+  return projected < 0 ? 1 : -1
+}
+
+export function clampIndex(index: number, count: number): number {
+  if (count <= 0) return 0
+  return Math.min(Math.max(index, 0), count - 1)
+}
+
+export function wrapIndex(index: number, count: number): number {
+  if (count <= 0) return 0
+  return ((index % count) + count) % count
+}
+
+export function shortestDelta(delta: number, count: number): number {
+  if (count <= 0) return 0
+  const forward = wrapIndex(delta, count)
+  return forward > count / 2 ? forward - count : forward
+}
+
+export function edgePosition(raw: number, count: number, width: number): number {
+  return rubberBand(raw, -Math.max(0, count - 1) * width, 0, width)
+}

package/dist/shared/lib/lightbox/pose.ts

@@ -0,0 +1,142 @@
+import type { ImageVariants } from '../../variants/image'
+import type { Corners } from './clip'
+import { fitSize, rotatedSize, type Size } from './zoom'
+
+export interface Rect {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+export interface Pose {
+  x: number
+  y: number
+  scale: number
+  rotate: number
+  clipPath: string
+}
+
+export const REST_POSE: Pose = {
+  x: 0,
+  y: 0,
+  scale: 1,
+  rotate: 0,
+  clipPath: 'inset(0px 0px 0px 0px round 0px 0px 0px 0px / 0px 0px 0px 0px)',
+}
+export const TRAVEL_SPRING = { type: 'spring', visualDuration: 0.3, bounce: 0 } as const
+export const RETURN_SPRING = { ...TRAVEL_SPRING, visualDuration: 0.22 } as const
+export const DISMISS_SCALE = 0.7
+export const DISMISS_TRAVEL = 0.3
+export const DISMISS_COMMIT = 0.5
+export const DISMISS_VELOCITY = 600
+
+function px(value: number): string {
+  return `${Math.round(value * 100) / 100}px`
+}
+
+export function fitRect(
+  natural: Size,
+  stage: Size & Partial<Pick<Rect, 'x' | 'y'>>,
+  rotation = 0,
+): Rect {
+  const size = fitSize(natural, stage, rotation)
+  return {
+    x: (stage.x ?? 0) + (stage.width - size.width) / 2,
+    y: (stage.y ?? 0) + (stage.height - size.height) / 2,
+    width: size.width,
+    height: size.height,
+  }
+}
+
+export function renderedRect(box: Rect, natural: Size, fit: ImageVariants['fit'] = 'cover'): Rect {
+  if (fit === 'fill' || natural.width <= 0 || natural.height <= 0) return { ...box }
+  const contain = Math.min(box.width / natural.width, box.height / natural.height)
+  const cover = Math.max(box.width / natural.width, box.height / natural.height)
+  const scale =
+    fit === 'cover'
+      ? cover
+      : fit === 'contain'
+        ? contain
+        : fit === 'none'
+          ? 1
+          : Math.min(contain, 1)
+  const width = natural.width * scale
+  const height = natural.height * scale
+  return {
+    x: box.x + (box.width - width) / 2,
+    y: box.y + (box.height - height) / 2,
+    width,
+    height,
+  }
+}
+
+function intersect(a: Rect, b: Rect): Rect {
+  const x = Math.max(a.x, b.x)
+  const y = Math.max(a.y, b.y)
+  const right = Math.min(a.x + a.width, b.x + b.width)
+  const bottom = Math.min(a.y + a.height, b.y + b.height)
+  return { x, y, width: Math.max(0, right - x), height: Math.max(0, bottom - y) }
+}
+
+export function openPose(
+  frame: Rect,
+  box: Rect,
+  natural: Size,
+  fit?: ImageVariants['fit'],
+  radius: number | Corners = 0,
+  clipBox = box,
+): Pose {
+  const rendered = renderedRect(box, natural, fit)
+  if (frame.width <= 0 || frame.height <= 0 || rendered.width <= 0) return REST_POSE
+  const scale = rendered.width / frame.width
+  const visible = intersect(intersect(box, clipBox), rendered)
+  const top = (visible.y - rendered.y) / scale
+  const left = (visible.x - rendered.x) / scale
+  const right = (rendered.x + rendered.width - visible.x - visible.width) / scale
+  const bottom = (rendered.y + rendered.height - visible.y - visible.height) / scale
+  const corners =
+    typeof radius === 'number'
+      ? Array.from({ length: 4 }, () => ({ x: radius, y: radius }))
+      : radius
+  const leftEdge = Math.abs(visible.x - clipBox.x) <= 0.5
+  const topEdge = Math.abs(visible.y - clipBox.y) <= 0.5
+  const rightEdge = Math.abs(visible.x + visible.width - clipBox.x - clipBox.width) <= 0.5
+  const bottomEdge = Math.abs(visible.y + visible.height - clipBox.y - clipBox.height) <= 0.5
+  const touches = [
+    leftEdge && topEdge,
+    rightEdge && topEdge,
+    rightEdge && bottomEdge,
+    leftEdge && bottomEdge,
+  ]
+  const clipped = corners.map((corner, index) => (touches[index] ? corner : { x: 0, y: 0 }))
+  const horizontal = clipped.map(corner => px(Math.max(0, corner.x) / scale)).join(' ')
+  const vertical = clipped.map(corner => px(Math.max(0, corner.y) / scale)).join(' ')
+  return {
+    x: rendered.x + rendered.width / 2 - (frame.x + frame.width / 2),
+    y: rendered.y + rendered.height / 2 - (frame.y + frame.height / 2),
+    scale,
+    rotate: 0,
+    clipPath: `inset(${px(top)} ${px(right)} ${px(bottom)} ${px(left)} round ${horizontal} / ${vertical})`,
+  }
+}
+
+export function baseScale(frame: Size, stage: Size, rotation: number, natural: Size): number {
+  const visual = rotatedSize(frame, rotation)
+  if (visual.width <= 0 || visual.height <= 0) return 1
+  return Math.min(
+    stage.width / visual.width,
+    stage.height / visual.height,
+    natural.width / frame.width,
+  )
+}
+
+export function dismissProgress(offsetY: number, stageHeight: number): number {
+  if (stageHeight <= 0) return 0
+  return Math.min(1, Math.max(0, offsetY) / (stageHeight * DISMISS_TRAVEL))
+}
+
+export function shouldDismiss(offsetY: number, velocityY: number, stageHeight: number): boolean {
+  if (offsetY <= 0) return false
+  return dismissProgress(offsetY, stageHeight) >= DISMISS_COMMIT || velocityY >= DISMISS_VELOCITY
+}

package/dist/shared/lib/lightbox/source.ts

@@ -0,0 +1,17 @@
+import type { LightboxSource } from './types'
+import type { Rect } from './pose'
+
+export function sourceRect(source: LightboxSource | null | undefined): Rect | null {
+  if (!source) return null
+  const isElement = 'getBoundingClientRect' in source
+  if (isElement && !source.isConnected) return null
+  const rect = isElement ? source.getBoundingClientRect() : source
+  if (
+    ![rect.x, rect.y, rect.width, rect.height].every(Number.isFinite) ||
+    rect.width <= 0 ||
+    rect.height <= 0
+  ) {
+    return null
+  }
+  return { x: rect.x, y: rect.y, width: rect.width, height: rect.height }
+}

package/dist/shared/lib/lightbox/types.ts

@@ -0,0 +1,14 @@
+import type { ImageVariants } from '../../variants/image'
+import type { Rect } from './pose'
+
+export type LightboxSource = HTMLImageElement | Rect
+
+export interface LightboxItem {
+  id: string
+  src: string
+  preview?: string
+  previewSize?: { width: number; height: number }
+  alt: string
+  fit?: ImageVariants['fit']
+  source?: () => LightboxSource | null | undefined
+}

package/dist/shared/lib/lightbox/zoom.ts

@@ -0,0 +1,127 @@
+export interface Size {
+  width: number
+  height: number
+}
+
+export interface Point {
+  x: number
+  y: number
+}
+
+export interface Bounds {
+  minX: number
+  maxX: number
+  minY: number
+  maxY: number
+}
+
+export const ZOOM_MIN = 1
+export const ZOOM_MAX = 2
+export const ZOOM_STEP = 1.5
+export const OVERSHOOT = 0.55
+export const WHEEL_INTENSITY = 0.002
+
+export const ZOOM_EPSILON = 0.001
+
+export function isZoomed(zoom: number): boolean {
+  return zoom > ZOOM_MIN + ZOOM_EPSILON
+}
+
+export function rotatedSize(size: Size, rotation: number): Size {
+  const quarter = Math.round(rotation / 90) % 2
+  return quarter === 0 ? size : { width: size.height, height: size.width }
+}
+
+export function fitSize(natural: Size, stage: Size, rotation = 0): Size {
+  const upright = rotatedSize(natural, rotation)
+  if (upright.width <= 0 || upright.height <= 0) return { width: 0, height: 0 }
+  const scale = Math.min(1, stage.width / upright.width, stage.height / upright.height)
+  return { width: upright.width * scale, height: upright.height * scale }
+}
+
+export function panBounds(displayed: Size, stage: Size): Bounds {
+  const x = Math.max(0, (displayed.width - stage.width) / 2)
+  const y = Math.max(0, (displayed.height - stage.height) / 2)
+  return { minX: x ? -x : 0, maxX: x, minY: y ? -y : 0, maxY: y }
+}
+
+export function clampOffset(offset: Point, bounds: Bounds): Point {
+  return {
+    x: Math.min(Math.max(offset.x, bounds.minX), bounds.maxX),
+    y: Math.min(Math.max(offset.y, bounds.minY), bounds.maxY),
+  }
+}
+
+export function zoomAbout(offset: Point, zoom: number, next: number, focal: Point): Point {
+  const ratio = next / zoom
+  return {
+    x: focal.x - (focal.x - offset.x) * ratio,
+    y: focal.y - (focal.y - offset.y) * ratio,
+  }
+}
+
+function resist(over: number, span: number, coefficient: number): number {
+  return (1 - 1 / ((over * coefficient) / span + 1)) * span
+}
+
+export function rubberBand(
+  value: number,
+  min: number,
+  max: number,
+  span: number,
+  coefficient = OVERSHOOT,
+): number {
+  if (span <= 0) return Math.min(Math.max(value, min), max)
+  if (value > max) return max + resist(value - max, span, coefficient)
+  if (value < min) return min - resist(min - value, span, coefficient)
+  return value
+}
+
+export function elasticOffset(offset: Point, bounds: Bounds, stage: Size): Point {
+  return {
+    x: rubberBand(offset.x, bounds.minX, bounds.maxX, stage.width),
+    y: rubberBand(offset.y, bounds.minY, bounds.maxY, stage.height),
+  }
+}
+
+export function clampZoom(zoom: number, min = ZOOM_MIN, max = ZOOM_MAX): number {
+  return Math.min(Math.max(zoom, min), max)
+}
+
+export function elasticZoom(zoom: number, min = ZOOM_MIN, max = ZOOM_MAX): number {
+  const lo = Math.log(min)
+  const hi = Math.log(max)
+  return Math.exp(rubberBand(Math.log(zoom), lo, hi, hi - lo))
+}
+
+export function pinchZoom(startZoom: number, startDistance: number, distance: number): number {
+  if (startDistance <= 0) return startZoom
+  return startZoom * (distance / startDistance)
+}
+
+export function wheelZoom(zoom: number, deltaY: number, intensity = WHEEL_INTENSITY): number {
+  return zoom * Math.exp(-deltaY * intensity)
+}
+
+export function zoomLevels(natural: Size, fit: Size, stage: Size) {
+  const original = fit.width > 0 ? Math.max(ZOOM_MIN, natural.width / fit.width) : ZOOM_MIN
+  const secondary =
+    natural.height > natural.width * 2
+      ? Math.min(original, stage.width / fit.width)
+      : natural.width > natural.height * 2
+        ? Math.min(original, stage.height / fit.height)
+        : original
+  return {
+    original,
+    secondary: Number.isFinite(secondary) ? Math.max(ZOOM_MIN, secondary) : ZOOM_MIN,
+    max: original * ZOOM_MAX,
+  }
+}
+
+export function doubleTapZoom(zoom: number, secondary: number): number {
+  return isZoomed(zoom) ? ZOOM_MIN : secondary
+}
+
+export function stepZoom(zoom: number, direction: 1 | -1, max = ZOOM_MAX): number {
+  return clampZoom(zoom * ZOOM_STEP ** direction, ZOOM_MIN, max)
+}

package/dist/shared/lib/meter-group.ts

@@ -0,0 +1,16 @@
+import type { IndicatorVariants } from '../variants/indicator'
+
+export type MeterTone = NonNullable<IndicatorVariants['tone']>
+
+export const METER_TONES: MeterTone[] = [
+  'accent',
+  'info',
+  'success',
+  'warning',
+  'danger',
+  'neutral',
+]
+
+export function toneAt(index: number): MeterTone {
+  return METER_TONES[index % METER_TONES.length]!
+}