diff --git a/arches_references/arches_references/media/js/viewmodels/reference-select.js b/arches_references/arches_references/media/js/viewmodels/reference-select.js
new file mode 100644
index 0000000..01a27a1
--- /dev/null
+++ b/arches_references/arches_references/media/js/viewmodels/reference-select.js
@@ -0,0 +1,167 @@
+define([
+    'jquery',
+    'knockout',
+    'knockout-mapping',
+    'arches',
+    'viewmodels/widget',
+], function($, ko, koMapping, arches, WidgetViewModel) {
+    var NAME_LOOKUP = {};
+    var ReferenceSelectViewModel = function(params) {
+        var self = this;
+
+        params.configKeys = ['placeholder'];
+        this.multiple = !!ko.unwrap(params.node.config.multiValue);
+        this.displayName = ko.observable('');
+        this.selectionValue = ko.observable([]); // formatted version of this.value that select2 can use
+        this.activeLanguage = arches.activeLanguage;
+
+        WidgetViewModel.apply(this, [params]);
+
+        this.getPrefLabel = function(labels){
+            return koMapping.toJS(labels)?.find(
+                label => label.language_id === arches.activeLanguage && label.valuetype_id === 'prefLabel'
+            )?.value || arches.translations.unlabeledItem;
+        }; 
+
+        this.isLabel = function (value) {
+            return ['prefLabel', 'altLabel'].includes(value.valuetype_id);
+        };
+
+        this.displayValue = ko.computed(function() {
+            const val = self.value();
+            let name = null;
+            if (val) {
+                name = val.map(item => self.getPrefLabel(item.labels)).join(", ");
+            }
+            return name;
+        });
+
+        this.valueAndSelectionDiffer = function(value, selection) {
+            if (!(ko.unwrap(value) instanceof Array)) {
+                return true;
+            }
+            const valueUris = ko.unwrap(value).map(val=>ko.unwrap(val.uri));
+            return JSON.stringify(selection) !== JSON.stringify(valueUris);
+        };
+
+        this.selectionValue.subscribe(selection => {
+            if (selection) {
+                if (!(selection instanceof Array)) { selection = [selection]; }
+                if (self.valueAndSelectionDiffer(self.value, selection)) {
+                    const newItem = selection.map(uri => {
+                        return {
+                            "labels": NAME_LOOKUP[uri].labels,
+                            "listid": NAME_LOOKUP[uri]["listid"],
+                            "uri": uri
+                        };
+                    });
+                    self.value(newItem);
+                }
+            } else {
+                self.value(null);
+            }
+        });
+
+        this.value.subscribe(val => {
+            if (val?.length) {
+                self.selectionValue(val.map(item=>ko.unwrap(item.uri)));
+            } else {
+                self.selectionValue(null);
+            }
+        });
+
+        this.select2Config = {
+            value: self.selectionValue,
+            clickBubble: true,
+            multiple: this.multiple,
+            closeOnSelect: true,
+            placeholder: self.placeholder,
+            allowClear: true,
+            ajax: {
+                url: arches.urls.controlled_list(ko.unwrap(params.node.config.controlledList)),
+                dataType: 'json',
+                quietMillis: 250,
+                data: function(requestParams) {
+
+                    return {
+                        flat: true
+                    };
+                },
+                processResults: function(data) {
+                    const items = data.items; 
+                    items.forEach(item => {
+                        item["listid"] = item.id;
+                        item.id = item.uri;
+                        item.disabled = item.guide;
+                        item.labels = item.values.filter(val => self.isLabel(val));
+                    });
+                    return {
+                        "results": items,
+                        "pagination": {
+                            "more": false
+                        }
+                    };
+                }
+            },
+            templateResult: function(item) {
+                let indentation = '';
+                for (let i = 0; i < item.depth; i++) {
+                    indentation += '&nbsp;&nbsp;&nbsp;&nbsp;';
+                }
+
+                if (item.uri) {
+                    const text = self.getPrefLabel(item.labels) || arches.translations.searching + '...';
+                    NAME_LOOKUP[item.uri] = {"prefLabel": text, "labels": item.labels, "listid": item.controlled_list_id};
+                    return indentation + text;
+                }
+            },
+            templateSelection: function(item) {
+                if (!item.uri) { // option has a different shape when coming from initSelection vs templateResult
+                    return item.text; 
+                } else {
+                    return NAME_LOOKUP[item.uri]["prefLabel"];
+                }
+            },
+            escapeMarkup: function(markup) { return markup; },
+            initComplete: false,
+            initSelection: function(el, callback) {
+
+                const setSelectionData = function(data) {
+                    const valueData = koMapping.toJS(self.value());
+                    valueData.forEach(function(value) {
+                        NAME_LOOKUP[value.uri] = {
+                                "prefLabel": self.getPrefLabel(value.labels),
+                                "labels": value.labels,
+                                "listid": value.listid 
+                            };
+                    });
+       
+                    if(!self.select2Config.initComplete){
+                        valueData.forEach(function(data) {
+                            const option = new Option(
+                                self.getPrefLabel(data.labels),
+                                data.uri,
+                                true, 
+                                true
+                            );
+                            $(el).append(option);
+                            self.selectionValue().push(data.uri);
+                        });
+                        self.select2Config.initComplete = true;
+                    }
+                    callback(valueData);
+                };
+
+                if (self.value()?.length) {
+                    setSelectionData();
+                } else {
+                    callback([]);
+                }
+
+            }
+        };
+
+    };
+
+    return ReferenceSelectViewModel;
+});
\ No newline at end of file
diff --git a/arches_references/arches_references/media/js/views/components/datatypes/reference.js b/arches_references/arches_references/media/js/views/components/datatypes/reference.js
new file mode 100644
index 0000000..263f1bb
--- /dev/null
+++ b/arches_references/arches_references/media/js/views/components/datatypes/reference.js
@@ -0,0 +1,54 @@
+define([
+    'knockout', 
+    'arches', 
+    'js-cookie',
+    'templates/views/components/datatypes/reference.htm',
+    'views/components/simple-switch',
+], function(ko, arches, Cookies, referenceDatatypeTemplate) {
+
+    const viewModel = function(params) {
+        const self = this;
+        this.search = params.search;
+
+        if (this.search) {
+            params.config = ko.observable({
+                controlledList:[],
+                placeholder: arches.translations.selectAnOption,
+                multiValue: true
+            });
+        }
+
+        this.controlledList = params.config.controlledList;
+        this.multiValue = params.config.multiValue;
+        this.controlledLists = ko.observable();
+        this.getControlledLists = async function() {
+            const response = await fetch(arches.urls.controlled_lists, {
+                method: 'GET',
+                credentials: 'include',
+                headers: {
+                    "X-CSRFToken": Cookies.get('csrftoken')
+                },
+            });
+            if (response.ok) {
+                return await response.json(); 
+            } else {
+                console.error('Failed to fetch controlled lists');
+            }
+        };
+        
+        this.init = async function() {
+            const lists = await this.getControlledLists();
+            this.controlledLists(lists?.controlled_lists);
+        };
+
+        this.init();
+    };
+
+
+    ko.components.register('reference-datatype-config', {
+        viewModel: viewModel,
+        template: referenceDatatypeTemplate,
+    });
+    
+    return name;
+});
\ No newline at end of file
diff --git a/arches_references/arches_references/media/js/views/components/plugins/controlled-list-manager.js b/arches_references/arches_references/media/js/views/components/plugins/controlled-list-manager.js
new file mode 100644
index 0000000..0e08a37
--- /dev/null
+++ b/arches_references/arches_references/media/js/views/components/plugins/controlled-list-manager.js
@@ -0,0 +1,14 @@
+import ko from 'knockout';
+import ControlledListManager from '@/arches/plugins/ControlledListManager.vue';
+import createVueApp from 'utils/create-vue-application';
+import ControlledListManagerTemplate from 'templates/views/components/plugins/controlled-list-manager.htm';
+
+
+ko.components.register('controlled-list-manager', {
+    viewModel: function() {
+        createVueApp(ControlledListManager).then((vueApp) => {
+            vueApp.mount('#controlled-list-manager-mounting-point');
+        });
+    },
+    template: ControlledListManagerTemplate,
+});
\ No newline at end of file
diff --git a/arches_references/arches_references/media/js/views/components/widgets/reference-select.js b/arches_references/arches_references/media/js/views/components/widgets/reference-select.js
new file mode 100644
index 0000000..1e4ec41
--- /dev/null
+++ b/arches_references/arches_references/media/js/views/components/widgets/reference-select.js
@@ -0,0 +1,15 @@
+define([
+    'knockout',
+    'viewmodels/reference-select',
+    'templates/views/components/widgets/reference-select.htm',
+    'bindings/select2-query',
+], function(ko, ReferenceSelectViewModel, referenceSelectTemplate) {
+    const viewModel = function(params) {
+        ReferenceSelectViewModel.apply(this, [params]);
+    };
+
+    return ko.components.register('reference-select-widget', {
+        viewModel: viewModel,
+        template: referenceSelectTemplate,
+    });
+});
\ No newline at end of file
diff --git a/arches_references/arches_references/src/arches-references/api.ts b/arches_references/arches_references/src/arches-references/api.ts
new file mode 100644
index 0000000..0177717
--- /dev/null
+++ b/arches_references/arches_references/src/arches-references/api.ts
@@ -0,0 +1,277 @@
+import arches from "arches";
+import Cookies from "js-cookie";
+
+import { makeParentMap, makeSortOrderMap } from "@/controlled-lists/utils.ts";
+
+import type {
+    ControlledList,
+    ControlledListItem,
+    ControlledListItemImage,
+    ControlledListItemImageMetadata,
+    Value,
+    NewControlledListItemImageMetadata,
+    NewOrExistingValue,
+} from "@/controlled-lists/types";
+
+function getToken() {
+    const token = Cookies.get("csrftoken");
+    if (!token) {
+        throw new Error("Missing csrftoken");
+    }
+    return token;
+}
+
+export const fetchLists = async () => {
+    const response = await fetch(arches.urls.controlled_lists);
+    try {
+        const parsed = await response.json();
+        if (response.ok) {
+            return parsed;
+        }
+        throw new Error(parsed.message);
+    } catch (error) {
+        throw new Error((error as Error).message || response.statusText);
+    }
+};
+
+export const createList = async (name: string) => {
+    const response = await fetch(arches.urls.controlled_list_add, {
+        method: "POST",
+        headers: { "X-CSRFToken": getToken() },
+        body: JSON.stringify({ name }),
+    });
+    try {
+        const parsed = await response.json();
+        if (response.ok) {
+            return parsed;
+        }
+        throw new Error(parsed.message);
+    } catch (error) {
+        throw new Error((error as Error).message || response.statusText);
+    }
+};
+
+export const createItem = async (item: ControlledListItem) => {
+    const response = await fetch(arches.urls.controlled_list_item_add, {
+        method: "POST",
+        headers: { "X-CSRFToken": getToken() },
+        body: JSON.stringify(item),
+    });
+    try {
+        const parsed = await response.json();
+        if (response.ok) {
+            return parsed;
+        }
+        throw new Error(parsed.message);
+    } catch (error) {
+        throw new Error((error as Error).message || response.statusText);
+    }
+};
+
+export const patchItem = async (
+    item: ControlledListItem,
+    field: "uri" | "guide",
+) => {
+    const response = await fetch(arches.urls.controlled_list_item(item.id), {
+        method: "PATCH",
+        headers: { "X-CSRFToken": getToken() },
+        body: JSON.stringify({ [field]: item[field] }),
+    });
+    if (response.ok) {
+        return true;
+    }
+    try {
+        const error = await response.json();
+        throw new Error(error.message);
+    } catch (error) {
+        throw new Error((error as Error).message || response.statusText);
+    }
+};
+
+export const patchList = async (
+    list: ControlledList,
+    field: "name" | "sortorder" | "children",
+) => {
+    let body = {};
+    switch (field) {
+        case "name":
+            body = { name: list.name };
+            break;
+        case "sortorder":
+            body = { sortorder_map: makeSortOrderMap(list) };
+            break;
+        case "children":
+            // Parentage is adjusted on the children themselves.
+            body = {
+                parent_map: makeParentMap(list),
+                sortorder_map: makeSortOrderMap(list),
+            };
+            break;
+    }
+
+    const response = await fetch(arches.urls.controlled_list(list.id), {
+        method: "PATCH",
+        headers: { "X-CSRFToken": getToken() },
+        body: JSON.stringify(body),
+    });
+    if (response.ok) {
+        return true;
+    }
+    try {
+        const error = await response.json();
+        throw new Error(error.message);
+    } catch (error) {
+        throw new Error((error as Error).message || response.statusText);
+    }
+};
+
+export const deleteLists = async (listIds: string[]) => {
+    const promises = listIds.map((id) =>
+        fetch(arches.urls.controlled_list(id), {
+            method: "DELETE",
+            headers: { "X-CSRFToken": getToken() },
+        }),
+    );
+    const settled = await Promise.allSettled(promises);
+    const errors = [];
+    for (const fulfilled of settled.filter(
+        (prom) => prom.status === "fulfilled",
+    )) {
+        const resp = fulfilled as PromiseFulfilledResult<Response>;
+        if (!resp.value.ok) {
+            const error = await resp.value.json();
+            errors.push(error.message);
+        }
+    }
+    if (errors.length) {
+        throw new Error(errors.join("|"));
+    }
+    return true;
+};
+
+export const deleteItems = async (itemIds: string[]) => {
+    const promises = itemIds.map((id) =>
+        fetch(arches.urls.controlled_list_item(id), {
+            method: "DELETE",
+            headers: { "X-CSRFToken": getToken() },
+        }),
+    );
+    const settled = await Promise.allSettled(promises);
+    const errors = [];
+    for (const fulfilled of settled.filter(
+        (prom) => prom.status === "fulfilled",
+    )) {
+        const resp = fulfilled as PromiseFulfilledResult<Response>;
+        if (!resp.value.ok) {
+            const error = await resp.value.json();
+            errors.push(error.message);
+        }
+    }
+    if (errors.length) {
+        throw new Error(errors.join("|"));
+    }
+    return true;
+};
+
+export const upsertValue = async (value: NewOrExistingValue) => {
+    const url = value.id
+        ? arches.urls.controlled_list_item_value(value.id)
+        : arches.urls.controlled_list_item_value_add;
+    const method = value.id ? "PUT" : "POST";
+    const response = await fetch(url, {
+        method,
+        headers: { "X-CSRFToken": getToken() },
+        body: JSON.stringify(value),
+    });
+    try {
+        const parsed = await response.json();
+        if (response.ok) {
+            return parsed;
+        }
+        throw new Error(parsed.message);
+    } catch (error) {
+        throw new Error((error as Error).message || response.statusText);
+    }
+};
+
+export const deleteValue = async (value: Value) => {
+    const response = await fetch(
+        arches.urls.controlled_list_item_value(value.id),
+        {
+            method: "DELETE",
+            headers: { "X-CSRFToken": getToken() },
+        },
+    );
+    if (response.ok) {
+        return true;
+    }
+    try {
+        const error = await response.json();
+        throw new Error(error.message);
+    } catch (error) {
+        throw new Error((error as Error).message || response.statusText);
+    }
+};
+
+export const upsertMetadata = async (
+    metadata: NewControlledListItemImageMetadata,
+) => {
+    const url = metadata.id
+        ? arches.urls.controlled_list_item_image_metadata(metadata.id)
+        : arches.urls.controlled_list_item_image_metadata_add;
+    const method = metadata.id ? "PUT" : "POST";
+    const response = await fetch(url, {
+        method,
+        headers: { "X-CSRFToken": getToken() },
+        body: JSON.stringify(metadata),
+    });
+    try {
+        const parsed = await response.json();
+        if (response.ok) {
+            return parsed;
+        }
+        throw new Error(parsed.message);
+    } catch (error) {
+        throw new Error((error as Error).message || response.statusText);
+    }
+};
+
+export const deleteMetadata = async (
+    metadata: ControlledListItemImageMetadata,
+) => {
+    const response = await fetch(
+        arches.urls.controlled_list_item_image_metadata(metadata.id),
+        {
+            method: "DELETE",
+            headers: { "X-CSRFToken": getToken() },
+        },
+    );
+    if (response.ok) {
+        return true;
+    }
+    try {
+        const error = await response.json();
+        throw new Error(error.message);
+    } catch (error) {
+        throw new Error((error as Error).message || response.statusText);
+    }
+};
+
+export const deleteImage = async (image: ControlledListItemImage) => {
+    const response = await fetch(
+        arches.urls.controlled_list_item_image(image.id),
+        {
+            method: "DELETE",
+            headers: { "X-CSRFToken": getToken() },
+        },
+    );
+    if (response.ok) {
+        return true;
+    }
+    try {
+        const error = await response.json();
+        throw new Error(error.message);
+    } catch (error) {
+        throw new Error((error as Error).message || response.statusText);
+    }
+};
diff --git a/arches_references/arches_references/src/arches-references/components/ControlledListMain.vue b/arches_references/arches_references/src/arches-references/components/ControlledListMain.vue
new file mode 100644
index 0000000..b5f9af9
--- /dev/null
+++ b/arches_references/arches_references/src/arches-references/components/ControlledListMain.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import arches from "arches";
+import { computed, provide, ref } from "vue";
+
+import ProgressSpinner from "primevue/progressspinner";
+import Splitter from "primevue/splitter";
+import SplitterPanel from "primevue/splitterpanel";
+
+import { LIGHT_GRAY } from "@/arches/theme.ts";
+import {
+    displayedRowKey,
+    selectedLanguageKey,
+} from "@/controlled-lists/constants.ts";
+import { dataIsList } from "@/controlled-lists/utils.ts";
+import ControlledListSplash from "@/controlled-lists/components/misc/ControlledListSplash.vue";
+import ItemEditor from "@/controlled-lists/components/editor/ItemEditor.vue";
+import ListCharacteristics from "@/controlled-lists/components/editor/ListCharacteristics.vue";
+import ListHeader from "@/controlled-lists/components/misc/ListHeader.vue";
+import ListTree from "@/controlled-lists/components/tree/ListTree.vue";
+
+import type { Ref } from "vue";
+import type { Language } from "@/arches/types";
+import type { Selectable } from "@/controlled-lists/types";
+
+const splash = "splash";
+
+const displayedRow: Ref<Selectable | null> = ref(null);
+function setDisplayedRow(val: Selectable | null) {
+    displayedRow.value = val;
+}
+provide(displayedRowKey, { displayedRow, setDisplayedRow });
+
+const selectedLanguage: Ref<Language> = ref(
+    (arches.languages as Language[]).find(
+        (lang) => lang.code === arches.activeLanguage,
+    ) as Language,
+);
+provide(selectedLanguageKey, selectedLanguage);
+
+const panel = computed(() => {
+    if (!displayedRow.value) {
+        return ControlledListSplash;
+    }
+    if (dataIsList(displayedRow.value)) {
+        return ListCharacteristics;
+    }
+    return ItemEditor;
+});
+</script>
+
+<template>
+    <div class="list-editor-container">
+        <ListHeader />
+        <Splitter
+            :pt="{
+                root: { style: { height: '100%' } },
+                gutter: { style: { background: LIGHT_GRAY } },
+                gutterHandler: { style: { background: LIGHT_GRAY } },
+            }"
+        >
+            <SplitterPanel
+                :size="34"
+                :min-size="25"
+                :pt="{
+                    root: {
+                        style: { display: 'flex', flexDirection: 'column' },
+                    },
+                }"
+            >
+                <Suspense>
+                    <ListTree />
+                    <template #fallback>
+                        <ProgressSpinner />
+                    </template>
+                </Suspense>
+            </SplitterPanel>
+            <SplitterPanel
+                :size="66"
+                :min-size="25"
+                :style="{
+                    margin: '1rem 0rem 4rem 1rem',
+                    overflowY: 'auto',
+                    paddingRight: '4rem',
+                }"
+            >
+                <component
+                    :is="panel"
+                    :key="displayedRow?.id ?? splash"
+                />
+            </SplitterPanel>
+        </Splitter>
+    </div>
+</template>
+
+<style scoped>
+.list-editor-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/arches_references/arches_references/src/arches-references/components/editor/AddMetadata.vue b/arches_references/arches_references/src/arches-references/components/editor/AddMetadata.vue
new file mode 100644
index 0000000..8c26a9e
--- /dev/null
+++ b/arches_references/arches_references/src/arches-references/components/editor/AddMetadata.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import arches from "arches";
+import { computed, inject } from "vue";
+import { useGettext } from "vue3-gettext";
+
+import Button from "primevue/button";
+
+import { ARCHES_CHROME_BLUE } from "@/arches/theme.ts";
+import { itemKey } from "@/controlled-lists/constants.ts";
+
+import type { Ref } from "vue";
+import type {
+    ControlledListItem,
+    ControlledListItemImage,
+    LabeledChoice,
+    NewControlledListItemImageMetadata,
+} from "@/controlled-lists/types";
+
+const { labeledChoices, image, makeMetadataEditable } = defineProps<{
+    labeledChoices: LabeledChoice[];
+    image: ControlledListItemImage;
+    makeMetadataEditable: (
+        clickedMetadata: NewControlledListItemImageMetadata,
+        index: number,
+    ) => void;
+}>();
+const item = inject(itemKey) as Ref<ControlledListItem>;
+
+const { $gettext } = useGettext();
+
+const newMetadata: Ref<NewControlledListItemImageMetadata> = computed(() => {
+    const otherNewMetadataIds = image.metadata
+        .filter((metadatum) => typeof metadatum.id === "number")
+        .map((metadatum) => metadatum.id as number);
+
+    const maxOtherNewMetadataId = Math.max(...otherNewMetadataIds, 0);
+
+    const nextMetadataType =
+        labeledChoices.find(
+            (choice) =>
+                !image.metadata
+                    .map((metadatum) => metadatum.metadata_type)
+                    .includes(choice.type),
+        ) ?? labeledChoices[0];
+
+    return {
+        id: maxOtherNewMetadataId + 1,
+        metadata_type: nextMetadataType.type,
+        metadata_label: nextMetadataType.label,
+        language_id: arches.activeLanguage,
+        controlled_list_item_image_id: image.id,
+        value: "",
+    };
+});
+
+const addMetadata = () => {
+    const staticNewMetadata = newMetadata.value;
+    item.value.images
+        .find((imageFromItem) => imageFromItem.id === image.id)!
+        .metadata.push(staticNewMetadata);
+    makeMetadataEditable(staticNewMetadata, -1);
+};
+</script>
+
+<template>
+    <Button
+        class="add-metadata"
+        raised
+        @click="addMetadata"
+    >
+        <i
+            class="fa fa-plus-circle"
+            aria-hidden="true"
+        />
+        <span class="add-metadata-text">
+            {{ $gettext("Add metadata") }}
+        </span>
+    </Button>
+</template>
+
+<style scoped>
+.add-metadata {
+    display: flex;
+    height: 3rem;
+    color: v-bind(ARCHES_CHROME_BLUE);
+    background-color: #f3fbfd;
+    margin-top: 1rem;
+}
+.add-metadata > i,
+.add-metadata > span {
+    align-self: center;
+    font-size: small;
+}
+.add-metadata-text {
+    margin: 1rem;
+    font-size: small;
+    font-weight: 600;
+}
+</style>
\ No newline at end of file
diff --git a/arches_references/arches_references/src/arches-references/components/editor/AddValue.vue b/arches_references/arches_references/src/arches-references/components/editor/AddValue.vue
new file mode 100644
index 0000000..5ffe94f
--- /dev/null
+++ b/arches_references/arches_references/src/arches-references/components/editor/AddValue.vue
@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import arches from "arches";
+import { computed, inject } from "vue";
+import { useGettext } from "vue3-gettext";
+
+import Button from "primevue/button";
+
+import { ARCHES_CHROME_BLUE } from "@/arches/theme.ts";
+import {
+    itemKey,
+    ALT_LABEL,
+    NOTE_CHOICES,
+    PREF_LABEL,
+} from "@/controlled-lists/constants.ts";
+
+import type { Ref } from "vue";
+import type { Language } from "@/arches/types";
+import type {
+    ControlledListItem,
+    Value,
+    NewValue,
+    ValueType,
+} from "@/controlled-lists/types";
+
+const { valueType, makeNewValueEditable } = defineProps<{
+    valueType?: ValueType;
+    makeNewValueEditable: (newValue: NewValue, index: number) => void;
+}>();
+const item = inject(itemKey) as Ref<ControlledListItem>;
+
+const { $gettext } = useGettext();
+
+const newValue: Ref<NewValue> = computed(() => {
+    const otherNewValueIds = item.value.values
+        .filter((value: NewValue | Value) => typeof value.id === "number")
+        .map((value) => value.id as number);
+
+    const maxOtherNewValueId = Math.max(...otherNewValueIds, 0);
+
+    let nextLanguageCode = arches.activeLanguage;
+    if (valueType === PREF_LABEL) {
+        const maybeNextLanguage = arches.languages.find(
+            (lang: Language) =>
+                !item.value.values
+                    .map((val) => val.language_id)
+                    .includes(lang.code),
+        );
+        if (maybeNextLanguage) {
+            nextLanguageCode = maybeNextLanguage.code;
+        }
+    }
+
+    let nextValueType = valueType;
+    if (!nextValueType) {
+        const otherUsedValueTypes = item.value.values
+            .map((value) => value.valuetype_id)
+            .filter(
+                (typeid) =>
+                    // Labels handled separately.
+                    ![PREF_LABEL, ALT_LABEL].includes(typeid),
+            );
+        for (const choice of Object.values(NOTE_CHOICES)) {
+            if (!otherUsedValueTypes.includes(choice as string)) {
+                nextValueType = choice as string;
+                break;
+            }
+        }
+    }
+
+    return {
+        id: maxOtherNewValueId + 1,
+        valuetype_id: nextValueType ?? NOTE_CHOICES.scope,
+        language_id: nextLanguageCode,
+        value: "",
+        list_item_id: item.value.id,
+    };
+});
+
+const buttonLabel = computed(() => {
+    switch (valueType) {
+        case PREF_LABEL:
+            return $gettext("Add Preferred Label");
+        case ALT_LABEL:
+            return $gettext("Add Alternate Label");
+        default:
+            return $gettext("Add Note");
+    }
+});
+
+const addValue = () => {
+    const staticNewValue = newValue.value;
+    item.value.values.push(staticNewValue);
+    makeNewValueEditable(staticNewValue, -1);
+};
+</script>
+
+<template>
+    <Button
+        class="add-value"
+        raised
+        @click="addValue"
+    >
+        <i
+            class="fa fa-plus-circle"
+            aria-hidden="true"
+        />
+        <span class="add-value-text">
+            {{ buttonLabel }}
+        </span>
+    </Button>
+</template>
+
+<style scoped>
+.add-value {
+    display: flex;
+    height: 3rem;
+    color: v-bind(ARCHES_CHROME_BLUE);
+    background-color: #f3fbfd;
+    margin-top: 1rem;
+}
+.add-value > i,
+.add-value > span {
+    align-self: center;
+}
+.add-value-text {
+    margin: 1rem;
+    font-size: small;
+    font-weight: 600;
+}
+</style>
\ No newline at end of file
diff --git a/arches_references/arches_references/src/arches-references/components/editor/ImageEditor.vue b/arches_references/arches_references/src/arches-references/components/editor/ImageEditor.vue
new file mode 100644
index 0000000..cdbd0fa
--- /dev/null
+++ b/arches_references/arches_references/src/arches-references/components/editor/ImageEditor.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import arches from "arches";
+import { computed, inject } from "vue";
+
+import { itemKey, METADATA_CHOICES } from "@/controlled-lists/constants.ts";
+import { bestLabel } from "@/controlled-lists/utils.ts";
+import ImageMetadata from "@/controlled-lists/components/editor/ImageMetadata.vue";
+
+import type { Ref } from "vue";
+import type {
+    ControlledListItem,
+    ControlledListItemImage,
+} from "@/controlled-lists/types";
+
+const item = inject(itemKey) as Ref<ControlledListItem>;
+const { image } = defineProps<{ image: ControlledListItemImage }>();
+
+const bestTitle = computed(() => {
+    const titles = image.metadata.filter(
+        (metadatum) => metadatum.metadata_type === METADATA_CHOICES.title,
+    );
+    return (
+        titles.find((title) => title.language_id === arches.activeLanguage)
+            ?.value || titles[0]?.value
+    );
+});
+
+const bestAlternativeText = computed(() => {
+    return (
+        image.metadata
+            .filter(
+                (metadatum) =>
+                    metadatum.metadata_type ===
+                    METADATA_CHOICES.alternativeText,
+            )
+            .find((altText) => altText.language_id === arches.activeLanguage)
+            ?.value || bestLabel(item.value, arches.activeLanguage).value
+    );
+});
+</script>
+
+<template>
+    <div>
+        <img
+            :src="image.url"
+            :title="bestTitle"
+            :alt="bestAlternativeText"
+            width="200"
+        />
+        <ImageMetadata :image="image" />
+    </div>
+</template>
\ No newline at end of file
diff --git a/arches_references/arches_references/src/arches-references/components/editor/ImageMetadata.vue b/arches_references/arches_references/src/arches-references/components/editor/ImageMetadata.vue
new file mode 100644
index 0000000..49c770e
--- /dev/null
+++ b/arches_references/arches_references/src/arches-references/components/editor/ImageMetadata.vue
@@ -0,0 +1,427 @@
+<script setup lang="ts">
+import arches from "arches";
+import { computed, ref, inject } from "vue";
+import { useGettext } from "vue3-gettext";
+
+import Button from "primevue/button";
+import Column from "primevue/column";
+import Dropdown from "primevue/dropdown";
+import DataTable from "primevue/datatable";
+import InputText from "primevue/inputtext";
+import { useToast } from "primevue/usetoast";
+
+import {
+    deleteImage,
+    deleteMetadata,
+    upsertMetadata,
+} from "@/controlled-lists/api.ts";
+import {
+    DANGER,
+    DEFAULT_ERROR_TOAST_LIFE,
+    ERROR,
+    METADATA_CHOICES,
+    itemKey,
+} from "@/controlled-lists/constants.ts";
+import { languageNameFromCode } from "@/controlled-lists/utils.ts";
+import AddMetadata from "@/controlled-lists/components/editor/AddMetadata.vue";
+
+import type { Ref } from "vue";
+import type { DataTableRowEditInitEvent } from "primevue/datatable";
+import type {
+    ControlledListItem,
+    ControlledListItemImage,
+    ControlledListItemImageMetadata,
+    LabeledChoice,
+    NewOrExistingControlledListItemImageMetadata,
+} from "@/controlled-lists/types";
+
+const toast = useToast();
+const { $gettext } = useGettext();
+
+const metadataTypeHeader = $gettext("Metadata type");
+const metadataValueHeader = $gettext("Value");
+const languageHeader = $gettext("Language");
+
+const item = inject(itemKey) as Ref<ControlledListItem>;
+const { image } = defineProps<{ image: ControlledListItemImage }>();
+const editingRows = ref<NewOrExistingControlledListItemImageMetadata[]>([]);
+const rowIndexToFocus = ref(-1);
+const editorRef: Ref<HTMLDivElement | null> = ref(null);
+
+const labeledChoices: LabeledChoice[] = [
+    {
+        type: METADATA_CHOICES.title,
+        label: $gettext("Title"),
+    },
+    {
+        type: METADATA_CHOICES.alternativeText,
+        label: $gettext("Alternative text"),
+    },
+    {
+        type: METADATA_CHOICES.description,
+        label: $gettext("Description"),
+    },
+    {
+        type: METADATA_CHOICES.attribution,
+        label: $gettext("Attribution"),
+    },
+];
+
+const metadataLabel = (metadataType: string) => {
+    return labeledChoices.find((choice) => choice.type === metadataType)!.label;
+};
+
+const saveMetadata = async (event: DataTableRowEditInitEvent) => {
+    // normalize new metadata numbers to null
+    const normalizedNewData: ControlledListItemImageMetadata = {
+        ...event.newData,
+        id: typeof event.newData.id === "string" ? event.newData.id : null,
+    };
+    let upsertedMetadata: ControlledListItemImageMetadata;
+    try {
+        upsertedMetadata = await upsertMetadata(normalizedNewData);
+    } catch (error) {
+        toast.add({
+            severity: ERROR,
+            life: DEFAULT_ERROR_TOAST_LIFE,
+            summary: $gettext("Metadata save failed"),
+            detail: error instanceof Error ? error.message : undefined,
+        });
+        if (normalizedNewData.id === null) {
+            removeImageMetadata(event.newData);
+        }
+        return;
+    }
+    if (normalizedNewData.id) {
+        updateImageMetadata(upsertedMetadata);
+    } else {
+        appendImageMetadata(upsertedMetadata);
+        removeImageMetadata(event.newData);
+    }
+};
+
+const issueDeleteMetadata = async (
+    metadata: NewOrExistingControlledListItemImageMetadata,
+) => {
+    if (typeof metadata.id === "number") {
+        removeImageMetadata(metadata);
+        return;
+    }
+    try {
+        await deleteMetadata(metadata);
+    } catch (error) {
+        toast.add({
+            severity: ERROR,
+            life: DEFAULT_ERROR_TOAST_LIFE,
+            summary: $gettext("Metadata deletion failed"),
+            detail: error instanceof Error ? error.message : undefined,
+        });
+        return;
+    }
+    removeImageMetadata(metadata);
+};
+
+const appendImageMetadata = (newMetadata: ControlledListItemImageMetadata) => {
+    const imageFromItem = item.value!.images.find(
+        (imageCandidateFromItem) =>
+            imageCandidateFromItem.id ===
+            newMetadata.controlled_list_item_image_id,
+    );
+    if (imageFromItem) {
+        imageFromItem.metadata.push(newMetadata);
+    }
+};
+
+const removeImageMetadata = (
+    removedMetadata: NewOrExistingControlledListItemImageMetadata,
+) => {
+    const imageFromItem = item.value!.images.find(
+        (imageCandidateFromItem) =>
+            imageCandidateFromItem.id ===
+            removedMetadata.controlled_list_item_image_id,
+    );
+    if (imageFromItem) {
+        const toDelete = imageFromItem.metadata.findIndex(
+            (metadatum) => metadatum.id === removedMetadata.id,
+        );
+        if (toDelete === -1) {
+            return;
+        }
+        imageFromItem.metadata.splice(toDelete, 1);
+    }
+};
+
+const updateImageMetadata = (
+    updatedMetadata: ControlledListItemImageMetadata,
+) => {
+    const imageFromItem = item.value!.images.find(
+        (imageCandidateFromItem) =>
+            imageCandidateFromItem.id ===
+            updatedMetadata.controlled_list_item_image_id,
+    );
+    if (imageFromItem) {
+        const toUpdate = imageFromItem.metadata.find(
+            (metadatum) => metadatum.id === updatedMetadata.id,
+        );
+        if (!toUpdate) {
+            return;
+        }
+        toUpdate.metadata_type = updatedMetadata.metadata_type;
+        toUpdate.language_id = updatedMetadata.language_id;
+        toUpdate.value = updatedMetadata.value;
+    }
+};
+
+const issueDeleteImage = async () => {
+    try {
+        await deleteImage(image);
+    } catch (error) {
+        toast.add({
+            severity: ERROR,
+            life: DEFAULT_ERROR_TOAST_LIFE,
+            summary: $gettext("Image deletion failed"),
+            detail: error instanceof Error ? error.message : undefined,
+        });
+        return;
+    }
+    removeImage(image);
+};
+
+const removeImage = (removedImage: ControlledListItemImage) => {
+    const toDelete = item.value!.images.findIndex(
+        (imageFromItem) => imageFromItem.id === removedImage.id,
+    );
+    item.value!.images.splice(toDelete, 1);
+};
+
+const makeMetadataEditable = (
+    clickedMetadata: NewOrExistingControlledListItemImageMetadata,
+    index: number,
+) => {
+    if (!editingRows.value.includes(clickedMetadata)) {
+        editingRows.value = [...editingRows.value, clickedMetadata];
+    }
+    if (index === -1) {
+        // Coming from <AddMetadata>
+        rowIndexToFocus.value = Math.max(image.metadata.length - 1, 0);
+    } else {
+        rowIndexToFocus.value = index;
+    }
+};
+
+const setRowFocus = (event: DataTableRowEditInitEvent) => {
+    rowIndexToFocus.value = event.index;
+};
+
+const inputSelector = computed(() => {
+    return `[data-p-index="${rowIndexToFocus.value}"]`;
+});
+
+const focusInput = () => {
+    // The editor (pencil) button from the DataTable (elsewhere on page)
+    // immediately hogs focus with a setTimeout of 1,
+    // so we'll get in line behind it to set focus to the input.
+    // This should be reported/clarified with PrimeVue with a MWE.
+    setTimeout(() => {
+        if (rowIndexToFocus.value !== -1) {
+            const editorDiv = editorRef.value;
+            const rowEl = editorDiv!.querySelector(inputSelector.value);
+            const inputEl = rowEl!.children[1].children[0];
+            // @ts-expect-error focusVisible not yet in typeshed
+            (inputEl as HTMLInputElement).focus({ focusVisible: true });
+        }
+        rowIndexToFocus.value = -1;
+    }, 25);
+};
+</script>
+
+<template>
+    <div ref="editorRef">
+        <DataTable
+            v-if="image.metadata.length"
+            v-model:editingRows="editingRows"
+            :value="image.metadata"
+            data-key="id"
+            edit-mode="row"
+            striped-rows
+            :style="{ fontSize: 'small' }"
+            @row-edit-init="setRowFocus"
+            @row-edit-save="saveMetadata"
+        >
+            <Column
+                field="metadata_type"
+                :header="metadataTypeHeader"
+                style="width: 20%"
+            >
+                <template #editor="{ data, field }">
+                    <Dropdown
+                        v-model="data[field]"
+                        :options="labeledChoices"
+                        option-label="label"
+                        option-value="type"
+                        :pt="{
+                            root: { style: { width: '90%' } },
+                            input: {
+                                style: {
+                                    fontFamily: 'inherit',
+                                    fontSize: 'small',
+                                },
+                            },
+                            panel: { style: { fontSize: 'small' } },
+                        }"
+                    />
+                </template>
+                <template #body="slotProps">
+                    {{ metadataLabel(slotProps.data.metadata_type) }}
+                </template>
+            </Column>
+            <Column
+                field="value"
+                :header="metadataValueHeader"
+                style="width: 60%; min-width: 8rem"
+            >
+                <template #editor="{ data, field }">
+                    <InputText
+                        v-model="data[field]"
+                        :pt="{
+                            hooks: {
+                                onMounted: focusInput,
+                                onUpdated: focusInput,
+                            },
+                        }"
+                    />
+                </template>
+                <template #body="slotProps">
+                    <span
+                        class="full-width-pointer"
+                        style="white-space: pre-wrap"
+                        @click.stop="
+                            makeMetadataEditable(
+                                slotProps.data,
+                                slotProps.index,
+                            )
+                        "
+                    >
+                        {{ slotProps.data.value }}
+                    </span>
+                </template>
+            </Column>
+            <Column
+                field="language_id"
+                :header="languageHeader"
+                style="
+                    width: 10%;
+                    min-width: 8rem;
+                    height: 5rem;
+                    padding-left: 1rem;
+                "
+            >
+                <template #editor="{ data, field }">
+                    <Dropdown
+                        v-model="data[field]"
+                        :options="arches.languages"
+                        :option-label="(lang) => `${lang.name} (${lang.code})`"
+                        option-value="code"
+                        :pt="{
+                            input: {
+                                style: {
+                                    fontFamily: 'inherit',
+                                    fontSize: 'small',
+                                },
+                            },
+                            panel: { style: { fontSize: 'small' } },
+                        }"
+                    />
+                </template>
+                <template #body="slotProps">
+                    {{
+                        `${languageNameFromCode(slotProps.data.language_id)} (${slotProps.data.language_id})`
+                    }}
+                </template>
+            </Column>
+            <Column
+                :row-editor="true"
+                style="width: 5%; min-width: 6rem; text-align: center"
+                :pt="{
+                    headerCell: { ariaLabel: $gettext('Row edit controls') },
+                    rowEditorInitButton: {
+                        class: 'fa fa-pencil',
+                        style: { display: 'inline-flex' },
+                    },
+                    rowEditorInitIcon: { style: { display: 'none' } },
+                    rowEditorSaveButton: {
+                        class: 'fa fa-check',
+                        style: { display: 'inline-flex' },
+                    },
+                    rowEditorSaveIcon: { style: { display: 'none' } },
+                    rowEditorCancelButton: {
+                        class: 'fa fa-undo',
+                        style: { display: 'inline-flex' },
+                    },
+                    rowEditorCancelIcon: { style: { display: 'none' } },
+                }"
+            />
+            <Column
+                style="width: 5%; text-align: center"
+                :pt="{ headerCell: { ariaLabel: $gettext('Delete controls') } }"
+            >
+                <template #body="slotProps">
+                    <i
+                        class="fa fa-trash"
+                        role="button"
+                        tabindex="0"
+                        :aria-label="$gettext('Delete')"
+                        @click="issueDeleteMetadata(slotProps.data)"
+                        @keyup.enter="issueDeleteMetadata(slotProps.data)"
+                    />
+                </template>
+            </Column>
+        </DataTable>
+    </div>
+    <div style="display: flex; gap: 1rem">
+        <AddMetadata
+            :image
+            :labeled-choices
+            :make-metadata-editable
+        />
+        <Button
+            raised
+            :severity="DANGER"
+            icon="fa fa-trash"
+            :label="$gettext('Delete image')"
+            @click="issueDeleteImage"
+        />
+    </div>
+</template>
+
+<style scoped>
+.full-width-pointer {
+    cursor: pointer;
+    display: flex;
+    width: 100%;
+}
+
+:deep(th) {
+    font-weight: 600;
+}
+
+:deep(td:first-child) {
+    padding-left: 0.75rem;
+}
+
+:deep(td > input) {
+    width: 95%;
+}
+
+.p-button {
+    height: 3rem;
+    margin-top: 1rem;
+}
+
+:deep(.p-button-icon),
+:deep(.p-button-label) {
+    color: white;
+    font-size: small;
+    font-weight: 600;
+}
+</style>
diff --git a/arches_references/arches_references/src/arches-references/components/editor/ItemEditor.vue b/arches_references/arches_references/src/arches-references/components/editor/ItemEditor.vue
new file mode 100644
index 0000000..4c4cca4
--- /dev/null
+++ b/arches_references/arches_references/src/arches-references/components/editor/ItemEditor.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { inject, provide } from "vue";
+
+import ItemHeader from "@/controlled-lists/components/editor/ItemHeader.vue";
+import ItemImages from "@/controlled-lists/components/editor/ItemImages.vue";
+import ItemType from "@/controlled-lists/components/editor/ItemType.vue";
+import ItemURI from "@/controlled-lists/components/editor/ItemURI.vue";
+import ValueEditor from "@/controlled-lists/components/editor/ValueEditor.vue";
+
+import {
+    displayedRowKey,
+    itemKey,
+    ALT_LABEL,
+    NOTE,
+    PREF_LABEL,
+} from "@/controlled-lists/constants.ts";
+
+import type { DisplayedListItemRefAndSetter } from "@/controlled-lists/types";
+
+const { displayedRow: item } = inject(
+    displayedRowKey,
+) as DisplayedListItemRefAndSetter;
+provide(itemKey, item);
+</script>
+
+<template>
+    <template v-if="item">
+        <ItemHeader />
+        <ValueEditor :value-type="PREF_LABEL" />
+        <ValueEditor :value-type="ALT_LABEL" />
+        <ItemType />
+        <ValueEditor :value-category="NOTE" />
+        <ItemURI />
+        <ItemImages />
+    </template>
+</template>
diff --git a/arches_references/arches_references/src/arches-references/components/editor/ItemHeader.vue b/arches_references/arches_references/src/arches-references/components/editor/ItemHeader.vue
new file mode 100644
index 0000000..3042e0b
--- /dev/null
+++ b/arches_references/arches_references/src/arches-references/components/editor/ItemHeader.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { inject } from "vue";
+import { useGettext } from "vue3-gettext";
+
+import { itemKey, selectedLanguageKey } from "@/controlled-lists/constants.ts";
+import { bestLabel } from "@/controlled-lists/utils.ts";
+import LetterCircle from "@/controlled-lists/components/misc/LetterCircle.vue";
+
+import type { Ref } from "vue";
+import type { Language } from "@/arches/types";
+import type { ControlledListItem } from "@/controlled-lists/types";
+
+const selectedLanguage = inject(selectedLanguageKey) as Ref<Language>;
+const item = inject(itemKey) as Ref<ControlledListItem>;
+
+const { $gettext } = useGettext();
+
+const iconLabel = (item: ControlledListItem) => {
+    return item.guide ? $gettext("Guide Item") : $gettext("Indexable Item");
+};
+</script>
+
+<template>
+    <span class="item-header">
+        <LetterCircle :labelled="item" />
+        <h3>{{ bestLabel(item, selectedLanguage.code).value }}</h3>
+        <span class="item-type">{{ iconLabel(item) }}</span>
+        <a
+            v-if="item.uri"
+            :href="item.uri"
+            rel="noreferrer"
+            target="_blank"
+            style="font-size: small; color: blue"
+        >
+            {{ item.uri }}
+        </a>
+    </span>
+</template>
+
+<style scoped>
+.item-header {
+    display: inline-flex;
+    align-items: center;
+    gap: 1rem;
+    margin: 1rem 1rem 0rem 1rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid;
+    width: 100%;
+}
+
+h3 {
+    font-size: 1.6rem;
+    margin: 0;
+}
+
+.item-type {
+    font-size: small;
+    font-weight: 200;
+}
+</style>
diff --git a/arches_references/arches_references/src/arches-references/components/editor/ItemImages.vue b/arches_references/arches_references/src/arches-references/components/editor/ItemImages.vue
new file mode 100644
index 0000000..90da655
--- /dev/null
+++ b/arches_references/arches_references/src/arches-references/components/editor/ItemImages.vue
@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import arches from "arches";
+import Cookies from "js-cookie";
+import { inject } from "vue";
+import { useGettext } from "vue3-gettext";
+
+import FileUpload from "primevue/fileupload";
+import { useToast } from "primevue/usetoast";
+
+import { ARCHES_CHROME_BLUE } from "@/arches/theme.ts";
+import {
+    itemKey,
+    DEFAULT_ERROR_TOAST_LIFE,
+    ERROR,
+} from "@/controlled-lists/constants.ts";
+import ImageEditor from "@/controlled-lists/components/editor/ImageEditor.vue";
+
+import type { Ref } from "vue";
+import type { ControlledListItem } from "@/controlled-lists/types";
+import type {
+    FileUploadBeforeSendEvent,
+    FileUploadErrorEvent,
+    FileUploadUploadEvent,
+} from "primevue/fileupload";
+
+const item = inject(itemKey) as Ref<ControlledListItem>;
+
+const { $gettext } = useGettext();
+const toast = useToast();
+
+const addHeader = (event: FileUploadBeforeSendEvent) => {
+    const token = Cookies.get("csrftoken");
+    if (token) {
+        event.xhr.setRequestHeader("X-CSRFToken", token);
+        event.formData.set("list_item_id", item.value!.id);
+    }
+};
+
+const upload = (event: FileUploadUploadEvent) => {
+    if (event.xhr.status !== 201) {
+        showError(event);
+        return;
+    }
+    const newImage = JSON.parse(event.xhr.responseText);
+    item.value!.images.push(newImage);
+};
+
+const showError = (event?: FileUploadErrorEvent | FileUploadUploadEvent) => {
+    toast.add({
+        severity: ERROR,
+        life: DEFAULT_ERROR_TOAST_LIFE,
+        summary: event?.xhr?.statusText || $gettext("Image upload failed"),
+    });
+};
+</script>
+
+<template>
+    <div class="images-container">
+        <h4>{{ $gettext("Images") }}</h4>
+        <FileUpload
+            accept="image/*"
+            :url="arches.urls.controlled_list_item_image_add"
+            :auto="true"
+            :max-file-size="5e6"
+            :file-limit="10"
+            :preview-width="250"
+            :with-credentials="true"
+            :show-cancel-button="false"
+            :show-upload-button="false"
+            name="item_image"
+            :pt="{
+                buttonbar: {
+                    style: {
+                        border: '1px solid lightgray',
+                        borderRadius: '4px',
+                    },
+                },
+                chooseButton: {
+                    style: { backgroundColor: 'aliceblue', color: 'black' },
+                },
+                content: ({ props, state }) => {
+                    const done = [0, 100].includes(state.progress);
+                    return {
+                        style: { display: done ? 'none' : '' },
+                    };
+                },
+                input: { ariaLabel: $gettext('Upload an image') },
+            }"
+            @before-send="addHeader($event)"
+            @upload="upload($event)"
+            @error="showError($event)"
+        />
+        <div class="images">
+            <ImageEditor
+                v-for="image in item.images"
+                :key="image.id"
+                :image="image"
+            />
+            <p v-if="!item.images.length">
+                {{ $gettext("No images.") }}
+            </p>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.images-container {
+    margin: 1rem 1rem 3rem 1rem;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+.images {
+    margin-top: 1.5rem;
+    gap: 1.5rem;
+}
+
+h4 {
+    color: v-bind(ARCHES_CHROME_BLUE);
+    margin-top: 0;
+    font-size: 1.33rem;
+}
+
+p {
+    font-size: 1.2rem;
+}
+
+.images {
+    display: flex;
+    flex-direction: column;
+    gap: 3rem;
+}
+
+:deep(input[type="file"]) {
+    /* override arches.css */
+    /* PrimeVue uses a hidden input for screen readers */
+    display: none;
+}
+
+:deep(.p-fileupload-content:empty) {
+    display: none;
+}
+</style>
diff --git a/arches_references/arches_references/src/arches-references/components/editor/ItemType.vue b/arches_references/arches_references/src/arches-references/components/editor/ItemType.vue
new file mode 100644
index 0000000..3ec70ce
--- /dev/null
+++ b/arches_references/arches_references/src/arches-references/components/editor/ItemType.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { inject } from "vue";
+import { useGettext } from "vue3-gettext";
+
+import InputSwitch from "primevue/inputswitch";
+import { useToast } from "primevue/usetoast";
+
+import { ARCHES_CHROME_BLUE } from "@/arches/theme.ts";
+import { patchItem } from "@/controlled-lists/api.ts";
+import {
+    DEFAULT_ERROR_TOAST_LIFE,
+    ERROR,
+    itemKey,
+} from "@/controlled-lists/constants.ts";
+
+import type { Ref } from "vue";
+import type { ControlledListItem } from "@/controlled-lists/types";
+
+const item = inject(itemKey) as Ref<ControlledListItem>;
+const toast = useToast();
+const { $gettext } = useGettext();
+
+const guide = "guide";
+const guideItemSubheading = $gettext(
+    "If this item should only display as an intermediate grouping in the list hierarchy, mark it as a guide item to prevent it from being chosen by a user.",
+);
+
+const issuePatchItem = async () => {
+    try {
+        await patchItem(item.value, guide);
+    } catch (error) {
+        toast.add({
+            severity: ERROR,
+            life: DEFAULT_ERROR_TOAST_LIFE,
+            summary: $gettext("Save failed"),
+            detail: error instanceof Error ? error.message : undefined,
+        });
+    }
+};
+</script>
+
+<template>
+    <div class="guide-container">
+        <h4>{{ $gettext("Item Type") }}</h4>
+        <p>{{ guideItemSubheading }}</p>
+        <div class="guide-switch">
+            <label for="guideSwitch">{{ $gettext("Guide item?") }}</label>
+            <InputSwitch
+                v-model="item.guide"
+                input-id="guideSwitch"
+                @change="issuePatchItem"
+            />
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.guide-container {
+    margin: 1rem 1rem 3rem 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    width: 100%;
+    font-size: small;
+}
+
+.guide-switch {
+    display: inline-flex;
+    gap: 1rem;
+    align-items: center;
+}
+
+label {
+    /* Override arches.css */
+    margin-bottom: 0;
+}
+
+h4 {
+    color: v-bind(ARCHES_CHROME_BLUE);
+    margin-top: 0;
+    font-size: 1.33rem;
+}
+
+p {
+    font-weight: normal;
+    margin-top: 0;
+    font-size: 1.2rem;
+}
+</style>
diff --git a/arches_references/arches_references/src/arches-references/components/editor/ItemURI.vue b/arches_references/arches_references/src/arches-references/components/editor/ItemURI.vue
new file mode 100644
index 0000000..b537f73
--- /dev/null
+++ b/arches_references/arches_references/src/arches-references/components/editor/ItemURI.vue
@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import { computed, inject, ref } from "vue";
+import { useGettext } from "vue3-gettext";
+
+import InputText from "primevue/inputtext";
+import { useToast } from "primevue/usetoast";
+
+import { ARCHES_CHROME_BLUE } from "@/arches/theme.ts";
+import { patchItem } from "@/controlled-lists/api.ts";
+import {
+    DEFAULT_ERROR_TOAST_LIFE,
+    ERROR,
+    itemKey,
+} from "@/controlled-lists/constants.ts";
+import { vFocus } from "@/controlled-lists/utils.ts";
+
+import type { Ref } from "vue";
+import type { ControlledListItem } from "@/controlled-lists/types";
+
+const item = inject(itemKey) as Ref<ControlledListItem>;
+
+const editing = ref(false);
+
+const formValue = ref("");
+
+const inputValue = computed({
+    get() {
+        return item.value.uri;
+    },
+    set(newVal: string) {
+        formValue.value = newVal;
+    },
+});
+
+const toast = useToast();
+const { $gettext } = useGettext();
+const uri = "uri";
+
+const save = async () => {
+    editing.value = false;
+    const originalValue = item.value.uri;
+    item.value.uri = formValue.value;
+
+    try {
+        await patchItem(item.value, uri);
+    } catch (error) {
+        toast.add({
+            severity: ERROR,
+            life: DEFAULT_ERROR_TOAST_LIFE,
+            summary: $gettext("Save failed"),
+            detail: error instanceof Error ? error.message : undefined,
+        });
+        item.value.uri = originalValue;
+    }
+};
+
+const cancel = () => {
+    editing.value = false;
+    formValue.value = item.value.uri;
+};
+</script>
+
+<template>
+    <div class="uri-container">
+        <h4>{{ $gettext("List Item URI") }}</h4>
+        <p>
+            {{
+                $gettext(
+                    "Optionally, provide a URI for your list item. Useful if your list item is formally defined in a thesaurus or authority document.",
+                )
+            }}
+        </p>
+        <div class="characteristic">
+            <InputText
+                v-model="inputValue"
+                v-focus
+                type="text"
+                :disabled="!editing"
+                :aria-label="$gettext('Enter a URI')"
+                :placeholder="$gettext('Enter a URI')"
+                @keyup.enter="save"
+            />
+            <span
+                v-if="!editing"
+                class="edit-controls"
+            >
+                <i
+                    role="button"
+                    tabindex="0"
+                    class="fa fa-pencil"
+                    :aria-label="$gettext('Edit')"
+                    @click="editing = true"
+                    @keyup.enter="editing = true"
+                />
+            </span>
+            <span
+                v-if="editing"
+                class="edit-controls"
+            >
+                <i
+                    role="button"
+                    tabindex="0"
+                    class="fa fa-check"
+                    :aria-label="$gettext('Save edit')"
+                    @click="save"
+                    @keyup.enter="save"
+                />
+                <i
+                    role="button"
+                    tabindex="0"
+                    class="fa fa-undo"
+                    :aria-label="$gettext('Cancel edit')"
+                    @click="cancel"
+                    @keyup.enter="cancel"
+                />
+            </span>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.uri-container {
+    margin: 1rem 1rem 3rem 1rem;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+h4 {
+    color: v-bind(ARCHES_CHROME_BLUE);
+    margin-top: 0;
+    font-size: 1.33rem;
+}
+
+p {
+    font-weight: normal;
+    margin-top: 0;
+    font-size: 1.2rem;
+}
+
+input {
+    font-size: 1.2rem;
+}
+
+.characteristic {
+    margin: 1rem;
+    display: flex;
+    align-items: center;
+}
+
+.characteristic input {
+    text-align: center;
+    height: 3rem;
+    width: 100%;
+}
+
+.characteristic input[disabled] {
+    text-align: left;
+}
+
+.edit-controls {
+    margin-left: 1rem;
+    display: inline-flex;
+    justify-content: space-between;
+    width: 4rem;
+}
+
+.edit-controls i {
+    font-size: small;
+    padding: 0.5rem;
+}
+</style>
diff --git a/arches_references/arches_references/src/arches-references/components/editor/ListCharacteristic.vue b/arches_references/arches_references/src/arches-references/components/editor/ListCharacteristic.vue
new file mode 100644
index 0000000..eabc839
--- /dev/null
+++ b/arches_references/arches_references/src/arches-references/components/editor/ListCharacteristic.vue
@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import { computed, inject, ref } from "vue";
+import { useGettext } from "vue3-gettext";
+
+import InputText from "primevue/inputtext";
+import { useToast } from "primevue/usetoast";
+
+import { patchList } from "@/controlled-lists/api.ts";
+import {
+    DEFAULT_ERROR_TOAST_LIFE,
+    ERROR,
+    displayedRowKey,
+} from "@/controlled-lists/constants.ts";
+import { vFocus } from "@/controlled-lists/utils.ts";
+
+import type { DisplayedListRefAndSetter } from "@/controlled-lists/types";
+
+const props = defineProps<{
+    editable: boolean;
+    label: string;
+}>();
+const { displayedRow: list } = inject(
+    displayedRowKey,
+) as DisplayedListRefAndSetter;
+
+const editing = ref(false);
+const disabled = computed(() => {
+    return !props.editable || !editing.value;
+});
+
+const formValue = ref("");
+// Update fields
+const field = "name";
+
+const inputValue = computed({
+    get() {
+        return list.value!.name;
+    },
+    set(newVal: string) {
+        formValue.value = newVal;
+    },
+});
+
+const toast = useToast();
+const { $gettext } = useGettext();
+
+const save = async () => {
+    editing.value = false;
+    const originalValue = list.value!.name;
+    list.value!.name = formValue.value.trim();
+    try {
+        await patchList(list.value, field);
+    } catch (error) {
+        toast.add({
+            severity: ERROR,
+            life: DEFAULT_ERROR_TOAST_LIFE,
+            summary: $gettext("Save failed"),
+            detail: error instanceof Error ? error.message : undefined,
+        });
+        list.value!.name = originalValue;
+    }
+};
+
+const cancel = () => {
+    editing.value = false;
+    formValue.value = list.value!.name;
+};
+</script>
+
+<template>
+    <div class="characteristic">
+        <h4>{{ props.label }}</h4>
+        <!-- TODO https://github.com/archesproject/arches/issues/10847 -->
+        <span
+            v-if="!props.editable"
+            style="font-size: small"
+        >
+            False
+        </span>
+        <InputText
+            v-else
+            v-model="inputValue"
+            v-focus
+            type="text"
+            :disabled="disabled"
+            @keyup.enter="save"
+        />
+        <span
+            v-if="props.editable && !editing"
+            class="edit-controls"
+        >
+            <i
+                role="button"
+                tabindex="0"
+                class="fa fa-pencil"
+                :aria-label="$gettext('Edit')"
+                @click="editing = true"
+                @keyup.enter="editing = true"
+            />
+        </span>
+        <span
+            v-if="props.editable && editing"
+            class="edit-controls"
+        >
+            <i
+                role="button"
+                tabindex="0"
+                class="fa fa-check"
+                :aria-label="$gettext('Save edit')"
+                @click="save"
+                @keyup.enter="save"
+            />
+            <i
+                role="button"
+                tabindex="0"
+                class="fa fa-undo"
+                :aria-label="$gettext('Cancel edit')"
+                @click="cancel"
+                @keyup.enter="cancel"
+            />
+        </span>
+    </div>
+</template>
+
+<style scoped>
+h4 {
+    font-size: 1.33rem;
+}
+
+input {
+    font-size: 1.2rem;
+}
+
+.characteristic {
+    margin: 1rem 1rem 2rem 1rem;
+}
+
+.characteristic input {
+    text-align: center;
+    border-width: 2px;
+    height: 3rem;
+    width: 30rem;
+}
+
+.characteristic input[disabled] {
+    text-align: left;
+}
+
+.edit-controls {
+    margin-left: 1rem;
+    display: inline-flex;
+    justify-content: space-between;
+    width: 4rem;
+}
+
+.edit-controls i {
+    font-size: medium;
+    padding: 0.5rem;
+}
+</style>
diff --git a/arches_references/arches_references/src/arches-references/components/editor/ListCharacteristics.vue b/arches_references/arches_references/src/arches-references/components/editor/ListCharacteristics.vue
new file mode 100644
index 0000000..da824f2
--- /dev/null
+++ b/arches_references/arches_references/src/arches-references/components/editor/ListCharacteristics.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { inject } from "vue";
+import { useGettext } from "vue3-gettext";
+
+import { displayedRowKey } from "@/controlled-lists/constants.ts";
+import LetterCircle from "@/controlled-lists/components/misc/LetterCircle.vue";
+import ListCharacteristic from "@/controlled-lists/components/editor/ListCharacteristic.vue";
+import ReferenceNodeLink from "@/controlled-lists/components/editor/ReferenceNodeLink.vue";
+
+import type { DisplayedListRefAndSetter } from "@/controlled-lists/types";
+
+const { displayedRow: list } = inject(
+    displayedRowKey,
+) as DisplayedListRefAndSetter;
+
+const { $gettext } = useGettext();
+</script>
+
+<template>
+    <template v-if="list">
+        <span class="controlled-list-header">
+            <LetterCircle
+                v-if="list"
+                :labelled="list"
+            />
+            <h3>{{ list.name }}</h3>
+        </span>
+        <div>
+            <ListCharacteristic
+                :editable="true"
+                :label="$gettext('Name')"
+            />
+            <ListCharacteristic
+                :editable="false"
+                :label="$gettext('Dynamic')"
+                :style="{ width: '4rem' }"
+            />
+            <h4 class="nodes-heading">
+                {{ $gettext("List used by these nodes") }}
+            </h4>
+            <div class="nodes">
+                <div
+                    v-for="node in list.nodes"
+                    :key="node.id"
+                >
+                    <ReferenceNodeLink :node />
+                </div>
+                <div
+                    v-if="list.nodes.length === 0"
+                    :style="{ fontSize: 'small' }"
+                >
+                    {{ $gettext("None") }}
+                </div>
+            </div>
+        </div>
+    </template>
+</template>
+
+<style scoped>
+.controlled-list-header {
+    display: inline-flex;
+    align-items: center;
+    gap: 1rem;
+    margin: 1rem 1rem 0rem 1rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid;
+    width: 100%;
+}
+
+h3 {
+    margin: 0;
+    font-size: 1.6rem;
+}
+
+h4 {
+    font-size: 1.33rem;
+}
+
+.nodes-heading {
+    margin: 1rem 1rem 2rem 1rem;
+}
+
+.nodes {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    margin: 1rem;
+}
+</style>
diff --git a/arches_references/arches_references/src/arches-references/components/editor/ReferenceNodeLink.vue b/arches_references/arches_references/src/arches-references/components/editor/ReferenceNodeLink.vue
new file mode 100644
index 0000000..25a4666
--- /dev/null
+++ b/arches_references/arches_references/src/arches-references/components/editor/ReferenceNodeLink.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import arches from "arches";
+import { useGettext } from "vue3-gettext";
+
+import type { ReferencingNode } from "@/controlled-lists/types";
+
+const props = defineProps<{ node: ReferencingNode }>();
+
+const { $gettext } = useGettext();
+</script>
+
+<template>
+    <span class="referencing-node">
+        {{
+            $gettext("%{graphName}: %{nodeName}", {
+                graphName: props.node.graph_name,
+                nodeName: props.node.name,
+            })
+        }}
+        <a
+            :href="arches.urls.graph_designer(node.graph_id)"
+            target="_blank"
+        >
+            <i
+                class="fa fa-reply"
+                aria-hidden="true"
+            />
+            {{ $gettext("Edit graph") }}
+        </a>
+    </span>
+</template>
+
+<style scoped>
+.referencing-node {
+    display: inline-flex;
+    padding: 1rem;
+    gap: 2rem;
+    align-items: center;
+    font-size: small;
+    text-align: center;
+    border-radius: 2px;
+    height: 3rem;
+    background: var(--gray-200);
+    text-wrap: nowrap;
+}
+</style>
diff --git a/arches_references/arches_references/src/arches-references/components/editor/ValueEditor.vue b/arches_references/arches_references/src/arches-references/components/editor/ValueEditor.vue
new file mode 100644
index 0000000..18c544a
--- /dev/null
+++ b/arches_references/arches_references/src/arches-references/components/editor/ValueEditor.vue
@@ -0,0 +1,450 @@
+<script setup lang="ts">
+import arches from "arches";
+import { computed, inject, ref } from "vue";
+import { useGettext } from "vue3-gettext";
+
+import Column from "primevue/column";
+import DataTable from "primevue/datatable";
+import Dropdown from "primevue/dropdown";
+import InputText from "primevue/inputtext";
+import Textarea from "primevue/textarea";
+import { useToast } from "primevue/usetoast";
+
+import { ARCHES_CHROME_BLUE } from "@/arches/theme.ts";
+import { deleteValue, upsertValue } from "@/controlled-lists/api.ts";
+import {
+    ALT_LABEL,
+    DEFAULT_ERROR_TOAST_LIFE,
+    ERROR,
+    NOTE,
+    NOTE_CHOICES,
+    PREF_LABEL,
+    itemKey,
+} from "@/controlled-lists/constants.ts";
+import { languageNameFromCode } from "@/controlled-lists/utils.ts";
+import AddValue from "@/controlled-lists/components/editor/AddValue.vue";
+
+import type { Ref } from "vue";
+import type { DataTableRowEditInitEvent } from "primevue/datatable";
+import type {
+    ControlledListItem,
+    Value,
+    ValueCategory,
+    NewOrExistingValue,
+    NewValue,
+    ValueType,
+} from "@/controlled-lists/types";
+
+const { valueType, valueCategory } = defineProps<{
+    valueType?: ValueType;
+    valueCategory?: ValueCategory;
+}>();
+const editingRows: Ref<NewOrExistingValue[]> = ref([]);
+const rowIndexToFocus = ref(-1);
+const editorRef: Ref<HTMLDivElement | null> = ref(null);
+
+const item = inject(itemKey) as Ref<ControlledListItem>;
+
+const toast = useToast();
+const { $gettext } = useGettext();
+const valueHeader = $gettext("Value");
+const languageHeader = $gettext("Language");
+const noteTypeHeader = $gettext("Note type");
+
+const labeledNoteChoices = [
+    {
+        type: NOTE_CHOICES.scope,
+        label: $gettext("Scope note"),
+    },
+    {
+        type: NOTE_CHOICES.definition,
+        label: $gettext("Definition"),
+    },
+    {
+        type: NOTE_CHOICES.example,
+        label: $gettext("Example"),
+    },
+    {
+        type: NOTE_CHOICES.history,
+        label: $gettext("History note"),
+    },
+    {
+        type: NOTE_CHOICES.editorial,
+        label: $gettext("Editorial note"),
+    },
+    {
+        type: NOTE_CHOICES.change,
+        label: $gettext("Change note"),
+    },
+    {
+        type: NOTE_CHOICES.note,
+        label: $gettext("Note"),
+    },
+    {
+        type: NOTE_CHOICES.description,
+        label: $gettext("Description"),
+    },
+];
+
+const noteChoiceLabel = (valueType: string) => {
+    return labeledNoteChoices.find((choice) => choice.type === valueType)!
+        .label;
+};
+
+const headings: Ref<{ heading: string; subheading: string }> = computed(() => {
+    switch (valueType) {
+        case PREF_LABEL:
+            return {
+                heading: $gettext("Preferred Label(s)"),
+                subheading: $gettext(
+                    "Provide at least one preferred label and language for your list item.",
+                ),
+            };
+        case ALT_LABEL:
+            return {
+                heading: $gettext("Alternate Label(s)"),
+                subheading: $gettext(
+                    "Optionally, you can provide additional labels for your list item. Useful if you want to make searching for labels with synonyms or common misspellings of your preferred label(s) easier.",
+                ),
+            };
+        default:
+            return {
+                heading: $gettext("Notes"),
+                subheading: $gettext(
+                    "Optionally, you can provide notes for your list item.",
+                ),
+            };
+    }
+});
+
+const values = computed(() => {
+    if (!item.value) {
+        return [];
+    }
+    if (!valueType) {
+        if (valueCategory === NOTE) {
+            // Show everything but labels for now.
+            // We're not returning category from the API, and images already excluded.
+            return item.value.values.filter(
+                (value) =>
+                    ![PREF_LABEL, ALT_LABEL].includes(value.valuetype_id),
+            );
+        }
+    }
+    return item.value.values.filter(
+        (value) => value.valuetype_id === valueType,
+    );
+});
+
+const saveValue = async (event: DataTableRowEditInitEvent) => {
+    // normalize new value numbers to null
+    const normalizedNewData: Value = {
+        ...event.newData,
+        id: typeof event.newData.id === "string" ? event.newData.id : null,
+        value: event.newData.value.trim(),
+    };
+    let upsertedValue: Value;
+    try {
+        upsertedValue = await upsertValue(normalizedNewData);
+    } catch (error) {
+        toast.add({
+            severity: ERROR,
+            life: DEFAULT_ERROR_TOAST_LIFE,
+            summary: $gettext("Value save failed"),
+            detail: error instanceof Error ? error.message : undefined,
+        });
+        if (normalizedNewData.id === null) {
+            removeItemValue(event.newData);
+        }
+        return;
+    }
+    if (normalizedNewData.id) {
+        updateItemValue(upsertedValue);
+    } else {
+        appendItemValue(upsertedValue);
+        removeItemValue(event.newData);
+    }
+};
+
+const issueDeleteValue = async (value: NewValue | Value) => {
+    if (typeof value.id === "number") {
+        removeItemValue(value);
+        return;
+    }
+    try {
+        await deleteValue(value);
+    } catch (error) {
+        toast.add({
+            severity: ERROR,
+            life: DEFAULT_ERROR_TOAST_LIFE,
+            summary: $gettext("Value deletion failed"),
+            detail: error instanceof Error ? error.message : undefined,
+        });
+        return;
+    }
+    removeItemValue(value);
+};
+
+const appendItemValue = (newValue: Value) => {
+    item.value.values.push(newValue);
+};
+
+const removeItemValue = (removedValue: Value | NewValue) => {
+    const toDelete = item.value.values.findIndex(
+        (valueFromItem) => valueFromItem.id === removedValue.id,
+    );
+    item.value.values.splice(toDelete, 1);
+};
+
+const updateItemValue = (updatedValue: Value) => {
+    const toUpdate = item.value.values.find(
+        (valueFromItem) => valueFromItem.id === updatedValue.id,
+    );
+    if (toUpdate) {
+        toUpdate.language_id = updatedValue.language_id;
+        toUpdate.value = updatedValue.value;
+        toUpdate.valuetype_id = updatedValue.valuetype_id;
+    }
+};
+
+const setRowFocus = (event: DataTableRowEditInitEvent) => {
+    rowIndexToFocus.value = event.index;
+};
+
+const makeValueEditable = (clickedValue: NewOrExistingValue, index: number) => {
+    if (!editingRows.value.includes(clickedValue)) {
+        editingRows.value = [...editingRows.value, clickedValue];
+    }
+    if (index === -1) {
+        // Coming from <AddValue>
+        rowIndexToFocus.value = Math.max(values.value.length - 1, 0);
+    } else {
+        rowIndexToFocus.value = index;
+    }
+};
+
+const inputSelector = computed(() => {
+    return `[data-p-index="${rowIndexToFocus.value}"]`;
+});
+
+const focusInput = () => {
+    // The editor (pencil) button from the DataTable (elsewhere on page)
+    // immediately hogs focus with a setTimeout of 1,
+    // so we'll get in line behind it to set focus to the input.
+    // This should be reported/clarified with PrimeVue with a MWE.
+    setTimeout(() => {
+        // Note editor uses the second column.
+        const indexOfInputCol = valueCategory ? 1 : 0;
+        if (rowIndexToFocus.value !== -1) {
+            const editorDiv = editorRef.value;
+            const rowEl = editorDiv!.querySelector(inputSelector.value);
+            const inputEl = rowEl!.children[indexOfInputCol].children[0];
+            // @ts-expect-error focusVisible not yet in typeshed
+            (inputEl as HTMLInputElement).focus({ focusVisible: true });
+        }
+        rowIndexToFocus.value = -1;
+    }, 25);
+};
+</script>
+
+<template>
+    <div
+        ref="editorRef"
+        class="value-editor-container"
+    >
+        <h4>{{ headings.heading }}</h4>
+        <p>{{ headings.subheading }}</p>
+        <DataTable
+            v-if="values.length"
+            v-model:editingRows="editingRows"
+            :value="values"
+            data-key="id"
+            edit-mode="row"
+            striped-rows
+            scrollable
+            :style="{ fontSize: 'small' }"
+            @row-edit-init="setRowFocus"
+            @row-edit-save="saveValue"
+        >
+            <!-- Note type dropdown (if this is a note editor) -->
+            <Column
+                v-if="valueCategory"
+                field="valuetype_id"
+                :header="noteTypeHeader"
+                style="width: 20%"
+            >
+                <template #editor="{ data, field }">
+                    <Dropdown
+                        v-model="data[field]"
+                        :options="labeledNoteChoices"
+                        option-label="label"
+                        option-value="type"
+                        :pt="{
+                            root: { style: { width: '90%' } },
+                            input: {
+                                style: {
+                                    fontFamily: 'inherit',
+                                    fontSize: 'small',
+                                },
+                            },
+                            panel: { style: { fontSize: 'small' } },
+                        }"
+                    />
+                </template>
+                <template #body="slotProps">
+                    {{ noteChoiceLabel(slotProps.data.valuetype_id) }}
+                </template>
+            </Column>
+            <Column
+                field="value"
+                :header="valueHeader"
+                style="width: 60%; min-width: 8rem"
+            >
+                <template #editor="{ data, field }">
+                    <!-- Textarea for notes, input for labels -->
+                    <Textarea
+                        v-if="valueCategory"
+                        v-model="data[field]"
+                        rows="3"
+                        cols="60"
+                        auto-resize
+                        :pt="{
+                            hooks: {
+                                onMounted: focusInput,
+                                onUpdated: focusInput,
+                            },
+                        }"
+                    />
+                    <InputText
+                        v-else
+                        v-model="data[field]"
+                        :pt="{
+                            hooks: {
+                                onMounted: focusInput,
+                                onUpdated: focusInput,
+                            },
+                        }"
+                    />
+                </template>
+                <template #body="slotProps">
+                    <span
+                        class="full-width-pointer"
+                        style="white-space: pre-wrap"
+                        @click.stop="
+                            makeValueEditable(slotProps.data, slotProps.index)
+                        "
+                    >
+                        {{ slotProps.data.value }}
+                    </span>
+                </template>
+            </Column>
+            <Column
+                field="language_id"
+                :header="languageHeader"
+                style="width: 10%; min-width: 8rem; height: 5rem"
+            >
+                <template #editor="{ data, field }">
+                    <Dropdown
+                        v-model="data[field]"
+                        :options="arches.languages"
+                        :option-label="(lang) => `${lang.name} (${lang.code})`"
+                        option-value="code"
+                        :pt="{
+                            input: {
+                                style: {
+                                    fontFamily: 'inherit',
+                                    fontSize: 'small',
+                                },
+                            },
+                            panel: { style: { fontSize: 'small' } },
+                        }"
+                    />
+                </template>
+                <template #body="slotProps">
+                    {{
+                        `${languageNameFromCode(slotProps.data.language_id)} (${slotProps.data.language_id})`
+                    }}
+                </template>
+            </Column>
+            <Column
+                :row-editor="true"
+                style="width: 5%; min-width: 6rem; text-align: center"
+                :pt="{
+                    headerCell: { ariaLabel: $gettext('Row edit controls') },
+                    rowEditorInitButton: {
+                        class: 'fa fa-pencil',
+                        style: { display: 'inline-flex' },
+                    },
+                    rowEditorInitIcon: { style: { display: 'none' } },
+                    rowEditorSaveButton: {
+                        class: 'fa fa-check',
+                        style: { display: 'inline-flex' },
+                    },
+                    rowEditorSaveIcon: { style: { display: 'none' } },
+                    rowEditorCancelButton: {
+                        class: 'fa fa-undo',
+                        style: { display: 'inline-flex' },
+                    },
+                    rowEditorCancelIcon: { style: { display: 'none' } },
+                }"
+            />
+            <Column
+                style="width: 5%; text-align: center"
+                :pt="{ headerCell: { ariaLabel: $gettext('Delete controls') } }"
+            >
+                <template #body="slotProps">
+                    <i
+                        class="fa fa-trash"
+                        role="button"
+                        tabindex="0"
+                        :aria-label="$gettext('Delete')"
+                        @click="issueDeleteValue(slotProps.data)"
+                        @keyup.enter="issueDeleteValue(slotProps.data)"
+                    />
+                </template>
+            </Column>
+        </DataTable>
+        <AddValue
+            :value-type
+            :make-new-value-editable="makeValueEditable"
+        />
+    </div>
+</template>
+
+<style scoped>
+.value-editor-container {
+    margin: 1rem 1rem 3rem 1rem;
+    width: 100%;
+}
+
+h4 {
+    color: v-bind(ARCHES_CHROME_BLUE);
+    margin-top: 0;
+    font-size: 1.33rem;
+}
+
+p {
+    font-weight: normal;
+    margin-top: 0;
+    font-size: 1.2rem;
+}
+
+.full-width-pointer {
+    cursor: pointer;
+    display: flex;
+    width: 100%;
+}
+
+:deep(th) {
+    font-weight: 600;
+    height: 3rem;
+}
+
+:deep(td) {
+    padding: 0.75rem;
+}
+
+:deep(td > input, textarea) {
+    width: 100%;
+}
+</style>
diff --git a/arches_references/arches_references/src/arches-references/components/misc/ControlledListSplash.vue b/arches_references/arches_references/src/arches-references/components/misc/ControlledListSplash.vue
new file mode 100644
index 0000000..7328a5a
--- /dev/null
+++ b/arches_references/arches_references/src/arches-references/components/misc/ControlledListSplash.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { useGettext } from "vue3-gettext";
+
+const { $gettext } = useGettext();
+</script>
+
+<template>
+    <div class="controlled-list-splash">
+        <div
+            aria-hidden="true"
+            class="splash-large splash-circle controlled-list-splash-img-container"
+        >
+            <i class="fa fa-list" />
+        </div>
+
+        <div class="controlled-list-splash-title">
+            {{ $gettext("Welcome to Arches' Controlled List Manager") }}
+        </div>
+
+        <div class="controlled-list-splash-description">
+            {{ $gettext("Select a list from the sidebar.") }}
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.splash-large {
+    width: 10rem;
+    height: 10rem;
+}
+
+.splash-circle {
+    border-radius: 50%;
+}
+
+.controlled-list-splash {
+    text-align: center;
+    margin: 5rem 5rem 2rem 5rem;
+    border: 1px solid #ddd;
+    padding: 4rem 3rem;
+    background: #f6f6f6;
+    border-radius: 0.5rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.controlled-list-splash-title {
+    color: #666;
+    font-size: 2.8rem;
+    margin-bottom: 3rem;
+    margin-top: 2.5rem;
+}
+
+i {
+    color: steelblue;
+    font-size: xx-large;
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+}
+
+.controlled-list-splash-img-container {
+    padding: 2rem;
+    background: #fff;
+    border: 1px solid steelblue;
+    display: inline-block;
+}
+
+.controlled-list-splash-description {
+    font-size: 1.5rem;
+    color: #666;
+    font-weight: 500;
+}
+</style>
diff --git a/arches_references/arches_references/src/arches-references/components/misc/LetterCircle.vue b/arches_references/arches_references/src/arches-references/components/misc/LetterCircle.vue
new file mode 100644
index 0000000..7357edf
--- /dev/null
+++ b/arches_references/arches_references/src/arches-references/components/misc/LetterCircle.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+import { dataIsList } from "@/controlled-lists/utils.ts";
+
+import type { ControlledListItem, Selectable } from "@/controlled-lists/types";
+
+const props = defineProps<{ labelled: Selectable }>();
+
+const color = computed(() => {
+    if (dataIsList(props.labelled)) {
+        return "midnightblue";
+    }
+    const item = props.labelled as ControlledListItem;
+    if (item.guide) {
+        return "chocolate";
+    }
+    return "darkorchid";
+});
+
+const letter = computed(() => {
+    // not translated...
+    if (dataIsList(props.labelled)) {
+        return "L";
+    }
+    const item = props.labelled as ControlledListItem;
+    if (item.guide) {
+        return "G";
+    }
+    return "I";
+});
+</script>
+
+<template>
+    <div
+        class="circle"
+        aria-hidden="true"
+    >
+        <span class="letter">{{ letter }}</span>
+    </div>
+</template>
+
+<style scoped>
+.circle {
+    width: 1.5rem;
+    height: 1.5rem;
+    min-width: 1.5rem;
+    border-radius: 50%;
+    background-color: v-bind("color");
+    font-weight: 600;
+    align-self: center;
+    display: grid;
+}
+
+.letter {
+    text-align: center;
+    align-self: center;
+    font-size: x-small;
+    color: white;
+}
+</style>
diff --git a/arches_references/arches_references/src/arches-references/components/misc/ListHeader.vue b/arches_references/arches_references/src/arches-references/components/misc/ListHeader.vue
new file mode 100644
index 0000000..1e00ff3
--- /dev/null
+++ b/arches_references/arches_references/src/arches-references/components/misc/ListHeader.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { computed, inject } from "vue";
+import { useGettext } from "vue3-gettext";
+
+import { ARCHES_CHROME_BLUE } from "@/arches/theme.ts";
+import {
+    displayedRowKey,
+    selectedLanguageKey,
+} from "@/controlled-lists/constants.ts";
+import { bestLabel, dataIsList } from "@/controlled-lists/utils.ts";
+
+import type { Ref } from "vue";
+import type { Language } from "@/arches/types";
+import type {
+    ControlledList,
+    DisplayedRowRefAndSetter,
+} from "@/controlled-lists/types";
+
+const { $gettext } = useGettext();
+
+const { displayedRow } = inject(displayedRowKey) as DisplayedRowRefAndSetter;
+const selectedLanguage = inject(selectedLanguageKey) as Ref<Language>;
+
+const heading = computed(() => {
+    if (!displayedRow.value) {
+        return $gettext("List Editor");
+    }
+    if (dataIsList(displayedRow.value)) {
+        return $gettext(
+            "List Editor > %{listName}",
+            { listName: (displayedRow.value as ControlledList).name },
+            true, // turn off escaping: vue template sanitizes
+        );
+    }
+    return $gettext(
+        "Item Editor > %{bestLabel}",
+        {
+            bestLabel: bestLabel(
+                displayedRow.value,
+                selectedLanguage.value.code,
+            ).value,
+        },
+        true, // turn off escaping: vue template sanitizes
+    );
+});
+</script>
+
+<template>
+    <div
+        class="header"
+        :style="{ background: ARCHES_CHROME_BLUE }"
+    >
+        <i
+            class="fa fa-inverse fa-list"
+            aria-hidden="true"
+        />
+        <h2>{{ heading }}</h2>
+    </div>
+</template>
+
+<style scoped>
+.header {
+    display: flex;
+    align-items: center;
+}
+i {
+    margin-left: 1rem;
+    margin-top: 0.25rem;
+}
+h2 {
+    font-size: 1.6rem;
+    margin: 1rem;
+    color: white;
+}
+</style>
diff --git a/arches_references/arches_references/src/arches-references/components/tree/ActionBanner.vue b/arches_references/arches_references/src/arches-references/components/tree/ActionBanner.vue
new file mode 100644
index 0000000..9e5767a
--- /dev/null
+++ b/arches_references/arches_references/src/arches-references/components/tree/ActionBanner.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { inject, ref } from "vue";
+import { useGettext } from "vue3-gettext";
+
+import Button from "primevue/button";
+
+import { selectedLanguageKey } from "@/controlled-lists/constants.ts";
+import { bestLabel } from "@/controlled-lists/utils.ts";
+
+import type { Ref } from "vue";
+import type { TreeSelectionKeys } from "primevue/tree/Tree";
+import type { TreeNode } from "primevue/treenode";
+import type { Language } from "@/arches/types";
+
+const isMultiSelecting = defineModel<boolean>("isMultiSelecting", {
+    required: true,
+});
+const movingItem = defineModel<TreeNode>("movingItem");
+const rerenderTree = defineModel<number>("rerenderTree", { required: true });
+const selectedKeys = defineModel<TreeSelectionKeys>("selectedKeys", {
+    required: true,
+});
+
+const abandonMoveRef = ref();
+
+const selectedLanguage = inject(selectedLanguageKey) as Ref<Language>;
+
+const { $gettext } = useGettext();
+
+const abandonMove = () => {
+    movingItem.value = undefined;
+    // Clear custom classes added in <Tree> pass-through
+    rerenderTree.value += 1;
+};
+</script>
+
+<template>
+    <div
+        v-if="movingItem"
+        class="action-banner"
+    >
+        <!-- turn off escaping: vue template sanitizes -->
+        {{
+            $gettext(
+                "Selecting new parent for: %{item}",
+                {
+                    item: bestLabel(movingItem.data, selectedLanguage.code)
+                        .value,
+                },
+                true,
+            )
+        }}
+        <Button
+            ref="abandonMoveRef"
+            type="button"
+            class="banner-button"
+            :label="$gettext('Abandon')"
+            @click="abandonMove"
+        />
+    </div>
+    <div
+        v-else-if="isMultiSelecting"
+        class="action-banner"
+    >
+        {{ $gettext("Select additional items to delete") }}
+        <Button
+            type="button"
+            class="banner-button"
+            :label="$gettext('Abandon')"
+            @click="
+                isMultiSelecting = false;
+                selectedKeys = {};
+            "
+        />
+    </div>
+</template>
+
+<style scoped>
+.action-banner {
+    background: yellow;
+    font-weight: 800;
+    height: 5rem;
+    font-size: small;
+    display: flex;
+    justify-content: space-between;
+    padding: 1rem;
+    align-items: center;
+}
+
+.banner-button {
+    height: 3rem;
+    background: darkslategray;
+    color: white;
+    text-wrap: nowrap;
+}
+</style>
diff --git a/arches_references/arches_references/src/arches-references/components/tree/AddDeleteControls.vue b/arches_references/arches_references/src/arches-references/components/tree/AddDeleteControls.vue
new file mode 100644
index 0000000..f155fb7
--- /dev/null
+++ b/arches_references/arches_references/src/arches-references/components/tree/AddDeleteControls.vue
@@ -0,0 +1,308 @@
+<script setup lang="ts">
+import { computed, inject, ref } from "vue";
+import { useGettext } from "vue3-gettext";
+
+import { useConfirm } from "primevue/useconfirm";
+import { useToast } from "primevue/usetoast";
+import Button from "primevue/button";
+import ConfirmDialog from "primevue/confirmdialog";
+import SplitButton from "primevue/splitbutton";
+
+import {
+    deleteItems,
+    deleteLists,
+    fetchLists,
+} from "@/controlled-lists/api.ts";
+import {
+    DANGER,
+    DEFAULT_ERROR_TOAST_LIFE,
+    ERROR,
+    SUCCESS,
+    displayedRowKey,
+    selectedLanguageKey,
+} from "@/controlled-lists/constants.ts";
+import { dataIsItem, listAsNode } from "@/controlled-lists/utils.ts";
+
+import type { Ref } from "vue";
+import type { TreeSelectionKeys } from "primevue/tree/Tree";
+import type { TreeNode } from "primevue/treenode";
+import type { Language } from "@/arches/types";
+import type {
+    ControlledList,
+    ControlledListItem,
+    DisplayedRowRefAndSetter,
+    NewControlledList,
+} from "@/controlled-lists/types";
+
+const { displayedRow, setDisplayedRow } = inject(
+    displayedRowKey,
+) as DisplayedRowRefAndSetter;
+const selectedLanguage = inject(selectedLanguageKey) as Ref<Language>;
+
+const tree = defineModel<TreeNode[]>({ required: true });
+const selectedKeys = defineModel<TreeSelectionKeys>("selectedKeys", {
+    required: true,
+});
+const isMultiSelecting = defineModel<boolean>("isMultiSelecting", {
+    required: true,
+});
+const nextNewList = defineModel<NewControlledList>("nextNewList");
+const newListFormValue = defineModel<string>("newListFormValue", {
+    required: true,
+});
+
+// For new list entry (input textbox)
+const newListCounter = ref(1);
+
+const { $gettext, $ngettext } = useGettext();
+const confirm = useConfirm();
+const toast = useToast();
+
+const multiSelectStateFromDisplayedRow = computed(() => {
+    if (!displayedRow.value) {
+        return {};
+    }
+    const newSelectedKeys = {
+        [displayedRow.value.id]: { checked: true, partialChecked: false },
+    };
+
+    const recurse = (items: ControlledListItem[]) => {
+        for (const child of items) {
+            newSelectedKeys[child.id] = {
+                checked: false,
+                partialChecked: true,
+            };
+            recurse(child.children);
+        }
+    };
+    if (dataIsItem(displayedRow.value)) {
+        recurse((displayedRow.value as ControlledListItem).children);
+    } else {
+        recurse((displayedRow.value as ControlledList).items);
+    }
+    return newSelectedKeys;
+});
+
+const deleteDropdownOptions = [
+    {
+        label: $gettext("Delete Multiple"),
+        command: () => {
+            isMultiSelecting.value = true;
+            selectedKeys.value = { ...multiSelectStateFromDisplayedRow.value };
+        },
+    },
+];
+
+const createList = () => {
+    const newList: NewControlledList = {
+        id: newListCounter.value,
+        name: newListFormValue.value,
+        dynamic: false,
+        search_only: false,
+        items: [],
+        nodes: [],
+    };
+
+    nextNewList.value = newList;
+    newListFormValue.value = "";
+    newListCounter.value += 1;
+
+    tree.value.push(listAsNode(newList, selectedLanguage.value));
+
+    selectedKeys.value = { [newList.id]: true };
+    setDisplayedRow(newList);
+};
+
+const toDelete = computed(() => {
+    if (!selectedKeys.value) {
+        return [];
+    }
+    if (isMultiSelecting.value) {
+        return Object.entries(selectedKeys.value)
+            .filter(([, v]) => v.checked)
+            .map(([k]) => k);
+    }
+    return Object.entries(selectedKeys.value)
+        .filter(([, v]) => v)
+        .map(([k]) => k);
+});
+
+const deleteSelected = async () => {
+    if (!selectedKeys.value) {
+        return;
+    }
+    const allListIds = tree.value.map((node) => node.data.id);
+
+    const listIdsToDelete = toDelete.value.filter((id) =>
+        allListIds.includes(id),
+    );
+    const itemIdsToDelete = toDelete.value.filter(
+        (id) => !listIdsToDelete.includes(id),
+    );
+
+    selectedKeys.value = {};
+
+    // Do items first so that cascade deletion doesn't cause item deletion to fail.
+    let anyDeleted = false;
+    if (itemIdsToDelete.length) {
+        try {
+            anyDeleted = await deleteItems(itemIdsToDelete);
+        } catch (error) {
+            if (error instanceof Error) {
+                error.message.split("|").forEach((detail: string) => {
+                    toast.add({
+                        severity: ERROR,
+                        life: DEFAULT_ERROR_TOAST_LIFE,
+                        summary: $gettext("Item deletion failed"),
+                        detail,
+                    });
+                });
+            }
+        }
+    }
+    if (listIdsToDelete.length) {
+        try {
+            anyDeleted = (await deleteLists(listIdsToDelete)) || anyDeleted;
+        } catch (error) {
+            if (error instanceof Error) {
+                error.message.split("|").forEach((detail) => {
+                    toast.add({
+                        severity: ERROR,
+                        life: DEFAULT_ERROR_TOAST_LIFE,
+                        summary: $gettext("List deletion failed"),
+                        detail,
+                    });
+                });
+            }
+        }
+    }
+    if (anyDeleted) {
+        setDisplayedRow(null);
+    }
+
+    isMultiSelecting.value = false;
+};
+
+const confirmDelete = () => {
+    const numItems = toDelete.value.length;
+    confirm.require({
+        message: $ngettext(
+            "Are you sure you want to delete %{numItems} item (including all children)?",
+            "Are you sure you want to delete %{numItems} items (including all children)?",
+            numItems,
+            { numItems: numItems.toLocaleString() },
+        ),
+        header: $gettext("Confirm deletion"),
+        icon: "fa fa-exclamation-triangle",
+        rejectLabel: $gettext("Cancel"),
+        rejectClass: "p-button-secondary p-button-outlined",
+        acceptLabel: $gettext("Delete"),
+        accept: async () => {
+            await deleteSelected().then(fetchListsAndPopulateTree);
+        },
+        reject: () => {},
+    });
+};
+
+const fetchListsAndPopulateTree = async () => {
+    /*
+    Currently, rather than inspecting the results of the batched
+    delete requests, we just refetch everything. This requires being
+    a little clever about resorting the ordered response from the API
+    to preserve the existing sort (and avoid confusion).
+    */
+    const priorSortedListIds = tree.value.map((node) => node.key);
+
+    await fetchLists()
+        .then(
+            ({ controlled_lists }: { controlled_lists: ControlledList[] }) => {
+                tree.value = controlled_lists
+                    .map((list) => listAsNode(list, selectedLanguage.value))
+                    .sort(
+                        (a, b) =>
+                            priorSortedListIds.indexOf(a.key) -
+                            priorSortedListIds.indexOf(b.key),
+                    );
+            },
+        )
+        .catch((error: Error) => {
+            toast.add({
+                severity: ERROR,
+                life: DEFAULT_ERROR_TOAST_LIFE,
+                summary: $gettext("Unable to fetch lists"),
+                detail: error.message,
+            });
+        });
+};
+
+await fetchListsAndPopulateTree();
+</script>
+
+<template>
+    <Button
+        class="list-button"
+        :severity="SUCCESS"
+        :label="$gettext('Add New List')"
+        raised
+        style="font-size: inherit"
+        @click="createList"
+    />
+    <ConfirmDialog :draggable="false" />
+    <SplitButton
+        class="list-button"
+        :label="$gettext('Delete')"
+        :menu-button-props="{ 'aria-label': $gettext('Delete multiple') }"
+        raised
+        style="font-size: inherit"
+        :disabled="!toDelete.length"
+        :severity="DANGER"
+        :model="deleteDropdownOptions"
+        @click="confirmDelete"
+    />
+</template>
+
+<style scoped>
+.list-button,
+.p-splitbutton {
+    height: 4rem;
+    margin: 0.5rem;
+    flex: 0.5;
+    justify-content: center;
+    font-weight: 600;
+    color: white;
+    text-wrap: nowrap;
+}
+</style>
+
+<style>
+.p-tieredmenu.p-tieredmenu-overlay {
+    font-size: inherit;
+}
+
+.p-tieredmenu-root-list {
+    margin: 0; /* override arches css */
+}
+
+.p-confirm-dialog {
+    font-size: small;
+}
+
+.p-dialog-header {
+    background: #2d3c4b;
+    color: white;
+}
+
+.p-dialog-title {
+    font-weight: 800;
+}
+
+.p-dialog-content {
+    padding-top: 1.25rem;
+}
+
+.p-confirm-dialog-accept {
+    background: #ed7979;
+    color: white;
+    font-weight: 600;
+}
+</style>
diff --git a/arches_references/arches_references/src/arches-references/components/tree/ListTree.vue b/arches_references/arches_references/src/arches-references/components/tree/ListTree.vue
new file mode 100644
index 0000000..8e1b894
--- /dev/null
+++ b/arches_references/arches_references/src/arches-references/components/tree/ListTree.vue
@@ -0,0 +1,251 @@
+<script setup lang="ts">
+import { computed, inject, ref } from "vue";
+import { useGettext } from "vue3-gettext";
+
+import Tree from "primevue/tree";
+
+import {
+    displayedRowKey,
+    selectedLanguageKey,
+} from "@/controlled-lists/constants.ts";
+import { bestLabel, nodeIsList } from "@/controlled-lists/utils.ts";
+import LetterCircle from "@/controlled-lists/components/misc/LetterCircle.vue";
+import ListTreeControls from "@/controlled-lists/components/tree/ListTreeControls.vue";
+import TreeRow from "@/controlled-lists/components/tree/TreeRow.vue";
+
+import type { ComponentPublicInstance, Ref } from "vue";
+import type { TreeExpandedKeys, TreeSelectionKeys } from "primevue/tree/Tree";
+import type { TreeNode } from "primevue/treenode";
+import type { Language } from "@/arches/types";
+import type {
+    DisplayedRowRefAndSetter,
+    NewControlledList,
+    NewControlledListItem,
+} from "@/controlled-lists/types";
+
+const { $gettext } = useGettext();
+
+const moveLabels = Object.freeze({
+    addChild: $gettext("Add child item"),
+    moveUp: $gettext("Move item up"),
+    moveDown: $gettext("Move item down"),
+    changeParent: $gettext("Change item parent"),
+});
+
+const tree: Ref<TreeNode[]> = ref([]);
+const selectedKeys: Ref<TreeSelectionKeys> = ref({});
+const expandedKeys: Ref<TreeExpandedKeys> = ref({});
+const movingItem: Ref<TreeNode | undefined> = ref();
+const isMultiSelecting = ref(false);
+const refetcher = ref(0);
+const filterValue = ref("");
+const treeDOMRef: Ref<ComponentPublicInstance | null> = ref(null);
+
+// For next new item's pref label (input textbox)
+const newLabelFormValue = ref("");
+const nextNewItem = ref<NewControlledListItem>();
+// For new list entry (input textbox)
+const newListFormValue = ref("");
+const nextNewList = ref<NewControlledList>();
+const rerenderTree = ref(0);
+const nextFilterChangeNeedsExpandAll = ref(false);
+const expandedKeysSnapshotBeforeSearch = ref<TreeExpandedKeys>({});
+
+const selectedLanguage = inject(selectedLanguageKey) as Ref<Language>;
+const { setDisplayedRow } = inject(displayedRowKey) as DisplayedRowRefAndSetter;
+
+const updateSelectedAndExpanded = (node: TreeNode) => {
+    setDisplayedRow(node.data);
+    expandedKeys.value = {
+        ...expandedKeys.value,
+        [node.key as string]: true,
+    };
+};
+
+const expandAll = () => {
+    const newExpandedKeys = {};
+    for (const node of tree.value) {
+        expandNode(node, newExpandedKeys);
+    }
+    expandedKeys.value = { ...newExpandedKeys };
+};
+
+const expandNode = (node: TreeNode, newExpandedKeys: TreeExpandedKeys) => {
+    if (node.children && node.children.length) {
+        newExpandedKeys[node.key as string] = true;
+
+        for (const child of node.children) {
+            expandNode(child, newExpandedKeys);
+        }
+    }
+};
+
+const expandPathsToFilterResults = (newFilterValue: string) => {
+    // https://github.com/primefaces/primevue/issues/3996
+    if (filterValue.value && !newFilterValue) {
+        expandedKeys.value = { ...expandedKeysSnapshotBeforeSearch.value };
+        expandedKeysSnapshotBeforeSearch.value = {};
+        // Rerender to avoid error emitted in PrimeVue tree re: aria-selected.
+        rerenderTree.value += 1;
+    }
+    // Expand all on the first interaction with the filter, or if the user
+    // has collapsed a node and changes the filter.
+    if (
+        (!filterValue.value && newFilterValue) ||
+        (nextFilterChangeNeedsExpandAll.value &&
+            filterValue.value !== newFilterValue)
+    ) {
+        expandedKeysSnapshotBeforeSearch.value = { ...expandedKeys.value };
+        expandAll();
+    }
+    nextFilterChangeNeedsExpandAll.value = false;
+};
+
+const getInputElement = () => {
+    if (treeDOMRef.value !== null) {
+        return treeDOMRef.value.$el.ownerDocument.getElementsByClassName(
+            "p-tree-filter",
+        )[0] as HTMLInputElement;
+    }
+};
+
+const restoreFocusToInput = () => {
+    // The current implementation of collapsing all nodes when
+    // backspacing out the search value relies on rerendering the
+    // <Tree> component. Restore focus to the input element.
+    if (rerenderTree.value > 0) {
+        const inputEl = getInputElement();
+        if (inputEl) {
+            inputEl.focus();
+        }
+    }
+};
+
+const snoopOnFilterValue = () => {
+    // If we wait to react to the emitted filter event, the templated rows
+    // will have already rendered. (<TreeRow> bolds search terms.)
+    const inputEl = getInputElement();
+    if (inputEl) {
+        expandPathsToFilterResults(inputEl.value);
+        filterValue.value = inputEl.value;
+    }
+};
+
+const filterCallbackWrapped = computed(() => {
+    // Access some hidden functionality of the PrimeVue <Tree> to make
+    // filter lookups lazy, that is, making use of the current state of the
+    // label values and the selected language when doing the filtering.
+    // "Hidden", because we need to violate the type of filter-by, which
+    // should be a string. If we abuse it to be something that returns
+    // a 1-element array containing a getter when split() is called on it,
+    // that getter can return the best label to filter against.
+    return {
+        split: () => {
+            return [
+                (node: TreeNode) => {
+                    if (nodeIsList(node)) {
+                        return node.data.name;
+                    }
+                    return bestLabel(node.data, selectedLanguage.value.code)
+                        .value;
+                },
+            ];
+        },
+    };
+});
+</script>
+
+<template>
+    <ListTreeControls
+        :key="refetcher"
+        v-model="tree"
+        v-model:rerender-tree="rerenderTree"
+        v-model:expanded-keys="expandedKeys"
+        v-model:selected-keys="selectedKeys"
+        v-model:moving-item="movingItem"
+        v-model:is-multi-selecting="isMultiSelecting"
+        v-model:nextNewList="nextNewList"
+        v-model:newListFormValue="newListFormValue"
+    />
+    <Tree
+        v-if="tree"
+        ref="treeDOMRef"
+        :key="rerenderTree"
+        v-model:selectionKeys="selectedKeys"
+        v-model:expandedKeys="expandedKeys"
+        :value="tree"
+        :filter="true"
+        :filter-by="filterCallbackWrapped as unknown as string"
+        filter-mode="lenient"
+        :filter-placeholder="$gettext('Find')"
+        :selection-mode="isMultiSelecting ? 'checkbox' : 'single'"
+        :pt="{
+            root: {
+                style: {
+                    flexGrow: 1,
+                    border: 0,
+                    overflowY: 'hidden',
+                    paddingBottom: '5rem',
+                },
+            },
+            input: {
+                style: { height: '3.5rem', fontSize: '1.4rem' },
+                ariaLabel: $gettext('Find'),
+            },
+            wrapper: {
+                style: {
+                    overflowY: 'auto',
+                    maxHeight: '100%',
+                    paddingBottom: '1rem',
+                },
+            },
+            container: { style: { fontSize: '1.4rem' } },
+            content: ({ instance }) => {
+                if (instance.$el && instance.node.key === movingItem?.key) {
+                    instance.$el.classList.add('is-adjusting-parent');
+                }
+                return { style: { height: '4rem' } };
+            },
+            label: {
+                style: {
+                    textWrap: 'nowrap',
+                    marginLeft: '0.5rem',
+                    width: '100%',
+                },
+            },
+            hooks: {
+                onBeforeUpdate: snoopOnFilterValue,
+                onMounted: restoreFocusToInput,
+            },
+        }"
+        @node-collapse="nextFilterChangeNeedsExpandAll = true"
+        @node-select="updateSelectedAndExpanded"
+    >
+        <template #nodeicon="slotProps">
+            <LetterCircle :labelled="slotProps.node.data" />
+        </template>
+        <template #default="slotProps">
+            <TreeRow
+                v-model:tree="tree"
+                v-model:expanded-keys="expandedKeys"
+                v-model:selected-keys="selectedKeys"
+                v-model:moving-item="movingItem"
+                v-model:refetcher="refetcher"
+                v-model:rerenderTree="rerenderTree"
+                v-model:nextNewItem="nextNewItem"
+                v-model:newLabelFormValue="newLabelFormValue"
+                v-model:newListFormValue="newListFormValue"
+                v-model:filter-value="filterValue"
+                :move-labels
+                :node="slotProps.node"
+                :is-multi-selecting="isMultiSelecting"
+            />
+        </template>
+    </Tree>
+</template>
+
+<style scoped>
+:deep(.is-adjusting-parent) {
+    border: dashed;
+}
+</style>
diff --git a/arches_references/arches_references/src/arches-references/components/tree/ListTreeControls.vue b/arches_references/arches_references/src/arches-references/components/tree/ListTreeControls.vue
new file mode 100644
index 0000000..b2da4c6
--- /dev/null
+++ b/arches_references/arches_references/src/arches-references/components/tree/ListTreeControls.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import ActionBanner from "@/controlled-lists/components/tree/ActionBanner.vue";
+import AddDeleteControls from "@/controlled-lists/components/tree/AddDeleteControls.vue";
+import PresentationControls from "@/controlled-lists/components/tree/PresentationControls.vue";
+
+import type { TreeExpandedKeys, TreeSelectionKeys } from "primevue/tree/Tree";
+import type { TreeNode } from "primevue/treenode";
+import type { NewControlledList } from "@/controlled-lists/types";
+
+const controlledListItemsTree = defineModel<TreeNode[]>({ required: true });
+const rerenderTree = defineModel<number>("rerenderTree", { required: true });
+const expandedKeys = defineModel<TreeExpandedKeys>("expandedKeys", {
+    required: true,
+});
+const selectedKeys = defineModel<TreeSelectionKeys>("selectedKeys", {
+    required: true,
+});
+const movingItem = defineModel<TreeNode>("movingItem");
+const isMultiSelecting = defineModel<boolean>("isMultiSelecting", {
+    required: true,
+});
+const nextNewList = defineModel<NewControlledList>("nextNewList");
+const newListFormValue = defineModel<string>("newListFormValue", {
+    required: true,
+});
+
+const expandAll = () => {
+    for (const node of controlledListItemsTree.value) {
+        expandNode(node);
+    }
+};
+
+const collapseAll = () => {
+    expandedKeys.value = {};
+};
+
+const expandNode = (node: TreeNode) => {
+    if (node.children && node.children.length) {
+        expandedKeys.value[node.key as string] = true;
+
+        for (const child of node.children) {
+            expandNode(child);
+        }
+    }
+};
+</script>
+
+<template>
+    <div class="controls">
+        <AddDeleteControls
+            v-model="controlledListItemsTree"
+            v-model:is-multi-selecting="isMultiSelecting"
+            v-model:selected-keys="selectedKeys"
+            v-model:next-new-list="nextNewList"
+            v-model:new-list-form-value="newListFormValue"
+        />
+    </div>
+    <ActionBanner
+        v-if="movingItem || isMultiSelecting"
+        v-model:is-multi-selecting="isMultiSelecting"
+        v-model:moving-item="movingItem"
+        v-model:rerender-tree="rerenderTree"
+        v-model:selected-keys="selectedKeys"
+    />
+    <div
+        v-else
+        class="controls"
+    >
+        <PresentationControls
+            :expand-all
+            :collapse-all
+        />
+    </div>
+</template>
+
+<style scoped>
+.controls {
+    display: flex;
+    background: #f3fbfd;
+    gap: 0.5rem;
+    font-size: small;
+    padding: 0.5rem;
+    justify-content: space-between;
+}
+</style>
diff --git a/arches_references/arches_references/src/arches-references/components/tree/MoveRow.vue b/arches_references/arches_references/src/arches-references/components/tree/MoveRow.vue
new file mode 100644
index 0000000..7624e59
--- /dev/null
+++ b/arches_references/arches_references/src/arches-references/components/tree/MoveRow.vue
@@ -0,0 +1,275 @@
+<script setup lang="ts">
+import { inject, ref, watch } from "vue";
+import { useGettext } from "vue3-gettext";
+
+import Button from "primevue/button";
+import { useToast } from "primevue/usetoast";
+
+import { patchList } from "@/controlled-lists/api.ts";
+import {
+    DEFAULT_ERROR_TOAST_LIFE,
+    ERROR,
+    PREF_LABEL,
+    displayedRowKey,
+    selectedLanguageKey,
+} from "@/controlled-lists/constants.ts";
+import {
+    findNodeInTree,
+    itemAsNode,
+    listAsNode,
+    nodeIsItem,
+    nodeIsList,
+    reorderItems,
+} from "@/controlled-lists/utils.ts";
+
+import type { Ref } from "vue";
+import type { TreeExpandedKeys, TreeSelectionKeys } from "primevue/tree/Tree";
+import type { TreeNode } from "primevue/treenode";
+import type { Language } from "@/arches/types";
+import type {
+    ControlledList,
+    ControlledListItem,
+    DisplayedListItemRefAndSetter,
+    MoveLabels,
+    NewControlledListItem,
+} from "@/controlled-lists/types";
+
+const toast = useToast();
+const { $gettext } = useGettext();
+
+const selectedLanguage = inject(selectedLanguageKey) as Ref<Language>;
+const { displayedRow, setDisplayedRow } = inject(
+    displayedRowKey,
+) as DisplayedListItemRefAndSetter;
+
+const { moveLabels, node } = defineProps<{
+    moveLabels: MoveLabels;
+    node: TreeNode;
+}>();
+
+const tree = defineModel<TreeNode[]>("tree", { required: true });
+const expandedKeys = defineModel<TreeExpandedKeys>("expandedKeys", {
+    required: true,
+});
+const selectedKeys = defineModel<TreeSelectionKeys>("selectedKeys", {
+    required: true,
+});
+const movingItem = defineModel<TreeNode>("movingItem", { required: true });
+const nextNewItem = defineModel<NewControlledListItem>("nextNewItem");
+const newLabelFormValue = defineModel<string>("newLabelFormValue", {
+    required: true,
+});
+const newLabelCounter = ref(1);
+const shouldRefocusUpArrow = ref(false);
+const shouldRefocusDownArrow = ref(false);
+
+watch(displayedRow, () => {
+    shouldRefocusUpArrow.value = false;
+    shouldRefocusDownArrow.value = false;
+});
+
+const isFirstItem = (item: ControlledListItem) => {
+    const siblings: TreeNode[] = item.parent_id
+        ? findNodeInTree(tree.value, item.parent_id).data.children
+        : findNodeInTree(tree.value, item.controlled_list_id).data.items;
+    if (!siblings) {
+        throw new Error();
+    }
+    return siblings[0].id === item.id;
+};
+
+const isLastItem = (item: ControlledListItem) => {
+    const siblings: TreeNode[] = item.parent_id
+        ? findNodeInTree(tree.value, item.parent_id).data.children
+        : findNodeInTree(tree.value, item.controlled_list_id).data.items;
+    if (!siblings) {
+        throw new Error();
+    }
+    return siblings[siblings.length - 1].id === item.id;
+};
+
+const setMovingItem = (node: TreeNode) => {
+    movingItem.value = findNodeInTree(
+        [itemAsNode(displayedRow.value, selectedLanguage.value)],
+        node.key,
+    );
+};
+
+const addItem = (parent: TreeNode) => {
+    const newItem: NewControlledListItem = {
+        parent_id: nodeIsItem(parent) ? parent.data.id : null,
+        id: newLabelCounter.value,
+        controlled_list_id: parent.data.controlled_list_id ?? parent.data.id,
+        uri: "",
+        sortorder: 0,
+        guide: false,
+        values: [
+            {
+                id: 0,
+                valuetype_id: PREF_LABEL,
+                language_id: selectedLanguage.value.code,
+                value: "",
+                list_item_id: newLabelCounter.value,
+            },
+        ],
+        images: [],
+        children: [],
+        depth: !parent.depth ? 0 : parent.depth + 1,
+    };
+
+    nextNewItem.value = newItem;
+    newLabelFormValue.value = "";
+    newLabelCounter.value += 1;
+
+    parent.children!.push(itemAsNode(newItem, selectedLanguage.value));
+
+    expandedKeys.value = {
+        ...expandedKeys.value,
+        [parent.key as string]: true,
+    };
+    selectedKeys.value = { [newItem.id]: true };
+    setDisplayedRow(newItem);
+};
+
+const reorder = async (item: ControlledListItem, up: boolean) => {
+    const list: ControlledList = findNodeInTree(
+        tree.value,
+        item.controlled_list_id,
+    ).data;
+
+    let siblings: ControlledListItem[];
+    if (item.parent_id) {
+        siblings = findNodeInTree(tree.value, item.parent_id).children.map(
+            (child: TreeNode) => child.data,
+        );
+    } else {
+        siblings = list.items;
+    }
+
+    reorderItems(list, item, siblings, up);
+    const field = "sortorder";
+
+    try {
+        await patchList(list, field);
+    } catch (error) {
+        toast.add({
+            severity: ERROR,
+            life: DEFAULT_ERROR_TOAST_LIFE,
+            summary: $gettext("Save failed"),
+            detail: error instanceof Error ? error.message : undefined,
+        });
+        return;
+    }
+    const oldListIndex = tree.value.findIndex(
+        (listNode) => listNode.data.id === list.id,
+    );
+    tree.value = [
+        ...tree.value.slice(0, oldListIndex),
+        listAsNode(list, selectedLanguage.value),
+        ...tree.value.slice(oldListIndex + 1),
+    ];
+    selectedKeys.value = {
+        ...selectedKeys.value,
+        [item.id]: true,
+    };
+
+    if (up) {
+        shouldRefocusUpArrow.value = true;
+        shouldRefocusDownArrow.value = false;
+    } else {
+        shouldRefocusUpArrow.value = false;
+        shouldRefocusDownArrow.value = true;
+    }
+};
+
+const vRefocusUpArrow = {
+    mounted: (el: HTMLButtonElement) => {
+        if (shouldRefocusUpArrow.value && el) {
+            // @ts-expect-error focusVisible not yet in typeshed
+            el.focus({ focusVisible: true });
+        }
+    },
+};
+const vRefocusDownArrow = {
+    mounted: (el: HTMLButtonElement) => {
+        if (shouldRefocusDownArrow.value && el) {
+            // @ts-expect-error focusVisible not yet in typeshed
+            el.focus({ focusVisible: true });
+        }
+    },
+};
+</script>
+
+<template>
+    <Button
+        v-if="selectedKeys && node.key in selectedKeys"
+        v-tooltip="moveLabels.addChild"
+        type="button"
+        raised
+        class="add-child-button"
+        icon="fa fa-plus"
+        :aria-label="moveLabels.addChild"
+        @click.stop="addItem(node)"
+    />
+    <span
+        v-if="!nodeIsList(node)"
+        class="move-buttons"
+    >
+        <Button
+            v-if="selectedKeys && node.key in selectedKeys"
+            v-refocus-up-arrow
+            v-tooltip="moveLabels.moveUp"
+            type="button"
+            raised
+            class="reorder-button"
+            icon="fa fa-caret-up"
+            :aria-label="moveLabels.moveUp"
+            :disabled="isFirstItem(node.data)"
+            @click="reorder(node.data, true)"
+        />
+        <Button
+            v-if="selectedKeys && node.key in selectedKeys"
+            v-refocus-down-arrow
+            v-tooltip="moveLabels.moveDown"
+            type="button"
+            raised
+            class="reorder-button"
+            icon="fa fa-caret-down"
+            :aria-label="moveLabels.moveDown"
+            :disabled="isLastItem(node.data)"
+            @click="reorder(node.data, false)"
+        />
+        <Button
+            v-if="!node.data.name && selectedKeys && node.key in selectedKeys"
+            v-tooltip="moveLabels.changeParent"
+            type="button"
+            raised
+            icon="fa fa-arrows-alt"
+            :aria-label="moveLabels.changeParent"
+            @click="setMovingItem(node)"
+        />
+    </span>
+</template>
+
+<style scoped>
+.p-button {
+    background-color: aliceblue;
+    color: black;
+    height: 2rem;
+}
+
+.add-child-button {
+    width: 2rem;
+    border-radius: 50%;
+}
+
+.move-buttons {
+    display: flex;
+    gap: 0.5rem;
+    padding-right: 0.5rem;
+}
+
+.move-button {
+    height: 2.5rem;
+}
+</style>
diff --git a/arches_references/arches_references/src/arches-references/components/tree/PresentationControls.vue b/arches_references/arches_references/src/arches-references/components/tree/PresentationControls.vue
new file mode 100644
index 0000000..daccc64
--- /dev/null
+++ b/arches_references/arches_references/src/arches-references/components/tree/PresentationControls.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import arches from "arches";
+import { inject } from "vue";
+import { useGettext } from "vue3-gettext";
+
+import Button from "primevue/button";
+import Dropdown from "primevue/dropdown";
+
+import { selectedLanguageKey } from "@/controlled-lists/constants.ts";
+
+import type { Ref } from "vue";
+import type { Language } from "@/arches/types";
+
+const { $gettext } = useGettext();
+
+const selectedLanguage = inject(selectedLanguageKey) as Ref<Language>;
+
+const { expandAll, collapseAll } = defineProps<{
+    expandAll: () => void;
+    collapseAll: () => void;
+}>();
+</script>
+
+<template>
+    <div style="text-align: center; display: flex; width: 100%">
+        <Button
+            class="secondary-button"
+            type="button"
+            icon="fa fa-plus"
+            :label="$gettext('Expand all')"
+            @click="expandAll"
+        />
+        <Button
+            class="secondary-button"
+            type="button"
+            icon="fa fa-minus"
+            :label="$gettext('Collapse all')"
+            @click="collapseAll"
+        />
+        <div style="display: flex; flex-grow: 1; justify-content: flex-end">
+            <span
+                id="languageSelectLabel"
+                style="align-self: center; margin-right: 0.25rem"
+            >
+                {{ $gettext("Show labels in:") }}
+            </span>
+            <Dropdown
+                v-model="selectedLanguage"
+                aria-labelledby="languageSelectLabel"
+                :options="arches.languages"
+                :option-label="(lang) => `${lang.name} (${lang.code})`"
+                :placeholder="$gettext('Language')"
+                :pt="{
+                    root: { class: 'p-button secondary-button' },
+                    input: {
+                        style: {
+                            fontFamily: 'inherit',
+                            fontSize: 'small',
+                            textAlign: 'center',
+                            alignContent: 'center',
+                        },
+                    },
+                    itemLabel: { style: { fontSize: 'small' } },
+                }"
+            />
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.secondary-button {
+    border: 0;
+    background: #f4f4f4;
+    height: 3rem;
+    margin: 0.5rem;
+    justify-content: center;
+    font-weight: 600;
+    text-wrap: nowrap;
+}
+</style>
diff --git a/arches_references/arches_references/src/arches-references/components/tree/TreeRow.vue b/arches_references/arches_references/src/arches-references/components/tree/TreeRow.vue
new file mode 100644
index 0000000..b7e26fa
--- /dev/null
+++ b/arches_references/arches_references/src/arches-references/components/tree/TreeRow.vue
@@ -0,0 +1,350 @@
+<script setup lang="ts">
+import { computed, inject, ref, watch } from "vue";
+import { useGettext } from "vue3-gettext";
+
+import Button from "primevue/button";
+import InputText from "primevue/inputtext";
+import ProgressSpinner from "primevue/progressspinner";
+import { useToast } from "primevue/usetoast";
+
+import {
+    createItem,
+    createList,
+    patchList,
+    upsertValue,
+} from "@/controlled-lists/api.ts";
+import {
+    DEFAULT_ERROR_TOAST_LIFE,
+    ERROR,
+    displayedRowKey,
+    selectedLanguageKey,
+} from "@/controlled-lists/constants.ts";
+import {
+    bestLabel,
+    findNodeInTree,
+    itemAsNode,
+    listAsNode,
+    nodeIsList,
+    reorderItems,
+} from "@/controlled-lists/utils.ts";
+import MoveRow from "@/controlled-lists/components/tree/MoveRow.vue";
+
+import type { Ref } from "vue";
+import type { TreeExpandedKeys, TreeSelectionKeys } from "primevue/tree/Tree";
+import type { TreeNode } from "primevue/treenode";
+import type { Language } from "@/arches/types";
+import type {
+    ControlledList,
+    ControlledListItem,
+    DisplayedListItemRefAndSetter,
+    MoveLabels,
+    NewControlledListItem,
+} from "@/controlled-lists/types";
+
+const toast = useToast();
+const { $gettext } = useGettext();
+
+const selectedLanguage = inject(selectedLanguageKey) as Ref<Language>;
+
+const tree = defineModel<TreeNode[]>("tree", { required: true });
+const expandedKeys = defineModel<TreeExpandedKeys>("expandedKeys", {
+    required: true,
+});
+const selectedKeys = defineModel<TreeSelectionKeys>("selectedKeys", {
+    required: true,
+});
+const movingItem = defineModel<TreeNode>("movingItem");
+const refetcher = defineModel<number>("refetcher", { required: true });
+const rerenderTree = defineModel<number>("rerenderTree", { required: true });
+const nextNewItem = defineModel<NewControlledListItem>("nextNewItem");
+const newLabelFormValue = defineModel<string>("newLabelFormValue", {
+    required: true,
+});
+const newListFormValue = defineModel<string>("newListFormValue", {
+    required: true,
+});
+const filterValue = defineModel<string>("filterValue", { required: true });
+
+const { isMultiSelecting, node, moveLabels } = defineProps<{
+    isMultiSelecting: boolean;
+    moveLabels: MoveLabels;
+    node: TreeNode;
+}>();
+const { setDisplayedRow } = inject(
+    displayedRowKey,
+) as DisplayedListItemRefAndSetter;
+
+const awaitingMove = ref(false);
+// Workaround for autofocusing the new list/label input boxes
+// https://github.com/primefaces/primevue/issues/2397
+const newListInputRef = ref();
+const newLabelInputRef = ref();
+watch(newLabelInputRef, () => {
+    if (newLabelInputRef.value) {
+        newLabelInputRef.value.$el.focus();
+    }
+});
+watch(newListInputRef, () => {
+    if (newListInputRef.value) {
+        newListInputRef.value.$el.focus();
+    }
+});
+
+const rowLabel = computed(() => {
+    if (!node.data) {
+        return "";
+    }
+    const unstyledLabel =
+        node.data.name ??
+        bestLabel(node.data, selectedLanguage.value.code).value;
+    if (!filterValue.value) {
+        return unstyledLabel;
+    }
+    const regex = new RegExp(`(${filterValue.value})`, "gi");
+    return unstyledLabel.replace(regex, "<b>$1</b>");
+});
+
+const showMoveHereButton = (rowId: string) => {
+    return (
+        movingItem.value &&
+        rowId in selectedKeys.value &&
+        rowId !== movingItem.value.key &&
+        rowId !== movingItem.value.data.parent_id &&
+        (movingItem.value.data.parent_id ||
+            rowId !== movingItem.value.data.controlled_list_id)
+    );
+};
+
+const setParent = async (parentNode: TreeNode) => {
+    awaitingMove.value = true;
+
+    if (!movingItem.value) {
+        throw new Error();
+    }
+    const item = movingItem.value.data;
+
+    let list: ControlledList;
+    let siblings: ControlledListItem[];
+    if (nodeIsList(parentNode)) {
+        item.parent_id = null;
+        item.controlled_list_id = parentNode.key;
+        list = parentNode.data;
+        siblings = list.items;
+        siblings.push(item);
+    } else {
+        item.parent_id = parentNode.key;
+        list = findNodeInTree(tree.value, item.controlled_list_id).data;
+        siblings = parentNode.data.children;
+        siblings.push(item);
+    }
+
+    reorderItems(list, item, siblings, false);
+
+    const field = "children";
+    try {
+        await patchList(list, field);
+    } catch (error) {
+        toast.add({
+            severity: ERROR,
+            life: DEFAULT_ERROR_TOAST_LIFE,
+            summary: $gettext("Save failed"),
+            detail: error instanceof Error ? error.message : undefined,
+        });
+        return;
+    }
+    awaitingMove.value = false;
+    // Clear custom classes added in <Tree> pass-through
+    rerenderTree.value += 1;
+    movingItem.value = undefined;
+    refetcher.value += 1;
+};
+
+const isNewList = (node: TreeNode) => {
+    return nodeIsList(node) && typeof node.data.id === "number";
+};
+
+const isNewItem = (node: TreeNode) => {
+    return !nodeIsList(node) && typeof node.data.id === "number";
+};
+
+const acceptNewItemShortcutEntry = async () => {
+    let newItem: ControlledListItem;
+    try {
+        newItem = await createItem({ ...nextNewItem.value, id: null });
+    } catch (error) {
+        toast.add({
+            severity: ERROR,
+            life: DEFAULT_ERROR_TOAST_LIFE,
+            summary: $gettext("Item creation failed"),
+            detail: error instanceof Error ? error.message : undefined,
+        });
+        return;
+    }
+    const newValue = {
+        ...nextNewItem.value!.values[0],
+        id: null,
+        list_item_id: newItem.id,
+        value: newLabelFormValue.value.trim(),
+    };
+    let newLabel;
+    try {
+        newLabel = await upsertValue(newValue);
+    } catch (error) {
+        toast.add({
+            severity: ERROR,
+            life: DEFAULT_ERROR_TOAST_LIFE,
+            summary: $gettext("Value save failed"),
+            detail: error instanceof Error ? error.message : undefined,
+        });
+        return;
+    }
+    if (newLabel) {
+        newItem.values = [newLabel];
+    }
+
+    const parent = findNodeInTree(
+        tree.value,
+        newItem.parent_id ?? newItem.controlled_list_id,
+    );
+    parent.children = [
+        ...parent.children.filter(
+            (child: TreeNode) => typeof child.key === "string",
+        ),
+        itemAsNode(newItem, selectedLanguage.value),
+    ];
+    if (nodeIsList(parent)) {
+        parent.data.items.push(newItem);
+    } else {
+        parent.data.children.push(newItem);
+    }
+
+    selectedKeys.value = { [newItem.id]: true };
+    setDisplayedRow(newItem);
+};
+
+const triggerAcceptNewItemShortcut = () => {
+    if (newLabelFormValue.value.trim()) {
+        newLabelInputRef.value.$el.blur();
+    }
+};
+
+const triggerAcceptNewListShortcut = () => {
+    if (newListFormValue.value.trim()) {
+        newListInputRef.value.$el.blur();
+    }
+};
+
+const acceptNewListShortcutEntry = async () => {
+    let newList;
+    try {
+        newList = await createList(newListFormValue.value.trim());
+    } catch (error) {
+        toast.add({
+            severity: ERROR,
+            life: DEFAULT_ERROR_TOAST_LIFE,
+            summary: $gettext("List creation failed"),
+            detail: error instanceof Error ? error.message : undefined,
+        });
+        return;
+    }
+    tree.value = [
+        ...tree.value.filter((cList) => typeof cList.data.id === "string"),
+        listAsNode(newList),
+    ];
+    selectedKeys.value = { [newList.id]: true };
+    setDisplayedRow(newList);
+};
+</script>
+
+<template>
+    <span
+        v-if="node.key"
+        style="display: inline-flex; width: 100%; align-items: center"
+    >
+        <div v-if="isNewItem(node)">
+            <InputText
+                ref="newLabelInputRef"
+                v-model="newLabelFormValue"
+                autofocus
+                @blur="acceptNewItemShortcutEntry"
+                @keyup.enter="triggerAcceptNewItemShortcut"
+            />
+        </div>
+        <div v-else-if="isNewList(node)">
+            <InputText
+                ref="newListInputRef"
+                v-model="newListFormValue"
+                autofocus
+                @blur="acceptNewListShortcutEntry"
+                @keyup.enter="triggerAcceptNewListShortcut"
+            />
+        </div>
+        <!-- eslint-disable vue/no-v-html -->
+        <span
+            v-else
+            v-html="rowLabel"
+        />
+        <!-- eslint-enable vue/no-v-html -->
+        <div
+            v-if="movingItem"
+            class="actions"
+        >
+            <ProgressSpinner
+                v-if="awaitingMove"
+                style="height: 2rem"
+            />
+            <!-- turn off escaping: vue template sanitizes -->
+            <Button
+                v-else-if="showMoveHereButton(node.key)"
+                type="button"
+                raised
+                class="move-button"
+                :label="
+                    $gettext(
+                        'Move %{item} here',
+                        {
+                            item: bestLabel(
+                                movingItem.data,
+                                selectedLanguage.code,
+                            ).value,
+                        },
+                        true,
+                    )
+                "
+                @click="setParent(node)"
+            />
+        </div>
+        <div
+            v-else-if="!isNewList(node) && !isNewItem(node)"
+            class="actions"
+        >
+            <MoveRow
+                v-if="!isMultiSelecting"
+                v-model:tree="tree"
+                v-model:expanded-keys="expandedKeys"
+                v-model:selected-keys="selectedKeys"
+                v-model:moving-item="movingItem"
+                v-model:next-new-item="nextNewItem"
+                v-model:new-label-form-value="newLabelFormValue"
+                :node
+                :move-labels
+            />
+        </div>
+    </span>
+</template>
+
+<style scoped>
+.actions {
+    display: inline-flex;
+    gap: 1rem;
+    margin-left: 1rem;
+    width: 100%;
+    justify-content: space-between;
+}
+
+.p-button {
+    background-color: aliceblue;
+    color: black;
+    height: 2.5rem;
+}
+</style>
diff --git a/arches_references/arches_references/src/arches-references/constants.ts b/arches_references/arches_references/src/arches-references/constants.ts
new file mode 100644
index 0000000..5be3902
--- /dev/null
+++ b/arches_references/arches_references/src/arches-references/constants.ts
@@ -0,0 +1,39 @@
+import type { InjectionKey } from "vue";
+import type { Language } from "@/arches/types";
+import type {
+    ControlledList,
+    ControlledListItem,
+} from "@/controlled-lists/types";
+
+export const displayedRowKey = Symbol() as InjectionKey<ControlledList | null>;
+export const itemKey = Symbol() as InjectionKey<ControlledListItem | null>;
+export const selectedLanguageKey = Symbol() as InjectionKey<Language | null>;
+
+// Constants
+export const PREF_LABEL = "prefLabel";
+export const ALT_LABEL = "altLabel";
+export const NOTE = "note";
+export const URI = "URI";
+export const ERROR = "error";
+export const DANGER = "danger";
+export const SUCCESS = "success";
+export const DEFAULT_ERROR_TOAST_LIFE = 8000;
+
+// Django model choices
+export const METADATA_CHOICES = {
+    title: "title",
+    alternativeText: "alt",
+    description: "desc",
+    attribution: "attr",
+};
+
+export const NOTE_CHOICES = {
+    scope: "scopeNote",
+    definition: "definition",
+    example: "example",
+    history: "historyNote",
+    editorial: "editorialNote",
+    change: "changeNote",
+    note: "note",
+    description: "description",
+};
diff --git a/arches_references/arches_references/src/arches-references/types.ts b/arches_references/arches_references/src/arches-references/types.ts
new file mode 100644
index 0000000..150301f
--- /dev/null
+++ b/arches_references/arches_references/src/arches-references/types.ts
@@ -0,0 +1,145 @@
+import type { Ref } from "vue";
+
+export interface Value {
+    id: string;
+    valuetype_id: string;
+    language_id: string;
+    value: string;
+    list_item_id: string;
+}
+
+export interface NewValue {
+    id: number;
+    valuetype_id: string;
+    language_id: string;
+    value: string;
+    list_item_id: string | number;
+}
+
+export type NewOrExistingValue = Value | NewValue;
+export type ValueCategory = string;
+export type ValueType = string;
+
+export interface ControlledListItemImageMetadata {
+    id: string;
+    controlled_list_item_image_id: string;
+    language_id: string;
+    metadata_type: string;
+    metadata_label: string;
+    value: string;
+}
+
+export interface NewControlledListItemImageMetadata {
+    id: number;
+    controlled_list_item_image_id: string;
+    language_id: string;
+    metadata_type: string;
+    metadata_label: string;
+    value: string;
+}
+
+export type NewOrExistingControlledListItemImageMetadata =
+    | ControlledListItemImageMetadata
+    | NewControlledListItemImageMetadata;
+
+export interface LabeledChoice {
+    type: string;
+    label: string;
+}
+
+export interface ControlledListItemImage {
+    id: string;
+    list_item_id: string;
+    url: string;
+    metadata: NewOrExistingControlledListItemImageMetadata[];
+}
+
+export interface ControlledListItem {
+    id: string;
+    controlled_list_id: string;
+    uri: string;
+    sortorder: number;
+    guide: boolean;
+    values: NewOrExistingValue[];
+    images: ControlledListItemImage[];
+    children: ControlledListItem[];
+    parent_id: string | null;
+    depth: number;
+}
+
+export interface NewControlledListItem {
+    id: number;
+    controlled_list_id: string;
+    uri: string;
+    sortorder: number;
+    guide: boolean;
+    values: NewOrExistingValue[];
+    images: ControlledListItemImage[];
+    children: ControlledListItem[];
+    parent_id: string | null;
+    depth: number;
+}
+
+export interface ControlledList {
+    id: string;
+    name: string;
+    dynamic: boolean;
+    search_only: boolean;
+    items: ControlledListItem[];
+    nodes: ReferencingNode[];
+}
+
+export interface NewControlledList {
+    id: number;
+    name: string;
+    dynamic: boolean;
+    search_only: boolean;
+    items: ControlledListItem[];
+    nodes: ReferencingNode[];
+}
+
+export type Selectable =
+    | ControlledList
+    | ControlledListItem
+    | NewControlledList
+    | NewControlledListItem;
+
+export interface ReferencingNode {
+    id: string;
+    name: string;
+    nodegroup_id: string;
+    graph_id: string;
+    graph_name: string;
+}
+
+export interface MoveLabels {
+    addChild: string;
+    moveUp: string;
+    moveDown: string;
+    changeParent: string;
+}
+
+// Prop injection types
+export interface DisplayedRowRefAndSetter {
+    displayedRow: Ref<Selectable | null>;
+    setDisplayedRow: (val: Selectable | null) => void;
+}
+
+export interface DisplayedListRefAndSetter {
+    displayedRow: Ref<ControlledList | null>;
+    setDisplayedRow: (val: Selectable | null) => void;
+}
+
+export interface DisplayedListItemRefAndSetter {
+    displayedRow: Ref<ControlledListItem | null>;
+    setDisplayedRow: (val: Selectable | null) => void;
+}
+
+// From PrimeVue, not importable directly
+export interface FileContentProps {
+    files: [];
+    badgeSeverity: string;
+    badgeValue: string;
+    previewWidth: number;
+    templates: null;
+}
diff --git a/arches_references/arches_references/src/arches-references/utils.ts b/arches_references/arches_references/src/arches-references/utils.ts
new file mode 100644
index 0000000..dd00db4
--- /dev/null
+++ b/arches_references/arches_references/src/arches-references/utils.ts
@@ -0,0 +1,229 @@
+import arches from "arches";
+
+import type { TreeNode } from "primevue/treenode";
+import type { Language } from "@/arches/types";
+import type {
+    ControlledList,
+    ControlledListItem,
+    Selectable,
+} from "@/controlled-lists/types";
+
+// Duck-typing helpers
+export const dataIsList = (data: Selectable) => {
+    return (data as ControlledList).search_only !== undefined;
+};
+export const dataIsItem = (data: Selectable) => {
+    return !dataIsList(data);
+};
+export const nodeIsItem = (node: TreeNode) => {
+    return !nodeIsList(node);
+};
+export const nodeIsList = (node: TreeNode) => {
+    return dataIsList(node.data);
+};
+
+export const bestLabel = (item: ControlledListItem, languageCode: string) => {
+    const valuesInLang = item.values.filter(
+        (value) => value.language_id === languageCode,
+    );
+    const bestLabel =
+        valuesInLang.find((value) => value.valuetype_id === "prefLabel") ??
+        valuesInLang.find((value) => value.valuetype_id === "altLabel") ??
+        item.values.find((value) => value.valuetype_id === "prefLabel");
+    if (!bestLabel) {
+        throw new Error();
+    }
+    return bestLabel;
+};
+
+export const languageNameFromCode = (code: string) => {
+    return arches.languages.find((lang: Language) => lang.code === code).name;
+};
+
+export const findNodeInTree = (tree: TreeNode[], itemId: string) => {
+    function recurse(items: TreeNode[]): TreeNode | undefined {
+        for (const item of items) {
+            if (item.data.id === itemId) {
+                return item;
+            }
+            for (const child of item.items ?? item.children) {
+                const maybeFound = recurse([child]);
+                if (maybeFound) {
+                    return maybeFound;
+                }
+            }
+        }
+    }
+
+    return recurse(tree);
+};
+
+export const itemAsNode = (
+    item: ControlledListItem,
+    selectedLanguage: Language,
+): TreeNode => {
+    return {
+        key: item.id,
+        children: item.children.map((child) =>
+            itemAsNode(child, selectedLanguage),
+        ),
+        data: item,
+    };
+};
+
+export const listAsNode = (
+    list: ControlledList,
+    selectedLanguage: Language,
+): TreeNode => {
+    return {
+        key: list.id,
+        children: list.items.map((item: ControlledListItem) =>
+            itemAsNode(item, selectedLanguage),
+        ),
+        data: list,
+    };
+};
+
+export const makeParentMap = (list: ControlledList) => {
+    const map = {};
+
+    const stripAllButParentRecursive = (
+        items: ControlledListItem[],
+        acc: { [key: string]: string | null },
+    ) => {
+        for (const item of items) {
+            acc[item.id] = item.parent_id;
+            stripAllButParentRecursive(item.children, acc);
+        }
+    };
+
+    stripAllButParentRecursive(list.items, map);
+    return map;
+};
+
+export const makeSortOrderMap = (list: ControlledList) => {
+    const map = {};
+
+    const stripAllButSortOrderRecursive = (
+        items: ControlledListItem[],
+        acc: { [key: string]: number },
+    ) => {
+        for (const item of items) {
+            acc[item.id] = item.sortorder;
+            stripAllButSortOrderRecursive(item.children, acc);
+        }
+    };
+
+    stripAllButSortOrderRecursive(list.items, map);
+    return map;
+};
+
+export const reorderItems = (
+    list: ControlledList,
+    item: ControlledListItem,
+    siblings: ControlledListItem[],
+    up: boolean,
+) => {
+    /* This isn't child's play because sort order is "flat", whereas
+    reordering involves moving hierarchy subsets.
+
+    With this tree:
+        1
+        |- 2
+        |- 3
+        4
+        5
+
+    Moving the first item "down" one should result in:
+        1
+        2
+        |- 3
+        |- 4
+        5
+
+        (1 -> 4)
+        (2 -> 1)
+        (3 -> 2)
+        (4 -> 3)
+        (5 -> 5)
+
+    We're going to accomplish this by reordering the moved item among
+    its immediate siblings, and then recalculating sort order through the
+    entire list. The python view will just care that the sortorder
+    value is correct, not that the items actually present in that order
+    in the JSON data, but we're still going to reorder the JSON so we can
+    use it to update client state if the server returns an empty success msg.
+    */
+
+    const indexInSiblings = siblings.indexOf(item);
+    const itemsToLeft = siblings.slice(0, indexInSiblings);
+    const itemsToRight = siblings.slice(indexInSiblings + 1);
+
+    let reorderedSiblings: ControlledListItem[];
+    let patchSiblings = true;
+    if (up) {
+        const leftNeighbor = itemsToLeft.pop();
+        if (!leftNeighbor) {
+            // Cannot shift upward - already at top
+            throw new Error();
+        }
+        reorderedSiblings = [
+            ...itemsToLeft,
+            item,
+            leftNeighbor,
+            ...itemsToRight,
+        ];
+    } else {
+        const [rightNeighbor, ...rest] = itemsToRight;
+        if (!rightNeighbor) {
+            // Already at bottom. Might end up here from a "move" operation
+            // that added the new item to the end.
+            reorderedSiblings = [...itemsToLeft, item];
+            patchSiblings = false;
+        } else {
+            reorderedSiblings = [...itemsToLeft, rightNeighbor, item, ...rest];
+        }
+    }
+
+    let acc = 0;
+    const recalculateSortOrderRecursive = (
+        parent: Selectable,
+        items: ControlledListItem[],
+    ) => {
+        // Patch in the reordered siblings.
+        if (
+            patchSiblings &&
+            items.some((itemCandidate) => itemCandidate.id === item.id)
+        ) {
+            if ((parent as ControlledList).items) {
+                (parent as ControlledList).items = reorderedSiblings;
+            } else {
+                (parent as ControlledListItem).children = reorderedSiblings;
+            }
+            items = reorderedSiblings;
+        }
+        for (const thisItem of items) {
+            thisItem.sortorder = acc;
+            acc += 1;
+            recalculateSortOrderRecursive(thisItem, thisItem.children);
+        }
+    };
+
+    recalculateSortOrderRecursive(list, list.items);
+};
+
+export const vFocus = {
+    /*
+    The editor (pencil) button from the DataTable hogs focus with a
+    setTimeout of 1, so we'll queue behind it to set focus to the input.
+    This should be reported/clarified with PrimeVue with a MWE.
+    */
+    mounted: (el: HTMLInputElement) => {
+        // @ts-expect-error focusVisible not yet in typeshed
+        setTimeout(() => el && el.focus({ focusVisible: true }), 5);
+    },
+    updated: (el: HTMLInputElement) => {
+        // @ts-expect-error focusVisible not yet in typeshed
+        setTimeout(() => el && el.focus({ focusVisible: true }), 5);
+    },
+};
diff --git a/arches_references/arches_references/src/arches/plugins/ControlledListManager.vue b/arches_references/arches_references/src/arches/plugins/ControlledListManager.vue
new file mode 100644
index 0000000..a01a43e
--- /dev/null
+++ b/arches_references/arches_references/src/arches/plugins/ControlledListManager.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import Toast from "primevue/toast";
+
+import ControlledListsMain from "@/controlled-lists/components/ControlledListsMain.vue";
+</script>
+
+<template>
+    <!-- Subtract size of arches toolbars -->
+    <div style="width: calc(100vw - 50px); height: calc(100vh - 50px)">
+        <div style="height: 100%">
+            <ControlledListsMain />
+        </div>
+    </div>
+    <Toast />
+</template>
+
+<!-- Not scoped: workaround for lack of font-family in <body> -->
+<style>
+div {
+    font-family: "Open Sans";
+}
+</style>
\ No newline at end of file
diff --git a/arches_references/arches_references/src/arches/theme.ts b/arches_references/arches_references/src/arches/theme.ts
new file mode 100644
index 0000000..55d76dc
--- /dev/null
+++ b/arches_references/arches_references/src/arches/theme.ts
@@ -0,0 +1,5 @@
+// Temporary place to stash theme constants until PrimeVue 4
+// https://github.com/archesproject/arches/issues/11050
+
+export const ARCHES_CHROME_BLUE = "#2d3c4b";
+export const LIGHT_GRAY = "#f4f4f4";
\ No newline at end of file
diff --git a/arches_references/arches_references/templates/views/components/datatypes/reference.htm b/arches_references/arches_references/templates/views/components/datatypes/reference.htm
new file mode 100644
index 0000000..e87c64d
--- /dev/null
+++ b/arches_references/arches_references/templates/views/components/datatypes/reference.htm
@@ -0,0 +1,41 @@
+{% load i18n %}
+{% load template_tags %}
+
+<!-- ko ifnot: $data.search -->
+<div class="node-config-item">
+    <div class="col-xs-12 control-label widget-input-label">
+        <span data-bind="text: $root.translations.controlledList"></span>
+    </div>
+    <!-- ko if: $data.controlledLists() -->
+        <select 
+            data-bind="
+                options: $data.controlledLists, 
+                optionsText: 'name', 
+                optionsValue: 'id', 
+                select2Query: {
+                    select2Config:{
+                        disable: false,
+                        value: $data.controlledList,
+                        allowClear: true,
+                        placeholder: $root.translations.selectAControlledList, 
+                }},
+                attr: {'data-label': $root.translations.controlledList}
+            "
+        ></select>
+        <div style="padding-top: 12px"
+            data-bind="
+                component: {
+                    name: 'views/components/simple-switch',
+                    params: {
+                        value: $data.multiValue,
+                        config:{
+                            label: $root.translations.multipleValues,
+                            subtitle: $root.translations.allowSelectionOfMultipleItems
+                        }
+                    }
+                }
+            "
+        ></div>
+    <!-- /ko -->
+</div>
+<!-- /ko -->
diff --git a/arches_references/arches_references/templates/views/components/plugins/controlled-list-manager.htm b/arches_references/arches_references/templates/views/components/plugins/controlled-list-manager.htm
new file mode 100644
index 0000000..c507e66
--- /dev/null
+++ b/arches_references/arches_references/templates/views/components/plugins/controlled-list-manager.htm
@@ -0,0 +1 @@
+<div id="controlled-list-manager-mounting-point"></div>
diff --git a/arches_references/arches_references/templates/views/components/widgets/reference-select.htm b/arches_references/arches_references/templates/views/components/widgets/reference-select.htm
new file mode 100644
index 0000000..dfa9263
--- /dev/null
+++ b/arches_references/arches_references/templates/views/components/widgets/reference-select.htm
@@ -0,0 +1,58 @@
+{% extends "views/components/widgets/base.htm" %}
+{% load i18n %}
+
+{% block form %}
+<div class="row widget-wrapper" data-bind="class: nodeCssClasses">
+    <div class="form-group">
+        <span class="control-label widget-input-label" data-bind="text:label, class: nodeCssClasses"></span>
+        <!-- ko if: node -->
+        <i data-bind="
+            css: {'ion-asterisk widget-label-required': node.isrequired},
+            attr: {'aria-label': $root.translations.required}        
+        "></i>
+        <!-- /ko -->
+        <div class="col-xs-12 resource-instance-wrapper" data-bind="class: nodeCssClasses">
+            <select style="display:inline-block;"
+                data-bind="
+                    disable: false,
+                    select2Query: {
+                        select2Config: select2Config
+                    },
+                    attr: {'data-label': label, 'aria-label': label}
+                ">
+        </div>
+    </div>
+</div>
+{% endblock form %}
+
+{% block config_form %}
+<div>
+    <div class="control-label">
+        <span data-bind="text: $root.translations.placeholder"></span>
+    </div>
+    <div class="col-xs-12 pad-no crud-widget-container">
+        <input
+            class="form-control input-md widget-input"
+            data-bind="
+                attr: {placeholder: $root.translations.placeholder, 'aria-label': $root.translations.placeholder},
+                value: placeholder,
+                valueUpdate: 'keyup'
+            "
+        >
+    </div>
+</div>
+{% endblock config_form %}
+
+{% block report %}
+<dt data-bind="text: label, class: nodeCssClasses"></dt>
+<!-- ko foreach: value -->
+    <dd data-bind="class: $parent.nodeCssClasses">
+        <a data-bind="attr:{'href': uri, 'target': '_blank'}, text: $parent.getPrefLabel(labels), style: {'color': 'steelblue'}"></a>
+    </dd>
+<!-- /ko -->
+<!-- ko ifnot: value() -->
+<dd data-bind="class: nodeCssClasses">
+    <span data-bind="text: $root.translations.none"></span>
+</dd>
+<!-- /ko -->
+{% endblock report %}