@bobbykim/manguito-cms-admin 0.4.3 → 0.5.1

package/src/components/fields/ReferenceSelect.vue

@@ -2,6 +2,7 @@
 import { ref, computed, onMounted } from 'vue'
 import { useDebounceFn } from '@vueuse/core'
 import type { ParsedField } from '@bobbykim/manguito-cms-core'
+import { relationCardinality } from '@bobbykim/manguito-cms-core/cardinality'
 import { useApiClient } from '../../composables/useApiClient'
 import { useSchemaStore } from '../../stores/schema'
 
@@ -25,9 +26,8 @@ const typeaheadComp = computed(() => {
 })
 
 const refName = computed(() => typeaheadComp.value?.ref ?? '')
-const relType = computed(() => typeaheadComp.value?.rel ?? 'one-to-one')
 const maxItems = computed(() => props.field.validation.max_items ?? null)
-const isMulti = computed(() => relType.value !== 'one-to-one')
+const isMulti = computed(() => relationCardinality(props.field) === 'many')
 const isContentRef = computed(() => !!schemaStore.contentTypes[refName.value])
 
 // First text/plain field in the referenced schema — used as the display label.

package/src/components/fields/__tests__/ParagraphEmbed.test.ts

@@ -0,0 +1,64 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { defineComponent, h } from 'vue'
+import type { ParsedField } from '@bobbykim/manguito-cms-core'
+import ParagraphEmbed from '../ParagraphEmbed.vue'
+
+// Stands in for a generated paragraph form: one button that emits a value.
+const StubForm = defineComponent({
+  props: { modelValue: { type: Object, default: null }, disabled: Boolean },
+  emits: ['update:modelValue'],
+  setup(_, { emit }) {
+    return () => h('button', { class: 'stub-form', onClick: () => emit('update:modelValue', { url: 'edited' }) }, 'stub')
+  },
+})
+
+const field = (rel: 'one-to-one' | 'one-to-many'): ParsedField =>
+  ({
+    name: 'link', label: 'Link', field_type: 'paragraph', required: false, nullable: true, order: 0,
+    validation: { required: false }, db_column: null,
+    ui_component: { component: 'paragraph-embed', ref: 'paragraph--link', rel },
+  }) as ParsedField
+
+const mountWith = (rel: 'one-to-one' | 'one-to-many', modelValue: unknown) =>
+  mount(ParagraphEmbed, { props: { field: field(rel), modelValue, formComponent: StubForm } })
+
+describe('ParagraphEmbed, one-to-one', () => {
+  it('when empty, Add emits a single object, not a list', async () => {
+    // MUTATION: render list mode for every rel. Add then emits [{ order: 0 }].
+    const w = mountWith('one-to-one', null)
+    await w.get('button').trigger('click')
+    expect(w.emitted('update:modelValue')?.[0]).toEqual([{}])
+  })
+
+  it('edits emit the item object', async () => {
+    // MUTATION: wrap single edits as [value].
+    const w = mountWith('one-to-one', { url: 'a' })
+    await w.get('.stub-form').trigger('click')
+    expect(w.emitted('update:modelValue')?.[0]).toEqual([{ url: 'edited' }])
+  })
+
+  it('Remove emits null and offers no second item', async () => {
+    // MUTATION: keep the list's Add button visible in single mode.
+    const w = mountWith('one-to-one', { url: 'a' })
+    expect(w.findAll('button').filter((b) => b.text().includes('Add'))).toHaveLength(0)
+    await w.get('[aria-label="Remove Link"]').trigger('click')
+    expect(w.emitted('update:modelValue')?.[0]).toEqual([null])
+  })
+
+  it('treats a legacy array value as empty, showing Add', () => {
+    // MUTATION: index into an array value. A stale list renders as an item.
+    const w = mountWith('one-to-one', [{ url: 'a' }])
+    expect(w.findAll('.stub-form')).toHaveLength(0)
+    expect(w.text()).toContain('Add Link')
+  })
+})
+
+describe('ParagraphEmbed, one-to-many (unchanged)', () => {
+  it('Add appends an ordered item to the list', async () => {
+    // MUTATION: route one-to-many into single mode.
+    const w = mountWith('one-to-many', [])
+    await w.get('button').trigger('click')
+    expect(w.emitted('update:modelValue')?.[0]).toEqual([[{ order: 0 }]])
+  })
+})

package/src/components/fields/__tests__/ReferenceSelect.test.ts

@@ -193,4 +193,23 @@ describe('ReferenceSelect', () => {
     expect(wrapper.find('input').attributes('disabled')).toBeDefined()
     expect(wrapper.text()).toContain('2 / 2')
   })
+
+  it('a deprecated one-to-many reference is a single picker and emits one id', async () => {
+    // MUTATION: keep `isMulti = relType !== 'one-to-one'`. Selecting then emits
+    // ['u1'], which the API now rejects with 422.
+    server.use(
+      http.get(`${ADMIN}/api/content/content--user`, () =>
+        HttpResponse.json({ ok: true, data: [{ id: 'u1', title: 'Alice' }] })
+      )
+    )
+    const wrapper = mountComponent(
+      makeField({ ui_component: { component: 'typeahead-select', ref: 'content--user', rel: 'one-to-many' } })
+    )
+    await wrapper.find('input').setValue('al')
+    await wrapper.find('input').trigger('input')
+    await vi.runAllTimersAsync()
+    await flushPromises()
+    await wrapper.findAll('[role="option"]')[0]!.trigger('click')
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['u1'])
+  })
 })

package/src/components/shared/MediaSelectModal.vue

@@ -2,6 +2,8 @@
 import { ref, computed, watch, onMounted } from 'vue'
 import type { MediaItem } from '@bobbykim/manguito-cms-core'
 import { useApiClient } from '../../composables/useApiClient'
+import MediaThumbnail from './MediaThumbnail.vue'
+import { fileName } from '../../utils/file-kind'
 
 type MediaType = 'image' | 'video' | 'file'
 
@@ -188,29 +190,10 @@ function confirm() {
                   : 'border-transparent hover:border-gray-300',
               ]"
               :aria-pressed="selectedItem?.id === item.id"
-              :aria-label="`Select ${item.alt ?? item.url.split('/').pop()}`"
+              :aria-label="`Select ${item.alt ?? fileName(item.url)}`"
               @click="selectedItem = item"
             >
-              <!-- Image thumbnail -->
-              <img
-                v-if="item.type === 'image'"
-                :src="item.url"
-                :alt="item.alt ?? ''"
-                class="h-full w-full object-cover"
-                loading="lazy"
-              />
-
-              <!-- Video / file icon -->
-              <div
-                v-else
-                class="flex h-full w-full flex-col items-center justify-center gap-1 bg-gray-50 text-gray-400"
-                aria-hidden="true"
-              >
-                <span class="text-3xl">{{ item.type === 'video' ? '▶' : '📄' }}</span>
-                <span class="max-w-full truncate px-1 text-xs">
-                  {{ item.url.split('/').pop() }}
-                </span>
-              </div>
+              <MediaThumbnail :item="item" :label="fileName(item.url)" />
 
               <!-- Selection overlay tick -->
               <div

package/src/components/shared/MediaThumbnail.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
+import type { MediaItem } from '@bobbykim/manguito-cms-core'
+import { fileKind, TONE_CLASS } from '../../utils/file-kind'
+
+// The thumbnail every media view shows: the image itself, a video's first
+// frame, or a typed document badge. Fills its parent; the parent sets the size.
+const props = defineProps<{
+  item: Pick<MediaItem, 'type' | 'url' | 'mime_type' | 'alt'>
+  // Optional caption lines: under a file badge, or over a video frame.
+  label?: string | undefined
+  detail?: string | undefined
+}>()
+
+const root = ref<HTMLElement | null>(null)
+
+// A video loads only once it scrolls into view, so a grid of videos does not
+// fetch every file's metadata at once. Without IntersectionObserver (older
+// browsers, jsdom) it loads immediately.
+const canObserve = typeof IntersectionObserver !== 'undefined'
+const inView = ref(!canObserve)
+const videoFailed = ref(false)
+let observer: IntersectionObserver | null = null
+
+function stopObserving() {
+  observer?.disconnect()
+  observer = null
+}
+
+// Starts fresh for the current item. The media field preview keeps this
+// component mounted while its selection changes, so this runs on mount AND on
+// every item change: a failure or a pending observer belongs to the old item.
+function track() {
+  stopObserving()
+  videoFailed.value = false
+  inView.value = !canObserve
+  if (props.item.type !== 'video' || !canObserve || !root.value) return
+  observer = new IntersectionObserver((entries) => {
+    if (entries.some((e) => e.isIntersecting)) {
+      inView.value = true
+      stopObserving()
+    }
+  })
+  observer.observe(root.value)
+}
+
+onMounted(track)
+watch(() => [props.item.url, props.item.type], track)
+onBeforeUnmount(stopObserving)
+
+// `#t=0.1` asks the browser for the frame just after the start: some codecs
+// paint black at exactly 0. preload="metadata" fetches only what that needs.
+const frameSrc = computed(() => (inView.value ? `${props.item.url}#t=0.1` : undefined))
+
+const kind = computed(() => fileKind(props.item.mime_type, props.item.url))
+</script>
+
+<template>
+  <div ref="root" class="relative h-full w-full overflow-hidden">
+    <img
+      v-if="item.type === 'image'"
+      :src="item.url"
+      :alt="item.alt ?? ''"
+      class="h-full w-full object-cover"
+      loading="lazy"
+    />
+
+    <template v-else-if="item.type === 'video' && !videoFailed">
+      <video
+        :src="frameSrc"
+        preload="metadata"
+        muted
+        playsinline
+        class="h-full w-full bg-gray-900 object-cover"
+        @error="videoFailed = true"
+      />
+      <span
+        class="absolute left-1 top-1 flex h-5 w-5 items-center justify-center rounded-full bg-black/60 text-[10px] text-white"
+        aria-hidden="true"
+      >▶</span>
+      <div
+        v-if="label || detail"
+        class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/70 to-transparent px-1 pb-1 pt-4 text-center"
+      >
+        <p v-if="label" class="truncate text-xs text-white">{{ label }}</p>
+        <p v-if="detail" class="text-[10px] text-gray-200">{{ detail }}</p>
+      </div>
+    </template>
+
+    <div
+      v-else
+      class="flex h-full w-full flex-col items-center justify-center gap-1 bg-gray-50 p-1 text-gray-400"
+    >
+      <span class="relative inline-flex" aria-hidden="true">
+        <svg viewBox="0 0 24 24" class="h-9 w-9" fill="none" stroke="currentColor" stroke-width="1.5">
+          <path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" />
+          <path d="M14 3v5h5" />
+        </svg>
+      </span>
+      <span
+        data-testid="file-badge"
+        :class="['rounded px-1 text-[10px] font-semibold leading-4 text-white', item.type === 'video' ? 'bg-gray-700' : TONE_CLASS[kind.tone]]"
+      >{{ item.type === 'video' ? 'VIDEO' : kind.label }}</span>
+      <span v-if="label" class="max-w-full truncate text-center text-xs">{{ label }}</span>
+      <span v-if="detail" class="text-xs text-gray-300">{{ detail }}</span>
+    </div>
+  </div>
+</template>

package/src/components/shared/__tests__/MediaThumbnail.test.ts

@@ -0,0 +1,118 @@
+import { describe, it, expect, afterEach, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import MediaThumbnail from '../MediaThumbnail.vue'
+
+const image = { type: 'image' as const, url: 'https://cdn.example.com/a.jpg', mime_type: 'image/jpeg', alt: 'A cat' }
+const video = { type: 'video' as const, url: 'https://cdn.example.com/clip.mp4', mime_type: 'video/mp4' }
+const pdf = { type: 'file' as const, url: 'https://cdn.example.com/report.pdf', mime_type: 'application/pdf' }
+
+afterEach(() => {
+  vi.unstubAllGlobals()
+})
+
+describe('MediaThumbnail', () => {
+  it('renders an image as a lazy <img> with its alt text', () => {
+    // MUTATION: render every item through the video or file branch.
+    const img = mount(MediaThumbnail, { props: { item: image } }).get('img')
+    expect(img.attributes('src')).toBe(image.url)
+    expect(img.attributes('alt')).toBe('A cat')
+    expect(img.attributes('loading')).toBe('lazy')
+  })
+
+  it('renders a video as a muted, metadata-only <video> seeked to its first frame', () => {
+    // MUTATION: drop `#t=0.1` or use preload="auto". The frame is then either
+    // black (time 0 on some codecs) or the whole file downloads per thumbnail.
+    const v = mount(MediaThumbnail, { props: { item: video } }).get('video')
+    expect(v.attributes('src')).toBe(`${video.url}#t=0.1`)
+    expect(v.attributes('preload')).toBe('metadata')
+    expect((v.element as HTMLVideoElement).muted).toBe(true)
+    expect(v.attributes('controls')).toBeUndefined()
+  })
+
+  it('falls back to the video icon when the frame cannot load', async () => {
+    // MUTATION: ignore the video's error event. A broken file then shows an
+    // empty black box instead of an icon.
+    const w = mount(MediaThumbnail, { props: { item: video } })
+    await w.get('video').trigger('error')
+    expect(w.find('video').exists()).toBe(false)
+    expect(w.text()).toContain('VIDEO')
+  })
+
+  it('loads the video only once it scrolls into view', async () => {
+    // MUTATION: bind `src` immediately. A grid of many videos then fetches every
+    // file's metadata at once.
+    let fire: ((entries: Array<{ isIntersecting: boolean }>) => void) | undefined
+    vi.stubGlobal(
+      'IntersectionObserver',
+      class {
+        constructor(cb: (entries: Array<{ isIntersecting: boolean }>) => void) {
+          fire = cb
+        }
+        observe() {}
+        disconnect() {}
+      }
+    )
+    const w = mount(MediaThumbnail, { props: { item: video } })
+    expect(w.get('video').attributes('src')).toBeUndefined()
+    fire!([{ isIntersecting: true }])
+    await w.vm.$nextTick()
+    expect(w.get('video').attributes('src')).toBe(`${video.url}#t=0.1`)
+  })
+
+  it('renders a file as a typed badge with its caption lines', () => {
+    // MUTATION: render the old generic glyph. The badge text and the caption
+    // lines disappear.
+    const w = mount(MediaThumbnail, { props: { item: pdf, label: 'report.pdf', detail: '1.2 MB' } })
+    expect(w.get('[data-testid="file-badge"]').text()).toBe('PDF')
+    expect(w.text()).toContain('report.pdf')
+    expect(w.text()).toContain('1.2 MB')
+  })
+
+  it('omits the caption lines when none are given', () => {
+    // MUTATION: always render the file name, which crowds the small field preview.
+    const w = mount(MediaThumbnail, { props: { item: pdf } })
+    expect(w.text().trim()).toBe('PDF')
+  })
+
+  it('shows a video caption over its frame when one is given', () => {
+    // MUTATION: render label/detail only in the file branch. Video tiles in the
+    // library then lose the name and size the old placeholder showed.
+    const w = mount(MediaThumbnail, { props: { item: video, label: 'clip.mp4', detail: '3.4 MB' } })
+    expect(w.find('video').exists()).toBe(true)
+    expect(w.text()).toContain('clip.mp4')
+    expect(w.text()).toContain('3.4 MB')
+  })
+
+  it('tries again when a failed video is replaced by another item', async () => {
+    // MUTATION: never reset `videoFailed`. In the field preview, which keeps
+    // the thumbnail mounted while the selection changes, every later video then
+    // shows the fallback icon.
+    const w = mount(MediaThumbnail, { props: { item: video } })
+    await w.get('video').trigger('error')
+    expect(w.find('video').exists()).toBe(false)
+    await w.setProps({ item: { ...video, url: 'https://cdn.example.com/other.mp4' } })
+    expect(w.get('video').attributes('src')).toBe('https://cdn.example.com/other.mp4#t=0.1')
+  })
+
+  it('starts watching for visibility when the item becomes a video after mount', async () => {
+    // MUTATION: set up the IntersectionObserver only in onMounted. A video
+    // selected after an image then never gets a src: a permanent black box.
+    let fire: ((entries: Array<{ isIntersecting: boolean }>) => void) | undefined
+    vi.stubGlobal(
+      'IntersectionObserver',
+      class {
+        constructor(cb: (entries: Array<{ isIntersecting: boolean }>) => void) {
+          fire = cb
+        }
+        observe() {}
+        disconnect() {}
+      }
+    )
+    const w = mount(MediaThumbnail, { props: { item: image } })
+    await w.setProps({ item: video })
+    expect(fire).toBeDefined()
+    fire!([{ isIntersecting: true }])
+    await w.vm.$nextTick()
+    expect(w.get('video').attributes('src')).toBe(`${video.url}#t=0.1`)
+  })
+})

package/src/composables/__tests__/useFormValidation.test.ts

@@ -80,4 +80,31 @@ describe('useFormValidation', () => {
     expect(Object.keys(errors.value)).toHaveLength(0)
     expect(touched.value.size).toBe(0)
   })
+
+  it('validate(): required one-to-one paragraph left empty (null) → required error', () => {
+    // MUTATION: drop `value === null` from isEmpty. An empty one-to-one
+    // paragraph would then pass "required".
+    const { validate, touch, errors } = useFormValidation()
+    const field = makeField({
+      name: 'link', label: 'Link', field_type: 'paragraph', db_column: null,
+      ui_component: { component: 'paragraph-embed', ref: 'paragraph--link', rel: 'one-to-one' },
+    })
+    touch('link')
+    validate([field], { link: null })
+    expect(errors.value['link']).toBe('Link is required.')
+  })
+
+  it('validate(): max_items never counts a one-to-one object', () => {
+    // MUTATION: treat a non-array value as a one-item list in the max_items
+    // check. A filled one-to-one paragraph would then fail max 0.
+    const { validate, touch, errors } = useFormValidation()
+    const field = makeField({
+      name: 'link', label: 'Link', field_type: 'paragraph', required: false, db_column: null,
+      validation: { required: false, max_items: 0 },
+      ui_component: { component: 'paragraph-embed', ref: 'paragraph--link', rel: 'one-to-one' },
+    })
+    touch('link')
+    validate([field], { link: { url: 'a' } })
+    expect(errors.value['link']).toBeUndefined()
+  })
 })

package/src/utils/__tests__/field-defaults.test.ts

@@ -0,0 +1,26 @@
+import { describe, it, expect } from 'vitest'
+import type { ParsedField } from '@bobbykim/manguito-cms-core'
+import { defaultForField } from '../field-defaults'
+
+const rel = (field_type: 'paragraph' | 'reference', r: 'one-to-one' | 'one-to-many' | 'many-to-many'): ParsedField =>
+  ({
+    name: 'x', label: 'X', field_type, required: false, nullable: true, order: 0,
+    validation: { required: false }, db_column: null,
+    ui_component: field_type === 'paragraph'
+      ? { component: 'paragraph-embed', ref: 'paragraph--p', rel: r }
+      : { component: 'typeahead-select', ref: 'taxonomy--t', rel: r },
+  }) as ParsedField
+
+describe('defaultForField', () => {
+  it('starts "one" relations empty as null', () => {
+    // MUTATION: keep `case 'paragraph': return []`. The one-to-one editor would
+    // then receive an array.
+    expect(defaultForField(rel('paragraph', 'one-to-one'))).toBeNull()
+    expect(defaultForField(rel('reference', 'one-to-many'))).toBeNull()
+  })
+  it('starts "many" relations empty as []', () => {
+    // MUTATION: return null for every relation.
+    expect(defaultForField(rel('paragraph', 'one-to-many'))).toEqual([])
+    expect(defaultForField(rel('reference', 'many-to-many'))).toEqual([])
+  })
+})

package/src/utils/__tests__/file-kind.test.ts

@@ -0,0 +1,102 @@
+import { describe, it, expect } from 'vitest'
+import { fileKind, fileName } from '../file-kind'
+
+describe('fileKind', () => {
+  it('labels PDFs', () => {
+    // MUTATION: drop the pdf rule. A PDF then falls back to its extension "PDF"
+    // only by accident of its URL; with an extensionless URL it reads "FILE".
+    expect(fileKind('application/pdf', 'https://cdn.example.com/abc')).toMatchObject({ label: 'PDF', tone: 'red' })
+  })
+
+  it('labels word-processing documents, whatever their exact MIME type', () => {
+    // MUTATION: match only the legacy "application/msword". Modern .docx files
+    // (the openxml type) and ODT/RTF would fall through to their extension.
+    for (const mime of [
+      'application/msword',
+      'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+      'application/vnd.oasis.opendocument.text',
+      'application/rtf',
+    ]) {
+      expect(fileKind(mime, 'https://cdn.example.com/x').label).toBe('DOC')
+    }
+  })
+
+  it('labels spreadsheets, including CSV', () => {
+    // MUTATION: match only the "spreadsheet" substring. CSV ("text/csv") would
+    // then read as plain text.
+    for (const mime of [
+      'application/vnd.ms-excel',
+      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+      'application/vnd.oasis.opendocument.spreadsheet',
+      'text/csv',
+    ]) {
+      expect(fileKind(mime, 'https://cdn.example.com/x').label).toBe('XLS')
+    }
+  })
+
+  it('labels presentations and archives', () => {
+    // MUTATION: drop the presentation or archive rules.
+    expect(fileKind('application/vnd.openxmlformats-officedocument.presentationml.presentation', 'u').label).toBe('PPT')
+    expect(fileKind('application/vnd.ms-powerpoint', 'u').label).toBe('PPT')
+    expect(fileKind('application/zip', 'u').label).toBe('ZIP')
+    expect(fileKind('application/gzip', 'u').label).toBe('ZIP')
+    expect(fileKind('application/x-7z-compressed', 'u').label).toBe('ZIP')
+  })
+
+  it('labels plain text and Markdown as TXT, but not CSV', () => {
+    // MUTATION: test the text/* rule before the CSV rule. CSV then reads TXT.
+    expect(fileKind('text/plain', 'u').label).toBe('TXT')
+    expect(fileKind('text/markdown', 'u').label).toBe('TXT')
+    expect(fileKind('text/csv', 'u').label).not.toBe('TXT')
+  })
+
+  it('falls back to the upper-cased extension of an unknown type', () => {
+    // MUTATION: return "FILE" for every unknown type, losing the extension hint.
+    expect(fileKind('application/octet-stream', 'https://cdn.example.com/media/model.glb')).toMatchObject({
+      label: 'GLB',
+      tone: 'gray',
+    })
+  })
+
+  it('ignores the query string and fragment when reading the extension', () => {
+    // MUTATION: take the text after the last "." of the whole URL. A signed URL
+    // would then produce a label from its query string.
+    expect(fileKind('application/octet-stream', 'https://cdn.example.com/a/b.step?X-Amz-Signature=abc.def').label).toBe('STEP')
+  })
+
+  it('falls back to FILE when there is no usable extension', () => {
+    // MUTATION: return an empty label, which renders an empty badge.
+    expect(fileKind('application/octet-stream', 'https://cdn.example.com/media/blob').label).toBe('FILE')
+    expect(fileKind('application/octet-stream', 'https://cdn.example.com/media/archive.toolongext').label).toBe('FILE')
+  })
+
+  it('ignores MIME parameters such as a charset', () => {
+    // MUTATION: compare the raw stored mime_type. "text/csv; charset=utf-8"
+    // then misses the CSV rule and reads TXT, and a PDF with parameters reads
+    // as its extension or FILE.
+    expect(fileKind('text/csv; charset=utf-8', 'https://cdn.example.com/x').label).toBe('XLS')
+    expect(fileKind('Application/PDF; name="a.pdf"', 'https://cdn.example.com/x').label).toBe('PDF')
+  })
+
+  it('recognises the archive MIME types browsers actually report', () => {
+    // MUTATION: list only application/zip. Chrome on Windows reports .zip as
+    // application/x-zip-compressed, which then reads as FILE.
+    for (const mime of ['application/x-zip-compressed', 'application/x-gzip', 'application/x-rar-compressed', 'application/vnd.rar']) {
+      expect(fileKind(mime, 'https://cdn.example.com/x').label).toBe('ZIP')
+    }
+  })
+})
+
+describe('fileName', () => {
+  it('returns the last path segment without the query string or fragment', () => {
+    // MUTATION: `url.split('/').pop()`. A signed URL's caption then reads
+    // "report.pdf?X-Amz-Signature=…".
+    expect(fileName('https://cdn.example.com/a/report.pdf?X-Amz-Signature=abc')).toBe('report.pdf')
+    expect(fileName('https://cdn.example.com/a/clip.mp4#t=3')).toBe('clip.mp4')
+  })
+
+  it('falls back to the whole URL when there is no path segment', () => {
+    // MUTATION: return '' for a URL ending in "/". The caption would be blank.
+    expect(fileName('https://cdn.example.com/')).toBe('https://cdn.example.com/')
+  })
+})

package/src/utils/__tests__/taxonomy-form.test.ts

@@ -0,0 +1,63 @@
+import { describe, it, expect } from 'vitest'
+import type { ParsedField } from '@bobbykim/manguito-cms-core'
+import { initialTaxonomyForm } from '../taxonomy-form'
+
+const base = { label: 'X', required: false, nullable: true, order: 0, validation: { required: false } }
+
+const fields: ParsedField[] = [
+  {
+    ...base, name: 'name', field_type: 'text/plain',
+    db_column: { column_name: 'name', column_type: 'varchar', nullable: true },
+    ui_component: { component: 'text-input' },
+  },
+  {
+    ...base, name: 'parent', field_type: 'reference',
+    db_column: { column_name: 'parent', column_type: 'uuid', nullable: true },
+    ui_component: { component: 'typeahead-select', ref: 'taxonomy--t', rel: 'one-to-one' },
+  },
+  {
+    ...base, name: 'blocks', field_type: 'paragraph', db_column: null,
+    ui_component: { component: 'paragraph-embed', ref: 'paragraph--p', rel: 'one-to-many' },
+  },
+  {
+    ...base, name: 'hero', field_type: 'paragraph', db_column: null,
+    ui_component: { component: 'paragraph-embed', ref: 'paragraph--p', rel: 'one-to-one' },
+  },
+  {
+    ...base, name: 'related', field_type: 'reference',
+    db_column: {
+      column_name: '', column_type: 'uuid', nullable: true,
+      junction: { table_name: 'junction_taxonomy_t_related', left_column: 'taxonomy_t_id', right_column: 'taxonomy_t_id', right_table: 'taxonomy_t' },
+    },
+    ui_component: { component: 'typeahead-select', ref: 'taxonomy--t', rel: 'many-to-many' },
+  },
+  {
+    ...base, name: 'computed', field_type: 'programmatic',
+    db_column: null,
+    ui_component: { component: 'computed-display' },
+  },
+] as unknown as ParsedField[]
+
+describe('initialTaxonomyForm', () => {
+  it('leaves out every field the taxonomy read does not return', () => {
+    // MUTATION: put every non-programmatic field into the form (the old
+    // initForm). The paragraph and many-to-many keys would then be sent as
+    // null, which the api rejects with a 422 for a "many" field and which
+    // erases a one-to-one paragraph.
+    const form = initialTaxonomyForm(fields, { name: 'Tag', parent: 'p-1' })
+    expect(form).not.toHaveProperty('blocks')
+    expect(form).not.toHaveProperty('hero')
+    expect(form).not.toHaveProperty('related')
+    expect(form).not.toHaveProperty('computed')
+  })
+
+  it('keeps column-backed fields, from the source or their default', () => {
+    // MUTATION: drop every reference field (filter on field_type instead of
+    // storage). A one-to-one reference has a column and must stay editable.
+    expect(initialTaxonomyForm(fields, { name: 'Tag', parent: 'p-1' })).toEqual({
+      name: 'Tag',
+      parent: 'p-1',
+    })
+    expect(initialTaxonomyForm(fields)).toEqual({ name: '', parent: null })
+  })
+})

package/src/utils/field-defaults.ts

@@ -0,0 +1,31 @@
+import type { ParsedField } from '@bobbykim/manguito-cms-core'
+// The browser-safe subpath: core's main entry also carries Node-only code.
+import { relationCardinality } from '@bobbykim/manguito-cms-core/cardinality'
+
+// The value a new form starts each field at. A relation starts as null when it
+// holds one item and [] when it holds a list (relationCardinality).
+export function defaultForField(field: ParsedField): unknown {
+  switch (field.field_type) {
+    case 'text/plain':
+    case 'text/rich':
+      return ''
+    case 'integer':
+    case 'float':
+      return null
+    case 'boolean':
+      return false
+    case 'date':
+      return null
+    case 'image':
+    case 'video':
+    case 'file':
+      return null
+    case 'enum':
+      return ''
+    case 'reference':
+    case 'paragraph':
+      return relationCardinality(field) === 'many' ? [] : null
+    default:
+      return null
+  }
+}