@leavepulse/ui 0.44.0 → 0.45.0

package/src/components/LpTooltip.vue

@@ -35,7 +35,7 @@ import {
   TooltipRoot,
   TooltipTrigger,
 } from "reka-ui"
-import { Fragment, onBeforeUnmount, ref, watch } from "vue"
+import { onBeforeUnmount, ref, watch, type FunctionalComponent } from "vue"
 import {
   springSettled,
   springStep,
@@ -108,6 +108,13 @@ const props = withDefaults(
  * shared one (LpTooltipProvider at the root) the next tip opens at once.
  */
 const shared = injectTooltipProviderContext(null)
+/*
+ * Under a shared provider the tip renders straight into it. `Fragment` cannot
+ * stand in for the wrapper: given through `<component :is>` it takes slots,
+ * not children, and rendered nothing at all, so every tip inside an
+ * LpTooltipProvider vanished together with its trigger.
+ */
+const PassThrough: FunctionalComponent = (_, { slots }) => slots.default?.()
 
 const reducedMotion = () =>
   typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches
@@ -221,7 +228,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <component :is="shared ? Fragment : TooltipProvider" v-bind="shared ? {} : { delayDuration: delay ?? 200 }">
+  <component :is="shared ? PassThrough : TooltipProvider" v-bind="shared ? {} : { delayDuration: delay ?? 200 }">
     <!--
       `disable-closing-trigger` in follow mode: reka dismisses a tip when its
       trigger is clicked, which is right for a button (the tip explained the

package/src/components/LpTopologyCanvas.vue

@@ -417,8 +417,12 @@ defineExpose({ fitView, setViewport: applyViewport })
     class="lp-topology"
   >
     <Background :gap="22" :size="1.4" pattern-color="var(--color-line-strong)" />
+    <!-- On a phone the minimap, the zoom controls and the legend would all
+         share the bottom of a canvas a few hundred pixels wide and cover each
+         other and the graph; pinch-zoom and panning do the minimap's job there. -->
     <MiniMap
       v-if="minimap"
+      class="max-sm:!hidden"
       pannable
       zoomable
       node-color="var(--color-surface-soft)"
@@ -427,7 +431,9 @@ defineExpose({ fitView, setViewport: applyViewport })
     <Controls v-if="controls" />
 
     <!-- Edge-type legend: makes the colour/dash encoding self-explanatory. -->
-    <Panel v-if="legend" :position="legendPosition" :class="legendOffset">
+    <!-- On a phone the legend would sit on the graph itself; the edge styles
+         stay readable without it there. -->
+    <Panel v-if="legend" :position="legendPosition" :class="legendOffset" class="max-sm:hidden">
       <div
         class="flex flex-col gap-1.5 rounded-card border border-line bg-surface-overlay/90 px-3 py-2 text-[11px] backdrop-blur"
       >

package/src/components/chart.ts

@@ -157,10 +157,12 @@ export const niceScale = (
 ): { min: number; max: number; step: number } => {
   if (!Number.isFinite(min) || !Number.isFinite(max)) return { min: 0, max: 1, step: 1 }
   if (min === max) {
-    // A flat series still needs a band to sit in.
+    // A flat series still needs a band to sit in, but the band must not cross
+    // zero: an all-zero count would otherwise read as dipping to -0.5.
     const pad = Math.abs(min) || 1
-    min -= pad / 2
-    max += pad / 2
+    min = min >= 0 ? Math.max(0, min - pad / 2) : min - pad / 2
+    max = max <= 0 ? Math.min(0, max + pad / 2) : max + pad / 2
+    if (min === max) max = min + pad
   }
   const raw = (max - min) / Math.max(1, ticks)
   const mag = 10 ** Math.floor(Math.log10(raw))

package/src/components/commandSearch.ts

@@ -63,6 +63,12 @@ function score(command: SearchableCommand, terms: CommandSearchTerms): number {
     if (!hit) return 0
     total += hit
   }
+  // A label that IS what was typed, or starts with it, is what the person is
+  // naming: "theme" must put the Theme command above ThemeSwitcher, which only
+  // contains the word but also matches its keywords and description.
+  const typed = terms.include.join(" ")
+  if (typed && label === typed) total += 6
+  else if (typed && label.startsWith(typed)) total += 2
   return total
 }
 

package/src/components/dateRange.ts

@@ -0,0 +1,134 @@
+import {
+  type CalendarDate,
+  endOfMonth,
+  getLocalTimeZone,
+  parseDate,
+  startOfMonth,
+  today,
+} from "@internationalized/date"
+
+/*
+ * Date ranges as the kit models them: two ISO "YYYY-MM-DD" strings, inclusive
+ * on both ends, the same shape LpDatePicker uses for a single day. Presets are
+ * plain functions so a consumer can add "This quarter" or "Year to date"
+ * without the kit knowing about it.
+ */
+export interface DateRange {
+  start: string
+  end: string
+}
+
+export interface DateRangePreset {
+  label: string
+  range: () => DateRange
+}
+
+export interface DateRangePresetLabels {
+  today: string
+  last7: string
+  last30: string
+  thisMonth: string
+  lastMonth: string
+}
+
+function span(start: CalendarDate, end: CalendarDate): DateRange {
+  return { start: start.toString(), end: end.toString() }
+}
+
+/** The default preset list. `now` is injectable so the set can be tested. */
+export function defaultRangePresets(
+  labels: DateRangePresetLabels,
+  now: () => CalendarDate = () => today(getLocalTimeZone()),
+): DateRangePreset[] {
+  return [
+    { label: labels.today, range: () => span(now(), now()) },
+    { label: labels.last7, range: () => span(now().subtract({ days: 6 }), now()) },
+    { label: labels.last30, range: () => span(now().subtract({ days: 29 }), now()) },
+    { label: labels.thisMonth, range: () => span(startOfMonth(now()), endOfMonth(now())) },
+    {
+      label: labels.lastMonth,
+      range: () => {
+        const previous = now().subtract({ months: 1 })
+        return span(startOfMonth(previous), endOfMonth(previous))
+      },
+    },
+  ]
+}
+
+export function parseIsoDay(iso: string | undefined): CalendarDate | undefined {
+  if (!iso) return undefined
+  try {
+    return parseDate(iso.slice(0, 10))
+  } catch {
+    return undefined
+  }
+}
+
+/** A range with both ends parsed and in order, or undefined. */
+export function normalizeRange(range: Partial<DateRange> | undefined): DateRange | undefined {
+  const start = parseIsoDay(range?.start)
+  const end = parseIsoDay(range?.end)
+  if (!start || !end) return undefined
+  return start.compare(end) <= 0 ? span(start, end) : span(end, start)
+}
+
+export function sameRange(a: Partial<DateRange> | undefined, b: Partial<DateRange> | undefined): boolean {
+  const x = normalizeRange(a)
+  const y = normalizeRange(b)
+  return !!x && !!y && x.start === y.start && x.end === y.end
+}
+
+/** Clip a preset to the allowed bounds; undefined when nothing of it is left. */
+export function clampRange(range: DateRange, min?: string, max?: string): DateRange | undefined {
+  const r = normalizeRange(range)
+  if (!r) return undefined
+  const start = min && r.start < min ? min : r.start
+  const end = max && r.end > max ? max : r.end
+  return start <= end ? { start, end } : undefined
+}
+
+/**
+ * "Jun 3 – 18, 2026" style text: Intl's own range formatting collapses the
+ * shared month and year, which is how a range reads naturally in every locale.
+ */
+export function formatRange(
+  range: DateRange,
+  locale?: string,
+  format: Intl.DateTimeFormatOptions = { year: "numeric", month: "short", day: "numeric" },
+): string {
+  const start = parseIsoDay(range.start)
+  const end = parseIsoDay(range.end)
+  if (!start || !end) return ""
+  const zone = "UTC"
+  const fmt = new Intl.DateTimeFormat(locale, { ...format, timeZone: zone })
+  return fmt.formatRange(start.toDate(zone), end.toDate(zone))
+}
+
+export interface ReshapeRules {
+  /** Whether the moving end may land on this day (min, max, disabled). */
+  allowed?: (iso: string) => boolean
+  /** Days a range may not include. */
+  unavailable?: (iso: string) => boolean
+  /** Longest range, in days, counting both ends. */
+  maximumDays?: number
+}
+
+/**
+ * The range one end makes when it is dragged to `moving` while the other stays
+ * at `anchor`; passing the anchor flips which end is which. Null when the result
+ * would break a rule, so a drag simply does not follow onto that day.
+ */
+export function reshapeRange(anchor: string, moving: string, rules: ReshapeRules = {}): DateRange | null {
+  const a = parseIsoDay(anchor)
+  const m = parseIsoDay(moving)
+  if (!a || !m) return null
+  if (rules.allowed && !rules.allowed(m.toString())) return null
+  const [start, end] = a.compare(m) <= 0 ? [a, m] : [m, a]
+  if (rules.maximumDays && end.compare(start) + 1 > rules.maximumDays) return null
+  if (rules.unavailable) {
+    for (let d = start; d.compare(end) <= 0; d = d.add({ days: 1 })) {
+      if (rules.unavailable(d.toString())) return null
+    }
+  }
+  return { start: start.toString(), end: end.toString() }
+}

package/src/components/exportData.ts

@@ -0,0 +1,228 @@
+/*
+ * Data export shared by the table and the chart: CSV text, a file download,
+ * and an SVG rasterised with its theme resolved.
+ */
+
+export interface CsvColumn<Row> {
+  key: string
+  /** Header cell. Defaults to the key. */
+  label?: string
+  /** The value written for a row; the row's `key` field when omitted. */
+  value?: (row: Row) => unknown
+}
+
+export interface CsvOptions {
+  /** Field separator. Default ",". Some locales' spreadsheets expect ";". */
+  separator?: string
+  /** Prefix a UTF-8 byte order mark so Excel reads non-ASCII text correctly. */
+  bom?: boolean
+  /**
+   * Neutralise cells a spreadsheet would run as a formula (leading = + - @,
+   * tab or CR) by prefixing a quote. On by default: exported data is often
+   * user-supplied, and opening it is enough to trigger a formula.
+   */
+  guardFormulas?: boolean
+  /** Line ending. Default "\r\n", as RFC 4180 specifies. */
+  newline?: string
+}
+
+const FORMULA_START = /^[=+\-@\t\r]/
+
+function cellText(value: unknown): string {
+  if (value == null) return ""
+  if (value instanceof Date) return Number.isNaN(value.getTime()) ? "" : value.toISOString()
+  if (typeof value === "object") return JSON.stringify(value)
+  return String(value)
+}
+
+/** One CSV field, quoted when it holds a separator, a quote or a line break. */
+export function csvField(value: unknown, options: CsvOptions = {}): string {
+  const separator = options.separator ?? ","
+  let text = cellText(value)
+  if ((options.guardFormulas ?? true) && typeof value === "string" && FORMULA_START.test(text)) {
+    text = `'${text}`
+  }
+  const needsQuotes = text.includes(separator) || /["\r\n]/.test(text) || /^\s|\s$/.test(text)
+  return needsQuotes ? `"${text.replace(/"/g, '""')}"` : text
+}
+
+/** Rows as CSV text, a header line first. */
+export function toCsv<Row>(rows: readonly Row[], columns: readonly CsvColumn<Row>[], options: CsvOptions = {}): string {
+  const separator = options.separator ?? ","
+  const newline = options.newline ?? "\r\n"
+  const line = (cells: unknown[]) => cells.map((c) => csvField(c, options)).join(separator)
+  const out = [line(columns.map((c) => c.label ?? c.key))]
+  for (const row of rows) {
+    out.push(
+      line(columns.map((c) => (c.value ? c.value(row) : (row as Record<string, unknown>)[c.key]))),
+    )
+  }
+  return (options.bom ? "" : "") + out.join(newline) + newline
+}
+
+/**
+ * Hand the viewer a file to save. Does nothing outside a browser, so a call
+ * that runs during SSR is harmless.
+ */
+export function downloadFile(name: string, data: Blob | string, type = "text/plain;charset=utf-8"): void {
+  if (typeof document === "undefined" || typeof URL === "undefined") return
+  const blob = typeof data === "string" ? new Blob([data], { type }) : data
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement("a")
+  a.href = url
+  a.download = name
+  a.rel = "noopener"
+  a.style.display = "none"
+  document.body.append(a)
+  a.click()
+  a.remove()
+  setTimeout(() => URL.revokeObjectURL(url), 0)
+}
+
+const PAINT_PROPS = [
+  "fill",
+  "fill-opacity",
+  "fill-rule",
+  "stroke",
+  "stroke-opacity",
+  "stroke-width",
+  "stroke-dasharray",
+  "stroke-dashoffset",
+  "stroke-linecap",
+  "stroke-linejoin",
+  "opacity",
+  "stop-color",
+  "stop-opacity",
+  "color",
+  "font-family",
+  "font-size",
+  "font-weight",
+  "letter-spacing",
+  "text-anchor",
+  "dominant-baseline",
+  "visibility",
+  "display",
+] as const
+
+/**
+ * A standalone copy of a live SVG: every element carries its computed paint as
+ * an inline style, so CSS custom properties and classes from the page's
+ * stylesheet survive being rendered as an image, and running SMIL animations
+ * are frozen at their end state.
+ */
+export function inlineSvg(svg: SVGSVGElement): SVGSVGElement {
+  const clone = svg.cloneNode(true) as SVGSVGElement
+  const source = [svg, ...svg.querySelectorAll("*")]
+  const target = [clone, ...clone.querySelectorAll("*")]
+  source.forEach((el, i) => {
+    const copy = target[i]
+    if (!(copy instanceof Element)) return
+    const computed = getComputedStyle(el)
+    const style = PAINT_PROPS.map((p) => `${p}:${computed.getPropertyValue(p)}`)
+      .filter((d) => !d.endsWith(":"))
+      .join(";")
+    copy.setAttribute("style", style)
+    copy.removeAttribute("class")
+  })
+  // Comment nodes (Vue leaves them in development builds) may hold "--", which
+  // is invalid inside an XML comment and makes the whole image fail to load.
+  const comments = document.createTreeWalker(clone, NodeFilter.SHOW_COMMENT)
+  const dead: Node[] = []
+  while (comments.nextNode()) dead.push(comments.currentNode)
+  for (const node of dead) node.parentNode?.removeChild(node)
+  for (const anim of clone.querySelectorAll("animate")) {
+    const attr = anim.getAttribute("attributeName")
+    const to = anim.getAttribute("to")
+    if (attr && to != null) anim.parentElement?.setAttribute(attr, to)
+    anim.remove()
+  }
+  clone.setAttribute("xmlns", "http://www.w3.org/2000/svg")
+  const { width, height } = svg.getBoundingClientRect()
+  clone.setAttribute("width", String(width))
+  clone.setAttribute("height", String(height))
+  clone.style.overflow = "visible"
+  return clone
+}
+
+export interface RasterOptions {
+  /** Device pixels per CSS pixel. Default: the screen's ratio, at least 2. */
+  scale?: number
+  /** Fill behind the drawing; transparent when omitted. */
+  background?: string
+  /** Extra space around the drawing, in CSS pixels. */
+  padding?: number
+  /** Drawn above the SVG, in the page's own font. */
+  header?: (ctx: CanvasRenderingContext2D, width: number) => number
+}
+
+/** Rasterise an SVG element to a PNG blob with its theme resolved. */
+export async function svgToPng(svg: SVGSVGElement, options: RasterOptions = {}): Promise<Blob> {
+  const copy = inlineSvg(svg)
+  const width = Number(copy.getAttribute("width"))
+  const height = Number(copy.getAttribute("height"))
+  const markup = new XMLSerializer().serializeToString(copy)
+  const url = URL.createObjectURL(new Blob([markup], { type: "image/svg+xml;charset=utf-8" }))
+  try {
+    const img = new Image()
+    img.decoding = "async"
+    const loaded = new Promise<void>((resolve, reject) => {
+      img.onload = () => resolve()
+      img.onerror = () => reject(new Error("SVG could not be rasterised"))
+    })
+    img.src = url
+    await loaded
+
+    const scale = options.scale ?? Math.max(2, globalThis.devicePixelRatio || 1)
+    const pad = options.padding ?? 0
+    const measure = document.createElement("canvas").getContext("2d")
+    const headerHeight = measure && options.header ? options.header(measure, width) : 0
+    const canvas = document.createElement("canvas")
+    canvas.width = Math.ceil((width + pad * 2) * scale)
+    canvas.height = Math.ceil((height + headerHeight + pad * 2) * scale)
+    const ctx = canvas.getContext("2d")
+    if (!ctx) throw new Error("Canvas 2D is unavailable")
+    ctx.scale(scale, scale)
+    if (options.background) {
+      ctx.fillStyle = options.background
+      ctx.fillRect(0, 0, width + pad * 2, height + headerHeight + pad * 2)
+    }
+    ctx.translate(pad, pad)
+    if (options.header) options.header(ctx, width)
+    ctx.drawImage(img, 0, headerHeight, width, height)
+    return await new Promise<Blob>((resolve, reject) =>
+      canvas.toBlob((b) => (b ? resolve(b) : reject(new Error("PNG encoding failed"))), "image/png"),
+    )
+  } finally {
+    URL.revokeObjectURL(url)
+  }
+}
+
+/** The first non-transparent background at or above an element. */
+export function backgroundOf(el: Element | null): string | undefined {
+  for (let node = el; node; node = node.parentElement) {
+    const bg = getComputedStyle(node).backgroundColor
+    if (bg && bg !== "transparent" && !/rgba\([^)]*,\s*0\)$/.test(bg)) return bg
+  }
+  return undefined
+}
+
+/**
+ * A colour as the browser resolves it where `within` sits, for APIs that cannot
+ * read custom properties (canvas, an SVG drawn as an image).
+ */
+export function resolveCssColor(value: string, within: Element): string {
+  if (!value.includes("var(") && !value.toLowerCase().includes("currentcolor")) return value
+  const probe = document.createElement("span")
+  probe.style.color = value
+  probe.style.display = "none"
+  within.append(probe)
+  const resolved = getComputedStyle(probe).color
+  probe.remove()
+  return resolved || value
+}
+
+/** A filesystem-safe name from a title. */
+export function fileStem(title: string | undefined, fallback: string): string {
+  const stem = (title ?? "").trim().replace(/[\\/:*?"<>|\u0000-\u001f]+/g, "").replace(/\s+/g, "-")
+  return stem || fallback
+}

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/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,
+  }
+}