@leavepulse/ui 0.43.4 → 0.45.0

package/src/components/fileTree.ts

@@ -126,7 +126,8 @@ export function formatSize(bytes: number): string {
   const units = ["KB", "MB", "GB", "TB", "PB"]
   let value = bytes / 1024
   let i = 0
-  while (value >= 1024 && i < units.length - 1) {
+  // Compare the value as it will print, so 1 048 575 B is "1.0 MB", not "1024 KB".
+  while (Math.round(value) >= 1024 && i < units.length - 1) {
     value /= 1024
     i++
   }
@@ -191,14 +192,20 @@ export function checkStateOf(node: FileNode, checked: ReadonlySet<string>): Chec
   }
   let all = true
   let any = false
+  let considered = 0
   for (const child of node.children) {
     const state = checkStateOf(child, checked)
+    // A locked, unticked entry can never be ticked, so it must not hold its
+    // folder at "indeterminate" forever.
+    if (child.disabled && state === "unchecked") continue
+    considered++
     if (state === "checked") any = true
     else if (state === "indeterminate") {
       any = true
       all = false
     } else all = false
   }
+  if (!considered) return checked.has(node.id) ? "checked" : "unchecked"
   if (all) return "checked"
   return any ? "indeterminate" : "unchecked"
 }
@@ -271,14 +278,18 @@ export function computeStats(
     let total = 0
     let bytes = 0
     let sized = node.size !== undefined
+    let considered = 0
 
     for (const child of node.children) {
       const childStats = visit(child)
-      if (childStats.state === "checked") any = true
-      else if (childStats.state === "indeterminate") {
-        any = true
-        all = false
-      } else all = false
+      if (!child.disabled || childStats.state !== "unchecked") {
+        considered++
+        if (childStats.state === "checked") any = true
+        else if (childStats.state === "indeterminate") {
+          any = true
+          all = false
+        } else all = false
+      }
       count += childStats.checked
       total += childStats.total
       if (childStats.size !== undefined) {
@@ -287,8 +298,9 @@ export function computeStats(
       }
     }
 
+    const own: CheckState = checked.has(node.id) ? "checked" : "unchecked"
     const self: NodeStats = {
-      state: all ? "checked" : any ? "indeterminate" : "unchecked",
+      state: !considered ? own : all ? "checked" : any ? "indeterminate" : "unchecked",
       checked: count,
       total,
       // An explicit size on the directory wins: a server-side listing usually

package/src/components/imageCrop.ts

@@ -0,0 +1,107 @@
+/*
+ * Geometry shared by LpImageEditor's preview and its export, so what is drawn
+ * on screen and what is written to the Blob come from one calculation.
+ *
+ * Three spaces are involved:
+ * - source: the picture's own pixels, origin at its centre;
+ * - upright: the source after the rotation, as the person sees it, origin at
+ *   its centre, still in source-pixel units;
+ * - frame: the crop box on screen, origin at its centre, in CSS pixels.
+ *
+ * A turn of θ (clockwise, as CSS and canvas both rotate in a y-down space)
+ * maps source to upright by u = R(θ)·q. The picture is drawn at `cover` CSS
+ * pixels per source pixel, then panned by `offset` and zoomed by `scale`, so a
+ * frame point f shows the upright point (f / scale − offset) / cover.
+ */
+
+export interface Point {
+  x: number
+  y: number
+}
+
+export interface CropInput {
+  sourceWidth: number
+  sourceHeight: number
+  frameWidth: number
+  frameHeight: number
+  /** Accumulated rotation in degrees; any angle, not only quarter turns. */
+  rotation: number
+  /** Zoom factor, 1 = the picture just covers the frame. */
+  scale: number
+  /** Pan in frame pixels before the zoom, as useZoomPan reports it. */
+  offset: Point
+}
+
+export interface CropGeometry {
+  /** CSS pixels per source pixel at zoom 1. */
+  cover: number
+  /** Crop size in upright (source-pixel) units. */
+  width: number
+  height: number
+  /** Crop centre in upright space. */
+  centre: Point
+}
+
+const radians = (deg: number) => (deg * Math.PI) / 180
+
+/** Rotate a point clockwise by `deg` in a y-down space. */
+export function rotatePoint(p: Point, deg: number): Point {
+  const a = radians(deg)
+  const cos = Math.cos(a)
+  const sin = Math.sin(a)
+  return { x: p.x * cos - p.y * sin, y: p.x * sin + p.y * cos }
+}
+
+/** The source pixel (from the source's top-left) under an upright-space point. */
+export function uprightToSource(u: Point, rotation: number, sourceWidth: number, sourceHeight: number): Point {
+  const q = rotatePoint(u, -rotation)
+  return { x: q.x + sourceWidth / 2, y: q.y + sourceHeight / 2 }
+}
+
+/**
+ * Smallest scale at which the turned picture still covers the whole frame.
+ *
+ * Covering the bounding box of a turned picture is not enough at a free angle:
+ * its corners are empty. The frame, turned back by the same angle, has to fit
+ * inside the unturned picture; for a quarter turn this reduces to the usual
+ * object-cover of the swapped dimensions.
+ */
+export function coverScale(
+  sourceWidth: number,
+  sourceHeight: number,
+  frameWidth: number,
+  frameHeight: number,
+  rotation: number,
+): number {
+  const a = radians(rotation)
+  const cos = Math.abs(Math.cos(a))
+  const sin = Math.abs(Math.sin(a))
+  return Math.max(
+    (frameWidth * cos + frameHeight * sin) / sourceWidth,
+    (frameWidth * sin + frameHeight * cos) / sourceHeight,
+  )
+}
+
+/** What the frame holds, in upright space. */
+export function cropGeometry(input: CropInput): CropGeometry {
+  const cover = coverScale(
+    input.sourceWidth,
+    input.sourceHeight,
+    input.frameWidth,
+    input.frameHeight,
+    input.rotation,
+  )
+  const shown = cover * input.scale
+  return {
+    cover,
+    width: input.frameWidth / shown,
+    height: input.frameHeight / shown,
+    centre: { x: -input.offset.x / cover, y: -input.offset.y / cover },
+  }
+}
+
+/** Whether the turn is closer to sideways than to upright. */
+export function isSideways(rotation: number): boolean {
+  const quarters = Math.round(rotation / 90)
+  return ((quarters % 2) + 2) % 2 === 1
+}

package/src/components/link.ts

@@ -0,0 +1,34 @@
+import type { Component } from "vue"
+
+/*
+ * How a navigation target renders: an internal destination goes through the
+ * configured link component (RouterLink, NuxtLink) so it navigates client-side,
+ * anything else is a plain anchor. Shared by every kit piece that links.
+ */
+export type LinkTarget = string | Record<string, unknown>
+
+export interface ResolvedLink {
+  is: Component | string
+  props: Record<string, unknown>
+}
+
+/** An app-relative path: "/x", not "//host" or "https://…". */
+export function isInternalHref(href: string): boolean {
+  return href.startsWith("/") && !href.startsWith("//")
+}
+
+export function resolveLink(
+  linkComponent: Component | string,
+  target: { to?: LinkTarget; href?: string },
+): ResolvedLink | null {
+  const router = linkComponent !== "a"
+  if (target.to != null) {
+    if (router) return { is: linkComponent, props: { to: target.to } }
+    return typeof target.to === "string" ? { is: "a", props: { href: target.to } } : null
+  }
+  if (target.href != null) {
+    if (router && isInternalHref(target.href)) return { is: linkComponent, props: { to: target.href } }
+    return { is: "a", props: { href: target.href } }
+  }
+  return null
+}

package/src/components/logSearch.ts

@@ -0,0 +1,46 @@
+/*
+ * The log viewer's search and filtering, kept free of the component so the
+ * rules (what counts as a match, how the cursor wraps) can be tested alone.
+ */
+
+/** The last `max` lines, and how many were cut from the front. */
+export function ringWindow<T>(lines: readonly T[], max: number | undefined): { lines: readonly T[]; offset: number } {
+  if (!max || max <= 0 || lines.length <= max) return { lines, offset: 0 }
+  return { lines: lines.slice(lines.length - max), offset: lines.length - max }
+}
+
+/** Lines per level, a line with no level counting as `fallback`. */
+export function countLevels<L extends string>(
+  lines: readonly { level?: L }[],
+  fallback: L,
+): Map<L, number> {
+  const counts = new Map<L, number>()
+  for (const line of lines) {
+    const level = line.level ?? fallback
+    counts.set(level, (counts.get(level) ?? 0) + 1)
+  }
+  return counts
+}
+
+/** Case-insensitive substring test; an empty term matches nothing. */
+export function matchesTerm(message: string, term: string): boolean {
+  const needle = term.trim().toLowerCase()
+  return needle.length > 0 && message.toLowerCase().includes(needle)
+}
+
+/** Positions (into `rows`) of the rows whose message or source holds the term. */
+export function matchPositions(rows: readonly { message: string; source?: string }[], term: string): number[] {
+  if (!term.trim()) return []
+  const out: number[] = []
+  rows.forEach((row, i) => {
+    if (matchesTerm(row.message, term) || (row.source !== undefined && matchesTerm(row.source, term))) out.push(i)
+  })
+  return out
+}
+
+/** The next match cursor, wrapping at both ends; -1 when there are none. */
+export function stepMatch(current: number, total: number, direction: 1 | -1): number {
+  if (total <= 0) return -1
+  if (current < 0 || current >= total) return direction === 1 ? 0 : total - 1
+  return (current + direction + total) % total
+}

package/src/components/modalDepth.ts

@@ -1,16 +1,47 @@
-import { computed, ref, type ComputedRef } from "vue"
+import { computed, ref, type ComputedRef, type Ref } from "vue"
 
 const STEP = 20
 
-const stack = ref<number[]>([])
-let nextId = 0
+/*
+ * One opening-order stack for every modal surface. Pinned to a global symbol
+ * like the toast queue: a barrel import and a deep import can load this module
+ * twice, and two stacks would put a deep-imported dialog's scrim under a
+ * barrel-imported drawer's panel.
+ */
+const STATE_KEY = Symbol.for("@leavepulse/ui:modal-stack")
+type GlobalWithStack = typeof globalThis & {
+  [STATE_KEY]?: {
+    stack: Ref<number[]>
+    nextId: number
+    elements: Map<number, () => HTMLElement | null | undefined>
+  }
+}
+const g = globalThis as GlobalWithStack
+const state = (g[STATE_KEY] ??= { stack: ref<number[]>([]), nextId: 0, elements: new Map() })
+const stack = state.stack
 
-export function useModalLayer(): {
+export interface ModalLayer {
+  /** Join the stack on top. Ignored on the server, where nothing would ever release it. */
   claim: () => void
   release: () => void
+  /** z-index values for this surface's scrim and panel, and whether another modal is under it. */
   layer: ComputedRef<{ scrim: string; panel: string; nested: boolean }>
-} {
-  const id = nextId++
+  /** Whether this surface is the topmost open one. */
+  top: ComputedRef<boolean>
+}
+
+export interface ModalLayerOptions {
+  /** The surface's panel, so keyboard handling can tell what sits inside the top modal. */
+  element?: () => HTMLElement | null | undefined
+}
+
+/**
+ * Put an overlay on the shared modal stack, so a surface opened from another
+ * one (a dialog from a drawer, a lightbox from a dialog) lands above it with
+ * its scrim, whatever component either of them is.
+ */
+export function useModalLayer(options: ModalLayerOptions = {}): ModalLayer {
+  const id = state.nextId++
 
   const fromTop = computed(() => {
     const at = stack.value.indexOf(id)
@@ -19,9 +50,12 @@ export function useModalLayer(): {
 
   return {
     claim: () => {
+      if (typeof window === "undefined") return
+      if (options.element) state.elements.set(id, options.element)
       if (!stack.value.includes(id)) stack.value = [...stack.value, id]
     },
     release: () => {
+      state.elements.delete(id)
       stack.value = stack.value.filter((x) => x !== id)
     },
     layer: computed(() => {
@@ -32,9 +66,17 @@ export function useModalLayer(): {
         nested: stack.value.indexOf(id) > 0,
       }
     }),
+    top: computed(() => stack.value[stack.value.length - 1] === id),
   }
 }
 
 export function anyModalOpen(): boolean {
   return stack.value.length > 0
 }
+
+/** The panel of the topmost modal, when it registered one. */
+export function topModalElement(): HTMLElement | null {
+  const id = stack.value[stack.value.length - 1]
+  if (id === undefined) return null
+  return state.elements.get(id)?.() ?? null
+}

package/src/components/otp.ts

@@ -0,0 +1,16 @@
+/*
+ * The bridge between reka PinInput's per-cell array and LpOtpInput's string
+ * model. reka empties a cell by deleting its slot (numeric mode) or setting it
+ * to "", so the array can have holes in the middle.
+ */
+export type OtpCells = (string | number | undefined)[]
+
+/** The code typed so far: the filled cells in order. */
+export function joinCells(cells: OtpCells): string {
+  return Array.from(cells, (c) => (c === undefined ? "" : String(c))).join("")
+}
+
+/** Cells for a code given from outside, one character each. */
+export function splitCode(code: string | undefined, length: number): string[] {
+  return (code ?? "").split("").slice(0, length)
+}

package/src/components/phone.ts

@@ -0,0 +1,140 @@
+/*
+ * The phone-number engine behind LpPhoneInput, split from the component so its
+ * rules are testable. libphonenumber-js (the `min` metadata build) is loaded
+ * on first use, the way the country table is: an app that never renders a
+ * phone field never downloads it, and until it arrives the field still takes
+ * digits, just without formatting or checks.
+ */
+import type { CountryCode } from "libphonenumber-js/min"
+
+export type PhoneLib = typeof import("libphonenumber-js/min")
+type Examples = typeof import("libphonenumber-js/examples.mobile.json")["default"]
+
+let lib: Promise<PhoneLib> | undefined
+let examples: Promise<Examples> | undefined
+
+export function loadPhoneLib(): Promise<PhoneLib> {
+  lib ??= import("libphonenumber-js/min")
+  return lib
+}
+
+export function loadPhoneExamples(): Promise<Examples> {
+  examples ??= import("libphonenumber-js/examples.mobile.json").then((m) => m.default)
+  return examples
+}
+
+/** E.164 allows at most 15 digits, country code included. */
+export const E164_MAX_DIGITS = 15
+
+export function digitsOf(text: string): string {
+  return text.replace(/\D/g, "")
+}
+
+/** How many digits sit before `caret` in `text`. */
+export function digitsBefore(text: string, caret: number): number {
+  return digitsOf(text.slice(0, caret)).length
+}
+
+/**
+ * The caret position in `formatted` that has `count` digits before it, placed
+ * right after the last of them so typing continues from there. Zero digits
+ * puts it after a leading "+".
+ */
+export function caretAfterDigits(formatted: string, count: number): number {
+  if (count <= 0) return formatted.startsWith("+") ? 1 : 0
+  let seen = 0
+  for (let i = 0; i < formatted.length; i++) {
+    if (/\d/.test(formatted[i]!)) {
+      seen++
+      if (seen === count) return i + 1
+    }
+  }
+  return formatted.length
+}
+
+export type PhoneProblem = "too-short" | "too-long" | "invalid" | "invalid-country"
+
+export interface FormattedPhone {
+  /** What the field shows: "+380 50 123 4567". */
+  display: string
+  /** Normalised "+380501234567", or "" when there are no digits. */
+  e164: string
+  /** Digits that were typed past the longest number the country allows. */
+  dropped: number
+  /** The calling code the number starts with ("380"), once recognised. */
+  callingCode?: string
+  /** Country libphonenumber recognised from the number, when it did. */
+  country?: CountryCode
+  possible: boolean
+  valid: boolean
+  type?: string
+  problem?: PhoneProblem
+}
+
+/**
+ * Format what was typed, dropping digits beyond what the number may hold:
+ * the country's own maximum once libphonenumber knows the country, the E.164
+ * cap otherwise. The value always starts with "+", since the field holds a
+ * full international number.
+ */
+export function formatPhone(input: string, phone: PhoneLib | undefined): FormattedPhone {
+  let digits = digitsOf(input)
+  let dropped = 0
+  if (digits.length > E164_MAX_DIGITS) {
+    dropped += digits.length - E164_MAX_DIGITS
+    digits = digits.slice(0, E164_MAX_DIGITS)
+  }
+  if (!digits) return { display: input.trim().startsWith("+") ? "+" : "", e164: "", dropped, possible: false, valid: false }
+  if (!phone) return { display: `+${digits}`, e164: `+${digits}`, dropped, possible: false, valid: false }
+
+  while (digits.length > 1 && phone.validatePhoneNumberLength(`+${digits}`) === "TOO_LONG") {
+    digits = digits.slice(0, -1)
+    dropped++
+  }
+
+  // A number that was already complete and valid does not take one more
+  // digit that would make it neither: a Ukrainian mobile ends at nine digits
+  // after +380 although the country's longest number type allows ten, and
+  // that tenth digit is almost always a slip rather than another kind of line.
+  const isValid = (d: string) => phone.parsePhoneNumberFromString(`+${d}`)?.isValid() ?? false
+  while (digits.length > 1 && !isValid(digits) && isValid(digits.slice(0, -1))) {
+    digits = digits.slice(0, -1)
+    dropped++
+  }
+
+  const typer = new phone.AsYouType()
+  let display = typer.input(`+${digits}`)
+  // A length the country allows but no format covers (a 10-digit Ukrainian
+  // national number) comes back as one run of digits; group it by threes after
+  // the calling code so it still reads as a phone number.
+  const code = typer.getCallingCode()
+  if (code && !/\s/.test(display.slice(code.length + 2))) {
+    const national = digits.slice(code.length)
+    display = `+${code}${national ? " " + (national.match(/.{1,3}/g) ?? []).join(" ") : ""}`
+  }
+  const parsed = phone.parsePhoneNumberFromString(`+${digits}`)
+  const country = typer.getCountry() ?? parsed?.country
+  const possible = parsed?.isPossible() ?? false
+  const valid = parsed?.isValid() ?? false
+  const length = phone.validatePhoneNumberLength(`+${digits}`)
+  const problem: PhoneProblem | undefined = valid
+    ? undefined
+    : length === "TOO_SHORT" || length === "NOT_A_NUMBER"
+      ? "too-short"
+      : length === "INVALID_COUNTRY"
+        ? "invalid-country"
+        : length === "TOO_LONG"
+          ? "too-long"
+          : "invalid"
+  return {
+    display,
+    e164: `+${digits}`,
+    dropped,
+    callingCode: code,
+    country,
+    possible,
+    valid,
+    type: valid ? parsed?.getType() : undefined,
+    problem,
+  }
+}

package/src/components/sidebar.ts

@@ -10,8 +10,14 @@ export interface SidebarItem {
   id: string
   label: string
   icon?: string
-  /** Render as a link instead of a button. */
+  /**
+   * Render as a link instead of a button. An app-relative path goes through
+   * the link component from provideLpConfig (NuxtLink under the Nuxt module),
+   * so it navigates client-side; other URLs render a plain anchor.
+   */
   href?: string
+  /** Router destination (rendered through the configured link component). */
+  to?: string | Record<string, unknown>
   /** Count chip on the right (number or short string). */
   badge?: number | string
   disabled?: boolean

package/src/components/tableFilter.ts

@@ -0,0 +1,122 @@
+/*
+ * The rules behind LpTable's value filters and remembered state, kept pure so
+ * they can be tested. A column's filter is the set of HIDDEN values (see
+ * LpTable): a value nobody has seen before shows up rather than staying out.
+ */
+
+/** Hide everything except `keep`: "show only this" in one step. */
+export function onlyValues(values: readonly unknown[], keep: readonly unknown[]): Set<unknown> {
+  const kept = new Set(keep)
+  return new Set(values.filter((v) => !kept.has(v)))
+}
+
+/** Hide every value: the "None" step before ticking the few that matter. */
+export function hideAllValues(values: readonly unknown[]): Set<unknown> {
+  return new Set(values)
+}
+
+/** Swap shown and hidden among the values the column holds. */
+export function invertHidden(values: readonly unknown[], hidden: ReadonlySet<unknown>): Set<unknown> {
+  return new Set(values.filter((v) => !hidden.has(v)))
+}
+
+/** Show these values again, leaving the rest of the filter as it was. */
+export function unhideValues(hidden: ReadonlySet<unknown>, values: readonly unknown[]): Set<unknown> {
+  const next = new Set(hidden)
+  for (const v of values) next.delete(v)
+  return next
+}
+
+/** Lower-cased and stripped of accents, so "cafe" finds "Café". */
+export function foldText(text: string): string {
+  return text.normalize("NFKD").replace(/\p{M}/gu, "").toLocaleLowerCase()
+}
+
+/** Every word of the query appears somewhere in the label, in any order. */
+export function matchesQuery(label: string, query: string): boolean {
+  const words = foldText(query).split(/\s+/).filter(Boolean)
+  if (!words.length) return true
+  const hay = foldText(label)
+  return words.every((w) => hay.includes(w))
+}
+
+/** How many rows hold each value of a column. */
+export function countValues<Row extends Record<string, unknown>>(
+  rows: readonly Row[],
+  key: string,
+): Map<unknown, number> {
+  const counts = new Map<unknown, number>()
+  for (const row of rows) counts.set(row[key], (counts.get(row[key]) ?? 0) + 1)
+  return counts
+}
+
+/**
+ * A chip's text for one column's filter: the values still shown, the first
+ * `listed` by name and the rest as "+N", which says more than "3 of 12".
+ */
+export function summarizeShown(shownLabels: readonly string[], listed = 2): string {
+  if (shownLabels.length <= listed) return shownLabels.join(", ")
+  return `${shownLabels.slice(0, listed).join(", ")} +${shownLabels.length - listed}`
+}
+
+// ── remembered state ───────────────────────────────────────────
+
+export interface PersistedTableState {
+  sort?: { key: string; dir: "asc" | "desc" } | null
+  hidden?: Record<string, unknown[]>
+  columns?: string[]
+}
+
+type Plain = string | number | boolean | null
+
+function isPlain(value: unknown): value is Plain {
+  return value === null || ["string", "number", "boolean"].includes(typeof value)
+}
+
+/**
+ * The state worth keeping across visits, as JSON. Only plain values survive:
+ * a Date or an object hidden in a filter cannot come back as the same value
+ * (the filter compares by identity), so it is left out rather than restored
+ * as something that matches nothing.
+ */
+export function serializeTableState(state: PersistedTableState): string {
+  const hidden: Record<string, Plain[]> = {}
+  for (const [key, values] of Object.entries(state.hidden ?? {})) {
+    const plain = values.filter(isPlain)
+    if (plain.length) hidden[key] = plain
+  }
+  return JSON.stringify({ sort: state.sort ?? null, hidden, columns: state.columns ?? [] })
+}
+
+/** Read it back, dropping anything about columns the table no longer has. */
+export function parseTableState(raw: string | null, columnKeys: readonly string[]): PersistedTableState | null {
+  if (!raw) return null
+  let data: unknown
+  try {
+    data = JSON.parse(raw)
+  } catch {
+    return null
+  }
+  if (!data || typeof data !== "object") return null
+  const known = new Set(columnKeys)
+  const record = data as Record<string, unknown>
+  const out: PersistedTableState = {}
+
+  const sort = record.sort as { key?: unknown; dir?: unknown } | null | undefined
+  if (sort === null) out.sort = null
+  else if (sort && typeof sort.key === "string" && known.has(sort.key) && (sort.dir === "asc" || sort.dir === "desc")) {
+    out.sort = { key: sort.key, dir: sort.dir }
+  }
+
+  if (record.hidden && typeof record.hidden === "object") {
+    out.hidden = {}
+    for (const [key, values] of Object.entries(record.hidden as Record<string, unknown>)) {
+      if (known.has(key) && Array.isArray(values)) out.hidden[key] = values.filter(isPlain)
+    }
+  }
+
+  if (Array.isArray(record.columns)) {
+    out.columns = record.columns.filter((c): c is string => typeof c === "string" && known.has(c))
+  }
+  return out
+}

package/src/components/tableSort.ts

@@ -0,0 +1,37 @@
+const COLLATOR = new Intl.Collator(undefined, { numeric: true })
+
+const rank = (v: unknown): number => {
+  if (v == null || (typeof v === "number" && Number.isNaN(v))) return 0
+  if (typeof v === "boolean") return 1
+  if (typeof v === "number" || typeof v === "bigint") return 2
+  if (v instanceof Date) return Number.isNaN(v.getTime()) ? 0 : 3
+  return 4
+}
+
+/**
+ * Ascending order for raw cell values. Empty values (null, undefined, NaN, an
+ * invalid Date) come first; numbers, bigints and Dates compare by magnitude,
+ * booleans false before true, everything else as text with numeric runs read as
+ * numbers ("file 2" before "file 10"). Mixed kinds group by kind so the order
+ * is total and a sort is stable from one run to the next.
+ */
+export function compareValues(a: unknown, b: unknown): number {
+  const ra = rank(a)
+  const rb = rank(b)
+  if (ra !== rb) return ra - rb
+  switch (ra) {
+    case 0:
+      return 0
+    case 1:
+      return Number(a) - Number(b)
+    case 2: {
+      const x = a as number | bigint
+      const y = b as number | bigint
+      return x < y ? -1 : x > y ? 1 : 0
+    }
+    case 3:
+      return (a as Date).getTime() - (b as Date).getTime()
+    default:
+      return COLLATOR.compare(String(a), String(b))
+  }
+}