@globalbrain/sefirot 4.43.5 → 4.45.0

package/lib/blocks/lens/components/LensTable.vue

@@ -43,11 +43,16 @@ const records = computed(() => props.result?.data ?? [])
 const columnKeys = computed(() => {
   const requested = props.select ?? props.result?.query.select ?? []
   const fetched = props.result?.query.select
-  if (!fetched) {
-    return requested
-  }
-  const fetchedSet = new Set(fetched)
-  return requested.filter((k) => fetchedSet.has(k))
+  const fetchedSet = fetched ? new Set(fetched) : null
+  const visible = fetchedSet
+    ? requested.filter((k) => fetchedSet.has(k))
+    : requested
+  // Give each `__empty__` spacer a unique render key. The select can
+  // contain several `__empty__` entries (blank spacer columns, also used
+  // to inject empty columns into Excel exports); without unique keys they
+  // would collide on the same `columns` map entry and only render once.
+  let emptyIndex = 0
+  return visible.map((k) => (k === '__empty__' ? `__empty__::${emptyIndex++}` : k))
 })
 
 const orders = computed(() => [
@@ -79,6 +84,14 @@ const columns = computedAsync(async () => {
 
   // Build the list of columns based on the resolved column key list.
   for (const key of keys) {
+    // Render `__empty__` spacer keys (uniquified to `__empty__::N`) as
+    // blank columns, matching the empty columns the backend injects into
+    // Excel exports. These carry no field definition.
+    if (key.startsWith('__empty__')) {
+      columns[key] = { width: '128px', cell: { type: 'empty' } }
+      continue
+    }
+
     const _fieldData = cloneDeep(r.fields[key])
 
     if (!_fieldData) {

package/lib/blocks/lens/composables/SetupLens.ts

@@ -1,14 +1,17 @@
 import { type FieldDataType } from '../FieldData'
 import { type FieldDataFor, type FieldProvider, FieldRegistry } from '../FieldRegistry'
 import { provideFieldRegistry } from '../composables/FieldRegistry'
+import { BooleanField } from '../fields/BooleanField'
 import { ContentField } from '../fields/ContentField'
 import { DateField } from '../fields/DateField'
 import { DatetimeField } from '../fields/DatetimeField'
+import { DecimalField } from '../fields/DecimalField'
 import { FileUploadField } from '../fields/FileUploadField'
 import { IdField } from '../fields/IdField'
 import { LinkField } from '../fields/LinkField'
 import { NumberField } from '../fields/NumberField'
 import { RelatedManyField } from '../fields/RelatedManyField'
+import { RelatedOneField } from '../fields/RelatedOneField'
 import { SelectField } from '../fields/SelectField'
 import { SlackMessageField } from '../fields/SlackMessageField'
 import { TextField } from '../fields/TextField'
@@ -31,14 +34,17 @@ export function useSetupLens(): SetupLens {
   registerDefaultFields()
 
   function registerDefaultFields(): void {
+    fieldRegistry.register('boolean', (ctx, field) => new BooleanField(ctx, field))
     fieldRegistry.register('content', (ctx, field) => new ContentField(ctx, field))
     fieldRegistry.register('date', (ctx, field) => new DateField(ctx, field))
     fieldRegistry.register('datetime', (ctx, field) => new DatetimeField(ctx, field))
+    fieldRegistry.register('decimal', (ctx, field) => new DecimalField(ctx, field))
     fieldRegistry.register('file_upload', (ctx, field) => new FileUploadField(ctx, field, fileDownloader))
     fieldRegistry.register('link', (ctx, field) => new LinkField(ctx, field))
     fieldRegistry.register('number', (ctx, field) => new NumberField(ctx, field))
     fieldRegistry.register('id', (ctx, field) => new IdField(ctx, field))
     fieldRegistry.register('related_many', (ctx, field) => new RelatedManyField(ctx, field, resourceFetcher))
+    fieldRegistry.register('related_one', (ctx, field) => new RelatedOneField(ctx, field, resourceFetcher))
     fieldRegistry.register('select', (ctx, field) => new SelectField(ctx, field))
     fieldRegistry.register('slack_message', (ctx, field) => new SlackMessageField(ctx, field))
     fieldRegistry.register('text', (ctx, field) => new TextField(ctx, field))

package/lib/blocks/lens/fields/BooleanField.ts

@@ -0,0 +1,76 @@
+import { type DropdownSection } from '../../../composables/Dropdown'
+import { type TableCell } from '../../../composables/Table'
+import { type BooleanFieldData } from '../FieldData'
+import { type FilterOperator } from '../FilterOperator'
+import { type FilterInput } from '../filter-inputs/FilterInput'
+import { SelectFilterInput } from '../filter-inputs/SelectFilterInput'
+import { Field } from './Field'
+
+const DEFAULTS = {
+  en: { true: 'Yes', false: 'No' },
+  ja: { true: 'はい', false: 'いいえ' }
+} as const
+
+export class BooleanField extends Field<BooleanFieldData> {
+  override tableCell(v: any, _r: any): TableCell {
+    return {
+      type: 'text',
+      value: this.formatValue(v)
+    }
+  }
+
+  override async tableFilterMenu(filters: any[], onFilterUpdated: (filters: any[]) => void): Promise<DropdownSection | null> {
+    // A boolean has exactly two states, so the inline menu is a single
+    // select on `=`. Re-clicking the active value clears the filter.
+    const selected = this.eqFilterValueFor(this.data.key, filters)
+
+    return {
+      type: 'filter',
+      search: false,
+      selected,
+      options: this.filterOptions(),
+      onClick: (v) => { onFilterUpdated?.([this.data.key, '=', selected === v ? null : v]) }
+    }
+  }
+
+  override availableFilters(): Partial<Record<FilterOperator, FilterInput>> {
+    // A boolean is a two-state value, so `=` / `!=` express the filter
+    // more naturally than set membership. The single-value cast preserves
+    // the boolean (it no longer stringifies), so option matching and the
+    // backend comparison stay correct.
+    const selectOne = new SelectFilterInput().options(() => Promise.resolve(this.filterOptions()))
+    return {
+      '=': selectOne,
+      '!=': selectOne
+    }
+  }
+
+  override dataListItemComponent(): any {
+    return this.defineDataListItemComponent((value) => this.formatValue(value))
+  }
+
+  override formInputComponent(): any {
+    throw new Error('Not implemented.')
+  }
+
+  protected filterOptions(): Array<{ value: boolean; label: string }> {
+    return [
+      { value: true, label: this.formatValue(true)! },
+      { value: false, label: this.formatValue(false)! }
+    ]
+  }
+
+  protected formatValue(v: any): string | null {
+    if (v === null || v === undefined) {
+      return null
+    }
+    if (v) {
+      return this.ctx.lang === 'ja'
+        ? (this.data.labelTrueJa ?? DEFAULTS.ja.true)
+        : (this.data.labelTrueEn ?? DEFAULTS.en.true)
+    }
+    return this.ctx.lang === 'ja'
+      ? (this.data.labelFalseJa ?? DEFAULTS.ja.false)
+      : (this.data.labelFalseEn ?? DEFAULTS.en.false)
+  }
+}

package/lib/blocks/lens/fields/DateField.ts

@@ -20,9 +20,17 @@ export class DateField extends Field<DateFieldData> {
   override availableFilters(): Partial<Record<FilterOperator, FilterInput>> {
     const text = new TextFilterInput()
 
+    // Comparison operators (`>`, `>=`, `<`, `<=`) back date-range filters
+    // such as `invested_date >= X` AND `invested_date < Y`. The value is
+    // an ISO date string, edited as text — same input the `=` / `!=`
+    // operators already use for this field.
     return {
       '=': text,
-      '!=': text
+      '!=': text,
+      '>': text,
+      '>=': text,
+      '<': text,
+      '<=': text
     }
   }
 

package/lib/blocks/lens/fields/DatetimeField.ts

@@ -17,9 +17,16 @@ export class DatetimeField extends Field<DatetimeFieldData> {
   override availableFilters(): Partial<Record<FilterOperator, FilterInput>> {
     const text = new TextFilterInput()
 
+    // Comparison operators (`>`, `>=`, `<`, `<=`) back datetime-range
+    // filters. The value is an ISO datetime string, edited as text — the
+    // same input the `=` / `!=` operators already use for this field.
     return {
       '=': text,
-      '!=': text
+      '!=': text,
+      '>': text,
+      '>=': text,
+      '<': text,
+      '<=': text
     }
   }
 

package/lib/blocks/lens/fields/DecimalField.ts

@@ -0,0 +1,60 @@
+import { defineComponent, h } from 'vue'
+import { type TableCell } from '../../../composables/Table'
+import { type DecimalFieldData } from '../FieldData'
+import { type FilterOperator } from '../FilterOperator'
+import LensFormOverrideNumber from '../components/LensFormOverrideNumber.vue'
+import { type FilterInput } from '../filter-inputs/FilterInput'
+import { NumberFilterInput } from '../filter-inputs/NumberFilterInput'
+import { Field } from './Field'
+import { renderNumberLikeTableCell } from './support/Renderers'
+
+/**
+ * A decimal field is rendered identically to a number field on the
+ * client — `renderNumberLikeTableCell` covers both. The type exists so
+ * backends can preserve arbitrary precision (e.g. send the value as a
+ * string instead of a JS number) without losing the type-level signal
+ * at the spec layer.
+ */
+export class DecimalField extends Field<DecimalFieldData> {
+  override tableCell(v: any, _r: any): TableCell {
+    return renderNumberLikeTableCell(this.data, v)
+  }
+
+  override availableFilters(): Partial<Record<FilterOperator, FilterInput>> {
+    const number = new NumberFilterInput()
+
+    return {
+      '=': number,
+      '!=': number
+    }
+  }
+
+  /**
+   * Renders the override form with extra inputs for `align`,
+   * `separator`, `abbr` and `fractionDigits` on top of the base
+   * label / width / freeze controls.
+   */
+  override overrideForm(): any {
+    return defineComponent((props) => {
+      return () => h(LensFormOverrideNumber, {
+        name: props.name,
+        field: props.field,
+        override: props.override
+      })
+    }, {
+      props: [
+        'name',
+        'field',
+        'override'
+      ]
+    })
+  }
+
+  override dataListItemComponent(): any {
+    throw new Error('Not implemented.')
+  }
+
+  override formInputComponent() {
+    throw new Error('Not implemented.')
+  }
+}

package/lib/blocks/lens/fields/Field.ts

@@ -11,6 +11,12 @@ import LensFormOverrideBase from '../components/LensFormOverrideBase.vue'
 import { type FilterInput } from '../filter-inputs/FilterInput'
 import * as RuleMapper from '../validation/RuleMapper'
 
+/**
+ * Fallback column width (px) used when a field's definition does not
+ * specify one (i.e. `width` is 0). Keeps columns visible by default.
+ */
+const DEFAULT_COLUMN_WIDTH = 168
+
 export abstract class Field<T extends FieldData> {
   /**
    * The field context, that holds global app context
@@ -66,7 +72,11 @@ export abstract class Field<T extends FieldData> {
     return {
       label: this.label(),
       freeze: this.data.freeze,
-      width: `${this.data.width}px`,
+      // A width of 0 means "unset" — fall back to a sensible default so
+      // the column stays visible. Without this, fields whose backend
+      // definition omits an explicit width would render as a 0px (hidden)
+      // column until the user manually drag-resizes it.
+      width: `${this.data.width || DEFAULT_COLUMN_WIDTH}px`,
       cell: (v, r) => this.tableCell(v, r)
     }
   }
@@ -120,6 +130,19 @@ export abstract class Field<T extends FieldData> {
     return []
   }
 
+  /**
+   * Returns the "=" filter value for the given key from the filters
+   * array, or `null` when there is none.
+   */
+  protected eqFilterValueFor(key: string, filters: any[]): any {
+    for (const f of filters) {
+      if (f[0] === key && f[1] === '=') {
+        return f[2]
+      }
+    }
+    return null
+  }
+
   /**
    * Returns the table cell definition for the field.
    */

package/lib/blocks/lens/fields/NumberField.ts

@@ -1,16 +1,16 @@
+import { defineComponent, h } from 'vue'
 import { type TableCell } from '../../../composables/Table'
 import { type NumberFieldData } from '../FieldData'
 import { type FilterOperator } from '../FilterOperator'
+import LensFormOverrideNumber from '../components/LensFormOverrideNumber.vue'
 import { type FilterInput } from '../filter-inputs/FilterInput'
 import { NumberFilterInput } from '../filter-inputs/NumberFilterInput'
 import { Field } from './Field'
+import { renderNumberLikeTableCell } from './support/Renderers'
 
 export class NumberField extends Field<NumberFieldData> {
   override tableCell(v: any, _r: any): TableCell {
-    return {
-      type: 'number',
-      value: v
-    }
+    return renderNumberLikeTableCell(this.data, v)
   }
 
   override availableFilters(): Partial<Record<FilterOperator, FilterInput>> {
@@ -22,6 +22,27 @@ export class NumberField extends Field<NumberFieldData> {
     }
   }
 
+  /**
+   * Renders the override form with extra inputs for `align`,
+   * `separator`, `abbr` and `fractionDigits` on top of the base
+   * label / width / freeze controls.
+   */
+  override overrideForm(): any {
+    return defineComponent((props) => {
+      return () => h(LensFormOverrideNumber, {
+        name: props.name,
+        field: props.field,
+        override: props.override
+      })
+    }, {
+      props: [
+        'name',
+        'field',
+        'override'
+      ]
+    })
+  }
+
   override dataListItemComponent(): any {
     throw new Error('Not implemented.')
   }

package/lib/blocks/lens/fields/RelatedManyField.ts

@@ -30,10 +30,19 @@ export class RelatedManyField extends Field<RelatedManyFieldData> {
     const res = await this.fetcher(method, url)
     const data = key ? res[key] : res
 
-    const options = data.map((item: any) => ({
-      label: item[this.data.resourceTitle],
-      value: item[this.data.filterKey]
-    }))
+    const isAvatar = this.data.displayAs === 'avatars'
+
+    const options = data.map((item: any) => isAvatar
+      ? {
+          type: 'avatar' as const,
+          label: item[this.data.resourceTitle],
+          image: this.data.resourceImage ? item[this.data.resourceImage] : null,
+          value: item[this.data.filterKey]
+        }
+      : {
+          label: item[this.data.resourceTitle],
+          value: item[this.data.filterKey]
+        })
 
     return {
       type: 'filter',
@@ -45,9 +54,24 @@ export class RelatedManyField extends Field<RelatedManyFieldData> {
   }
 
   override tableCell(v: any, _r: any): TableCell {
+    const items = (v ?? []) as any[]
+
+    if (this.data.displayAs === 'avatars') {
+      return {
+        type: 'avatars',
+        avatars: items.map((item) => ({
+          image: this.data.image ? item[this.data.image] : null,
+          name: item[this.data.title]
+        })),
+        avatarCount: 6,
+        nameCount: 0,
+        tooltip: true
+      }
+    }
+
     return {
       type: 'pills',
-      pills: v.map((item: any) => ({
+      pills: items.map((item) => ({
         label: item[this.data.title],
         value: item[this.data.filterKey]
       }))

package/lib/blocks/lens/fields/RelatedOneField.ts

@@ -0,0 +1,119 @@
+import { xor } from 'lodash-es'
+import { type DropdownSection } from '../../../composables/Dropdown'
+import { type TableCell } from '../../../composables/Table'
+import { type RelatedOneFieldData } from '../FieldData'
+import { type FilterOperator } from '../FilterOperator'
+import { type ResourceFetcher } from '../ResourceFetcher'
+import { type FilterInput } from '../filter-inputs/FilterInput'
+import { SelectFilterInput } from '../filter-inputs/SelectFilterInput'
+import { Field } from './Field'
+
+export class RelatedOneField extends Field<RelatedOneFieldData> {
+  fetcher: ResourceFetcher
+
+  constructor(ctx: any, data: RelatedOneFieldData, fetcher: ResourceFetcher) {
+    super(ctx, data)
+    this.fetcher = fetcher
+  }
+
+  override async tableFilterMenu(filters: any[], onFilterUpdated: (filters: any[]) => void): Promise<DropdownSection | null> {
+    const method = this.data.resourceEndpointMethod
+    const url = this.data.resourceEndpointPath
+    const key = this.data.resourceEndpointDataKey
+
+    if (!url) {
+      return null
+    }
+
+    const selected = this.inFilterValueFor(this.data.key, filters)
+
+    const res = await this.fetcher(method, url)
+    const data = key ? res[key] : res
+
+    const isAvatar = this.data.displayAs === 'avatar'
+
+    const options = data.map((item: any) => isAvatar
+      ? {
+          type: 'avatar' as const,
+          label: item[this.data.resourceTitle],
+          image: this.data.resourceImage ? item[this.data.resourceImage] : null,
+          value: item[this.data.filterKey]
+        }
+      : {
+          label: item[this.data.resourceTitle],
+          value: item[this.data.filterKey]
+        })
+
+    return {
+      type: 'filter',
+      search: true,
+      selected,
+      options,
+      onClick: (v) => { onFilterUpdated?.([this.data.key, 'in', xor(selected, [v])]) }
+    }
+  }
+
+  override tableCell(v: any, _r: any): TableCell {
+    if (v === null || v === undefined) {
+      if (this.data.displayAs === 'avatar') {
+        return { type: 'avatar', image: null, name: '' }
+      }
+      return { type: 'text', value: null }
+    }
+
+    if (this.data.displayAs === 'avatar') {
+      return {
+        type: 'avatar',
+        image: this.data.image ? (v[this.data.image] ?? null) : null,
+        // Empty string (not null) for the same reason as the text branch
+        // below — a null name falls back to the raw row value in the cell
+        // renderer and breaks SAvatar.
+        name: v[this.data.title] ?? ''
+      }
+    }
+
+    return {
+      type: 'text',
+      // Empty string (not null) when the title is missing: the table
+      // renderer falls back to the raw row value on a null cell value,
+      // which would render the relation object as `[object Object]`.
+      value: v[this.data.title] ?? ''
+    }
+  }
+
+  override availableFilters(): Partial<Record<FilterOperator, FilterInput>> {
+    const method = this.data.resourceEndpointMethod
+    const url = this.data.resourceEndpointPath
+    const key = this.data.resourceEndpointDataKey
+
+    if (!url) {
+      return {}
+    }
+
+    const optionsResolver = async () => {
+      const res = await this.fetcher(method, url)
+      const data = key ? res[key] : res
+      return data.map((item: any) => ({
+        value: item[this.data.filterKey],
+        label: item[this.data.resourceTitle]
+      }))
+    }
+
+    const selectOne = new SelectFilterInput().options(optionsResolver)
+    const selectMany = new SelectFilterInput().options(optionsResolver).multiple()
+
+    return {
+      '=': selectOne,
+      '!=': selectOne,
+      'in': selectMany
+    }
+  }
+
+  override dataListItemComponent(): any {
+    throw new Error('Not implemented.')
+  }
+
+  override formInputComponent() {
+    throw new Error('Not implemented.')
+  }
+}

package/lib/blocks/lens/fields/TextField.ts

@@ -38,6 +38,8 @@ export class TextField extends Field<TextFieldData> {
         'label': this.formInputLabel(),
         'placeholder': this.placeholder() || undefined,
         'help': this.help() || undefined,
+        'unitBefore': this.data.unitBefore || undefined,
+        'unitAfter': this.data.unitAfter || undefined,
         'modelValue': props.modelValue,
         'validation': props.validation,
         'onUpdate:modelValue': (value: any) => {

package/lib/blocks/lens/fields/support/Renderers.ts

@@ -0,0 +1,78 @@
+import { type TableCell } from '../../../../composables/Table'
+import { abbreviate } from '../../../../support/Num'
+import { type DecimalFieldData, type NumberFieldData } from '../../FieldData'
+
+/**
+ * `Intl.NumberFormat`'s `maximumFractionDigits` accepts integers in
+ * the range `0..20` (inclusive) and throws `RangeError` outside it.
+ * The override UI can in principle accept any number — including
+ * negative values via `SInputNumber` — so we clamp defensively on
+ * the rendering path. `null` / `undefined` stays untouched so the
+ * cell component can route through the "no formatting" path.
+ */
+function clampFractionDigits(digits: number | null | undefined): number | null {
+  if (digits == null) {
+    return null
+  }
+  return Math.max(0, Math.min(20, Math.trunc(digits)))
+}
+
+/**
+ * Coerces an incoming cell value to a finite number, or `null` when
+ * the value is missing / blank / non-numeric. We intentionally treat
+ * empty and whitespace-only strings the same as `null` — otherwise
+ * `Number('') === 0` would render blank numeric cells as a literal
+ * `0`, which is a regression from the pre-formatting renderer that
+ * passed values through untouched. `NaN` (from `Number('abc')` and
+ * friends) collapses to `null` too so the cell renders blank instead
+ * of the string `"NaN"`.
+ */
+function toNumberOrNull(v: any): number | null {
+  if (v == null) {
+    return null
+  }
+  if (typeof v === 'string' && v.trim() === '') {
+    return null
+  }
+  const num = Number(v)
+  return Number.isFinite(num) ? num : null
+}
+
+/**
+ * Renders a `number` or `decimal` field as a table cell. The two share
+ * the same rendering rules so this helper covers both.
+ *
+ * - When `abbr` is `null`, we emit a `number` cell. The cell component
+ *   applies `separator` and `maximumFractionDigits` via
+ *   `toLocaleString`. The raw incoming value is coerced with `Number()`
+ *   so decimal fields delivered as strings still render.
+ * - When `abbr` is `'en'` or `'ja'`, we emit a `text` cell with the
+ *   compact-notation string baked in. We fall back to a 1-digit
+ *   precision when `fractionDigits` is `null` — matches what the
+ *   default user-facing column-format UI would set.
+ */
+export function renderNumberLikeTableCell(
+  data: NumberFieldData | DecimalFieldData,
+  v: any
+): TableCell {
+  const num = toNumberOrNull(v)
+  const cap = clampFractionDigits(data.fractionDigits)
+
+  if (data.abbr != null) {
+    return {
+      type: 'text',
+      align: data.align ?? 'left',
+      value: num != null
+        ? abbreviate(num, cap ?? 1, data.abbr)
+        : null
+    }
+  }
+
+  return {
+    type: 'number',
+    align: data.align ?? 'left',
+    value: num,
+    separator: data.separator ?? false,
+    maximumFractionDigits: cap
+  }
+}

package/lib/blocks/lens/filter-inputs/SelectFilterInput.ts

@@ -35,7 +35,11 @@ export class SelectFilterInput extends FilterInput {
     if (Array.isArray(value)) {
       return value[0]
     }
-    return this.castValueToStringOrNull(value)
+    // Preserve the value's type. Option values can be non-string (e.g.
+    // numeric related-record ids); stringifying here would break strict
+    // option matching in the dropdown summary and send the wrong type to
+    // the backend.
+    return value ?? null
   }
 
   protected castValueMany(value: any): any {

package/lib/blocks/lens/validation/RuleMapper.ts

@@ -1,6 +1,6 @@
 import { type ValidationArgs, type ValidationRuleWithParams } from '@vuelidate/core'
 import { type Day, day } from '../../../support/Day'
-import { after, afterOrEqual, before, beforeOrEqual, maxLength, required } from '../../../validation/rules'
+import { after, afterOrEqual, before, beforeOrEqual, maxLength, required, slackChannelName } from '../../../validation/rules'
 import { type Rule } from '../Rule'
 
 /**
@@ -19,6 +19,8 @@ function mapRule(rule: Rule): ValidationRuleWithParams {
       return maxLength(rule.length)
     case 'required':
       return required()
+    case 'slack_channel_name':
+      return slackChannelName({ offset: rule.offset })
     case 'before':
       return before(resolveDate(rule.date))
     case 'before_or_equal':

package/lib/components/SInputFileUpload.vue

@@ -17,7 +17,14 @@ export type Size = 'mini' | 'small' | 'medium'
 export type { Color }
 
 export type ModelType = 'file' | 'object'
-export type ModelValue<T extends ModelType> = T extends 'file' ? File : FileObject
+
+/**
+ * In `file` mode an item is either a freshly selected `File` or a `string`
+ * referencing a file that was already uploaded (e.g. its stored path or
+ * basename) — mirroring `SInputImage`'s `File | string` model. `object`
+ * mode wraps a `File` with display metadata.
+ */
+export type ModelValue<T extends ModelType> = T extends 'file' ? File | string : FileObject
 
 export interface FileObject {
   file: File
@@ -103,7 +110,15 @@ const totalFileCountText = computed(() => {
 })
 
 const totalFileSizeText = computed(() => {
-  const files = _value.value.map((file) => (file instanceof File ? file : file.file))
+  // Only locally selected files contribute to the total size. Already
+  // uploaded files (plain `string` references) have no known size on the
+  // client, so the displayed total under-counts when the list mixes
+  // uploaded references with newly selected files. Accepted for now —
+  // surfacing accurate sizes would require the size to travel with the
+  // reference (or an extra lookup).
+  const files = _value.value
+    .map((file) => (file instanceof File ? file : typeof file === 'string' ? null : file.file))
+    .filter((file): file is File => file instanceof File)
   return formatSize(files)
 })