From f0f314b10946c32387bf238b5cc13a11ecdf1705 Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Thu, 5 Feb 2026 11:47:33 -0500
Subject: [PATCH] Prototype of an asset reference viewer

Based on https://github.com/statamic/ideas/issues/1412
---
 .../js/components/assets/AssetReferences.vue  |  99 +++++
 .../js/components/assets/Editor/Editor.vue    |   5 +
 routes/cp.php                                 |   1 +
 src/Assets/AssetReferenceFinder.php           | 346 ++++++++++++++++++
 .../CP/Assets/AssetsController.php            | 100 +++++
 src/Http/Resources/CP/Entries/Entries.php     |  18 +-
 6 files changed, 566 insertions(+), 3 deletions(-)
 create mode 100644 resources/js/components/assets/AssetReferences.vue
 create mode 100644 src/Assets/AssetReferenceFinder.php

diff --git a/resources/js/components/assets/AssetReferences.vue b/resources/js/components/assets/AssetReferences.vue
new file mode 100644
index 00000000000..827b574dde8
--- /dev/null
+++ b/resources/js/components/assets/AssetReferences.vue
@@ -0,0 +1,99 @@
+<template>
+    <div v-if="!isLoaded" class="flex items-center justify-center">
+        <ui-button @click="loadReferences" :text="__('View Usage')" variant="filled" size="sm" />
+    </div>
+    <div v-else>
+        <Listing
+            :url="url"
+            :columns="columns"
+            :per-page="5"
+            :show-pagination-totals="false"
+            :show-pagination-page-links="false"
+            :show-pagination-per-page-selector="false"
+            :allow-search="false"
+            :allow-customizing-columns="false"
+        >
+            <template #initializing>
+                <div class="flex flex-col gap-[8px] justify-between py-1 px-5">
+                    <ui-skeleton class="h-[18px] w-full" />
+                    <ui-skeleton class="h-[18px] w-full" />
+                    <ui-skeleton class="h-[18px] w-full" />
+                </div>
+            </template>
+            <template #default="{ items }">
+                <ui-description v-if="items?.length" :text="__('In Use')" class="mb-3" />
+                <table v-if="items?.length" class="w-full [&_td]:px-0.75 [&_td]:py-1 [&_td]:text-sm">
+                    <ListingTableHead sr-only />
+                    <ListingTableBody class="divide-y divide-gray-200 dark:divide-gray-700">
+                        <template #cell-title="{ row: entry }">
+                            <div class="flex items-center gap-2">
+                                <StatusIndicator :status="entry.status" />
+                                <Link :href="entry.edit_url" class="line-clamp-1 overflow-hidden text-ellipsis">{{ entry.title }}</Link>
+                            </div>
+                        </template>
+                        <template #cell-collection="{ row: entry }">
+                            <div class="text-end">
+                                <ui-badge :text="entry.collection?.title" size="sm" />
+                            </div>
+                        </template>
+                    </ListingTableBody>
+                </table>
+                <ui-subheading v-else class="text-center h-full flex items-center justify-center py-4">
+                    {{ __('This asset is not being used anywhere.') }}
+                </ui-subheading>
+            </template>
+        </Listing>
+    </div>
+</template>
+
+<script>
+import {
+    StatusIndicator,
+    Listing,
+    ListingTableHead,
+    ListingTableBody,
+} from '@/components/ui';
+import { Link } from '@inertiajs/vue3';
+
+export default {
+    components: {
+        StatusIndicator,
+        Listing,
+        ListingTableHead,
+        ListingTableBody,
+        Link,
+    },
+
+    props: {
+        assetId: {
+            type: String,
+            required: true,
+        },
+    },
+
+    data() {
+        return {
+            isLoaded: false,
+        };
+    },
+
+    computed: {
+        url() {
+            return cp_url(`assets/${utf8btoa(this.assetId)}/references`);
+        },
+
+        columns() {
+            return [
+                { label: 'Title', field: 'title', visible: true },
+                { label: 'Collection name', field: 'collection', visible: true },
+            ];
+        },
+    },
+
+    methods: {
+        loadReferences() {
+            this.isLoaded = true;
+        },
+    },
+};
+</script>
diff --git a/resources/js/components/assets/Editor/Editor.vue b/resources/js/components/assets/Editor/Editor.vue
index 12ea14c97dc..e93eb94307e 100644
--- a/resources/js/components/assets/Editor/Editor.vue
+++ b/resources/js/components/assets/Editor/Editor.vue
@@ -136,6 +136,9 @@
                             </div>
 
                             <PublishTabs />
+                            <div class="px-2">
+                                <AssetReferences v-if="asset" :asset-id="asset.id" />
+                            </div>
                         </div>
                     </PublishContainer>
                 </div>
@@ -183,6 +186,7 @@
 <script>
 import FocalPointEditor from './FocalPointEditor.vue';
 import PdfViewer from './PdfViewer.vue';
+import AssetReferences from '../AssetReferences.vue';
 import { pick, flatten } from 'lodash-es';
 import {
     Dropdown,
@@ -205,6 +209,7 @@ export default {
         ItemActions,
         FocalPointEditor,
         PdfViewer,
+        AssetReferences,
         PublishContainer,
         PublishTabs,
         Icon,
diff --git a/routes/cp.php b/routes/cp.php
index dfd6affccd5..e47c3dca8f5 100644
--- a/routes/cp.php
+++ b/routes/cp.php
@@ -263,6 +263,7 @@
     Route::post('assets-fieldtype', [FieldtypeController::class, 'index']);
     Route::resource('assets', AssetsController::class)->parameters(['assets' => 'encoded_asset'])->except('destroy');
     Route::get('assets/{encoded_asset}/download', [AssetsController::class, 'download'])->name('assets.download');
+    Route::get('assets/{encoded_asset}/references', [AssetsController::class, 'references'])->name('assets.references');
     Route::get('thumbnails/{encoded_asset}/{size?}/{orientation?}', [ThumbnailController::class, 'show'])->name('assets.thumbnails.show');
     Route::get('svgs/{encoded_asset}', [SvgController::class, 'show'])->name('assets.svgs.show');
     Route::get('pdfs/{encoded_asset}', [PdfController::class, 'show'])->name('assets.pdfs.show');
diff --git a/src/Assets/AssetReferenceFinder.php b/src/Assets/AssetReferenceFinder.php
new file mode 100644
index 00000000000..4d25d3732fc
--- /dev/null
+++ b/src/Assets/AssetReferenceFinder.php
@@ -0,0 +1,346 @@
+<?php
+
+namespace Statamic\Assets;
+
+use Statamic\Facades\AssetContainer;
+use Statamic\Fields\Fields;
+use Statamic\Support\Arr;
+
+class AssetReferenceFinder
+{
+    protected $item;
+    protected $container;
+    protected $assetPath;
+    protected $found = false;
+
+    public function __construct($item)
+    {
+        $this->item = $item;
+    }
+
+    public static function item($item)
+    {
+        return new static($item);
+    }
+
+    public function filterByContainer(string $container)
+    {
+        $this->container = $container;
+
+        return $this;
+    }
+
+    public function findReferences(string $assetPath): bool
+    {
+        $this->assetPath = $assetPath;
+
+        $this->recursivelyFindFields($this->getTopLevelFields());
+
+        return $this->found;
+    }
+
+    protected function getTopLevelFields()
+    {
+        return $this->item->blueprint()->fields()->all();
+    }
+
+    protected function recursivelyFindFields($fields, $dottedPrefix = null)
+    {
+        $this
+            ->findAssetsFieldValues($fields, $dottedPrefix)
+            ->findLinkFieldValues($fields, $dottedPrefix)
+            ->findBardFieldValues($fields, $dottedPrefix)
+            ->findMarkdownFieldValues($fields, $dottedPrefix)
+            ->findNestedFieldValues($fields, $dottedPrefix);
+    }
+
+    protected function findAssetsFieldValues($fields, $dottedPrefix)
+    {
+        $fields
+            ->filter(function ($field) {
+                return $field->type() === 'assets'
+                    && $this->getConfiguredAssetsFieldContainer($field) === $this->container;
+            })
+            ->each(function ($field) use ($dottedPrefix) {
+                $this->hasStringValue($field, $dottedPrefix)
+                    ? $this->findStringValue($field, $dottedPrefix)
+                    : $this->findArrayValue($field, $dottedPrefix);
+            });
+
+        return $this;
+    }
+
+    protected function findLinkFieldValues($fields, $dottedPrefix)
+    {
+        $fields
+            ->filter(function ($field) {
+                return $field->type() === 'link'
+                    && $field->get('container') === $this->container;
+            })
+            ->each(function ($field) use ($dottedPrefix) {
+                $this->findStatamicUrlsInLinkValue($field, $dottedPrefix);
+            });
+
+        return $this;
+    }
+
+    protected function findBardFieldValues($fields, $dottedPrefix)
+    {
+        $fields
+            ->filter(function ($field) {
+                return $field->type() === 'bard'
+                    && $field->get('container') === $this->container;
+            })
+            ->each(function ($field) use ($dottedPrefix) {
+                $this->hasStringValue($field, $dottedPrefix)
+                    ? $this->findStatamicUrlsInStringValue($field, $dottedPrefix)
+                    : $this->findStatamicUrlsInArrayValue($field, $dottedPrefix);
+            });
+
+        return $this;
+    }
+
+    protected function findMarkdownFieldValues($fields, $dottedPrefix)
+    {
+        $fields
+            ->filter(function ($field) {
+                return $field->type() === 'markdown'
+                    && $field->get('container') === $this->container;
+            })
+            ->each(function ($field) use ($dottedPrefix) {
+                $this->findStatamicUrlsInStringValue($field, $dottedPrefix);
+            });
+
+        return $this;
+    }
+
+    protected function findNestedFieldValues($fields, $dottedPrefix)
+    {
+        $fields
+            ->filter(function ($field) {
+                return in_array($field->type(), ['replicator', 'grid', 'group', 'bard']);
+            })
+            ->each(function ($field) use ($dottedPrefix) {
+                $method = 'find'.ucfirst($field->type()).'Children';
+                $dottedKey = $dottedPrefix.$field->handle();
+
+                $this->{$method}($field, $dottedKey);
+            });
+
+        return $this;
+    }
+
+    protected function findReplicatorChildren($field, $dottedKey)
+    {
+        $data = $this->item->data();
+
+        $sets = Arr::get($data, $dottedKey);
+
+        collect($sets)->each(function ($set, $setKey) use ($dottedKey, $field) {
+            $dottedPrefix = "{$dottedKey}.{$setKey}.";
+            $setHandle = Arr::get($set, 'type');
+            $fields = Arr::get($field->fieldtype()->flattenedSetsConfig(), "{$setHandle}.fields");
+
+            if ($setHandle && $fields) {
+                $this->recursivelyFindFields((new Fields($fields))->all(), $dottedPrefix);
+            }
+        });
+    }
+
+    protected function findGridChildren($field, $dottedKey)
+    {
+        $data = $this->item->data();
+
+        $sets = Arr::get($data, $dottedKey);
+
+        collect($sets)->each(function ($set, $setKey) use ($dottedKey, $field) {
+            $dottedPrefix = "{$dottedKey}.{$setKey}.";
+            $fields = Arr::get($field->config(), 'fields');
+
+            if ($fields) {
+                $this->recursivelyFindFields((new Fields($fields))->all(), $dottedPrefix);
+            }
+        });
+    }
+
+    protected function findGroupChildren($field, $dottedKey)
+    {
+        $data = $this->item->data();
+
+        $dottedPrefix = "{$dottedKey}.";
+        $fields = Arr::get($field->config(), 'fields');
+
+        if ($fields) {
+            $this->recursivelyFindFields((new Fields($fields))->all(), $dottedPrefix);
+        }
+    }
+
+    protected function findBardChildren($field, $dottedKey)
+    {
+        $data = $this->item->data();
+
+        $sets = Arr::get($data, $dottedKey);
+
+        collect($sets)->each(function ($set, $setKey) use ($dottedKey, $field) {
+            $dottedPrefix = "{$dottedKey}.{$setKey}.attrs.values.";
+            $setHandle = Arr::get($set, 'attrs.values.type');
+            $fields = Arr::get($field->fieldtype()->flattenedSetsConfig(), "{$setHandle}.fields");
+
+            if ($setHandle && $fields) {
+                $this->recursivelyFindFields((new Fields($fields))->all(), $dottedPrefix);
+            }
+        });
+    }
+
+    protected function getConfiguredAssetsFieldContainer($field)
+    {
+        if ($container = $field->get('container')) {
+            return $container;
+        }
+
+        $containers = AssetContainer::all();
+
+        return $containers->count() === 1
+            ? $containers->first()->handle()
+            : null;
+    }
+
+    protected function hasStringValue($field, $dottedPrefix)
+    {
+        $data = $this->item->data()->all();
+
+        $dottedKey = $dottedPrefix.$field->handle();
+
+        return is_string(Arr::get($data, $dottedKey));
+    }
+
+    protected function findStringValue($field, $dottedPrefix)
+    {
+        $data = $this->item->data()->all();
+
+        $dottedKey = $dottedPrefix.$field->handle();
+
+        $value = Arr::get($data, $dottedKey);
+
+        if ($value === $this->assetPath) {
+            $this->found = true;
+        }
+    }
+
+    protected function findArrayValue($field, $dottedPrefix)
+    {
+        $data = $this->item->data()->all();
+
+        $dottedKey = $dottedPrefix.$field->handle();
+
+        $fieldData = Arr::get($data, $dottedKey, []);
+
+        if (! $fieldData) {
+            return;
+        }
+
+        $fieldData = collect(Arr::dot($fieldData));
+
+        if ($fieldData->contains($this->assetPath)) {
+            $this->found = true;
+        }
+    }
+
+    protected function findStatamicUrlsInStringValue($field, $dottedPrefix)
+    {
+        $data = $this->item->data()->all();
+
+        $dottedKey = $dottedPrefix.$field->handle();
+
+        $value = Arr::get($data, $dottedKey);
+
+        if (! $value) {
+            return;
+        }
+
+        if (preg_match('/([("])(statamic:\/\/[^()"]*::)([^)"]*)([)"])/im', $value, $matches)) {
+            if ($matches[3] === $this->assetPath) {
+                $this->found = true;
+            }
+        }
+    }
+
+    protected function findStatamicUrlsInLinkValue($field, $dottedPrefix)
+    {
+        $data = $this->item->data()->all();
+
+        $dottedKey = $dottedPrefix.$field->handle();
+
+        $value = Arr::get($data, $dottedKey);
+
+        if ($value === "asset::{$this->container}::{$this->assetPath}") {
+            $this->found = true;
+        }
+    }
+
+    protected function findStatamicUrlsInArrayValue($field, $dottedPrefix)
+    {
+        $this->findStatamicUrlsInImageNodes($field, $dottedPrefix);
+        $this->findStatamicUrlsInLinkNodes($field, $dottedPrefix);
+    }
+
+    protected function findStatamicUrlsInImageNodes($field, $dottedPrefix)
+    {
+        $data = $this->item->data()->all();
+
+        $dottedKey = $dottedPrefix.$field->handle();
+
+        $bardPayload = Arr::get($data, $dottedKey, []);
+
+        if (! $bardPayload) {
+            return;
+        }
+
+        $found = collect(Arr::dot($bardPayload))
+            ->filter(function ($value, $key) {
+                return preg_match('/(.*)\.(type)/', $key) && $value === 'image';
+            })
+            ->mapWithKeys(function ($value, $key) use ($bardPayload) {
+                $key = str_replace('.type', '.attrs.src', $key);
+
+                return [$key => Arr::get($bardPayload, $key)];
+            })
+            ->contains(function ($value) {
+                return $value === "asset::{$this->container}::{$this->assetPath}";
+            });
+
+        if ($found) {
+            $this->found = true;
+        }
+    }
+
+    protected function findStatamicUrlsInLinkNodes($field, $dottedPrefix)
+    {
+        $data = $this->item->data()->all();
+
+        $dottedKey = $dottedPrefix.$field->handle();
+
+        $bardPayload = Arr::get($data, $dottedKey, []);
+
+        if (! $bardPayload) {
+            return;
+        }
+
+        $found = collect(Arr::dot($bardPayload))
+            ->filter(function ($value, $key) {
+                return preg_match('/(.*)\.(type)/', $key) && $value === 'link';
+            })
+            ->mapWithKeys(function ($value, $key) use ($bardPayload) {
+                $key = str_replace('.type', '.attrs.href', $key);
+
+                return [$key => Arr::get($bardPayload, $key)];
+            })
+            ->contains(function ($value) {
+                return $value === "statamic://asset::{$this->container}::{$this->assetPath}";
+            });
+
+        if ($found) {
+            $this->found = true;
+        }
+    }
+}
diff --git a/src/Http/Controllers/CP/Assets/AssetsController.php b/src/Http/Controllers/CP/Assets/AssetsController.php
index a4bb8b4ffa0..7cb6231fe9b 100644
--- a/src/Http/Controllers/CP/Assets/AssetsController.php
+++ b/src/Http/Controllers/CP/Assets/AssetsController.php
@@ -7,11 +7,13 @@
 use Illuminate\Support\Facades\Validator;
 use Illuminate\Validation\ValidationException;
 use Inertia\Inertia;
+use Statamic\Assets\AssetReferenceFinder;
 use Statamic\Assets\AssetUploader;
 use Statamic\Assets\UploadedReplacementFile;
 use Statamic\Contracts\Assets\Asset as AssetContract;
 use Statamic\Contracts\Assets\AssetContainer as AssetContainerContract;
 use Statamic\Contracts\Assets\AssetFolder;
+use Statamic\CP\Column;
 use Statamic\Exceptions\AuthorizationException;
 use Statamic\Exceptions\NotFoundHttpException;
 use Statamic\Facades\Asset;
@@ -19,11 +21,14 @@
 use Statamic\Facades\User;
 use Statamic\Http\Controllers\CP\CpController;
 use Statamic\Http\Resources\CP\Assets\Asset as AssetResource;
+use Statamic\Http\Resources\CP\Entries\Entries;
+use Statamic\Listeners\Concerns\GetsItemsContainingData;
 use Statamic\Rules\AllowedFile;
 use Statamic\Rules\UploadableAssetPath;
 
 class AssetsController extends CpController
 {
+    use GetsItemsContainingData;
     use RedirectsToFirstAssetContainer;
 
     public function index()
@@ -143,4 +148,99 @@ public function download($asset)
 
         return $asset->download();
     }
+
+    public function references($asset)
+    {
+        $asset = Asset::find(base64_decode($asset));
+
+        abort_if(! $asset, 404);
+
+        $this->authorize('view', $asset);
+
+        $container = $asset->container()->handle();
+        $assetPath = $asset->path();
+
+        $entries = collect();
+
+        $this
+            ->getItemsContainingData()
+            ->filter(function ($item) {
+                return $item instanceof \Statamic\Entries\Entry;
+            })
+            ->each(function ($item) use ($container, $assetPath, &$entries) {
+                $found = AssetReferenceFinder::item($item)
+                    ->filterByContainer($container)
+                    ->findReferences($assetPath);
+
+                if ($found) {
+                    $entries->push($item);
+                }
+            });
+
+        $entries = $entries->filter(function ($entry) {
+            return User::current()->can('view', $entry);
+        });
+
+        if ($entries->isEmpty()) {
+            return (new Entries(collect()))->additional(['meta' => [
+                'columns' => collect([
+                    Column::make('title')
+                        ->label(__('Title'))
+                        ->listable(true)
+                        ->visible(true)
+                        ->defaultVisibility(true)
+                        ->sortable(false),
+                    Column::make('collection')
+                        ->label(__('Collection name'))
+                        ->listable(true)
+                        ->visible(true)
+                        ->defaultVisibility(true)
+                        ->sortable(false),
+                ])->map(fn ($col) => [
+                    'label' => $col->label(),
+                    'field' => $col->field(),
+                    'visible' => $col->visible(),
+                ])->all(),
+            ]]);
+        }
+
+        $perPage = request('perPage', 15);
+        $page = request('page', 1);
+        $total = $entries->count();
+        $entries = $entries->slice(($page - 1) * $perPage, $perPage)->values();
+
+        // Use the first entry's blueprint for processing, but we'll use simple columns
+        $blueprint = $entries->first()->blueprint();
+
+        $paginated = new \Illuminate\Pagination\LengthAwarePaginator(
+            $entries,
+            $total,
+            $perPage,
+            $page,
+            ['path' => request()->url(), 'query' => request()->query()]
+        );
+
+        return (new Entries($paginated))
+            ->blueprint($blueprint)
+            ->additional(['meta' => [
+                'columns' => collect([
+                    Column::make('title')
+                        ->label(__('Title'))
+                        ->listable(true)
+                        ->visible(true)
+                        ->defaultVisibility(true)
+                        ->sortable(false),
+                    Column::make('collection')
+                        ->label(__('Collection name'))
+                        ->listable(true)
+                        ->visible(true)
+                        ->defaultVisibility(true)
+                        ->sortable(false),
+                ])->map(fn ($col) => [
+                    'label' => $col->label(),
+                    'field' => $col->field(),
+                    'visible' => $col->visible(),
+                ])->all(),
+            ]]);
+    }
 }
diff --git a/src/Http/Resources/CP/Entries/Entries.php b/src/Http/Resources/CP/Entries/Entries.php
index 3e10313e419..74265361321 100644
--- a/src/Http/Resources/CP/Entries/Entries.php
+++ b/src/Http/Resources/CP/Entries/Entries.php
@@ -15,6 +15,11 @@ class Entries extends ResourceCollection
     protected $columns;
     protected $columnPreferenceKey;
 
+    public function __construct($resource)
+    {
+        parent::__construct($resource);
+    }
+
     public function blueprint($blueprint)
     {
         $this->blueprint = $blueprint;
@@ -31,6 +36,12 @@ public function columnPreferenceKey($key)
 
     protected function setColumns()
     {
+        if (! $this->blueprint) {
+            $this->columns = collect();
+
+            return;
+        }
+
         $columns = $this->blueprint->columns();
 
         $status = Column::make('status')
@@ -54,14 +65,15 @@ public function toArray($request)
         $this->setColumns();
 
         return $this->collection->each(function ($entry) {
-            $entry
-                ->blueprint($this->blueprint)
-                ->columns($this->requestedColumns());
+            $entry->blueprint($this->blueprint);
+            $entry->columns($this->requestedColumns());
         });
     }
 
     public function with($request)
     {
+        $this->setColumns();
+
         return [
             'meta' => [
                 'columns' => $this->visibleColumns(),