@globalbrain/sefirot 4.30.1 → 4.32.0

package/lib/composables/Dropdown.ts

@@ -1,5 +1,14 @@
 import { useElementBounding, useWindowSize } from '@vueuse/core'
-import { type Component, type MaybeRef, type MaybeRefOrGetter, type Ref, computed, ref, toValue, unref } from 'vue'
+import {
+  type Component,
+  type MaybeRef,
+  type MaybeRefOrGetter,
+  type Ref,
+  computed,
+  ref,
+  toValue,
+  unref
+} from 'vue'
 import { type ActionList } from '../components/SActionList.vue'
 import { type DateRange } from '../support/DateRange'
 

package/lib/composables/Error.ts

@@ -1,20 +1,16 @@
 /**
  * Adapted from
- * @see https://github.com/vuejs/core/blob/1755ac0a108ba3486bd8397e56d3bdcd69196594/packages/runtime-core/src/component.ts
+ * @see https://github.com/vuejs/core/blob/b50eb68c50f3b94dca2e96f706c3e96ab864df24/packages/runtime-core/src/component.ts
  * @see https://github.com/vuejs/core/blob/ac9e7e8bfa55432a73a10864805fdf48bda2ff73/packages/runtime-core/src/warning.ts
- * @see https://github.com/getsentry/sentry-javascript/blob/04711c20246f7cdaac2305286fec783ab1859a18/packages/vue/src/errorhandler.ts
- * @see https://github.com/vercel/ai/blob/d544886d4f61440bacd6e44c86144bfac7c98282/packages/provider-utils/src/get-error-message.ts
+ * @see https://github.com/getsentry/sentry-javascript/blob/fbadeb81d23c03c3d852531c2deef59a3a992def/packages/vue/src/errorhandler.ts
  *
  * Original licenses:
  *
- * (c) 2018-present Yuxi (Evan) You and Vue contributors
+ * Copyright (c) 2018-present, Yuxi (Evan) You
  * @license MIT
  *
- * (c) 2012-2024 Functional Software, Inc. dba Sentry
+ * Copyright (c) 2019 Functional Software, Inc. dba Sentry
  * @license MIT
- *
- * (c) 2023 Vercel, Inc.
- * @license Apache-2.0
  */
 
 import * as Sentry from '@sentry/browser'
@@ -22,8 +18,8 @@ import { createSentryPiniaPlugin } from '@sentry/vue'
 import { pauseTracking, resetTracking } from '@vue/reactivity'
 import { getActivePinia } from 'pinia'
 import {
+  type Component,
   type ComponentInternalInstance,
-  type ComponentOptions,
   type ComponentPublicInstance,
   type ConcreteComponent,
   type MaybeRefOrGetter,
@@ -31,7 +27,6 @@ import {
   toValue
 } from 'vue'
 import { useError } from '../stores/Error'
-import { isError } from '../support/Utils'
 
 export interface User {
   id?: string | number
@@ -43,7 +38,7 @@ type TraceEntry = { vnode: VNode; recurseCount: number }
 
 type ComponentTraceStack = TraceEntry[]
 
-const classifyRE = /(?:^|[-_])(\w)/g
+const classifyRE = /(?:^|[-_])\w/g
 function classify(str: string): string {
   return str.replace(classifyRE, (c) => c.toUpperCase()).replace(/[-_]/g, '')
 }
@@ -70,19 +65,20 @@ function formatComponentName(instance: ComponentInternalInstance | null): string
     }
   }
 
-  if (!name && instance && instance.parent) {
-    const inferFromRegistry = (registry: Record<string, unknown> | undefined) => {
+  if (!name && instance) {
+    const inferFromRegistry = (registry?: Record<string, Component>) => {
       for (const key in registry) {
         if (registry[key] === Component) {
           return key
         }
       }
     }
-    name
-      = inferFromRegistry(
-        // @ts-expect-error internal api
-        instance.components || (instance.parent.type as ComponentOptions).components
-      ) || inferFromRegistry(instance.appContext.components)
+    name =
+      // @ts-expect-error internal API
+      inferFromRegistry(instance.components)
+      // @ts-expect-error internal API
+      || inferFromRegistry(instance.parent?.type.components)
+      || inferFromRegistry(instance.appContext.components)
   }
 
   return name ? classify(name) : isRoot ? 'App' : 'Anonymous'
@@ -102,8 +98,8 @@ function getComponentTrace(currentVNode: VNode | null): ComponentTraceStack {
     } else {
       normalizedStack.push({ vnode: currentVNode, recurseCount: 0 })
     }
-    const parentInstance: ComponentInternalInstance | null
-      = currentVNode.component && currentVNode.component.parent
+    const parentInstance: ComponentInternalInstance | null =
+      currentVNode.component && currentVNode.component.parent
     currentVNode = parentInstance && parentInstance.vnode
   }
 
@@ -147,6 +143,26 @@ const ignoreErrors = [
   /\[Cloudflare Turnstile\] Error: (?:10[2-46]|1106[02]|[36]00)/
 ]
 
+const stringifiers: readonly ((e: unknown) => string | false)[] = [
+  (e) => typeof e === 'string' && e,
+  (e) => e instanceof Error && (e.message || e.name),
+  (e) => {
+    const json = JSON.stringify(e)
+    return json !== '{}' && json
+  },
+  (e) => String(e)
+]
+
+function getErrorMessage(error: unknown | undefined): string {
+  for (const stringify of stringifiers) {
+    try {
+      const s = stringify(error)
+      if (s) { return s }
+    } catch { /* continue */ }
+  }
+  return 'unknown error'
+}
+
 export function useErrorHandler({
   dsn,
   environment,
@@ -204,7 +220,7 @@ export function useErrorHandler({
           componentName: formatComponentName($),
           lifecycleHook: info,
           trace: formatTrace($),
-          propsData: $ && $.props
+          propsData: $.props
         }
 
         setTimeout(() => {
@@ -224,19 +240,3 @@ export function useErrorHandler({
     set(e)
   }
 }
-
-function getErrorMessage(error: unknown | undefined) {
-  if (error == null) {
-    return 'unknown error'
-  }
-
-  if (typeof error === 'string') {
-    return error
-  }
-
-  if (isError(error)) {
-    return error.message
-  }
-
-  return JSON.stringify(error)
-}

package/lib/composables/Grid.ts

@@ -45,9 +45,7 @@ export function useGrid(options: UseGridOptions = {}): Grid {
   })
 
   function adjustSpacer() {
-    container.value?.querySelectorAll(`${toClassSelector(spacerClass)}`)
-      .forEach((n) => n.remove())
-
+    container.value?.querySelectorAll(`${toClassSelector(spacerClass)}`).forEach((n) => n.remove())
     const track = container.value?.firstElementChild
 
     const containerWidth = container.value?.clientWidth ?? 0
@@ -59,7 +57,6 @@ export function useGrid(options: UseGridOptions = {}): Grid {
     const lack = mod !== 0 ? perRow - mod : 0
 
     const fragment = createSpacers(lack, spacerTag, spacerClass, type)
-
     container.value?.appendChild(fragment)
   }
 

package/lib/composables/Image.ts

@@ -1,6 +1,5 @@
 import { isClient } from '@vueuse/core'
 import { type MaybeRefOrGetter, type Ref, ref, toValue, watchEffect } from 'vue'
-import { isFile, isString } from '../support/Utils'
 
 export interface ImageSrcFromFile {
   src: Ref<string | null>
@@ -34,12 +33,12 @@ export function useImageSrcFromFile(
   function read(): void {
     const f = toValue(file)
 
-    if (isFile(f)) {
+    if (f instanceof Blob) {
       reader.readAsDataURL(f)
       return
     }
 
-    if (isString(f)) {
+    if (typeof f === 'string') {
       src.value = f
       return
     }

package/lib/composables/Lang.ts

@@ -8,23 +8,11 @@ export interface Trans<T> {
 
 export interface TransMessages<T> {
   en: T
-  ja: T
-}
-
-export interface HasLang {
-  lang: Lang
+  ja: NoInfer<T>
 }
 
 export const SefirotLangKey: InjectionKey<Lang> = Symbol.for('sefirot-lang-key')
 
-export function useSetupLang(): (user?: HasLang | null) => void {
-  const browserLang = useBrowserLang()
-
-  return (user) => {
-    provideLang(user?.lang ?? browserLang)
-  }
-}
-
 export function provideLang(lang: Lang) {
   getCurrentInstance()!.appContext.app._context.provides[SefirotLangKey] = lang
 }
@@ -33,12 +21,16 @@ export function useLang(): Lang {
   return inject(SefirotLangKey, 'en')
 }
 
-export function useBrowserLang(): Lang {
-  const lang = navigator.language
-
+export function getBrowserLang(): Lang {
+  const lang = String(globalThis.navigator?.language || 'en')
   return lang.split('-')[0] === 'ja' ? 'ja' : 'en'
 }
 
+/** @deprecated use `getBrowserLang` instead */
+export function useBrowserLang(): Lang {
+  return getBrowserLang()
+}
+
 export function useTrans<T>(messages: TransMessages<T>): Trans<T> {
   const lang = useLang()
 

package/lib/composables/Markdown.ts

@@ -1,4 +1,4 @@
-import DOMPurify, { type Config } from 'dompurify'
+import DOMPurify, { type Config } from 'isomorphic-dompurify'
 import MarkdownIt from 'markdown-it'
 
 export type UseMarkdown = (source: string, inline?: boolean) => string

package/lib/composables/Table.ts

@@ -25,11 +25,9 @@ export interface Table<
   total?: MaybeRef<number | null | undefined>
   page?: MaybeRef<number | null | undefined>
   perPage?: MaybeRef<number | null | undefined>
-  reset?: MaybeRef<boolean | undefined>
   borderSize?: MaybeRef<number | undefined>
   onPrev?(): void
   onNext?(): void
-  onReset?(): void
 }
 
 export type TableColumns<

package/lib/composables/Theme.ts

@@ -3,23 +3,11 @@ import { type WritableComputedRef, computed } from 'vue'
 
 export type Theme = 'light' | 'dark'
 
-export interface HasTheme {
-  theme: Theme
-}
-
-export function useSetupTheme(): (user?: HasTheme | null) => void {
-  const theme = useTheme()
-
-  return (user) => {
-    theme.value = user?.theme ?? 'light'
-  }
-}
-
 export function useTheme(): WritableComputedRef<Theme> {
   const _isDark = useDark()
 
   return computed({
-    get: () => _isDark.value ? 'dark' : 'light',
+    get: () => (_isDark.value ? 'dark' : 'light'),
     set: (v) => { _isDark.value = v === 'dark' }
   })
 }

package/lib/composables/Utils.ts

@@ -1,5 +1,12 @@
-import { type ComputedRef, type MaybeRefOrGetter, computed, getCurrentInstance, onMounted, toValue, useSlots } from 'vue'
-import { isString } from '../support/Utils'
+import {
+  type ComputedRef,
+  type MaybeRefOrGetter,
+  computed,
+  getCurrentInstance,
+  onMounted,
+  toValue,
+  useSlots
+} from 'vue'
 
 export type WhenCondition<T> = MaybeRefOrGetter<T>
 
@@ -22,7 +29,7 @@ export function computedWhen<T, C, D>(
   return computed(() => {
     const c = toValue(condition)
 
-    return c ? fn(c) : whenFalse as D
+    return c ? fn(c) : (whenFalse as D)
   })
 }
 
@@ -68,7 +75,7 @@ export function useSlotValue(name = 'default'): ComputedRef<string | null> {
 
   return computed(() => {
     const c = slots[name]?.()[0]?.children
-    const v = isString(c) ? c.trim() : null
+    const v = typeof c === 'string' ? c.trim() : null
     return v !== '' ? v : null
   })
 }

package/lib/composables/Validation.ts

@@ -85,10 +85,7 @@ export function useVNotification(): VNotification {
   const snackbars = useSnackbars()
 
   function notify(message?: Snackbar): void {
-    snackbars.push(message ?? {
-      mode: 'danger',
-      text: t.notify
-    })
+    snackbars.push(message ?? { mode: 'danger', text: t.notify })
   }
 
   return {

package/lib/http/Http.ts

@@ -3,7 +3,6 @@ import { parse as parseCookie } from '@tinyhttp/cookie'
 import FileSaver from 'file-saver'
 import { FetchError, type FetchOptions, type FetchResponse } from 'ofetch'
 import { stringify } from 'qs'
-import { isBlob, isError, isFormData, isRequest, isResponse, isString } from '../support/Utils'
 
 type Config = ReturnType<typeof import('../stores/HttpConfig').useHttpConfig>
 
@@ -31,9 +30,13 @@ export class Http {
 
   private async buildRequest(url: string, _options: FetchOptions = {}): Promise<[string, FetchOptions]> {
     const { method, params, query, ...options } = _options
-    const xsrfToken = ['POST', 'PUT', 'PATCH', 'DELETE'].includes(method || '') && (await this.ensureXsrfToken())
+    const xsrfToken = ['POST', 'PUT', 'PATCH', 'DELETE'].includes(method || '')
+      && (await this.ensureXsrfToken())
 
-    const queryString = stringify({ ...params, ...query }, { encodeValuesOnly: true, ...this.config.stringifyOptions })
+    const queryString = stringify(
+      { ...params, ...query },
+      { encodeValuesOnly: true, ...this.config.stringifyOptions }
+    )
 
     return [
       `${url}${queryString ? `?${queryString}` : ''}`,
@@ -70,11 +73,11 @@ export class Http {
   }
 
   async post<T = any>(url: string, body?: any, options?: FetchOptions): Promise<T> {
-    if (body && !isFormData(body)) {
+    if (body && !(body instanceof FormData)) {
       let hasFile = false
 
       const payload = JSON.stringify(body, (_, value) => {
-        if (isBlob(value)) {
+        if (value instanceof Blob) {
           hasFile = true
           return undefined
         }
@@ -120,13 +123,18 @@ export class Http {
       throw new Error('No blob')
     }
 
-    const { filename = 'download' }
-      = parseContentDisposition(headers.get('Content-Disposition') || '')?.parameters || {}
+    const { filename = 'download' } =
+      parseContentDisposition(headers.get('Content-Disposition') || '')?.parameters || {}
 
     FileSaver.saveAs(blob, filename as string)
   }
 
-  private objectToFormData(obj: any, form?: FormData, namespace?: string, onlyFiles = false): FormData {
+  private objectToFormData(
+    obj: any,
+    form?: FormData,
+    namespace?: string,
+    onlyFiles = false
+  ): FormData {
     const fd = form || new FormData()
     let formKey: string
 
@@ -141,11 +149,15 @@ export class Http {
         return
       }
 
-      if (typeof obj[property] === 'object' && !isBlob(obj[property]) && obj[property] !== null) {
+      if (
+        typeof obj[property] === 'object'
+        && !(obj[property] instanceof Blob)
+        && obj[property] !== null
+      ) {
         this.objectToFormData(obj[property], fd, property, onlyFiles)
       } else {
         const value = obj[property] === null ? '' : obj[property]
-        if (onlyFiles && !isBlob(value)) {
+        if (onlyFiles && !(value instanceof Blob)) {
           return
         }
         fd.append(formKey, value)
@@ -157,13 +169,7 @@ export class Http {
 }
 
 export function isFetchError(e: unknown): e is FetchError {
-  return (
-    e instanceof FetchError
-    || (isError<FetchError>(e)
-      && (e.response === undefined || isResponse(e.response))
-      && ((isString(e.request) && e.message.startsWith(`[${e.options?.method || 'GET'}] ${JSON.stringify(e.request || '/')}: `))
-        || (isRequest(e.request) && e.message.startsWith(`[${e.request.method}] ${JSON.stringify(e.request.url)}: `))))
-  )
+  return e instanceof FetchError || (e instanceof Error && e.name === 'FetchError')
 }
 
 export { FetchError, type FetchOptions, type FetchRequest, type FetchResponse } from 'ofetch'

package/lib/styles/variables-deprecated.css

@@ -110,7 +110,6 @@
  */
 :root {
   --c-soft: var(--c-white-soft);
-
 }
 
 .dark {

package/lib/styles/variables.css

@@ -154,7 +154,7 @@
  * Color: Divider and Gutter
  * -------------------------------------------------------------------------- */
 
- :root {
+:root {
   --c-divider: #e0e0e1;
   --c-gutter: #e2e2e3;
 }
@@ -290,7 +290,7 @@
  * Color: Border
  * -------------------------------------------------------------------------- */
 
- :root {
+:root {
   --c-border-mute-1: var(--c-gray-6);
   --c-border-mute-2: var(--c-gray-7);
   --c-border-mute-3: var(--c-gray-8);
@@ -316,7 +316,7 @@
  * Color: Text
  * -------------------------------------------------------------------------- */
 
- :root {
+:root {
   --c-text-1: var(--c-text-light-1);
   --c-text-2: var(--c-text-light-2);
   --c-text-3: var(--c-text-light-3);
@@ -367,11 +367,11 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-  --shadow-depth-1: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .06);
-  --shadow-depth-2: 0 3px 12px rgba(0, 0, 0, .07), 0 1px 4px rgba(0, 0, 0, .07);
-  --shadow-depth-3: 0 12px 32px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .08);
-  --shadow-depth-4: 0 14px 44px rgba(0, 0, 0, .12), 0 3px 9px rgba(0, 0, 0, .12);
-  --shadow-depth-5: 0 18px 56px rgba(0, 0, 0, .16), 0 4px 12px rgba(0, 0, 0, .16);
+  --shadow-depth-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
+  --shadow-depth-2: 0 3px 12px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.07);
+  --shadow-depth-3: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08);
+  --shadow-depth-4: 0 14px 44px rgba(0, 0, 0, 0.12), 0 3px 9px rgba(0, 0, 0, 0.12);
+  --shadow-depth-5: 0 18px 56px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.16);
 }
 
 /**
@@ -389,15 +389,15 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-  --ease-in-quint: cubic-bezier(.755, .05, .855, .06);
-  --ease-in-back: cubic-bezier(1, -.75, 1, 1);
+  --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+  --ease-in-back: cubic-bezier(1, -0.75, 1, 1);
 
-  --ease-out-quint: cubic-bezier(.23, 1, .32, 1);
-  --ease-out-expo: cubic-bezier(.19, 1, .22, 1);
-  --ease-out-back: cubic-bezier(.175, .885, .320, 1.275);
-  --ease-out-back-quint: cubic-bezier(.175, .885, .280, 1.5);
+  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
+  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
+  --ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  --ease-out-back-quint: cubic-bezier(0.175, 0.885, 0.28, 1.5);
 
-  --ease-in-out-quint: cubic-bezier(.86, 0, .07, 1);
+  --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
   --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
 }
 
@@ -503,7 +503,7 @@
   --button-fill-black-hover-text-color: var(--c-text-dark-1);
   --button-fill-black-hover-bg-color: var(--c-neutral-light-2);
   --button-fill-black-active-border-color: transparent;
-  --button-fill-black-active-text-color:var(--c-text-dark-1);
+  --button-fill-black-active-text-color: var(--c-text-dark-1);
   --button-fill-black-active-bg-color: var(--c-neutral-light-3);
   --button-fill-black-disabled-border-color: transparent;
   --button-fill-black-disabled-text-color: var(--c-text-dark-2);

package/lib/support/Chart.ts

@@ -37,7 +37,6 @@ export const chartColors = {
   gray: 'light-dark(#8d8d8d, #7b7b7b)'
 } as const
 
-// eslint-disable-next-line @typescript-eslint/ban-types
 export type ChartColor = keyof typeof chartColors | (string & {})
 export type KV = { key: string; value: number; color?: ChartColor }
 export type Margins = Partial<{ top: number; right: number; bottom: number; left: number }>

package/lib/support/DateRange.ts

@@ -93,7 +93,7 @@ export class DateFromTo extends DateRangePresetBase {
     const f = this.getFrom()?.format('YYYY-MM-DD')
     const t = this.getTo()?.format('YYYY-MM-DD')
 
-    return (f && t) ? `${f} – ${t}` : 'Error'
+    return f && t ? `${f} – ${t}` : 'Error'
   }
 
   setFrom(from: Day | null): this {

package/lib/support/Day.ts

@@ -2,7 +2,6 @@ import dayjs, { type ConfigType, type Dayjs } from 'dayjs'
 import PluginRelativeTime from 'dayjs/plugin/relativeTime'
 import PluginTimezone from 'dayjs/plugin/timezone'
 import PluginUtc from 'dayjs/plugin/utc'
-import { isNumber, isObject, isString } from './Utils'
 
 dayjs.extend(PluginUtc)
 dayjs.extend(PluginTimezone)
@@ -22,12 +21,6 @@ export interface Ymd {
 
 export type YmdType = 'y' | 'm' | 'd'
 
-export const YmdMap = {
-  y: 'year',
-  m: 'month',
-  d: 'date'
-} as const
-
 /**
  * The hour, minute, and second object interface.
  */
@@ -39,13 +32,13 @@ export interface Hms {
 
 export type HmsType = 'h' | 'm' | 's'
 
-export const HmsMap = {
-  h: 'hour',
-  m: 'minute',
-  s: 'second'
-} as const
-
 export function day(input?: Input): Day {
+  // hack for histoire
+  if (input && typeof input === 'object' && !(input instanceof Date)) {
+    const { $D, $H, $M, $m, $ms, $s, $y } = input as any
+    input = new Date($y, $M, $D, $H, $m, $s, $ms)
+  }
+
   return dayjs(input)
 }
 
@@ -67,19 +60,9 @@ export function createYmd(
   month: number | null = null,
   date: number | null = null
 ): Ymd {
-  if (isNumber(yearOrDay) || yearOrDay == null) {
-    return {
-      year: yearOrDay,
-      month,
-      date
-    }
-  }
-
-  return {
-    year: yearOrDay.year(),
-    month: yearOrDay.month() + 1,
-    date: yearOrDay.date()
-  }
+  return isDay(yearOrDay)
+    ? { year: yearOrDay.year(), month: yearOrDay.month() + 1, date: yearOrDay.date() }
+    : { year: yearOrDay, month, date }
 }
 
 /**
@@ -92,45 +75,9 @@ export function createHms(
   minute: string | null = null,
   second: string | null = null
 ): Hms {
-  if (isString(hourOrDay) || hourOrDay == null) {
-    return {
-      hour: hourOrDay,
-      minute,
-      second
-    }
-  }
-
-  return {
-    hour: hourOrDay.format('HH'),
-    minute: hourOrDay.format('mm'),
-    second: hourOrDay.format('ss')
-  }
-}
-
-export function isYmd(value: unknown, required: YmdType[] = ['y', 'm', 'd']): value is Ymd {
-  if (value == null || !isObject(value)) {
-    return false
-  }
-
-  return required
-    .reduce<string[]>((keys, type) => {
-      keys.push(YmdMap[type])
-      return keys
-    }, [])
-    .every((key) => value[key] === null || isNumber(value[key]))
-}
-
-export function isHms(value: unknown, required: HmsType[] = ['h', 'm', 's']): value is Hms {
-  if (value == null || !isObject(value)) {
-    return false
-  }
-
-  return required
-    .reduce<string[]>((keys, type) => {
-      keys.push(HmsMap[type])
-      return keys
-    }, [])
-    .every((key) => value[key] === null || isString(value[key]))
+  return isDay(hourOrDay)
+    ? { hour: hourOrDay.format('HH'), minute: hourOrDay.format('mm'), second: hourOrDay.format('ss') }
+    : { hour: hourOrDay, minute, second }
 }
 
 export function isDay(value: unknown): value is Day {

package/lib/support/File.ts

@@ -1,24 +1,15 @@
-/**
- * Get extension of the given file.
- */
-export function getExtension(file: File): string {
-  const name = file.name
-
-  return name.slice((name.lastIndexOf('.') - 1 >>> 0) + 2)
-}
+const units = ['B', 'kB', 'MB', 'GB'] as const
 
 /**
  * Formats the file size in bytes to a human-readable format. It also accepts
  * array of files and returns the total size.
  */
 export function formatSize(files: File | File[]): string {
-  const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB']
   files = Array.isArray(files) ? files : [files]
-  let size = files.reduce((previous, file) => previous + file.size, 0)
-  let index = 0
-  while (size >= 1024 && index < units.length) {
-    size /= 1024
-    index++
-  }
-  return `${size.toFixed(2)}${units[index]}`
+
+  const size = files.reduce((sum, file) => sum + file.size, 0)
+  if (size === 0) { return `0 ${units[0]}` }
+
+  const i = Math.min(Math.floor(Math.log(size) / Math.log(1000)), units.length - 1)
+  return `${(size / 1000 ** i).toFixed(2)} ${units[i]}`
 }