diff --git a/.contentrain/content/system/ui-strings/en.json b/.contentrain/content/system/ui-strings/en.json
index ea6e255..c780ca3 100644
--- a/.contentrain/content/system/ui-strings/en.json
+++ b/.contentrain/content/system/ui-strings/en.json
@@ -276,7 +276,12 @@
   "content.entry_count_filtered": "Showing {shown} of {matched} matches in {total} entries",
   "content.entry_count_partial": "Showing {shown} of {total}",
   "content.field_required": "This field is required",
+  "content.filter": "Filter",
+  "content.filter_clear": "Clear filters",
   "content.filter_keys": "Filter keys or values...",
+  "content.filter_none": "This model has no fields that can be filtered.",
+  "content.filter_remove": "Remove filter {value}",
+  "content.filter_status": "Status",
   "content.keep_editing": "Keep editing",
   "content.key_column": "Key",
   "content.keys_count": "keys",
@@ -312,6 +317,13 @@
   "content.select_entry": "Select an entry",
   "content.show_more": "Show more",
   "content.slug_hint": "Lowercase letters, numbers, and hyphens only",
+  "content.sort": "Sort",
+  "content.sort_default": "Default order",
+  "content.sort_field_asc": "{field} ascending",
+  "content.sort_field_desc": "{field} descending",
+  "content.sort_title_asc": "Title A–Z",
+  "content.sort_title_desc": "Title Z–A",
+  "content.sort_updated": "Recently updated",
   "content.stat_entries": "Entries",
   "content.stat_locales": "Locales",
   "content.stat_models": "Models",
diff --git a/app/components/molecules/ContentFilterBar.vue b/app/components/molecules/ContentFilterBar.vue
new file mode 100644
index 0000000..36a66a1
--- /dev/null
+++ b/app/components/molecules/ContentFilterBar.vue
@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import { PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from 'radix-vue'
+import type { FilterAxis, FilterSelection, SortOption } from '~/utils/content-filters'
+
+/**
+ * Filter and sort controls for a collection listing.
+ *
+ * One button opening a popover, with the active filters shown as chips —
+ * rather than a row of dropdowns. The number of axes is derived from the model
+ * and so varies from one to many, and the panel is 280–640px wide: a fixed row
+ * of controls would overflow on some models and look empty on others. A single
+ * button costs the same whatever the model, and the chips keep "what is being
+ * filtered" visible without needing the room.
+ */
+const props = defineProps<{
+  axes: readonly FilterAxis[]
+  sortOptions: readonly SortOption[]
+  activeCount: number
+}>()
+
+const { t } = useContent()
+
+const selection = defineModel<FilterSelection>('selection', { required: true })
+const sort = defineModel<string>('sort', { required: true })
+
+const open = ref(false)
+
+function isSelected(axisId: string, value: string) {
+  return selection.value[axisId]?.includes(value) ?? false
+}
+
+function toggle(axisId: string, value: string) {
+  const current = selection.value[axisId] ?? []
+  const next = current.includes(value)
+    ? current.filter(v => v !== value)
+    : [...current, value]
+
+  // Rebuilt without the key rather than emptied: "no values selected" and "axis
+  // not filtered" are the same thing, and keeping both spellings around is how
+  // an active-filter count goes wrong.
+  const updated = Object.fromEntries(
+    Object.entries(selection.value).filter(([key]) => key !== axisId),
+  )
+  if (next.length > 0) updated[axisId] = next
+  selection.value = updated
+}
+
+function clearAll() {
+  selection.value = {}
+}
+
+/** Flattened for the chip row: one chip per selected value, not per axis. */
+const activeChips = computed(() =>
+  props.axes.flatMap(axis =>
+    (selection.value[axis.id] ?? []).map(value => ({
+      axisId: axis.id,
+      value,
+      label: axis.options.find(o => o.value === value)?.label ?? value,
+    })),
+  ),
+)
+</script>
+
+<template>
+  <div class="space-y-2">
+    <div class="flex items-center gap-2">
+      <PopoverRoot v-model:open="open">
+        <PopoverTrigger as-child>
+          <button
+            type="button"
+            class="flex h-7 shrink-0 items-center gap-1.5 rounded-lg border border-secondary-200 px-2 text-xs font-medium text-body transition-colors hover:bg-secondary-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/50 dark:border-secondary-700 dark:text-secondary-300 dark:hover:bg-secondary-900"
+          >
+            <span class="icon-[annon--filter] size-3.5" aria-hidden="true" />
+            {{ t('content.filter') }}
+            <AtomsBadge v-if="activeCount > 0" variant="primary" size="sm">
+              {{ activeCount }}
+            </AtomsBadge>
+          </button>
+        </PopoverTrigger>
+        <PopoverPortal>
+          <PopoverContent
+            side="bottom"
+            align="start"
+            :side-offset="6"
+            :collision-padding="8"
+            class="z-50 max-h-[70vh] w-64 overflow-y-auto rounded-lg border border-secondary-200 bg-white p-3 shadow-lg dark:border-secondary-700 dark:bg-secondary-900"
+          >
+            <div v-for="axis in axes" :key="axis.id" class="mb-3 last:mb-0">
+              <p class="mb-1 text-[10px] font-medium uppercase tracking-wider text-muted">
+                {{ axis.label }}
+              </p>
+              <div class="space-y-0.5">
+                <button
+                  v-for="option in axis.options"
+                  :key="option.value"
+                  type="button"
+                  :aria-pressed="isSelected(axis.id, option.value)"
+                  class="flex w-full items-center gap-2 rounded-md px-2 py-1 text-left text-xs transition-colors hover:bg-secondary-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/50 dark:hover:bg-secondary-800"
+                  :class="isSelected(axis.id, option.value)
+                    ? 'text-heading dark:text-secondary-100'
+                    : 'text-body dark:text-secondary-300'"
+                  @click="toggle(axis.id, option.value)"
+                >
+                  <span
+                    class="size-3.5 shrink-0"
+                    :class="isSelected(axis.id, option.value)
+                      ? 'icon-[annon--check-circle] text-primary-500'
+                      : 'icon-[annon--radio] text-disabled'"
+                    aria-hidden="true"
+                  />
+                  <span class="min-w-0 flex-1 truncate">{{ option.label }}</span>
+                </button>
+              </div>
+            </div>
+
+            <p v-if="axes.length === 0" class="text-xs text-muted">
+              {{ t('content.filter_none') }}
+            </p>
+          </PopoverContent>
+        </PopoverPortal>
+      </PopoverRoot>
+
+      <!-- Sort. A plain select: one choice from a list, and it has to survive a
+           280px panel. -->
+      <AtomsFormSelect
+        v-model="sort"
+        size="sm"
+        class="min-w-0 flex-1"
+        :label="t('content.sort')"
+        :options="[...sortOptions]"
+      />
+    </div>
+
+    <!-- Active filters. Removable one at a time, because the alternative is
+         reopening the popover to find which value did the narrowing. -->
+    <div v-if="activeChips.length > 0" class="flex flex-wrap items-center gap-1">
+      <button
+        v-for="chip in activeChips"
+        :key="`${chip.axisId}:${chip.value}`"
+        type="button"
+        class="flex max-w-full items-center gap-1 rounded-full bg-primary-50 py-0.5 pl-2 pr-1 text-[11px] text-primary-600 transition-colors hover:bg-primary-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/50 dark:bg-primary-500/15 dark:text-primary-300"
+        :aria-label="t('content.filter_remove', { value: chip.label })"
+        @click="toggle(chip.axisId, chip.value)"
+      >
+        <span class="min-w-0 truncate">{{ chip.label }}</span>
+        <span class="icon-[annon--cross] size-3 shrink-0" aria-hidden="true" />
+      </button>
+      <button
+        type="button"
+        class="rounded px-1.5 py-0.5 text-[11px] font-medium text-muted transition-colors hover:text-body focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/50 dark:hover:text-secondary-100"
+        @click="clearAll"
+      >
+        {{ t('common.clear_all') }}
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/app/components/organisms/ContentCollectionView.vue b/app/components/organisms/ContentCollectionView.vue
index ab865ce..c1189cb 100644
--- a/app/components/organisms/ContentCollectionView.vue
+++ b/app/components/organisms/ContentCollectionView.vue
@@ -58,13 +58,81 @@ const visibleCount = ref(PAGE_SIZE)
 
 const allIds = computed(() => Object.keys(props.content))
 
+// ── Filter + sort ──────────────────────────────────────────
+// The axes come from the model, so they differ per model and cannot be
+// hardcoded. The full definition comes from the brain rather than the injected
+// meta, which carries only id/name/kind — `title_field` and `fields` are needed
+// here to title a sort and to derive the axes.
+const modelDefinition = computed(() =>
+  brain.models.value.find(m => m.id === props.modelId) ?? null,
+)
+
+const filterSelection = ref<FilterSelection>({})
+const sortBy = ref<string>(SORT_DEFAULT)
+
+/**
+ * Human labels for relation targets, so a relation axis reads as titles rather
+ * than as `f3a81c09d24e`. Loaded when the model changes, not per render.
+ */
+const relationLabels = ref<Record<string, Record<string, string>>>({})
+
+async function loadRelationLabels() {
+  const model = modelDefinition.value
+  const fields = (model?.fields ?? {}) as Record<string, { type?: string, model?: string | string[] }>
+  const next: Record<string, Record<string, string>> = {}
+
+  for (const [fieldId, def] of Object.entries(fields)) {
+    if (def?.type !== 'relation' && def?.type !== 'relations') continue
+    const targets = Array.isArray(def.model) ? def.model : def.model ? [def.model] : []
+    const labels: Record<string, string> = {}
+
+    for (const targetId of targets) {
+      const targetModel = brain.models.value.find(m => m.id === targetId) ?? null
+      const result = await brain.queryContent(targetId, props.locale ?? 'en')
+      const data = result?.data as Record<string, Record<string, unknown>> | Array<Record<string, unknown>> | null
+      if (Array.isArray(data)) {
+        for (const doc of data) {
+          const slug = doc.slug as string
+          if (slug) labels[slug] = resolveEntryTitle(doc, targetModel, slug)
+        }
+      }
+      else if (data) {
+        for (const [ref, entry] of Object.entries(data)) labels[ref] = resolveEntryTitle(entry, targetModel, ref)
+      }
+    }
+
+    if (Object.keys(labels).length > 0) next[fieldId] = labels
+  }
+
+  relationLabels.value = next
+}
+
+const filterAxes = computed(() => deriveFilterAxes({
+  model: modelDefinition.value,
+  content: props.content,
+  meta: props.meta as Record<string, { status?: string, updated_at?: string }> | null,
+  relationLabels: relationLabels.value,
+  t,
+}))
+
+const sortOptions = computed(() => deriveSortOptions({
+  model: modelDefinition.value,
+  meta: props.meta as Record<string, { status?: string, updated_at?: string }> | null,
+  hasStatusAxis: filterAxes.value.some(a => a.id === STATUS_AXIS_ID),
+  t,
+}))
+
+const activeFilterCount = computed(() =>
+  Object.values(filterSelection.value).reduce((sum, values) => sum + values.length, 0),
+)
+
 /**
  * Search runs against the brain's index, not the rendered rows — otherwise it
  * would only ever find what is already on screen, which is the opposite of what
  * it is for. The index holds every entry, so a match on page twenty is found
  * without paging there.
  */
-const matchedIds = computed(() => {
+const searchedIds = computed(() => {
   if (!searchQuery.value.trim()) return allIds.value
   if (!searchIds.value) return []
   // Intersect rather than trust the index: it is rebuilt per sync, so it can
@@ -73,6 +141,30 @@ const matchedIds = computed(() => {
   return searchIds.value.filter(id => present.has(id))
 })
 
+/**
+ * Search and filter compose as an intersection, then the result is ordered.
+ *
+ * Both work over the whole model — search through the index, filters through
+ * the in-memory payload — so neither is limited to the rows already rendered.
+ * The page limit is applied last, to whatever survived.
+ */
+const matchedIds = computed(() => {
+  const filtered = applyFilters(
+    searchedIds.value,
+    props.content,
+    props.meta as Record<string, { status?: string, updated_at?: string }> | null,
+    filterAxes.value,
+    filterSelection.value,
+  )
+  return sortIds(
+    filtered,
+    props.content,
+    props.meta as Record<string, { status?: string, updated_at?: string }> | null,
+    sortBy.value,
+    modelDefinition.value,
+  )
+})
+
 /**
  * An entry named by `?entry=` — the palette's search result — is pulled to the
  * front and opened. Otherwise "go to this entry" would drop someone at the top
@@ -139,13 +231,23 @@ onBeforeUnmount(() => {
   if (searchTimer) clearTimeout(searchTimer)
 })
 
-// A different model or locale is a different list; the old query and page
-// position mean nothing there.
+// A different model or locale is a different list; the old query, filters and
+// page position mean nothing there — one model's `category` is not another's.
 watch(() => [props.modelId, props.locale], () => {
   searchQuery.value = ''
   searchIds.value = null
   visibleCount.value = PAGE_SIZE
-})
+  filterSelection.value = {}
+  sortBy.value = SORT_DEFAULT
+  relationLabels.value = {}
+  void loadRelationLabels()
+}, { immediate: true })
+
+// Paging restarts whenever the surviving set changes, so page two of the old
+// filter is never page two of the new one.
+watch([filterSelection, sortBy], () => {
+  visibleCount.value = PAGE_SIZE
+}, { deep: true })
 
 const getFieldType = inject(getFieldTypeKey, () => 'string')
 const getEntryTitle = inject(getEntryTitleKey, (_e: Record<string, unknown>, f: string) => f)
@@ -254,7 +356,7 @@ function onFieldDragStart(e: DragEvent, entryId: string, fieldId: string, value:
   <div>
     <!-- Search. Runs against the brain's index, so it finds entries this list
          has not rendered — the whole point at 1000 articles. -->
-    <div class="sticky top-0 z-10 border-b border-secondary-100 bg-white px-5 py-2.5 dark:border-secondary-800 dark:bg-secondary-950">
+    <div class="sticky top-0 z-10 space-y-2 border-b border-secondary-100 bg-white px-5 py-2.5 dark:border-secondary-800 dark:bg-secondary-950">
       <AtomsFormInput
         v-model="searchQuery"
         type="search"
@@ -263,6 +365,16 @@ function onFieldDragStart(e: DragEvent, entryId: string, fieldId: string, value:
         :placeholder="t('content.search_entries')"
         :aria-label="t('content.search_entries')"
       />
+      <!-- Filters live behind one button. The axis count is derived from the
+           model, so a row of dropdowns would overflow some models and look
+           empty on others; a button costs the same for every model. -->
+      <MoleculesContentFilterBar
+        v-model:selection="filterSelection"
+        v-model:sort="sortBy"
+        :axes="filterAxes"
+        :sort-options="sortOptions"
+        :active-count="activeFilterCount"
+      />
     </div>
 
     <div class="divide-y divide-secondary-100 dark:divide-secondary-800">
@@ -385,17 +497,31 @@ function onFieldDragStart(e: DragEvent, entryId: string, fieldId: string, value:
         :title="t('common.loading')"
         :description="t('content.searching_description')"
       />
+      <!-- "Nothing matched" and "this model is empty" are different facts, and
+           only one of them has a way out. -->
       <AtomsEmptyState
-        v-else-if="searchQuery.trim()"
+        v-else-if="searchQuery.trim() || activeFilterCount > 0"
         icon="icon-[annon--search]"
         :title="t('content.no_matches_title')"
         :description="t('content.no_matches_description')"
+      >
+        <template #action>
+          <AtomsBaseButton v-if="activeFilterCount > 0" variant="ghost" size="sm" @click="filterSelection = {}">
+            {{ t('content.filter_clear') }}
+          </AtomsBaseButton>
+        </template>
+      </AtomsEmptyState>
+      <AtomsEmptyState
+        v-else
+        icon="icon-[annon--file-text]"
+        :title="t('content.no_entries')"
+        :description="t('content.no_content_description')"
       />
     </div>
 
     <div class="flex items-center gap-3 border-t border-secondary-200 px-5 py-3 dark:border-secondary-800">
       <span class="min-w-0 flex-1 truncate text-xs text-muted">
-        <template v-if="searchQuery.trim()">
+        <template v-if="searchQuery.trim() || activeFilterCount > 0">
           {{ t('content.entry_count_filtered', { shown: visibleEntries.length, matched: matchedIds.length, total: allIds.length }) }}
         </template>
         <template v-else-if="hasMore">
diff --git a/app/utils/content-filters.ts b/app/utils/content-filters.ts
new file mode 100644
index 0000000..e602b2a
--- /dev/null
+++ b/app/utils/content-filters.ts
@@ -0,0 +1,343 @@
+import type { FieldDef } from '@contentrain/types'
+import type { TitleFieldModel } from './entry-title'
+import { resolveEntryTitle } from './entry-title'
+
+/**
+ * Filtering and sorting a collection listing.
+ *
+ * The axes are derived from the model at runtime rather than configured: a
+ * model with two `select` fields gets two axes, a model with none gets only
+ * status. Deriving means nothing has to be kept in step by hand, and a model
+ * that gains a field gains a filter.
+ *
+ * Kept pure and framework-free so the rules are described by a table of inputs
+ * rather than by a mounted component.
+ */
+
+export type FilterAxisKind = 'status' | 'select' | 'boolean' | 'relation'
+
+export interface FilterOption {
+  value: string
+  label: string
+}
+
+export interface FilterAxis {
+  kind: FilterAxisKind
+  /** Field id, or the reserved `__status__`. */
+  id: string
+  label: string
+  options: FilterOption[]
+}
+
+/** Not a field name — status lives in entry meta, not in the schema. */
+export const STATUS_AXIS_ID = '__status__'
+
+/** Values a boolean axis offers. Absent from the map means "either". */
+export const BOOLEAN_TRUE = 'true'
+export const BOOLEAN_FALSE = 'false'
+
+/** Selected values per axis id. An axis absent from the map is unfiltered. */
+export type FilterSelection = Record<string, string[]>
+
+export interface EntryMetaLike {
+  status?: string
+  updated_at?: string
+}
+
+export interface DeriveAxesInput {
+  model: TitleFieldModel | null | undefined
+  content: Record<string, Record<string, unknown>>
+  meta?: Record<string, EntryMetaLike> | null
+  /** Human labels for relation targets, keyed by field id then by ref. */
+  relationLabels?: Record<string, Record<string, string>>
+  /** Translates a status value and the reserved axis labels. */
+  t: (key: string) => string
+}
+
+function fieldEntries(model: DeriveAxesInput['model']): [string, FieldDef][] {
+  if (!model?.fields) return []
+  return Object.entries(model.fields as Record<string, FieldDef>)
+}
+
+/** `is_category_hero` reads better as `Is category hero` than as itself. */
+export function humanizeFieldId(fieldId: string): string {
+  const spaced = fieldId.replace(/[_-]+/g, ' ').trim()
+  return spaced.charAt(0).toUpperCase() + spaced.slice(1)
+}
+
+/**
+ * Build the filter axes this model can offer.
+ *
+ * Status comes first and is always present — it needs no schema. Every other
+ * axis appears only when the model actually has a field for it, so a model
+ * without one shows a shorter list rather than an empty control.
+ *
+ * An axis with fewer than two options is dropped: filtering a column where
+ * every row has the same value is a control that can only ever do nothing.
+ */
+export function deriveFilterAxes(input: DeriveAxesInput): FilterAxis[] {
+  const { model, content, meta, relationLabels, t } = input
+  const axes: FilterAxis[] = []
+
+  // ── Status, from entry meta ───────────────────────────────
+  // Derived from what is present rather than from a fixed list, so a project
+  // that never archives anything is not offered an empty filter.
+  const statuses = new Set<string>()
+  for (const id of Object.keys(content)) {
+    statuses.add(meta?.[id]?.status ?? 'draft')
+  }
+  if (statuses.size > 1) {
+    axes.push({
+      kind: 'status',
+      id: STATUS_AXIS_ID,
+      label: t('content.filter_status'),
+      options: [...statuses].sort().map(value => ({
+        value,
+        label: t(`content.status_${value}`),
+      })),
+    })
+  }
+
+  for (const [fieldId, def] of fieldEntries(model)) {
+    const label = humanizeFieldId(fieldId)
+
+    if (def?.type === 'select' && Array.isArray(def.options) && def.options.length > 1) {
+      // Straight from the schema — the cheapest and most reliable axis there
+      // is, because nothing has to be inferred from the data.
+      axes.push({
+        kind: 'select',
+        id: fieldId,
+        label,
+        options: (def.options as string[]).map(value => ({ value, label: value })),
+      })
+      continue
+    }
+
+    if (def?.type === 'boolean') {
+      axes.push({
+        kind: 'boolean',
+        id: fieldId,
+        label,
+        options: [
+          { value: BOOLEAN_TRUE, label: t('common.yes') },
+          { value: BOOLEAN_FALSE, label: t('common.no') },
+        ],
+      })
+      continue
+    }
+
+    if (def?.type === 'relation' || def?.type === 'relations') {
+      // Labels are resolved by the caller through the target model's
+      // `title_field`; without them this axis would list `f3a81c09d24e`.
+      const labels = relationLabels?.[fieldId]
+      if (!labels) continue
+      const refs = new Set<string>()
+      for (const entry of Object.values(content)) {
+        for (const ref of relationRefs(entry?.[fieldId])) refs.add(ref)
+      }
+      if (refs.size < 2) continue
+      axes.push({
+        kind: 'relation',
+        id: fieldId,
+        label,
+        options: [...refs]
+          .map(ref => ({ value: ref, label: labels[ref] ?? ref }))
+          .sort((a, b) => a.label.localeCompare(b.label)),
+      })
+    }
+  }
+
+  return axes
+}
+
+/** Every ref a relation/relations value points at, in either storage shape. */
+export function relationRefs(value: unknown): string[] {
+  if (typeof value === 'string') return value ? [value] : []
+  if (value && typeof value === 'object' && !Array.isArray(value)) {
+    const ref = (value as { ref?: unknown }).ref
+    return typeof ref === 'string' && ref ? [ref] : []
+  }
+  if (Array.isArray(value)) return value.flatMap(relationRefs)
+  return []
+}
+
+function matchesAxis(
+  axis: FilterAxis,
+  selected: string[],
+  entry: Record<string, unknown> | undefined,
+  entryMeta: EntryMetaLike | undefined,
+): boolean {
+  if (selected.length === 0) return true
+
+  switch (axis.kind) {
+    case 'status':
+      return selected.includes(entryMeta?.status ?? 'draft')
+    case 'select': {
+      const value = entry?.[axis.id]
+      return typeof value === 'string' && selected.includes(value)
+    }
+    case 'boolean': {
+      const value = entry?.[axis.id]
+      return selected.includes(value ? BOOLEAN_TRUE : BOOLEAN_FALSE)
+    }
+    case 'relation': {
+      const refs = relationRefs(entry?.[axis.id])
+      return refs.some(ref => selected.includes(ref))
+    }
+  }
+}
+
+/**
+ * Narrow a list of ids by the current selection.
+ *
+ * Values within one axis are OR'd, axes are AND'd — the usual reading of
+ * "category is ai or cdn, and status is published".
+ */
+export function applyFilters(
+  ids: readonly string[],
+  content: Record<string, Record<string, unknown>>,
+  meta: Record<string, EntryMetaLike> | null | undefined,
+  axes: readonly FilterAxis[],
+  selection: FilterSelection,
+): string[] {
+  const active = axes.filter(axis => (selection[axis.id]?.length ?? 0) > 0)
+  if (active.length === 0) return [...ids]
+
+  return ids.filter(id =>
+    active.every(axis => matchesAxis(axis, selection[axis.id] ?? [], content[id], meta?.[id])),
+  )
+}
+
+export interface SortOption {
+  /** `<field>:<asc|desc>`, or one of the reserved keys below. */
+  value: string
+  label: string
+}
+
+export const SORT_DEFAULT = 'default'
+export const SORT_TITLE_ASC = 'title:asc'
+export const SORT_TITLE_DESC = 'title:desc'
+export const SORT_STATUS = 'status:asc'
+export const SORT_UPDATED_DESC = 'updated:desc'
+
+/** Field types worth ordering by. */
+const ORDERABLE = new Set(['number', 'integer', 'decimal', 'percent', 'rating', 'date', 'datetime'])
+
+export interface DeriveSortInput {
+  model: TitleFieldModel | null | undefined
+  meta?: Record<string, EntryMetaLike> | null
+  hasStatusAxis: boolean
+  t: (key: string, params?: Record<string, string | number>) => string
+}
+
+/**
+ * Sort criteria this model can offer.
+ *
+ * "Recently updated" appears only when the data can answer it. `updated_at`
+ * arrived with `@contentrain/types@1.0.0` and is deliberately not backfilled,
+ * so a project whose entries all predate it would get a criterion that sorts
+ * nothing — worse than not offering it.
+ */
+export function deriveSortOptions(input: DeriveSortInput): SortOption[] {
+  const { model, meta, hasStatusAxis, t } = input
+
+  const options: SortOption[] = [
+    { value: SORT_DEFAULT, label: t('content.sort_default') },
+    { value: SORT_TITLE_ASC, label: t('content.sort_title_asc') },
+    { value: SORT_TITLE_DESC, label: t('content.sort_title_desc') },
+  ]
+
+  if (hasStatusAxis) options.push({ value: SORT_STATUS, label: t('content.filter_status') })
+
+  const anyUpdatedAt = Object.values(meta ?? {}).some(m => !!m?.updated_at)
+  if (anyUpdatedAt) options.push({ value: SORT_UPDATED_DESC, label: t('content.sort_updated') })
+
+  for (const [fieldId, def] of fieldEntries(model)) {
+    if (!ORDERABLE.has(def?.type ?? '')) continue
+    const name = humanizeFieldId(fieldId)
+    options.push({ value: `${fieldId}:asc`, label: t('content.sort_field_asc', { field: name }) })
+    options.push({ value: `${fieldId}:desc`, label: t('content.sort_field_desc', { field: name }) })
+  }
+
+  return options
+}
+
+const STATUS_ORDER: Record<string, number> = { published: 0, draft: 1, archived: 2 }
+
+function compareValues(a: unknown, b: unknown): number {
+  const aMissing = a === null || a === undefined || a === ''
+  const bMissing = b === null || b === undefined || b === ''
+  // Missing sorts last in either direction: "unknown" is not a small value.
+  if (aMissing && bMissing) return 0
+  if (aMissing) return 1
+  if (bMissing) return -1
+
+  if (typeof a === 'number' && typeof b === 'number') return a - b
+  return String(a).localeCompare(String(b), undefined, { numeric: true })
+}
+
+/**
+ * Order ids by a criterion. Applied after filtering, so it only ever orders
+ * what survived.
+ *
+ * `default` keeps the order the file gives, which is the order every other part
+ * of Studio shows — an explicit choice to leave alone, not an absence of one.
+ */
+export function sortIds(
+  ids: readonly string[],
+  content: Record<string, Record<string, unknown>>,
+  meta: Record<string, EntryMetaLike> | null | undefined,
+  sort: string,
+  model: TitleFieldModel | null | undefined,
+): string[] {
+  if (!sort || sort === SORT_DEFAULT) return [...ids]
+
+  const titled = (id: string) => resolveEntryTitle(content[id], model, id)
+
+  if (sort === SORT_TITLE_ASC || sort === SORT_TITLE_DESC) {
+    const dir = sort === SORT_TITLE_ASC ? 1 : -1
+    return [...ids].sort((a, b) => dir * titled(a).localeCompare(titled(b), undefined, { numeric: true }))
+  }
+
+  if (sort === SORT_STATUS) {
+    return [...ids].sort((a, b) => {
+      const sa = STATUS_ORDER[meta?.[a]?.status ?? 'draft'] ?? 99
+      const sb = STATUS_ORDER[meta?.[b]?.status ?? 'draft'] ?? 99
+      return sa - sb || titled(a).localeCompare(titled(b))
+    })
+  }
+
+  if (sort === SORT_UPDATED_DESC) {
+    // Entries written before `updated_at` existed have no recoverable value, so
+    // they sort last rather than being given a fabricated one.
+    //
+    // Written out rather than reusing `compareValues` with its arguments
+    // swapped: swapping reverses the missing-last rule along with everything
+    // else, which put "never written" at the top of "most recently written".
+    return [...ids].sort((a, b) => {
+      const av = meta?.[a]?.updated_at
+      const bv = meta?.[b]?.updated_at
+      if (!av && !bv) return 0
+      if (!av) return 1
+      if (!bv) return -1
+      return bv.localeCompare(av)
+    })
+  }
+
+  const [fieldId, direction] = sort.split(':')
+  if (!fieldId) return [...ids]
+  const dir = direction === 'desc' ? -1 : 1
+
+  return [...ids].sort((a, b) => {
+    const av = content[a]?.[fieldId]
+    const bv = content[b]?.[fieldId]
+    const aMissing = av === null || av === undefined || av === ''
+    const bMissing = bv === null || bv === undefined || bv === ''
+    // A missing value stays last whichever way the rest is ordered — reversing
+    // the sort should not promote "unknown" to the top.
+    if (aMissing && bMissing) return 0
+    if (aMissing) return 1
+    if (bMissing) return -1
+    return dir * compareValues(av, bv)
+  })
+}
diff --git a/tests/nuxt/components/content-collection-view.nuxt.test.ts b/tests/nuxt/components/content-collection-view.nuxt.test.ts
index d5bd86a..1ef1a37 100644
--- a/tests/nuxt/components/content-collection-view.nuxt.test.ts
+++ b/tests/nuxt/components/content-collection-view.nuxt.test.ts
@@ -6,11 +6,13 @@ const searchContent = vi.hoisted(() => vi.fn())
 const routeQuery = vi.hoisted(() => ({ value: {} as Record<string, string> }))
 const searchReady = vi.hoisted(() => ({ value: true }))
 
+const brainModels = vi.hoisted(() => ({ value: [] as unknown[] }))
+
 mockNuxtImport('useContentBrain', () => () => ({
   searchContent,
   searchReady: computed(() => searchReady.value),
-  models: computed(() => []),
-  queryContent: vi.fn(),
+  models: computed(() => brainModels.value),
+  queryContent: vi.fn().mockResolvedValue({ data: null, kind: 'collection', meta: null }),
 }))
 
 mockNuxtImport('useRoute', () => () => ({ query: routeQuery.value, params: {} }))
@@ -117,6 +119,97 @@ describe('ContentCollectionView search', () => {
   })
 })
 
+describe('ContentCollectionView filtering', () => {
+  const model = {
+    id: 'articles',
+    kind: 'collection',
+    title_field: 'title',
+    fields: {
+      title: { type: 'string', required: true },
+      category: { type: 'select', options: ['news', 'guide'] },
+    },
+  }
+
+  const rows = {
+    a: { title: 'Alpha', category: 'news' },
+    b: { title: 'Beta', category: 'guide' },
+    c: { title: 'Gamma', category: 'news' },
+  }
+
+  async function mountFiltered() {
+    brainModels.value = [model]
+    return mountSuspended(ContentCollectionView, {
+      props: {
+        content: rows,
+        meta: { a: { status: 'published' }, b: { status: 'draft' }, c: { status: 'published' } },
+        modelId: 'articles',
+        locale: 'en',
+        editable: true,
+      },
+    })
+  }
+
+  it('offers an axis per filterable field, derived from the model', async () => {
+    const wrapper = await mountFiltered()
+
+    await wrapper.findAll('button').find(b => b.text().includes('Filter'))!.trigger('click')
+    await nextTick()
+
+    // Status (from meta) plus category (from the schema) — nothing configured.
+    expect(document.body.textContent).toContain('Status')
+    expect(document.body.textContent).toContain('Category')
+    document.body.innerHTML = ''
+  })
+
+  it('narrows the list, and the counter reflects it', async () => {
+    const wrapper = await mountFiltered()
+
+    await wrapper.findAll('button').find(b => b.text().includes('Filter'))!.trigger('click')
+    await nextTick()
+    const guide = [...document.body.querySelectorAll('button')].find(b => b.textContent?.trim() === 'guide')!
+    guide.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    await nextTick()
+
+    expect(wrapper.findAll('details')).toHaveLength(1)
+    expect(wrapper.text()).toContain('Showing 1 of 1 matches in 3 entries')
+    document.body.innerHTML = ''
+  })
+
+  it('intersects with the search rather than replacing it', async () => {
+    // Search says {a, b}; the `news` filter says {a, c}. Only `a` is both.
+    searchContent.mockResolvedValue([
+      { modelId: 'articles', entryId: 'a', locale: 'en', score: 1 },
+      { modelId: 'articles', entryId: 'b', locale: 'en', score: 1 },
+    ])
+    const wrapper = await mountFiltered()
+
+    await wrapper.find('input').setValue('needle')
+    await new Promise(r => setTimeout(r, 250))
+    await nextTick()
+    expect(wrapper.findAll('details')).toHaveLength(2)
+
+    await wrapper.findAll('button').find(b => b.text().includes('Filter'))!.trigger('click')
+    await nextTick()
+    const news = [...document.body.querySelectorAll('button')].find(b => b.textContent?.trim() === 'news')!
+    news.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    await nextTick()
+
+    expect(wrapper.findAll('details')).toHaveLength(1)
+    document.body.innerHTML = ''
+  })
+
+  it('offers a way out when a filter matched nothing', async () => {
+    // "Nothing matched" and "this model is empty" are different facts, and only
+    // one of them has a way out.
+    const wrapper = await mountSuspended(ContentCollectionView, {
+      props: { content: {}, meta: {}, modelId: 'articles', locale: 'en', editable: true },
+    })
+
+    expect(wrapper.text()).toContain('No entries')
+    expect(wrapper.text()).not.toContain('Clear filters')
+  })
+})
+
 describe('ContentCollectionView deep link', () => {
   it('pulls the entry named by ?entry= to the front and opens it', async () => {
     // Otherwise "go to this entry" drops you at the top of a thousand rows to
diff --git a/tests/unit/content-filters.test.ts b/tests/unit/content-filters.test.ts
new file mode 100644
index 0000000..49ea7ea
--- /dev/null
+++ b/tests/unit/content-filters.test.ts
@@ -0,0 +1,242 @@
+import { describe, expect, it } from 'vitest'
+import {
+  BOOLEAN_FALSE,
+  BOOLEAN_TRUE,
+  SORT_DEFAULT,
+  SORT_STATUS,
+  SORT_TITLE_ASC,
+  SORT_TITLE_DESC,
+  SORT_UPDATED_DESC,
+  STATUS_AXIS_ID,
+  applyFilters,
+  deriveFilterAxes,
+  deriveSortOptions,
+  humanizeFieldId,
+  relationRefs,
+  sortIds,
+} from '../../app/utils/content-filters'
+
+const t = (key: string, params?: Record<string, string | number>) =>
+  params ? `${key}:${Object.values(params).join(',')}` : key
+
+/** Studio's own model, named by the brief as the case to get right. */
+const planFeatures = {
+  kind: 'collection',
+  title_field: 'name',
+  fields: {
+    name: { type: 'string', required: true },
+    category: { type: 'select', options: ['ai', 'cdn', 'media', 'forms', 'api', 'workflow', 'roles', 'enterprise'] },
+    type: { type: 'select', options: ['limit', 'boolean'] },
+    requires_ee: { type: 'boolean' },
+    sort_order: { type: 'integer' },
+  },
+}
+
+const content = {
+  a: { name: 'CDN keys', category: 'cdn', type: 'limit', requires_ee: true, sort_order: 2 },
+  b: { name: 'AI chat', category: 'ai', type: 'boolean', requires_ee: false, sort_order: 1 },
+  c: { name: 'Media library', category: 'media', type: 'boolean', requires_ee: true, sort_order: 3 },
+}
+
+const meta = {
+  a: { status: 'published', updated_at: '2026-08-01T00:00:00.000Z' },
+  b: { status: 'draft' },
+  c: { status: 'published', updated_at: '2026-08-10T00:00:00.000Z' },
+}
+
+describe('deriveFilterAxes', () => {
+  it('produces the axes the brief names for plan-features', () => {
+    const axes = deriveFilterAxes({ model: planFeatures, content, meta, t })
+
+    expect(axes.map(a => a.id)).toEqual([STATUS_AXIS_ID, 'category', 'type', 'requires_ee'])
+    expect(axes.find(a => a.id === 'category')!.options).toHaveLength(8)
+    expect(axes.find(a => a.id === 'type')!.options).toHaveLength(2)
+  })
+
+  it('takes select options straight from the schema, not from the data', () => {
+    // Only three categories appear in the content above; the schema declares
+    // eight, and the schema is the thing that is actually complete.
+    const category = deriveFilterAxes({ model: planFeatures, content, meta, t })
+      .find(a => a.id === 'category')!
+    expect(category.options.map(o => o.value)).toContain('enterprise')
+  })
+
+  it('offers status without any schema at all', () => {
+    const axes = deriveFilterAxes({ model: { kind: 'collection', fields: {} }, content, meta, t })
+    expect(axes).toHaveLength(1)
+    expect(axes[0]!.id).toBe(STATUS_AXIS_ID)
+  })
+
+  it('drops status when every entry shares one — a control that can do nothing', () => {
+    const axes = deriveFilterAxes({
+      model: { kind: 'collection', fields: {} },
+      content,
+      meta: { a: { status: 'published' }, b: { status: 'published' }, c: { status: 'published' } },
+      t,
+    })
+    expect(axes).toHaveLength(0)
+  })
+
+  it('shows no axes rather than an empty toolbar for a model with nothing to filter', () => {
+    const axes = deriveFilterAxes({
+      model: { kind: 'collection', fields: { body: { type: 'markdown' } } },
+      content: { a: { body: 'x' } },
+      meta: { a: { status: 'draft' } },
+      t,
+    })
+    expect(axes).toEqual([])
+  })
+
+  it('labels relation options by title, and skips the axis without labels', () => {
+    const model = {
+      kind: 'collection',
+      fields: { author: { type: 'relation', model: 'authors' } },
+    }
+    const rows = { a: { author: 'u1' }, b: { author: 'u2' } }
+
+    // No labels supplied — the axis would list raw ids, so it is not offered.
+    expect(deriveFilterAxes({ model, content: rows, meta: null, t })).toEqual([])
+
+    const axes = deriveFilterAxes({
+      model,
+      content: rows,
+      meta: null,
+      relationLabels: { author: { u1: 'Ahmet', u2: 'Jane' } },
+      t,
+    })
+    expect(axes[0]!.options).toEqual([
+      { value: 'u1', label: 'Ahmet' },
+      { value: 'u2', label: 'Jane' },
+    ])
+  })
+
+  it('reads a field id as a label', () => {
+    expect(humanizeFieldId('is_category_hero')).toBe('Is category hero')
+    expect(humanizeFieldId('sort-order')).toBe('Sort order')
+  })
+})
+
+describe('relationRefs', () => {
+  it('reads both storage shapes', () => {
+    expect(relationRefs('id1')).toEqual(['id1'])
+    expect(relationRefs({ model: 'blog', ref: 'getting-started' })).toEqual(['getting-started'])
+    expect(relationRefs(['a', 'b'])).toEqual(['a', 'b'])
+    expect(relationRefs([{ model: 'm', ref: 'r' }])).toEqual(['r'])
+    expect(relationRefs(null)).toEqual([])
+    expect(relationRefs('')).toEqual([])
+  })
+})
+
+describe('applyFilters', () => {
+  const axes = deriveFilterAxes({ model: planFeatures, content, meta, t })
+  const ids = ['a', 'b', 'c']
+
+  it('returns everything when nothing is selected', () => {
+    expect(applyFilters(ids, content, meta, axes, {})).toEqual(ids)
+  })
+
+  it('ORs within an axis', () => {
+    expect(applyFilters(ids, content, meta, axes, { category: ['cdn', 'ai'] })).toEqual(['a', 'b'])
+  })
+
+  it('ANDs across axes', () => {
+    // "category is cdn or media, AND status is published" — b is draft.
+    expect(applyFilters(ids, content, meta, axes, {
+      category: ['cdn', 'media'],
+      [STATUS_AXIS_ID]: ['published'],
+    })).toEqual(['a', 'c'])
+  })
+
+  it('treats a boolean axis as three-state', () => {
+    expect(applyFilters(ids, content, meta, axes, { requires_ee: [BOOLEAN_TRUE] })).toEqual(['a', 'c'])
+    expect(applyFilters(ids, content, meta, axes, { requires_ee: [BOOLEAN_FALSE] })).toEqual(['b'])
+    // Both selected is the same as neither — everything.
+    expect(applyFilters(ids, content, meta, axes, { requires_ee: [BOOLEAN_TRUE, BOOLEAN_FALSE] })).toEqual(ids)
+  })
+
+  it('filters the ids it is given, so search and filter intersect', () => {
+    // Search narrowed to a and b; the filter must not reintroduce c.
+    expect(applyFilters(['a', 'b'], content, meta, axes, { [STATUS_AXIS_ID]: ['published'] }))
+      .toEqual(['a'])
+  })
+
+  it('treats a missing status as draft, matching what the list displays', () => {
+    expect(applyFilters(ids, content, {}, axes, { [STATUS_AXIS_ID]: ['draft'] })).toEqual(ids)
+  })
+})
+
+describe('deriveSortOptions', () => {
+  it('offers recently-updated only when the data can answer it', () => {
+    // `updated_at` is not backfilled, so a project whose entries all predate it
+    // would get a criterion that sorts nothing.
+    const withStamps = deriveSortOptions({ model: planFeatures, meta, hasStatusAxis: true, t })
+    expect(withStamps.map(o => o.value)).toContain(SORT_UPDATED_DESC)
+
+    const without = deriveSortOptions({
+      model: planFeatures,
+      meta: { a: { status: 'draft' } },
+      hasStatusAxis: true,
+      t,
+    })
+    expect(without.map(o => o.value)).not.toContain(SORT_UPDATED_DESC)
+  })
+
+  it('offers status only when status is filterable at all', () => {
+    expect(deriveSortOptions({ model: planFeatures, meta, hasStatusAxis: false, t }).map(o => o.value))
+      .not.toContain(SORT_STATUS)
+  })
+
+  it('offers both directions for each orderable field', () => {
+    const values = deriveSortOptions({ model: planFeatures, meta, hasStatusAxis: true, t }).map(o => o.value)
+    expect(values).toContain('sort_order:asc')
+    expect(values).toContain('sort_order:desc')
+    // A select is not an ordering.
+    expect(values).not.toContain('category:asc')
+  })
+
+  it('always leads with the file order', () => {
+    expect(deriveSortOptions({ model: null, meta: null, hasStatusAxis: false, t })[0]!.value)
+      .toBe(SORT_DEFAULT)
+  })
+})
+
+describe('sortIds', () => {
+  const ids = ['a', 'b', 'c']
+
+  it('leaves the file order alone by default', () => {
+    expect(sortIds(ids, content, meta, SORT_DEFAULT, planFeatures)).toEqual(ids)
+  })
+
+  it('sorts by the title the model declares, not by the first field', () => {
+    expect(sortIds(ids, content, meta, SORT_TITLE_ASC, planFeatures)).toEqual(['b', 'a', 'c'])
+    expect(sortIds(ids, content, meta, SORT_TITLE_DESC, planFeatures)).toEqual(['c', 'a', 'b'])
+  })
+
+  it('puts published before draft', () => {
+    expect(sortIds(ids, content, meta, SORT_STATUS, planFeatures)).toEqual(['a', 'c', 'b'])
+  })
+
+  it('sorts most recently updated first, unknown last', () => {
+    // `b` has no `updated_at`; absent means unknown, and unknown does not sort
+    // to the top of "most recent".
+    expect(sortIds(ids, content, meta, SORT_UPDATED_DESC, planFeatures)).toEqual(['c', 'a', 'b'])
+  })
+
+  it('sorts a numeric field both ways', () => {
+    expect(sortIds(ids, content, meta, 'sort_order:asc', planFeatures)).toEqual(['b', 'a', 'c'])
+    expect(sortIds(ids, content, meta, 'sort_order:desc', planFeatures)).toEqual(['c', 'a', 'b'])
+  })
+
+  it('keeps a missing value last in BOTH directions', () => {
+    // Reversing the sort must not promote "unknown" to the top.
+    const withGap = { ...content, b: { name: 'AI chat' } }
+    expect(sortIds(ids, withGap, meta, 'sort_order:asc', planFeatures).at(-1)).toBe('b')
+    expect(sortIds(ids, withGap, meta, 'sort_order:desc', planFeatures).at(-1)).toBe('b')
+  })
+
+  it('does not mutate the ids it was given', () => {
+    const input = ['a', 'b', 'c']
+    sortIds(input, content, meta, SORT_TITLE_ASC, planFeatures)
+    expect(input).toEqual(['a', 'b', 'c'])
+  })
+})