From 93fa05d04a0be78f7f31cad9f4bc92474d76286a Mon Sep 17 00:00:00 2001
From: Rias <hey@rias.be>
Date: Thu, 21 May 2026 17:27:42 +0200
Subject: [PATCH 1/4] Implement image transform create/edit in Inertia

---
 .../craftcms-cp/src/styles/form.styles.ts     |   4 +
 resources/js/components/form/ColorInput.vue   | 190 ++++++++
 .../transforms/EditImageTransformPage.vue     | 452 ++++++++++++++++++
 .../transforms/ImageTransformsIndexPage.vue}  |  45 +-
 .../pages/settings/assets/transforms/types.ts |  23 +
 resources/public/images/transforms/crop.svg   |  35 ++
 resources/public/images/transforms/fit.svg    |  35 ++
 .../public/images/transforms/letterbox.svg    |  36 ++
 .../public/images/transforms/stretch.svg      |  37 ++
 .../Settings/ImageTransformsController.php    | 184 ++++---
 .../Settings/VolumesController.php            |   5 +-
 src/Image/Data/ImageTransform.php             |   3 +-
 src/View/LegacyAssets/EditTransformAsset.php  |  26 -
 .../ImageTransformsControllerTest.php         |  54 ++-
 tests/Feature/Integration/PagesTest.php       |   2 +-
 .../edittransform/EditTransformAsset.php      |  15 +-
 16 files changed, 1022 insertions(+), 124 deletions(-)
 create mode 100644 resources/js/components/form/ColorInput.vue
 create mode 100644 resources/js/pages/settings/assets/transforms/EditImageTransformPage.vue
 rename resources/js/pages/{SettingsImageTransformsIndexPage.vue => settings/assets/transforms/ImageTransformsIndexPage.vue} (81%)
 create mode 100644 resources/js/pages/settings/assets/transforms/types.ts
 create mode 100644 resources/public/images/transforms/crop.svg
 create mode 100644 resources/public/images/transforms/fit.svg
 create mode 100644 resources/public/images/transforms/letterbox.svg
 create mode 100644 resources/public/images/transforms/stretch.svg
 delete mode 100644 src/View/LegacyAssets/EditTransformAsset.php

diff --git a/packages/craftcms-cp/src/styles/form.styles.ts b/packages/craftcms-cp/src/styles/form.styles.ts
index a328d52b580..03feebe72ac 100644
--- a/packages/craftcms-cp/src/styles/form.styles.ts
+++ b/packages/craftcms-cp/src/styles/form.styles.ts
@@ -92,4 +92,8 @@ export const inputStyles = css`
   :host([center]) ::slotted([slot='input']) {
     text-align: center;
   }
+
+  ::slotted([slot='input']) {
+    width: 100%;
+  }
 `;
diff --git a/resources/js/components/form/ColorInput.vue b/resources/js/components/form/ColorInput.vue
new file mode 100644
index 00000000000..cdad2b8d1c7
--- /dev/null
+++ b/resources/js/components/form/ColorInput.vue
@@ -0,0 +1,190 @@
+<script setup lang="ts">
+  import CraftInput from '@craftcms/cp/vue/CraftInput.vue';
+  import {t} from '@craftcms/cp';
+  import {computed} from 'vue';
+
+  const model = defineModel<string | null>({default: ''});
+
+  defineProps<{
+    id: string;
+    name?: string;
+    label?: string;
+    disabled?: boolean;
+    error?: string;
+  }>();
+
+  const textValue = computed({
+    get() {
+      return (model.value ?? '').replace(/^#/, '');
+    },
+    set(value: string) {
+      model.value = value.trim().replace(/^#/, '');
+    },
+  });
+
+  const expandedHexValue = computed(() => {
+    const value = textValue.value;
+
+    if (/^[0-9a-fA-F]{3}$/.test(value)) {
+      return value
+        .split('')
+        .map((character) => character + character)
+        .join('');
+    }
+
+    if (/^[0-9a-fA-F]{6}$/.test(value)) {
+      return value;
+    }
+
+    return null;
+  });
+
+  const colorValue = computed({
+    get() {
+      return expandedHexValue.value ? `#${expandedHexValue.value}` : '#ffffff';
+    },
+    set(value: string) {
+      model.value = value.replace(/^#/, '');
+    },
+  });
+
+  const swatchStyle = computed(() => {
+    return expandedHexValue.value
+      ? {backgroundColor: `#${expandedHexValue.value}`}
+      : {};
+  });
+</script>
+
+<template>
+  <div class="color-field">
+    <label v-if="label" class="color-field__label" :for="id">
+      {{ label }}
+    </label>
+
+    <div class="color-field__control">
+      <label
+        class="color-field__swatch"
+        :class="{'color-field__swatch--disabled': disabled}"
+      >
+        <span class="color-field__preview" :style="swatchStyle"></span>
+        <input
+          v-model="colorValue"
+          :disabled="disabled"
+          class="color-field__picker"
+          type="color"
+          :aria-label="t('Choose a color')"
+        />
+      </label>
+
+      <CraftInput
+        :id="id"
+        v-model="textValue"
+        :name="name"
+        :label="label ?? t('Color hex value')"
+        :disabled="disabled"
+        :error="error"
+        class="color-field__input"
+        spellcheck="false"
+        autocorrect="off"
+        autocapitalize="off"
+        inputmode="text"
+        label-sr-only
+      >
+        <span slot="prefix" class="color-field__prefix" aria-hidden="true"
+          >#</span
+        >
+      </CraftInput>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+  .color-field {
+    display: grid;
+    gap: var(--c-spacing-xs);
+  }
+
+  .color-field__label {
+    font-weight: var(--font-weight-bold);
+  }
+
+  .color-field__control {
+    display: flex;
+    align-items: center;
+    gap: var(--c-spacing-sm);
+  }
+
+  .color-field__swatch {
+    position: relative;
+    display: block;
+    inline-size: var(--c-form-control-height);
+    block-size: var(--c-form-control-height);
+    border-radius: 50%;
+    overflow: hidden;
+    background:
+      linear-gradient(
+        45deg,
+        var(--c-color-neutral-fill-quiet) 25%,
+        transparent 25%
+      ),
+      linear-gradient(
+        -45deg,
+        var(--c-color-neutral-fill-quiet) 25%,
+        transparent 25%
+      ),
+      linear-gradient(
+        45deg,
+        transparent 75%,
+        var(--c-color-neutral-fill-quiet) 75%
+      ),
+      linear-gradient(
+        -45deg,
+        transparent 75%,
+        var(--c-color-neutral-fill-quiet) 75%
+      );
+    background-position:
+      0 0,
+      0 0.375rem,
+      0.375rem -0.375rem,
+      -0.375rem 0;
+    background-size: 0.75rem 0.75rem;
+  }
+
+  .color-field__swatch:not(.color-field__swatch--disabled) input {
+    cursor: pointer;
+  }
+
+  .color-field__swatch:focus-within {
+    box-shadow: 0 0 0 2px var(--c-color-accent-border-normal);
+  }
+
+  .color-field__preview {
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 15%);
+  }
+
+  .color-field__picker {
+    position: absolute;
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    border: 0;
+    margin: 0;
+    padding: 0;
+    opacity: 0;
+  }
+
+  .color-field__prefix {
+    color: var(--c-text-quiet);
+    user-select: none;
+    font-family: var(--c-font-mono);
+  }
+
+  .color-field__input {
+    flex: 0 0 7.25rem;
+    inline-size: 7.25rem;
+    font-family: var(--c-font-mono);
+  }
+</style>
diff --git a/resources/js/pages/settings/assets/transforms/EditImageTransformPage.vue b/resources/js/pages/settings/assets/transforms/EditImageTransformPage.vue
new file mode 100644
index 00000000000..067d5815eab
--- /dev/null
+++ b/resources/js/pages/settings/assets/transforms/EditImageTransformPage.vue
@@ -0,0 +1,452 @@
+<script setup lang="ts">
+  import ColorInput from '@/components/form/ColorInput.vue';
+  import Pane from '@/components/Pane.vue';
+  import {useInputGenerator} from '@/composables/useInputGenerator';
+  import useCraftData from '@/composables/useCraftData';
+  import {useSettingsSave} from '@/composables/useSettingsSave';
+  import AppLayout from '@/layout/AppLayout.vue';
+  import {save as saveTransform} from '@actions/Settings/ImageTransformsController';
+  import {t, toHandle} from '@craftcms/cp';
+  import CraftInput from '@craftcms/cp/vue/CraftInput.vue';
+  import CraftInputHandle from '@craftcms/cp/vue/CraftInputHandle.vue';
+  import CraftSelect from '@craftcms/cp/vue/CraftSelect.vue';
+  import CraftSwitch from '@craftcms/cp/vue/CraftSwitch.vue';
+  import {useForm} from '@inertiajs/vue3';
+  import type {BaseOption} from '@/types';
+  import {computed, ref, watch} from 'vue';
+  import cropImageUrl from '/images/transforms/crop.svg';
+  import fitImageUrl from '/images/transforms/fit.svg';
+  import letterboxImageUrl from '/images/transforms/letterbox.svg';
+  import stretchImageUrl from '/images/transforms/stretch.svg';
+  import type {ImageTransform} from '@/pages/settings/assets/transforms/types';
+
+  interface QualityOption extends Omit<BaseOption, 'value'> {
+    value: number;
+  }
+
+  const props = defineProps<{
+    transform: ImageTransform;
+    modeOptions: Array<BaseOption>;
+    positionOptions: Array<BaseOption>;
+    interlaceOptions: Array<BaseOption>;
+    formatOptions: Array<BaseOption>;
+    qualityOptions: Array<QualityOption>;
+  }>();
+
+  const {readOnly} = useCraftData();
+
+  const form = useForm({
+    transformId: props.transform.id,
+    name: props.transform.name ?? '',
+    handle: props.transform.handle ?? '',
+    width: props.transform.width ?? '',
+    height: props.transform.height ?? '',
+    mode: props.transform.mode,
+    position: props.transform.position,
+    quality: props.transform.quality ?? '',
+    interlace: props.transform.interlace,
+    format: props.transform.format ?? '',
+    fill:
+      props.transform.fill && props.transform.fill !== 'transparent'
+        ? props.transform.fill.replace(/^#/, '')
+        : '',
+    upscale: props.transform.upscale,
+  });
+
+  const modeImageUrls: Record<string, string> = {
+    crop: cropImageUrl,
+    fit: fitImageUrl,
+    letterbox: letterboxImageUrl,
+    stretch: stretchImageUrl,
+  };
+
+  const modeOptions = computed(() =>
+    props.modeOptions.map((option) => ({
+      ...option,
+      imageUrl: modeImageUrls[option.value],
+    }))
+  );
+
+  const positionLabel = computed(() =>
+    form.mode === 'letterbox' ? t('Image Position') : t('Default Focal Point')
+  );
+
+  const shouldShowFillColor = computed(() => form.mode === 'letterbox');
+  const shouldShowPosition = computed(
+    () => form.mode === 'crop' || form.mode === 'letterbox'
+  );
+
+  function matchingQualityOptionValue(quality: string | number | null): string {
+    const numericQuality = Number(quality);
+
+    if (!numericQuality) {
+      return '0';
+    }
+
+    const matchedValue = props.qualityOptions.reduce((matchedValue, option) => {
+      return numericQuality >= option.value ? option.value : matchedValue;
+    }, 10);
+
+    return String(matchedValue);
+  }
+
+  const qualityPickerValue = ref(matchingQualityOptionValue(form.quality));
+
+  watch(
+    () => form.quality,
+    (quality) => {
+      qualityPickerValue.value = matchingQualityOptionValue(quality);
+    }
+  );
+
+  function updateQualityFromPicker(value: string | number | undefined) {
+    const numericValue = Number(value);
+    qualityPickerValue.value = String(value);
+    form.quality = numericValue ? String(numericValue) : '';
+  }
+
+  const handleGenerator = useInputGenerator(
+    () => form.name,
+    (value) => (form.handle = toHandle(value))
+  );
+
+  if (props.transform.id) {
+    handleGenerator.stop();
+  }
+
+  const {save} = useSettingsSave(form, saveTransform);
+</script>
+
+<template>
+  <AppLayout :form="form" @save="save">
+    <Pane appearance="raised">
+      <div class="grid gap-3">
+        <CraftInput
+          :label="t('Name')"
+          id="name"
+          name="name"
+          v-model="form.name"
+          :error="form.errors.name"
+          :disabled="readOnly"
+          required
+          autofocus
+        />
+
+        <CraftInputHandle
+          :label="t('Handle')"
+          id="handle"
+          name="handle"
+          v-model="form.handle"
+          :error="form.errors.handle"
+          :disabled="readOnly"
+          required
+          @change="handleGenerator.markDirty()"
+        />
+
+        <div class="field">
+          <div class="heading">
+            <label id="mode-label">{{ t('Mode') }}</label>
+          </div>
+
+          <div
+            class="mode-options"
+            role="radiogroup"
+            aria-labelledby="mode-label"
+          >
+            <label
+              v-for="option in modeOptions"
+              :key="option.value"
+              class="mode-option"
+              :class="{'mode-option--selected': form.mode === option.value}"
+            >
+              <img
+                class="mode-option__image"
+                :src="option.imageUrl"
+                width="113"
+                height="75"
+                alt=""
+              />
+              <span class="mode-option__label">
+                <input
+                  v-model="form.mode"
+                  type="radio"
+                  name="mode"
+                  :value="option.value"
+                  :disabled="readOnly"
+                />
+                {{ option.label }}
+              </span>
+            </label>
+          </div>
+
+          <ul v-if="form.errors.mode" class="error-list">
+            <li>{{ form.errors.mode }}</li>
+          </ul>
+        </div>
+
+        <ColorInput
+          v-if="shouldShowFillColor"
+          id="fill"
+          name="fill"
+          :label="t('Fill Color')"
+          v-model="form.fill"
+          :error="form.errors.fill"
+          :disabled="readOnly"
+        />
+
+        <div v-if="shouldShowPosition" class="field">
+          <div class="heading">
+            <label id="position-label">{{ positionLabel }}</label>
+          </div>
+
+          <div
+            class="position-grid"
+            role="radiogroup"
+            aria-labelledby="position-label"
+          >
+            <label
+              v-for="option in positionOptions"
+              :key="option.value"
+              class="position-option"
+              :class="{
+                'position-option--selected': form.position === option.value,
+                'position-option--disabled': readOnly,
+              }"
+              :title="option.label"
+            >
+              <input
+                v-model="form.position"
+                type="radio"
+                name="position"
+                :value="option.value"
+                :disabled="readOnly"
+                :aria-label="option.label"
+              />
+              <span class="position-option__marker"></span>
+            </label>
+          </div>
+
+          <ul v-if="form.errors.position" class="error-list">
+            <li>{{ form.errors.position }}</li>
+          </ul>
+        </div>
+
+        <CraftInput
+          :label="t('Width')"
+          id="width"
+          name="width"
+          v-model="form.width"
+          :error="form.errors.width"
+          :disabled="readOnly"
+          inputmode="numeric"
+          size="5"
+        />
+
+        <CraftInput
+          :label="t('Height')"
+          id="height"
+          name="height"
+          v-model="form.height"
+          :error="form.errors.height"
+          :disabled="readOnly"
+          inputmode="numeric"
+          size="5"
+        />
+
+        <CraftSwitch
+          :label="t('Allow Upscaling')"
+          id="upscale"
+          name="upscale"
+          v-model="form.upscale"
+          :error="form.errors.upscale"
+          :disabled="readOnly"
+        />
+
+        <div class="quality-field">
+          <CraftSelect
+            :label="t('Quality')"
+            id="quality-picker"
+            :model-value="qualityPickerValue"
+            :error="form.errors.quality"
+            :disabled="readOnly"
+            @update:model-value="updateQualityFromPicker"
+          >
+            <select slot="input">
+              <option value="0">{{ t('Auto') }}</option>
+              <option
+                v-for="option in qualityOptions"
+                :key="option.value"
+                :value="String(option.value)"
+              >
+                {{ option.label }}
+              </option>
+            </select>
+          </CraftSelect>
+
+          <CraftInput
+            v-show="qualityPickerValue !== '0'"
+            id="quality"
+            name="quality"
+            v-model="form.quality"
+            :error="form.errors.quality"
+            :disabled="readOnly"
+            type="number"
+            min="1"
+            max="100"
+            size="5"
+          />
+        </div>
+
+        <CraftSelect
+          :label="t('Interlacing')"
+          id="interlace"
+          name="interlace"
+          v-model="form.interlace"
+          :error="form.errors.interlace"
+          :disabled="readOnly"
+        >
+          <select slot="input">
+            <option
+              v-for="option in interlaceOptions"
+              :key="option.value"
+              :value="option.value"
+            >
+              {{ option.label }}
+            </option>
+          </select>
+        </CraftSelect>
+
+        <CraftSelect
+          :label="t('Image Format')"
+          :help-text="t('The image format that transformed images should use.')"
+          id="format"
+          name="format"
+          v-model="form.format"
+          :error="form.errors.format"
+          :disabled="readOnly"
+        >
+          <select slot="input">
+            <option
+              v-for="option in formatOptions"
+              :key="option.value"
+              :value="option.value"
+            >
+              {{ option.label }}
+            </option>
+          </select>
+        </CraftSelect>
+      </div>
+    </Pane>
+  </AppLayout>
+</template>
+
+<style scoped>
+  .field > .heading {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 5px;
+    min-block-size: calc(22rem / 16);
+    margin-block: -5px 5px;
+  }
+
+  .field > .heading > label {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 5px;
+    font-weight: 700;
+  }
+
+  .mode-options {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--c-spacing-lg);
+  }
+
+  .mode-option {
+    display: grid;
+    gap: var(--c-spacing-xs);
+    inline-size: 113px;
+    cursor: pointer;
+    text-align: center;
+  }
+
+  .mode-option__image {
+    inline-size: 113px;
+    block-size: 75px;
+    border: 1px solid transparent;
+    border-radius: var(--c-radius-md);
+  }
+
+  .mode-option--selected .mode-option__image {
+    border-color: var(--c-color-accent-border-loud);
+  }
+
+  .mode-option__label {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--c-spacing-xs);
+  }
+
+  .quality-field {
+    display: flex;
+    align-items: end;
+    gap: var(--c-spacing-sm);
+  }
+
+  .position-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 2rem);
+    gap: var(--c-spacing-xs);
+    inline-size: max-content;
+  }
+
+  .position-option {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: 2rem;
+    block-size: 2rem;
+    border: 1px solid var(--c-form-control-border-color);
+    border-radius: var(--c-radius-sm);
+    background-color: var(--c-form-control-fill);
+    cursor: pointer;
+  }
+
+  .position-option--disabled {
+    cursor: default;
+    opacity: 0.65;
+  }
+
+  .position-option input {
+    position: absolute;
+    inset: 0;
+    margin: 0;
+    opacity: 0;
+  }
+
+  .position-option__marker {
+    inline-size: 0.5rem;
+    block-size: 0.5rem;
+    border-radius: 50%;
+    background-color: var(--c-text-quiet);
+    opacity: 0.4;
+  }
+
+  .position-option--selected {
+    border-color: var(--c-color-accent-border-loud);
+    background-color: var(--c-color-accent-fill-quiet);
+  }
+
+  .position-option--selected .position-option__marker {
+    background-color: var(--c-color-accent-on-quiet);
+    opacity: 1;
+  }
+
+  .position-option input:focus-visible + .position-option__marker {
+    box-shadow: 0 0 0 3px var(--c-color-accent-border-normal);
+  }
+</style>
diff --git a/resources/js/pages/SettingsImageTransformsIndexPage.vue b/resources/js/pages/settings/assets/transforms/ImageTransformsIndexPage.vue
similarity index 81%
rename from resources/js/pages/SettingsImageTransformsIndexPage.vue
rename to resources/js/pages/settings/assets/transforms/ImageTransformsIndexPage.vue
index bd368725a0a..2c2ceac169a 100644
--- a/resources/js/pages/SettingsImageTransformsIndexPage.vue
+++ b/resources/js/pages/settings/assets/transforms/ImageTransformsIndexPage.vue
@@ -8,6 +8,7 @@
   import {
     create,
     destroy,
+    edit,
     index as imageTransformsIndex,
   } from '@actions/Settings/ImageTransformsController';
   import AdminTable from '@/components/AdminTable/AdminTable.vue';
@@ -15,25 +16,9 @@
   import Empty from '@/components/Empty.vue';
   import {router} from '@inertiajs/vue3';
   import {index} from '@actions/Settings/VolumesController';
+  import type {ExistingImageTransform} from '@/pages/settings/assets/transforms/types';
 
-  export interface ImageTransform {
-    id: number;
-    name: string;
-    handle: string;
-    width: number;
-    height: number;
-    format: any;
-    quality: number;
-    mode: string;
-    position: string;
-    interlace: string;
-    fill: any;
-    upscale: boolean;
-    uid: string;
-    parameterChangeTime: any[];
-  }
-
-  function deleteTransform(transform: ImageTransform) {
+  function deleteTransform(transform: ExistingImageTransform) {
     if (
       confirm(
         t('Are you sure you want to delete the “{name}” transform?', {
@@ -41,22 +26,32 @@
         })
       )
     ) {
-      router.delete(destroy(transform.id));
+      router
+        .optimistic<{transforms: Array<ExistingImageTransform>}>((props) => ({
+          transforms: props.transforms.filter(({id}) => id !== transform.id),
+        }))
+        .delete(destroy(transform.id), {
+          preserveScroll: true,
+        });
     }
   }
 
   const props = defineProps<{
-    transforms: Array<any>;
+    transforms: Array<ExistingImageTransform>;
   }>();
 
   const columnVisibility = ref({
     name: true,
     handle: true,
   });
-  const columnHelper = createCraftColumnHelper<ImageTransform>();
+  const columnHelper = createCraftColumnHelper<ExistingImageTransform>();
   const columns = ref([
     columnHelper.link('name', {
       header: t('Name'),
+      props: ({row}) => ({
+        href: edit(row.original.handle).url,
+        inertia: true,
+      }),
     }),
     columnHelper.handle('handle'),
     columnHelper.accessor('mode', {
@@ -94,7 +89,7 @@
       return columns.value;
     },
     enableSorting: false,
-    getCoreRowModel: getCoreRowModel<ImageTransform>(),
+    getCoreRowModel: getCoreRowModel<ExistingImageTransform>(),
     state: {
       get columnVisibility() {
         return columnVisibility.value;
@@ -104,7 +99,7 @@
 
   const navItems = computed(() => {
     return {
-      volumes: {label: t('Volumes'), url: index().url},
+      volumes: {label: t('Volumes'), url: index().url, active: false},
       transforms: {
         label: t('Image Transforms'),
         url: imageTransformsIndex().url,
@@ -119,7 +114,6 @@
     <template #actions>
       <CpLink
         appearance="button"
-        :inertia="false"
         :href="create().url"
         variant="primary"
         icon="plus"
@@ -136,7 +130,7 @@
             :href="item.url"
             block
             flush
-            :inertia="item.inertia ?? true"
+            :inertia="true"
           >
             {{ item.label }}
           </CpLink>
@@ -148,7 +142,6 @@
         <Empty :label="t('No image transforms exist yet.')" icon="image">
           <CpLink
             appearance="button"
-            :inertia="false"
             :href="create().url"
             variant="default"
             icon="plus"
diff --git a/resources/js/pages/settings/assets/transforms/types.ts b/resources/js/pages/settings/assets/transforms/types.ts
new file mode 100644
index 00000000000..65eb990f2bd
--- /dev/null
+++ b/resources/js/pages/settings/assets/transforms/types.ts
@@ -0,0 +1,23 @@
+export interface ImageTransform {
+  id: number | null;
+  uid: string | null;
+  name: string | null;
+  handle: string | null;
+  width: number | string | null;
+  height: number | string | null;
+  mode: string;
+  position: string;
+  quality: number | string | null;
+  interlace: string;
+  format: string | null;
+  fill: string | null;
+  upscale: boolean;
+  parameterChangeTime: any[];
+}
+
+export interface ExistingImageTransform extends Omit<ImageTransform, 'id'> {
+  id: number;
+  uid: string;
+  handle: string;
+  name: string;
+}
diff --git a/resources/public/images/transforms/crop.svg b/resources/public/images/transforms/crop.svg
new file mode 100644
index 00000000000..d2cb2d0b703
--- /dev/null
+++ b/resources/public/images/transforms/crop.svg
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="80px" height="60px" viewBox="0 0 80 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>crop</title>
+    <defs>
+        <path d="M0,0 L80,0 L80,60 L0,60 L0,0 Z" id="path-1"></path>
+        <path d="M0,0 L56,0 L56,56 L0,56 L0,0 Z" id="path-2"></path>
+        <path d="M0,0 L8,0 L8,8 L0,8 L0,0 Z" id="path-3"></path>
+        <path d="M0,0 L8,0 L8,8 L0,8 L0,0 Z" id="path-4"></path>
+        <path d="M0,0 L8,0 L8,8 L0,8 L0,0 Z" id="path-5"></path>
+        <path d="M0,0 L8,0 L8,8 L0,8 L0,0 Z" id="path-6"></path>
+    </defs>
+    <g id="crop" stroke="none" fill="none" transform="translate(0, 0)" xlink:href="#path-1">
+        <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-1"></use>
+        <g id="image" stroke-width="1" fill-rule="evenodd" transform="translate(0.5, 4)">
+            <rect id="pane" fill="#F3F7FD" x="-0.5" y="0" width="80" height="52" rx="5"></rect>
+            <path d="M45.2449996,15 C44.0950711,15 43.0170131,15.5416667 42.3701783,16.4489583 L34.3206784,27.8239583 L31.8339579,24.8854167 C31.172749,24.1135417 30.1953097,23.6666667 29.1459999,23.6666667 C28.0966901,23.6666667 27.1048767,24.1135417 26.4580419,24.8854167 L17.2586135,35.71875 C16.4249153,36.69375 16.2668001,38.034375 16.8417644,39.1583333 C17.4167286,40.2822917 18.6241536,41 19.9465714,41 L31.445857,41 L38.3454283,41 L59.0441423,41 C60.3234378,41 61.4877405,40.3364583 62.091453,39.2802083 C62.6951655,38.2239583 62.6232949,36.9375 61.9189637,35.9489583 L48.119821,16.4489583 C47.4729862,15.5416667 46.3949282,15 45.2449996,15 Z" id="Path" fill="#CDD8E4"></path>
+            <path d="M21,20 C23.4852814,20 25.5,17.9852814 25.5,15.5 C25.5,13.0147186 23.4852814,11 21,11 C18.5147186,11 16.5,13.0147186 16.5,15.5 C16.5,17.9852814 18.5147186,20 21,20 Z" id="Path" fill="#CDD8E4"></path>
+        </g>
+        <g transform="translate(12, 2)" xlink:href="#path-2">
+            <path d="M2,2 L54,2 L54,54 L2,54 Z" id="crop-border" stroke="#5A6572" stroke-width="1" stroke-dasharray="1"></path>
+            <g id="corner" xlink:href="#path-3" fill="#5A6572" fill-rule="evenodd">
+                <path d="M4,8 L0,8 L0,0 L8,0 L8,4 L4,4 L4,8 Z" id="Combined-Shape"></path>
+            </g>
+            <g id="corner-copy" transform="translate(4, 52) rotate(-90) translate(-4, -52)translate(0, 48)" xlink:href="#path-4" fill="#5A6572" fill-rule="evenodd">
+                <path d="M4,8 L0,8 L0,0 L8,0 L8,4 L4,4 L4,8 Z" id="Combined-Shape"></path>
+            </g>
+            <g id="corner-copy-3" transform="translate(52, 4) scale(-1, 1) translate(-52, -4)translate(48, 0)" xlink:href="#path-5" fill="#5A6572" fill-rule="evenodd">
+                <path d="M4,8 L0,8 L0,0 L8,0 L8,4 L4,4 L4,8 Z" id="Combined-Shape"></path>
+            </g>
+            <g id="corner-copy-2" transform="translate(52, 52) scale(-1, 1) rotate(-90) translate(-52, -52)translate(48, 48)" xlink:href="#path-6" fill="#5A6572" fill-rule="evenodd">
+                <path d="M4,8 L0,8 L0,0 L8,0 L8,4 L4,4 L4,8 Z" id="Combined-Shape"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/resources/public/images/transforms/fit.svg b/resources/public/images/transforms/fit.svg
new file mode 100644
index 00000000000..6efbcf45d81
--- /dev/null
+++ b/resources/public/images/transforms/fit.svg
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="80px" height="60px" viewBox="0 0 80 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>fit</title>
+    <defs>
+        <path d="M0,0 L80,0 L80,60 L0,60 L0,0 Z" id="path-1"></path>
+        <path d="M0,0 L56,0 L56,56 L0,56 L0,0 Z" id="path-2"></path>
+        <path d="M0,0 L8,0 L8,8 L0,8 L0,0 Z" id="path-3"></path>
+        <path d="M0,0 L8,0 L8,8 L0,8 L0,0 Z" id="path-4"></path>
+        <path d="M0,0 L8,0 L8,8 L0,8 L0,0 Z" id="path-5"></path>
+        <path d="M0,0 L8,0 L8,8 L0,8 L0,0 Z" id="path-6"></path>
+    </defs>
+    <g id="fit" stroke="none" fill="none" xlink:href="#path-1" fill-rule="evenodd">
+        <use fill="#FFFFFF" xlink:href="#path-1"></use>
+        <g id="image" stroke-width="1" transform="translate(14, 13)">
+            <rect id="pane" fill="#F3F7FD" x="0" y="0" width="52" height="34" rx="5"></rect>
+            <path d="M29.7467389,10 C28.9967855,10 28.2937042,10.3541667 27.8718554,10.9473958 L22.6221816,18.3848958 L21.0004073,16.4635417 C20.5691841,15.9588542 19.9317237,15.6666667 19.2473912,15.6666667 C18.5630587,15.6666667 17.9162239,15.9588542 17.4943751,16.4635417 L11.4947479,23.546875 C10.9510317,24.184375 10.8479131,25.0609375 11.2228898,25.7958333 C11.5978665,26.5307292 12.3853176,27 13.247764,27 L20.747298,27 L25.2470185,27 L38.7461798,27 C39.5805029,27 40.3398307,26.5661458 40.7335563,25.8755208 C41.1272818,25.1848958 41.0804097,24.34375 40.6210633,23.6973958 L31.6216224,10.9473958 C31.1997736,10.3541667 30.4966923,10 29.7467389,10 Z" id="Path" fill="#CDD8E4"></path>
+            <path d="M14,13 C15.6568542,13 17,11.6568542 17,10 C17,8.34314575 15.6568542,7 14,7 C12.3431458,7 11,8.34314575 11,10 C11,11.6568542 12.3431458,13 14,13 Z" id="Path" fill="#CDD8E4"></path>
+            <g id="crop" transform="translate(-2, -11)" xlink:href="#path-2">
+                <path d="M2,2 L54,2 L54,54 L2,54 Z" id="crop-border" stroke="#5A6572" stroke-width="1" stroke-dasharray="1"></path>
+                <g id="corner" xlink:href="#path-3" fill="#5A6572" fill-rule="evenodd">
+                    <path d="M4,8 L0,8 L0,0 L8,0 L8,4 L4,4 L4,8 Z" id="Combined-Shape"></path>
+                </g>
+                <g id="corner-copy" transform="translate(4, 52) rotate(-90) translate(-4, -52)translate(0, 48)" xlink:href="#path-4" fill="#5A6572" fill-rule="evenodd">
+                    <path d="M4,8 L0,8 L0,0 L8,0 L8,4 L4,4 L4,8 Z" id="Combined-Shape"></path>
+                </g>
+                <g id="corner-copy-3" transform="translate(52, 4) scale(-1, 1) translate(-52, -4)translate(48, 0)" xlink:href="#path-5" fill="#5A6572" fill-rule="evenodd">
+                    <path d="M4,8 L0,8 L0,0 L8,0 L8,4 L4,4 L4,8 Z" id="Combined-Shape"></path>
+                </g>
+                <g id="corner-copy-2" transform="translate(52, 52) scale(-1, 1) rotate(-90) translate(-52, -52)translate(48, 48)" xlink:href="#path-6" fill="#5A6572" fill-rule="evenodd">
+                    <path d="M4,8 L0,8 L0,0 L8,0 L8,4 L4,4 L4,8 Z" id="Combined-Shape"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/resources/public/images/transforms/letterbox.svg b/resources/public/images/transforms/letterbox.svg
new file mode 100644
index 00000000000..2abefaf7fdb
--- /dev/null
+++ b/resources/public/images/transforms/letterbox.svg
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="80px" height="60px" viewBox="0 0 80 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>letterbox</title>
+    <defs>
+        <path d="M0,0 L80,0 L80,60 L0,60 L0,0 Z" id="path-1"></path>
+        <path d="M0,0 L56,0 L56,56 L0,56 L0,0 Z" id="path-2"></path>
+        <path d="M0,0 L8,0 L8,8 L0,8 L0,0 Z" id="path-3"></path>
+        <path d="M0,0 L8,0 L8,8 L0,8 L0,0 Z" id="path-4"></path>
+        <path d="M0,0 L8,0 L8,8 L0,8 L0,0 Z" id="path-5"></path>
+        <path d="M0,0 L8,0 L8,8 L0,8 L0,0 Z" id="path-6"></path>
+    </defs>
+    <g id="letterbox" stroke="none" fill="none" transform="translate(0, 0)" xlink:href="#path-1" fill-rule="evenodd">
+        <use fill="#FFFFFF" xlink:href="#path-1"></use>
+        <g id="image" stroke-width="1" transform="translate(14, 4)">
+            <rect id="letterbox-bg" fill="#CDD8E4" x="0" y="0" width="52" height="52"></rect>
+            <rect id="pane" fill="#F3F7FD" x="0" y="9" width="52" height="34"></rect>
+            <path d="M29.7467389,19 C28.9967855,19 28.2937042,19.3541667 27.8718554,19.9473958 L22.6221816,27.3848958 L21.0004073,25.4635417 C20.5691841,24.9588542 19.9317237,24.6666667 19.2473912,24.6666667 C18.5630587,24.6666667 17.9162239,24.9588542 17.4943751,25.4635417 L11.4947479,32.546875 C10.9510317,33.184375 10.8479131,34.0609375 11.2228898,34.7958333 C11.5978665,35.5307292 12.3853176,36 13.247764,36 L20.747298,36 L25.2470185,36 L38.7461798,36 C39.5805029,36 40.3398307,35.5661458 40.7335563,34.8755208 C41.1272818,34.1848958 41.0804097,33.34375 40.6210633,32.6973958 L31.6216224,19.9473958 C31.1997736,19.3541667 30.4966923,19 29.7467389,19 Z" id="Path" fill="#CDD8E4"></path>
+            <path d="M14,22 C15.6568542,22 17,20.6568542 17,19 C17,17.3431458 15.6568542,16 14,16 C12.3431458,16 11,17.3431458 11,19 C11,20.6568542 12.3431458,22 14,22 Z" id="Path" fill="#CDD8E4"></path>
+            <g id="crop" transform="translate(-2, -2)" xlink:href="#path-2">
+                <path d="M2,2 L54,2 L54,54 L2,54 Z" id="crop-border" stroke="#5A6572" stroke-width="1" stroke-dasharray="1"></path>
+                <g id="corner" xlink:href="#path-3" fill="#5A6572" fill-rule="evenodd">
+                    <path d="M4,8 L0,8 L0,0 L8,0 L8,4 L4,4 L4,8 Z" id="Combined-Shape"></path>
+                </g>
+                <g id="corner-copy" transform="translate(4, 52) rotate(-90) translate(-4, -52)translate(0, 48)" xlink:href="#path-4" fill="#5A6572" fill-rule="evenodd">
+                    <path d="M4,8 L0,8 L0,0 L8,0 L8,4 L4,4 L4,8 Z" id="Combined-Shape"></path>
+                </g>
+                <g id="corner-copy-3" transform="translate(52, 4) scale(-1, 1) translate(-52, -4)translate(48, 0)" xlink:href="#path-5" fill="#5A6572" fill-rule="evenodd">
+                    <path d="M4,8 L0,8 L0,0 L8,0 L8,4 L4,4 L4,8 Z" id="Combined-Shape"></path>
+                </g>
+                <g id="corner-copy-2" transform="translate(52, 52) scale(-1, 1) rotate(-90) translate(-52, -52)translate(48, 48)" xlink:href="#path-6" fill="#5A6572" fill-rule="evenodd">
+                    <path d="M4,8 L0,8 L0,0 L8,0 L8,4 L4,4 L4,8 Z" id="Combined-Shape"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/resources/public/images/transforms/stretch.svg b/resources/public/images/transforms/stretch.svg
new file mode 100644
index 00000000000..fcb21cf0be6
--- /dev/null
+++ b/resources/public/images/transforms/stretch.svg
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="80px" height="60px" viewBox="0 0 80 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>stretch</title>
+    <defs>
+        <path d="M0,0 L80,0 L80,60 L0,60 L0,0 Z" id="path-1"></path>
+        <path d="M0,0 L56,0 L56,56 L0,56 L0,0 Z" id="path-2"></path>
+        <path d="M0,0 L8,0 L8,8 L0,8 L0,0 Z" id="path-3"></path>
+        <path d="M0,0 L8,0 L8,8 L0,8 L0,0 Z" id="path-4"></path>
+        <path d="M0,0 L8,0 L8,8 L0,8 L0,0 Z" id="path-5"></path>
+        <path d="M0,0 L8,0 L8,8 L0,8 L0,0 Z" id="path-6"></path>
+    </defs>
+    <g id="stretch" stroke="none" fill="none" transform="translate(0, 0)" xlink:href="#path-1" fill-rule="evenodd">
+        <use fill="#FFFFFF" xlink:href="#path-1"></use>
+        <g id="image" stroke-width="1" transform="translate(14, 4)">
+            <rect id="pane" fill="#F3F7FD" x="0" y="0" width="52" height="52"></rect>
+            <g id="Group" transform="translate(11, 11)" fill="#CDD8E4">
+                <path d="M18.7467389,4.575 C17.9967855,4.575 17.2937042,5.11510417 16.8718554,6.01977865 L11.6221816,17.3619661 L10.0004073,14.431901 C9.56918411,13.6622526 8.93172371,13.2166667 8.24739123,13.2166667 C7.56305875,13.2166667 6.91622394,13.6622526 6.49437515,14.431901 L0.494747905,25.2339844 C-0.048968314,26.2061719 -0.152086907,27.5429297 0.222889795,28.6636458 C0.597866498,29.784362 1.38531757,30.5 2.24776399,30.5 L9.74729804,30.5 L14.2470185,30.5 L27.7461798,30.5 C28.5805029,30.5 29.3398307,29.8383724 29.7335563,28.7851693 C30.1272818,27.7319661 30.0804097,26.4492188 29.6210633,25.4635286 L20.6216224,6.01977865 C20.1997736,5.11510417 19.4966923,4.575 18.7467389,4.575 Z" id="Path"></path>
+                <path d="M3,9.15 C4.65685425,9.15 6,7.10170273 6,4.575 C6,2.04829727 4.65685425,0 3,0 C1.34314575,0 0,2.04829727 0,4.575 C0,7.10170273 1.34314575,9.15 3,9.15 Z" id="Path"></path>
+            </g>
+            <g id="crop" transform="translate(-2, -2)" xlink:href="#path-2">
+                <path d="M2,2 L54,2 L54,54 L2,54 Z" id="crop-border" stroke="#5A6572" stroke-width="1" stroke-dasharray="1"></path>
+                <g id="corner" xlink:href="#path-3" fill="#5A6572" fill-rule="evenodd">
+                    <path d="M4,8 L0,8 L0,0 L8,0 L8,4 L4,4 L4,8 Z" id="Combined-Shape"></path>
+                </g>
+                <g id="corner-copy" transform="translate(4, 52) rotate(-90) translate(-4, -52)translate(0, 48)" xlink:href="#path-4" fill="#5A6572" fill-rule="evenodd">
+                    <path d="M4,8 L0,8 L0,0 L8,0 L8,4 L4,4 L4,8 Z" id="Combined-Shape"></path>
+                </g>
+                <g id="corner-copy-3" transform="translate(52, 4) scale(-1, 1) translate(-52, -4)translate(48, 0)" xlink:href="#path-5" fill="#5A6572" fill-rule="evenodd">
+                    <path d="M4,8 L0,8 L0,0 L8,0 L8,4 L4,4 L4,8 Z" id="Combined-Shape"></path>
+                </g>
+                <g id="corner-copy-2" transform="translate(52, 52) scale(-1, 1) rotate(-90) translate(-52, -52)translate(48, 48)" xlink:href="#path-6" fill="#5A6572" fill-rule="evenodd">
+                    <path d="M4,8 L0,8 L0,0 L8,0 L8,4 L4,4 L4,8 Z" id="Combined-Shape"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/Http/Controllers/Settings/ImageTransformsController.php b/src/Http/Controllers/Settings/ImageTransformsController.php
index dd4bb4123c6..1946d7f993d 100644
--- a/src/Http/Controllers/Settings/ImageTransformsController.php
+++ b/src/Http/Controllers/Settings/ImageTransformsController.php
@@ -4,33 +4,24 @@
 
 namespace CraftCms\Cms\Http\Controllers\Settings;
 
-use CraftCms\Cms\Config\GeneralConfig;
 use CraftCms\Cms\Http\RespondsWithFlash;
+use CraftCms\Cms\Http\Responses\CpScreenResponse;
 use CraftCms\Cms\Image\Data\ImageTransform;
+use CraftCms\Cms\Image\Images;
 use CraftCms\Cms\Image\ImageTransforms;
 use CraftCms\Cms\Support\Url;
 use CraftCms\Cms\Validation\Rules\ColorRule;
-use CraftCms\Cms\View\LegacyAssets\EditTransformAsset;
-use CraftCms\Cms\View\LegacyAssets\InternalAssetRegistry;
-use Illuminate\Contracts\View\View;
 use Illuminate\Http\Request;
+use Imagine\Image\Format;
 use Inertia\Inertia;
 use Symfony\Component\HttpFoundation\Response;
 
-use function CraftCms\Cms\craftAsset;
 use function CraftCms\Cms\t;
 
 class ImageTransformsController
 {
     use RespondsWithFlash;
 
-    private bool $readOnly;
-
-    public function __construct(GeneralConfig $generalConfig)
-    {
-        $this->readOnly = ! $generalConfig->allowAdminChanges;
-    }
-
     public function index(ImageTransforms $imageTransforms)
     {
         $transforms = $imageTransforms
@@ -38,10 +29,11 @@ public function index(ImageTransforms $imageTransforms)
             ->sort(fn (ImageTransform $a, ImageTransform $b): int => t($a->name, category: 'site') <=> t($b->name, category: 'site'))
             ->values();
 
-        return Inertia::render('SettingsImageTransformsIndexPage', [
+        return Inertia::render('settings/assets/transforms/ImageTransformsIndexPage', [
             'crumbs' => fn () => [
                 ['label' => t('Settings'), 'url' => Url::cpUrl('settings')],
-                ['label' => t('Transforms')],
+                ['label' => t('Assets'), 'url' => Url::cpUrl('settings/assets/transforms')],
+                ['label' => t('Image Transforms')],
             ],
             'title' => t('Image Transforms'),
             'transforms' => $transforms,
@@ -49,19 +41,18 @@ public function index(ImageTransforms $imageTransforms)
         ]);
     }
 
-    public function create(): View
+    public function create(Images $images): CpScreenResponse
     {
-        abort_if($this->readOnly, 403, 'Administrative changes are disallowed in this environment.');
-
-        return $this->editView();
+        return $this->editScreen(new ImageTransform, $images);
     }
 
-    public function edit(ImageTransforms $imageTransforms, string $transformHandle): View
+    public function edit(ImageTransforms $imageTransforms, Images $images, string $transformHandle): CpScreenResponse
     {
         $transform = $imageTransforms->getTransformByHandle($transformHandle);
+
         abort_if(is_null($transform), 404, 'Transform not found');
 
-        return $this->editView($transformHandle, $transform);
+        return $this->editScreen($transform, $images);
     }
 
     public function save(Request $request, ImageTransforms $imageTransforms): Response
@@ -103,66 +94,147 @@ public function save(Request $request, ImageTransforms $imageTransforms): Respon
             return $this->asModelFailure($transform, modelName: 'transform');
         }
 
-        return $this->asModelSuccess($transform, t('Transform saved.'), 'transform');
+        return $this->asModelSuccess(
+            $transform,
+            t('Transform saved.'),
+            'transform',
+            redirect: $this->getPostedRedirectUrl($transform)
+                ?? Url::cpUrl("settings/assets/transforms/$transform->handle"),
+        );
     }
 
-    public function destroy(Request $request, ImageTransforms $imageTransforms, int $transformId): Response
+    public function destroy(ImageTransforms $imageTransforms, int $transformId): Response
     {
         $imageTransforms->deleteTransformById($transformId);
 
         return $this->asSuccess();
     }
 
-    private function editView(?string $transformHandle = null, ?ImageTransform $transform = null): View
+    private function editScreen(ImageTransform $transform, Images $images): CpScreenResponse
     {
-        $transform ??= new ImageTransform;
-        app(InternalAssetRegistry::class)->register(EditTransformAsset::class);
-
         $title = $transform->id
             ? (trim((string) $transform->name) ?: t('Edit Image Transform'))
             : t('Create a new image transform');
 
-        [$qualityPickerOptions, $qualityPickerValue] = $this->qualityPickerData($transform);
+        return new CpScreenResponse()
+            ->title($title)
+            ->addCrumb(t('Settings'), 'settings')
+            ->addCrumb(t('Assets'), 'settings/assets/transforms')
+            ->addCrumb(t('Image Transforms'), 'settings/assets/transforms')
+            ->addCrumb($title)
+            ->redirectUrl('settings/assets/transforms')
+            ->inertiaPage('settings/assets/transforms/EditImageTransformPage', [
+                'transform' => $this->transformData($transform),
+                'modeOptions' => $this->modeOptions(),
+                'positionOptions' => $this->positionOptions(),
+                'interlaceOptions' => $this->interlaceOptions(),
+                'formatOptions' => $this->formatOptions($images, $transform),
+                'qualityOptions' => $this->qualityOptions(),
+            ]);
+    }
 
-        return view('settings/assets/transforms/_settings', [
-            'handle' => $transformHandle,
-            'transform' => $transform,
-            'title' => $title,
-            'qualityPickerOptions' => $qualityPickerOptions,
-            'qualityPickerValue' => $qualityPickerValue,
-            'readOnly' => $this->readOnly,
-            'baseIconsUrl' => craftAsset('legacy/edittransform/dist/images'),
-        ]);
+    /**
+     * @return array<string, mixed>
+     */
+    private function transformData(ImageTransform $transform): array
+    {
+        return [
+            'id' => $transform->id,
+            'name' => $transform->name,
+            'handle' => $transform->handle,
+            'width' => $transform->width,
+            'height' => $transform->height,
+            'mode' => $transform->mode,
+            'position' => $transform->position,
+            'quality' => $transform->quality,
+            'interlace' => $transform->interlace,
+            'format' => $transform->format,
+            'fill' => $transform->fill,
+            'upscale' => $transform->upscale,
+        ];
+    }
+
+    /**
+     * @return array<int, array{label: string, value: string}>
+     */
+    private function modeOptions(): array
+    {
+        $modes = ImageTransform::modes();
+
+        return collect(['crop', 'fit', 'letterbox', 'stretch'])
+            ->map(fn (string $value): array => [
+                'label' => $modes[$value],
+                'value' => $value,
+            ])
+            ->values()
+            ->all();
+    }
+
+    /**
+     * @return array<int, array{label: string, value: string}>
+     */
+    private function positionOptions(): array
+    {
+        return [
+            ['label' => t('Top-Left'), 'value' => 'top-left'],
+            ['label' => t('Top-Center'), 'value' => 'top-center'],
+            ['label' => t('Top-Right'), 'value' => 'top-right'],
+            ['label' => t('Center-Left'), 'value' => 'center-left'],
+            ['label' => t('Center-Center'), 'value' => 'center-center'],
+            ['label' => t('Center-Right'), 'value' => 'center-right'],
+            ['label' => t('Bottom-Left'), 'value' => 'bottom-left'],
+            ['label' => t('Bottom-Center'), 'value' => 'bottom-center'],
+            ['label' => t('Bottom-Right'), 'value' => 'bottom-right'],
+        ];
+    }
+
+    /**
+     * @return array<int, array{label: string, value: string}>
+     */
+    private function interlaceOptions(): array
+    {
+        return [
+            ['label' => t('None'), 'value' => 'none'],
+            ['label' => t('Line'), 'value' => 'line'],
+            ['label' => t('Plane'), 'value' => 'plane'],
+            ['label' => t('Partition'), 'value' => 'partition'],
+        ];
+    }
+
+    /**
+     * @return array<int, array{label: string, value: string}>
+     */
+    private function formatOptions(Images $images, ImageTransform $transform): array
+    {
+        $options = [
+            ['label' => t('Auto'), 'value' => ''],
+            ['label' => 'jpg', 'value' => 'jpg'],
+            ['label' => 'png', 'value' => 'png'],
+            ['label' => 'gif', 'value' => 'gif'],
+        ];
+
+        if ($transform->format === Format::ID_WEBP || $images->getSupportsWebP()) {
+            $options[] = ['label' => Format::ID_WEBP, 'value' => Format::ID_WEBP];
+        }
+
+        if ($transform->format === Format::ID_AVIF || $images->getSupportsAvif()) {
+            $options[] = ['label' => Format::ID_AVIF, 'value' => Format::ID_AVIF];
+        }
+
+        return $options;
     }
 
     /**
-     * @return array{0: array<int, array{label: string, value: int}>, 1: int}
+     * @return array<int, array{label: string, value: int}>
      */
-    private function qualityPickerData(ImageTransform $transform): array
+    private function qualityOptions(): array
     {
-        $qualityPickerOptions = [
+        return [
             ['label' => t('Low'), 'value' => 10],
             ['label' => t('Medium'), 'value' => 30],
             ['label' => t('High'), 'value' => 60],
             ['label' => t('Very High'), 'value' => 80],
             ['label' => t('Maximum'), 'value' => 100],
         ];
-
-        if ($transform->quality) {
-            // Default to Low, even if quality is < 10.
-            $qualityPickerValue = 10;
-            foreach ($qualityPickerOptions as $option) {
-                if ($transform->quality >= $option['value']) {
-                    $qualityPickerValue = $option['value'];
-                } else {
-                    break;
-                }
-            }
-        } else {
-            // Auto
-            $qualityPickerValue = 0;
-        }
-
-        return [$qualityPickerOptions, $qualityPickerValue];
     }
 }
diff --git a/src/Http/Controllers/Settings/VolumesController.php b/src/Http/Controllers/Settings/VolumesController.php
index ff5da91ca62..6915d0cfc54 100644
--- a/src/Http/Controllers/Settings/VolumesController.php
+++ b/src/Http/Controllers/Settings/VolumesController.php
@@ -55,10 +55,11 @@ public function index(Request $request, Volumes $volumes)
         return Inertia::render('SettingsVolumesIndexPage', [
             'crumbs' => fn () => [
                 ['label' => t('Settings'), 'url' => Url::cpUrl('settings')],
-                ['label' => t('Assets')],
+                ['label' => t('Assets'), 'url' => Url::cpUrl('settings/assets')],
+                ['label' => t('Volumes')],
             ],
             'sort' => $sort,
-            'title' => t('Asset Settings'),
+            'title' => t('Volume Settings'),
             'volumes' => $volumes->getAllVolumes(...),
         ]);
     }
diff --git a/src/Image/Data/ImageTransform.php b/src/Image/Data/ImageTransform.php
index 0d888a0fcce..0f066fa5fb6 100644
--- a/src/Image/Data/ImageTransform.php
+++ b/src/Image/Data/ImageTransform.php
@@ -5,6 +5,7 @@
 namespace CraftCms\Cms\Image\Data;
 
 use CraftCms\Cms\Component\Component;
+use CraftCms\Cms\Database\Table;
 use CraftCms\Cms\Image\Contracts\ImageTransformerInterface;
 use CraftCms\Cms\Image\ImageTransformer;
 use DateTime;
@@ -141,7 +142,7 @@ public function getRules(): array
     {
         return [
             'name' => ['required', 'string'],
-            'handle' => ['required', 'string'],
+            'handle' => ['required', 'string', Rule::unique(Table::IMAGETRANSFORMS, 'handle')->ignore($this->id)],
             'width' => ['nullable', 'integer', 'min:1'],
             'height' => ['nullable', 'integer', 'min:1'],
             'mode' => ['required', Rule::in(self::MODES)],
diff --git a/src/View/LegacyAssets/EditTransformAsset.php b/src/View/LegacyAssets/EditTransformAsset.php
deleted file mode 100644
index d76e0ba1f4f..00000000000
--- a/src/View/LegacyAssets/EditTransformAsset.php
+++ /dev/null
@@ -1,26 +0,0 @@
-<?php
-
-declare(strict_types=1);
-
-namespace CraftCms\Cms\View\LegacyAssets;
-
-use CraftCms\Cms\View\HtmlStack;
-
-use function CraftCms\Cms\craftAsset;
-
-/**
- * @deprecated
- *
- * @internal
- */
-class EditTransformAsset implements LegacyAssetInterface
-{
-    public array $depends = [
-        CpAsset::class,
-    ];
-
-    public function register(HtmlStack $htmlStack): void
-    {
-        $htmlStack->cssFile(craftAsset('legacy/edittransform/dist/css/transforms.css'));
-    }
-}
diff --git a/tests/Feature/Http/Controllers/Settings/ImageTransformsControllerTest.php b/tests/Feature/Http/Controllers/Settings/ImageTransformsControllerTest.php
index a7c074c20ab..8ebc70fd3ea 100644
--- a/tests/Feature/Http/Controllers/Settings/ImageTransformsControllerTest.php
+++ b/tests/Feature/Http/Controllers/Settings/ImageTransformsControllerTest.php
@@ -7,14 +7,17 @@
 use CraftCms\Cms\Image\Data\ImageTransform as ImageTransformData;
 use CraftCms\Cms\Image\ImageTransforms;
 use CraftCms\Cms\Image\Models\ImageTransform as ImageTransformModel;
+use CraftCms\Cms\Support\Url;
 use CraftCms\Cms\User\Elements\User;
 use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Crypt;
 use Inertia\Testing\AssertableInertia;
 
 use function CraftCms\Cms\t;
 use function Pest\Laravel\actingAs;
 use function Pest\Laravel\deleteJson;
 use function Pest\Laravel\get;
+use function Pest\Laravel\post;
 use function Pest\Laravel\postJson;
 
 beforeEach(function () {
@@ -80,8 +83,9 @@ function validTransformData(array $overrides = []): array
     get(action([ImageTransformsController::class, 'index']))
         ->assertInertia(fn (AssertableInertia $page) => $page->where('readOnly', true));
     get(action([ImageTransformsController::class, 'edit'], ['transformHandle' => $transform->handle]))
-        ->assertOk()
-        ->assertSee(t("Changes to these settings aren\u{2019}t permitted in this environment."));
+        ->assertInertia(fn (AssertableInertia $page) => $page
+            ->component('settings/assets/transforms/EditImageTransformPage')
+            ->where('readOnly', true));
 
     get(action([ImageTransformsController::class, 'create']))->assertForbidden();
     postJson(action([ImageTransformsController::class, 'save']), validTransformData())->assertForbidden();
@@ -90,21 +94,36 @@ function validTransformData(array $overrides = []): array
 
 it('renders index', function () {
     get(action([ImageTransformsController::class, 'index']))
-        ->assertInertia(fn (AssertableInertia $page) => $page->component('SettingsImageTransformsIndexPage'));
+        ->assertInertia(fn (AssertableInertia $page) => $page->component('settings/assets/transforms/ImageTransformsIndexPage'));
 });
 
 it('renders create', function () {
     get(action([ImageTransformsController::class, 'create']))
-        ->assertOk()
-        ->assertSee(t('Create a new image transform'));
+        ->assertInertia(fn (AssertableInertia $page) => $page
+            ->component('settings/assets/transforms/EditImageTransformPage')
+            ->where('title', t('Create a new image transform'))
+            ->where('transform.id', null)
+            ->has('modeOptions', 4)
+            ->where('modeOptions.0.value', 'crop')
+            ->where('modeOptions.1.value', 'fit')
+            ->where('modeOptions.2.value', 'letterbox')
+            ->where('modeOptions.3.value', 'stretch')
+            ->has('positionOptions', 9)
+            ->has('interlaceOptions', 4)
+            ->has('formatOptions')
+            ->has('qualityOptions', 5));
 });
 
 it('renders edit for an existing transform', function () {
     $transform = createTestTransform();
 
     get(action([ImageTransformsController::class, 'edit'], ['transformHandle' => $transform->handle]))
-        ->assertOk()
-        ->assertSee($transform->name);
+        ->assertInertia(fn (AssertableInertia $page) => $page
+            ->component('settings/assets/transforms/EditImageTransformPage')
+            ->where('title', $transform->name)
+            ->where('transform.id', $transform->id)
+            ->where('transform.name', $transform->name)
+            ->where('transform.handle', $transform->handle));
 });
 
 it('returns 404 for a missing transform handle', function () {
@@ -131,6 +150,27 @@ function validTransformData(array $overrides = []): array
         ->and($transform->name)->toBe($payload['name']);
 });
 
+it('redirects to the saved transform edit page when saving and continuing', function () {
+    $payload = validTransformData([
+        'handle' => 'continuedTransform',
+    ]);
+
+    post(action([ImageTransformsController::class, 'save']), $payload)
+        ->assertRedirect(Url::cpUrl('settings/assets/transforms/continuedTransform'))
+        ->assertSessionHas('success', t('Transform saved.'));
+});
+
+it('redirects to the posted redirect when saving normally', function () {
+    $payload = validTransformData([
+        'handle' => 'normallySavedTransform',
+        'redirect' => Crypt::encrypt('settings/assets/transforms'),
+    ]);
+
+    post(action([ImageTransformsController::class, 'save']), $payload)
+        ->assertRedirect(Url::cpUrl('settings/assets/transforms'))
+        ->assertSessionHas('success', t('Transform saved.'));
+});
+
 it('updates an existing transform', function () {
     $transform = createTestTransform([
         'name' => 'Original Name',
diff --git a/tests/Feature/Integration/PagesTest.php b/tests/Feature/Integration/PagesTest.php
index e706c75e62f..1b2c60b5bbf 100644
--- a/tests/Feature/Integration/PagesTest.php
+++ b/tests/Feature/Integration/PagesTest.php
@@ -99,7 +99,7 @@
     [
         'url' => '/settings/assets/transforms',
         'title' => 'Image Transforms',
-        'component' => 'SettingsImageTransformsIndexPage',
+        'component' => 'settings/assets/transforms/ImageTransformsIndexPage',
     ],
 ]);
 
diff --git a/yii2-adapter/legacy/web/assets/edittransform/EditTransformAsset.php b/yii2-adapter/legacy/web/assets/edittransform/EditTransformAsset.php
index af7ff2bf291..1ced6e3e607 100644
--- a/yii2-adapter/legacy/web/assets/edittransform/EditTransformAsset.php
+++ b/yii2-adapter/legacy/web/assets/edittransform/EditTransformAsset.php
@@ -8,7 +8,7 @@
 namespace craft\web\assets\edittransform;
 
 use craft\web\AssetBundle;
-use CraftCms\Cms\View\LegacyAssets\InternalAssetRegistry;
+use craft\web\assets\cp\CpAsset;
 
 /**
  * Asset bundle for the Edit Transform page
@@ -16,8 +16,13 @@
  */
 class EditTransformAsset extends AssetBundle
 {
-    public function registerAssetFiles($view)
-    {
-        app(InternalAssetRegistry::class)->register(\CraftCms\Cms\View\LegacyAssets\EditTransformAsset::class);
-    }
+    public $sourcePath = '@craftcms/resources/legacy/edittransform/dist';
+
+    public $depends = [
+        CpAsset::class,
+    ];
+
+    public $css = [
+        'css/transforms.css',
+    ];
 }

From fda7b74d43ca13d9bba6e5c3ddc1d9505df10a49 Mon Sep 17 00:00:00 2001
From: Rias <hey@rias.be>
Date: Thu, 21 May 2026 17:28:22 +0200
Subject: [PATCH 2/4] Remove old templates

---
 .../settings/assets/transforms/_index.twig    |  62 ----
 .../settings/assets/transforms/_settings.twig | 319 ------------------
 2 files changed, 381 deletions(-)
 delete mode 100644 resources/templates/settings/assets/transforms/_index.twig
 delete mode 100644 resources/templates/settings/assets/transforms/_settings.twig

diff --git a/resources/templates/settings/assets/transforms/_index.twig b/resources/templates/settings/assets/transforms/_index.twig
deleted file mode 100644
index 9b286632a35..00000000000
--- a/resources/templates/settings/assets/transforms/_index.twig
+++ /dev/null
@@ -1,62 +0,0 @@
-{% extends "settings/assets/_layout" %}
-{% set selectedNavItem = 'transforms' %}
-{% set readOnly = readOnly ?? false %}
-
-{% do registerLegacyAsset('CraftCms\\Cms\\View\\LegacyAssets\\AdminTableAsset') -%}
-
-
-{% if readOnly %}
-    {% set contentNotice = readOnlyNotice() %}
-{% endif %}
-
-{% block content %}
-    <div id="transforms-vue-admin-table"></div>
-
-    {% if not readOnly %}
-        <div class="buttons">
-            <a class="btn submit add icon" href="{{ url('settings/assets/transforms/new') }}">{{ "New image transform"|t('app') }}</a>
-        </div>
-    {% endif %}
-{% endblock %}
-
-{% set tableData = [] %}
-{% for transform in transforms %}
-    {% if transform.mode %}
-        {% set mode = modes[transform.mode] %}
-    {%  endif %}
-
-    {% set tableData = tableData|merge([{
-        id: transform.id,
-        title: transform.name|t('site'),
-        url: url('settings/assets/transforms/' ~ transform.handle),
-        handle: transform.handle,
-        mode: mode ?? null,
-        dimensions: (transform.width ? transform.width : 'Auto'|t('app')|e) ~ " × " ~ (transform.height ? transform.height : 'Auto'|t('app')|e),
-        interlace: transform.interlace ? transform.interlace|capitalize : 'None'|t('app')|e,
-        format: transform.format ? transform.format|capitalize : 'Auto'|t('app')|e,
-    }]) %}
-{% endfor %}
-
-{% js %}
-var columns = [
-    { name: '__slot:title', title: Craft.t('app', 'Name') },
-    { name: '__slot:handle', title: Craft.t('app', 'Handle') },
-    { name: 'mode', title: Craft.t('app', 'Mode'), },
-    { name: 'dimensions', title: Craft.t('app', 'Dimensions'), },
-    { name: 'interlace', title: Craft.t('app', 'Interlace'), },
-    { name: 'format', title: Craft.t('app', 'Format'), }
-];
-
-let config = {
-    columns: columns,
-    container: '#transforms-vue-admin-table',
-    emptyMessage: Craft.t('app', 'No image transforms exist yet.'),
-    tableData: {{ tableData|json_encode|raw }},
-};
-
-{% if not readOnly %}
-    config['deleteAction'] = 'image-transforms/delete';
-{% endif %}
-
-new Craft.VueAdminTable(config);
-{% endjs %}
diff --git a/resources/templates/settings/assets/transforms/_settings.twig b/resources/templates/settings/assets/transforms/_settings.twig
deleted file mode 100644
index 1a95fdb257b..00000000000
--- a/resources/templates/settings/assets/transforms/_settings.twig
+++ /dev/null
@@ -1,319 +0,0 @@
-{% extends '_layouts/cp.twig' %}
-
-{% set readOnly = readOnly ?? false %}
-{% set fullPageForm = not readOnly %}
-
-{% set crumbs = [
-    { label: "Settings"|t('app'), url: url('settings') },
-    { label: "Assets"|t('app'), url: url('settings/assets') },
-    { label: "Image Transforms"|t('app'), url: url('settings/assets/transforms') }
-] %}
-
-{% set formActions = [
-  {
-    label: 'Save and continue editing'|t('app'),
-    redirect: 'settings/assets/transforms/{handle}'|hash,
-    shortcut: true,
-    retainScroll: true,
-  },
-] %}
-
-{% set defaultPositionLabel = "Default Focal Point"|t('app') %}
-{% set letterboxPositionLabel = "Image Position"|t('app') %}
-{% set mode = old('mode', transform.mode) %}
-{% set fill = old('fill', transform.fill) %}
-{% set quality = old('quality', transform.quality) %}
-{% set format = old('format', transform.format) %}
-{% set qualityPickerValue = 0 %}
-{% if quality %}
-    {% set matchingQualityOption = qualityPickerOptions|filter(o => quality >= o.value)|last %}
-    {% set qualityPickerValue = matchingQualityOption ? matchingQualityOption.value : 10 %}
-{% endif %}
-
-{% import '_includes/forms.twig' as forms %}
-
-{% if readOnly %}
-    {% set contentNotice = readOnlyNotice() %}
-{% endif %}
-
-{% block content %}
-    {% if not readOnly %}
-        {{ actionInput('image-transforms/save') }}
-        {{ redirectInput('settings/assets/transforms') }}
-
-        {% if transform.id %}{{ hiddenInput('transformId', transform.id) }}{% endif %}
-    {% endif %}
-
-    {{ forms.textField({
-        first: true,
-        label: "Name"|t('app'),
-        id: 'name',
-        name: 'name',
-        value: old('name', transform.name),
-        errors: transform.errors.get('name'),
-        autofocus: true,
-        required: true,
-        disabled: readOnly,
-    }) }}
-
-    {{ forms.textField({
-        label: "Handle"|t('app'),
-        id: "handle",
-        name: "handle",
-        class: 'code',
-        autocorrect: false,
-        autocapitalize: false,
-        value: old('handle', transform.handle),
-        errors: transform.errors.get('handle'),
-        required: true,
-        disabled: readOnly,
-    }) }}
-
-    {% embed '_includes/forms/field.twig' with {
-        label: 'Mode'|t('app')
-    } %}
-        {% block input %}
-            <div id="mode" class="flex items-start gap-l">
-                <label class="nowrap">
-                    <img class="mb-xs" src="{{ baseIconsUrl }}/crop.svg" width="80" height="60" alt="">
-                    {{ input('radio', 'mode', 'crop', {
-                        checked: mode == 'crop',
-                        disabled: readOnly,
-                    }) }}
-                    {{ "Crop"|t('app') }}
-                </label>
-                <label class="nowrap">
-                    <img class="mb-xs" src="{{ baseIconsUrl }}/fit.svg" width="80" height="60" alt="">
-                    {{ input('radio', 'mode', 'fit', {
-                        checked: mode == 'fit',
-                        disabled: readOnly,
-                    }) }}
-                    {{ "Fit"|t('app') }}
-                </label>
-                <label class="nowrap">
-                    <img class="mb-xs" src="{{ baseIconsUrl }}/letterbox.svg" width="80" height="60" alt="">
-                    {{ input('radio', 'mode', 'letterbox', {
-                        checked: mode == 'letterbox',
-                        disabled: readOnly,
-                    }) }}
-                    {{ "Letterbox"|t('app') }}
-                </label>
-                <label class="nowrap">
-                    <img class="mb-xs" src="{{ baseIconsUrl }}/stretch.svg" width="80" height="60" alt="">
-                    {{ input('radio', 'mode', 'stretch', {
-                        checked: mode == 'stretch',
-                        disabled: readOnly,
-                    }) }}
-                    {{ "Stretch"|t('app') }}
-                </label>
-            </div>
-        {% endblock %}
-    {% endembed %}
-
-    <div id="fill-color" class="field {% if mode != 'letterbox' or fill is null %}hidden{% endif %}">
-        {{ forms.colorField({
-            label: 'Fill Color',
-            name: 'fill',
-            value: mode == 'letterbox' and fill != 'transparent' ? fill,
-            errors: transform.errors.get('fill'),
-            disabled: readOnly,
-        }) }}
-    </div>
-
-    <div id="position-container"{% if mode not in ['crop', 'letterbox'] %} class="hidden"{% endif %}>
-        {% set positionLabel = mode == 'letterbox' ? letterboxPositionLabel : defaultPositionLabel %}
-        {{ forms.selectField({
-            label: positionLabel,
-            id: 'position',
-            name: 'position',
-            options: {
-                'top-left': "Top-Left"|t('app'),
-                'top-center': "Top-Center"|t('app'),
-                'top-right': "Top-Right"|t('app'),
-                'center-left': "Center-Left"|t('app'),
-                'center-center': "Center-Center"|t('app'),
-                'center-right': "Center-Right"|t('app'),
-                'bottom-left': "Bottom-Left"|t('app'),
-                'bottom-center': "Bottom-Center"|t('app'),
-                'bottom-right': "Bottom-Right"|t('app')
-            },
-            value: mode in ['crop', 'letterbox'] ? old('position', transform.position) : 'center-center',
-            disabled: readOnly,
-        }) }}
-    </div>
-
-    {{ forms.textField({
-        label: "Width"|t('app'),
-        id: "width",
-        name: "width",
-        size: 5,
-        value: old('width', transform.width),
-        errors: transform.errors.get('width'),
-        disabled: readOnly,
-    }) }}
-
-    {{ forms.textField({
-        label: "Height"|t('app'),
-        id: "height",
-        name: "height",
-        size: 5,
-        value: old('height', transform.height),
-        errors: transform.errors.get('height'),
-        disabled: readOnly,
-    }) }}
-
-    {{ forms.lightswitchField({
-        label: 'Allow Upscaling'|t('app'),
-        id: 'upscale',
-        name: 'upscale',
-        on: old('upscale', transform.upscale ?? config('craft.general.upscaleImages')),
-        errors: transform.errors.get('upscale'),
-        disabled: readOnly,
-    }) }}
-
-    {% embed '_includes/forms/field.twig' with {
-        label: 'Quality'|t('app'),
-        errors: transform.errors.get('quality'),
-    } %}
-        {% block input %}
-            {% import '_includes/forms.twig' as forms %}
-            <div class="flex flex-nowrap">
-                <div>
-                    {{ forms.select({
-                        id: 'quality-picker',
-                        options: [
-                            {label: 'Auto'|t('app'), value: 0},
-                        ]|merge(qualityPickerOptions),
-                        value: qualityPickerValue,
-                        describedBy: describedBy,
-                        disabled: readOnly,
-                    }) }}
-                </div>
-                <div class="flex-grow">
-                    {{ forms.text({
-                        id: 'quality',
-                        class: [
-                            'ltr',
-                            quality == 0 ? 'hidden',
-                        ]|filter,
-                        name: 'quality',
-                        value: quality,
-                        size: 5,
-                        type: 'number',
-                        min: 1,
-                        max: 100,
-                        describedBy: describedBy,
-                        disabled: readOnly,
-                    }) }}
-                </div>
-            </div>
-        {% endblock %}
-    {% endembed %}
-
-    {{ forms.selectField({
-        label: "Interlacing"|t('app'),
-        id: "interlace",
-        name: "interlace",
-        options: [
-            {label: 'None'|t('app'), value: 'none'},
-            {label: 'Line'|t('app'), value: 'line'},
-            {label: 'Plane'|t('app'), value: 'plane'},
-            {label: 'Partition'|t('app'), value: 'partition'},
-        ],
-        value: old('interlace', transform.interlace ?? 'none'),
-        errors: transform.errors.get('interlace'),
-        disabled: readOnly,
-    }) }}
-
-    {% set formatOptions = [
-        {label: 'Auto', value: null},
-        {label: 'jpg', value: 'jpg'},
-        {label: 'png', value: 'png'},
-        {label: 'gif', value: 'gif'},
-    ] %}
-
-    {% if format == 'webp' or Images.supportsWebP %}
-        {% set formatOptions = formatOptions|merge([{label: 'webp', value: 'webp'}]) %}
-    {% endif %}
-
-    {% if format == 'avif' or Images.supportsAvif %}
-        {% set formatOptions = formatOptions|merge([{label: 'avif', value: 'avif'}]) %}
-    {% endif %}
-
-    {{ forms.selectField({
-        label: "Image Format"|t('app'),
-        id: "format",
-        name: "format",
-        instructions: "The image format that transformed images should use."|t('app'),
-        value: format,
-        errors: transform.errors.get('format'),
-        options: formatOptions,
-        disabled: readOnly,
-    }) }}
-
-{% endblock %}
-
-
-{% js %}
-    {% if not old('handle', transform.handle) %}new Craft.HandleGenerator('#name', '#handle');{% endif %}
-
-    $('#mode input').change(function() {
-        const value = $(this).val();
-
-        // Letterbox mode requires a position:
-        if (value == 'letterbox') {
-            $('#fill-color').removeClass('hidden');
-            $('#position-container label[for="position"]').text(`{{ letterboxPositionLabel }}`);
-        } else {
-            $('#fill-color').addClass('hidden');
-            $('#position-container label[for="position"]').text(`{{ defaultPositionLabel }}`);
-        }
-
-        // Crop and letterbox modes requires a position:
-        if (value == 'crop' || value == 'letterbox') {
-            $('#position-container').removeClass('hidden');
-        } else {
-            $('#position-container').addClass('hidden');
-        }
-    });
-
-    const qualityPickerOptions = {{ qualityPickerOptions|map(o => o.value)|json_encode|raw }};
-    const $qualityPicker = $('#quality-picker');
-    const $qualityInput = $('#quality');
-
-    $qualityPicker.on('change', (ev) => {
-        const pickerValue = $qualityPicker.val();
-        $qualityInput.val(pickerValue);
-
-        if (pickerValue === '0') {
-            $qualityInput.addClass('hidden');
-        } else {
-            $qualityInput.removeClass('hidden');
-        }
-    });
-
-    $qualityInput.on('input', (ev) => {
-        let quality = parseInt($qualityInput.val());
-        if (isNaN(quality)) {
-            quality = 0;
-        }
-
-        let pickerValue;
-        if (quality) {
-            // Default to Low, even if quality is < 10
-            pickerValue = 10;
-            for (let i = 0; i < qualityPickerOptions.length; i++) {
-                if (quality >= qualityPickerOptions[i]) {
-                    pickerValue = qualityPickerOptions[i];
-                } else {
-                    break;
-                }
-            }
-        } else {
-            // Auto
-            pickerValue = 0;
-        }
-
-        $qualityPicker.val(pickerValue);
-    });
-{% endjs %}

From 1c38a201a60b3b0f1a00153059360d26f06b9640 Mon Sep 17 00:00:00 2001
From: Rias <hey@rias.be>
Date: Thu, 21 May 2026 17:34:54 +0200
Subject: [PATCH 3/4] Move routes

---
 .../transforms/EditImageTransformPage.vue       |  2 +-
 routes/actions.php                              |  2 --
 routes/cp.php                                   | 17 +++++++++++++----
 .../Settings/ImageTransformsController.php      |  2 +-
 .../Settings/ImageTransformsControllerTest.php  | 16 ++++++++--------
 5 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/resources/js/pages/settings/assets/transforms/EditImageTransformPage.vue b/resources/js/pages/settings/assets/transforms/EditImageTransformPage.vue
index 067d5815eab..2c25f6faabb 100644
--- a/resources/js/pages/settings/assets/transforms/EditImageTransformPage.vue
+++ b/resources/js/pages/settings/assets/transforms/EditImageTransformPage.vue
@@ -5,7 +5,7 @@
   import useCraftData from '@/composables/useCraftData';
   import {useSettingsSave} from '@/composables/useSettingsSave';
   import AppLayout from '@/layout/AppLayout.vue';
-  import {save as saveTransform} from '@actions/Settings/ImageTransformsController';
+  import {store as saveTransform} from '@actions/Settings/ImageTransformsController';
   import {t, toHandle} from '@craftcms/cp';
   import CraftInput from '@craftcms/cp/vue/CraftInput.vue';
   import CraftInputHandle from '@craftcms/cp/vue/CraftInputHandle.vue';
diff --git a/routes/actions.php b/routes/actions.php
index ef73adc8619..743b6123bfd 100644
--- a/routes/actions.php
+++ b/routes/actions.php
@@ -72,7 +72,6 @@
 use CraftCms\Cms\Http\Controllers\RelationalFieldsController;
 use CraftCms\Cms\Http\Controllers\Settings\EntryTypesController;
 use CraftCms\Cms\Http\Controllers\Settings\FilesystemsController;
-use CraftCms\Cms\Http\Controllers\Settings\ImageTransformsController;
 use CraftCms\Cms\Http\Controllers\Settings\RoutesController;
 use CraftCms\Cms\Http\Controllers\Settings\SectionsController;
 use CraftCms\Cms\Http\Controllers\Settings\UserSettingsController;
@@ -428,7 +427,6 @@
         Route::middleware([RequireAdminChanges::class])->group(function () {
             Route::post('volumes/save-volume', [VolumesController::class, 'save']);
             Route::post('volumes/reorder-volumes', [VolumesController::class, 'reorder']);
-            Route::post('image-transforms/save', [ImageTransformsController::class, 'save']);
         });
 
         // Plugins
diff --git a/routes/cp.php b/routes/cp.php
index 41ac234a0c9..54231959254 100644
--- a/routes/cp.php
+++ b/routes/cp.php
@@ -251,10 +251,19 @@
         Route::middleware(RequireAdminChanges::class)->get('settings/assets/volumes/new', [VolumesController::class, 'create']);
         Route::get('settings/assets/volumes/{volumeId}', [VolumesController::class, 'edit'])->whereNumber('volumeId');
         Route::middleware(RequireAdminChanges::class)->delete('settings/assets/volumes/{volumeId}', [VolumesController::class, 'destroy'])->whereNumber('volumeId');
-        Route::get('settings/assets/transforms', [ImageTransformsController::class, 'index']);
-        Route::middleware(RequireAdminChanges::class)->get('settings/assets/transforms/new', [ImageTransformsController::class, 'create']);
-        Route::get('settings/assets/transforms/{transformHandle}', [ImageTransformsController::class, 'edit']);
-        Route::middleware(RequireAdminChanges::class)->delete('settings/assets/transforms/{transformId}', [ImageTransformsController::class, 'destroy']);
+
+        // Transforms
+        Route::prefix('settings/assets/transforms')->name('settings.assets.transforms.')->group(function () {
+            Route::get('/', [ImageTransformsController::class, 'index'])->name('index');
+
+            Route::middleware(RequireAdminChanges::class)->group(function () {
+                Route::get('new', [ImageTransformsController::class, 'create'])->name('create');
+                Route::post('/', [ImageTransformsController::class, 'store']);
+                Route::delete('{transformId}', [ImageTransformsController::class, 'destroy'])->name('destroy');
+            });
+
+            Route::get('{transformHandle}', [ImageTransformsController::class, 'edit'])->name('edit');
+        });
 
         // Sites
         Route::get('settings/sites', [SitesController::class, 'index'])
diff --git a/src/Http/Controllers/Settings/ImageTransformsController.php b/src/Http/Controllers/Settings/ImageTransformsController.php
index 1946d7f993d..aa1fa63342a 100644
--- a/src/Http/Controllers/Settings/ImageTransformsController.php
+++ b/src/Http/Controllers/Settings/ImageTransformsController.php
@@ -55,7 +55,7 @@ public function edit(ImageTransforms $imageTransforms, Images $images, string $t
         return $this->editScreen($transform, $images);
     }
 
-    public function save(Request $request, ImageTransforms $imageTransforms): Response
+    public function store(Request $request, ImageTransforms $imageTransforms): Response
     {
         $transform = new ImageTransform;
         $transform->id = $request->integer('transformId') ?: null;
diff --git a/tests/Feature/Http/Controllers/Settings/ImageTransformsControllerTest.php b/tests/Feature/Http/Controllers/Settings/ImageTransformsControllerTest.php
index 8ebc70fd3ea..fc3c2f4c1d8 100644
--- a/tests/Feature/Http/Controllers/Settings/ImageTransformsControllerTest.php
+++ b/tests/Feature/Http/Controllers/Settings/ImageTransformsControllerTest.php
@@ -72,7 +72,7 @@ function validTransformData(array $overrides = []): array
     get(action([ImageTransformsController::class, 'index']))->assertRedirect();
     get(action([ImageTransformsController::class, 'create']))->assertRedirect();
     get(action([ImageTransformsController::class, 'edit'], ['transformHandle' => $transform->handle]))->assertRedirect();
-    postJson(action([ImageTransformsController::class, 'save']))->assertUnauthorized();
+    postJson(action([ImageTransformsController::class, 'store']))->assertUnauthorized();
     deleteJson(action([ImageTransformsController::class, 'destroy'], [$transform->id]))->assertUnauthorized();
 });
 
@@ -88,7 +88,7 @@ function validTransformData(array $overrides = []): array
             ->where('readOnly', true));
 
     get(action([ImageTransformsController::class, 'create']))->assertForbidden();
-    postJson(action([ImageTransformsController::class, 'save']), validTransformData())->assertForbidden();
+    postJson(action([ImageTransformsController::class, 'store']), validTransformData())->assertForbidden();
     deleteJson(action([ImageTransformsController::class, 'destroy'], [$transform->id]))->assertForbidden();
 });
 
@@ -136,7 +136,7 @@ function validTransformData(array $overrides = []): array
 
     $payload = validTransformData();
 
-    postJson(action([ImageTransformsController::class, 'save']), $payload)
+    postJson(action([ImageTransformsController::class, 'store']), $payload)
         ->assertOk()
         ->assertJsonPath('modelName', 'transform');
 
@@ -155,7 +155,7 @@ function validTransformData(array $overrides = []): array
         'handle' => 'continuedTransform',
     ]);
 
-    post(action([ImageTransformsController::class, 'save']), $payload)
+    post(action([ImageTransformsController::class, 'store']), $payload)
         ->assertRedirect(Url::cpUrl('settings/assets/transforms/continuedTransform'))
         ->assertSessionHas('success', t('Transform saved.'));
 });
@@ -166,7 +166,7 @@ function validTransformData(array $overrides = []): array
         'redirect' => Crypt::encrypt('settings/assets/transforms'),
     ]);
 
-    post(action([ImageTransformsController::class, 'save']), $payload)
+    post(action([ImageTransformsController::class, 'store']), $payload)
         ->assertRedirect(Url::cpUrl('settings/assets/transforms'))
         ->assertSessionHas('success', t('Transform saved.'));
 });
@@ -178,7 +178,7 @@ function validTransformData(array $overrides = []): array
         'width' => 100,
     ]);
 
-    postJson(action([ImageTransformsController::class, 'save']), validTransformData([
+    postJson(action([ImageTransformsController::class, 'store']), validTransformData([
         'transformId' => $transform->id,
         'name' => 'Updated Name',
         'handle' => $transform->handle,
@@ -197,7 +197,7 @@ function validTransformData(array $overrides = []): array
 });
 
 it('rejects save when both width and height are missing', function () {
-    postJson(action([ImageTransformsController::class, 'save']), validTransformData([
+    postJson(action([ImageTransformsController::class, 'store']), validTransformData([
         'width' => '',
         'height' => '',
     ]))
@@ -213,7 +213,7 @@ function validTransformData(array $overrides = []): array
         'fill' => 'abc',
     ]);
 
-    postJson(action([ImageTransformsController::class, 'save']), $payload)->assertOk();
+    postJson(action([ImageTransformsController::class, 'store']), $payload)->assertOk();
 
     $service = app(ImageTransforms::class);
     $service->reset();

From 60db2c74db5f74f70a19962cef4c437689b925e1 Mon Sep 17 00:00:00 2001
From: Rias <hey@rias.be>
Date: Thu, 21 May 2026 19:59:10 +0200
Subject: [PATCH 4/4] Port ColorInput to cp components

---
 .../scripts/generate-vue-wrappers.js          |  17 ++
 .../input-color/input-color.stories.ts        |  74 ++++++
 .../input-color/input-color.styles.ts         | 120 ++++++++++
 .../input-color/input-color.test.ts           | 125 ++++++++++
 .../src/components/input-color/input-color.ts | 224 ++++++++++++++++++
 packages/craftcms-cp/src/index.ts             |   1 +
 packages/craftcms-cp/vitest.config.ts         |  10 +
 resources/js/components/form/ColorInput.vue   | 190 ---------------
 .../transforms/EditImageTransformPage.vue     |   4 +-
 9 files changed, 573 insertions(+), 192 deletions(-)
 create mode 100644 packages/craftcms-cp/src/components/input-color/input-color.stories.ts
 create mode 100644 packages/craftcms-cp/src/components/input-color/input-color.styles.ts
 create mode 100644 packages/craftcms-cp/src/components/input-color/input-color.test.ts
 create mode 100644 packages/craftcms-cp/src/components/input-color/input-color.ts
 delete mode 100644 resources/js/components/form/ColorInput.vue

diff --git a/packages/craftcms-cp/scripts/generate-vue-wrappers.js b/packages/craftcms-cp/scripts/generate-vue-wrappers.js
index 4608ae50f4b..55235c1c9ba 100644
--- a/packages/craftcms-cp/scripts/generate-vue-wrappers.js
+++ b/packages/craftcms-cp/scripts/generate-vue-wrappers.js
@@ -44,6 +44,23 @@ const VALUE_COMPONENTS = [
       'after',
     ],
   },
+  {
+    tagName: 'craft-input-color',
+    className: 'CraftInputColor',
+    fileName: 'CraftInputColor',
+    modelType: 'string',
+    importPath: '../components/input-color/input-color',
+    slots: [
+      'label',
+      'help-text',
+      'input',
+      'feedback',
+      'prefix',
+      'suffix',
+      'before',
+      'after',
+    ],
+  },
   {
     tagName: 'craft-input-handle',
     className: 'CraftInputHandle',
diff --git a/packages/craftcms-cp/src/components/input-color/input-color.stories.ts b/packages/craftcms-cp/src/components/input-color/input-color.stories.ts
new file mode 100644
index 00000000000..e4adafb1829
--- /dev/null
+++ b/packages/craftcms-cp/src/components/input-color/input-color.stories.ts
@@ -0,0 +1,74 @@
+import type {Meta, StoryObj} from '@storybook/web-components-vite';
+
+import {html} from 'lit';
+
+import './input-color.js';
+
+const meta = {
+  title: 'Controls/InputColor',
+  component: 'craft-input-color',
+  args: {
+    label: 'Fill Color',
+    value: '7ab55c',
+  },
+  render: function ({label, value}) {
+    return html`<craft-input-color
+      label="${label}"
+      .modelValue="${value}"
+    ></craft-input-color>`;
+  },
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<any>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const Shorthand: Story = {
+  args: {
+    value: 'abc',
+  },
+};
+
+export const Invalid: Story = {
+  args: {
+    value: 'not-a-color',
+  },
+};
+
+export const Disabled: Story = {
+  render: () =>
+    html`<craft-input-color
+      label="Fill Color"
+      .modelValue="${'7ab55c'}"
+      disabled
+    ></craft-input-color>`,
+};
+
+export const WithPresets: Story = {
+  render: () => html`
+    <craft-input-color
+      label="Fill Color"
+      .modelValue="${'7ab55c'}"
+      .presets="${['#ffffff', '000000', '#7ab55c', 'e5422b']}"
+    ></craft-input-color>
+  `,
+};
+
+export const WithError: Story = {
+  render: () => html`
+    <craft-input-color
+      label="Fill Color"
+      .modelValue="${'not-a-color'}"
+      has-feedback-for="error"
+    >
+      <div slot="feedback">
+        <ul class="error-list">
+          <li>Enter a valid hex color.</li>
+        </ul>
+      </div>
+    </craft-input-color>
+  `,
+};
diff --git a/packages/craftcms-cp/src/components/input-color/input-color.styles.ts b/packages/craftcms-cp/src/components/input-color/input-color.styles.ts
new file mode 100644
index 00000000000..aba1e110b13
--- /dev/null
+++ b/packages/craftcms-cp/src/components/input-color/input-color.styles.ts
@@ -0,0 +1,120 @@
+import {css} from 'lit';
+import {baseFieldStyles, baseInputStyles} from '../../styles/form.styles';
+
+export default css`
+  ${baseFieldStyles}
+
+  :host {
+    display: block;
+  }
+
+  .input-color {
+    display: grid;
+    gap: var(--c-spacing-sm);
+  }
+
+  .input-color__control {
+    display: flex;
+    align-items: center;
+    gap: var(--c-spacing-sm);
+  }
+
+  .input-color__swatch {
+    position: relative;
+    display: block;
+    flex: 0 0 auto;
+    inline-size: var(--c-input-height, var(--c-size-control-md));
+    block-size: var(--c-input-height, var(--c-size-control-md));
+    border-radius: 50%;
+    overflow: hidden;
+    background:
+      linear-gradient(
+        45deg,
+        var(--c-color-neutral-fill-quiet) 25%,
+        transparent 25%
+      ),
+      linear-gradient(
+        -45deg,
+        var(--c-color-neutral-fill-quiet) 25%,
+        transparent 25%
+      ),
+      linear-gradient(
+        45deg,
+        transparent 75%,
+        var(--c-color-neutral-fill-quiet) 75%
+      ),
+      linear-gradient(
+        -45deg,
+        transparent 75%,
+        var(--c-color-neutral-fill-quiet) 75%
+      );
+    background-position:
+      0 0,
+      0 0.375rem,
+      0.375rem -0.375rem,
+      -0.375rem 0;
+    background-size: 0.75rem 0.75rem;
+  }
+
+  :host(:not([disabled])) .input-color__swatch {
+    cursor: pointer;
+  }
+
+  .input-color__swatch:focus-within {
+    box-shadow: var(
+      --focus-ring,
+      0 0 0 2px var(--c-color-accent-border-normal)
+    );
+  }
+
+  .input-color__preview {
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 15%);
+  }
+
+  .input-color__picker {
+    position: absolute;
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    border: 0;
+    margin: 0;
+    padding: 0;
+    opacity: 0;
+  }
+
+  .input-group__container {
+    ${baseInputStyles}
+    flex: 0 0 7.25rem;
+    inline-size: 7.25rem;
+    max-inline-size: 100%;
+  }
+
+  .input-group__input {
+    display: flex;
+    flex: 1 1 auto;
+  }
+
+  .input-group__prefix {
+    color: var(--c-text-quiet);
+    user-select: none;
+    font-family: var(--c-font-mono);
+    padding-inline: var(--c-input-spacing-inline) 0;
+    display: grid;
+    place-items: center;
+  }
+
+  ::slotted([slot='input']) {
+    width: 100%;
+    min-inline-size: 0;
+    font: inherit;
+    font-family: var(--c-font-mono);
+    padding-block: 0;
+    padding-inline: var(--c-spacing-xs) var(--c-input-spacing-inline);
+    border: 0;
+    appearance: none;
+    background-color: transparent;
+  }
+`;
diff --git a/packages/craftcms-cp/src/components/input-color/input-color.test.ts b/packages/craftcms-cp/src/components/input-color/input-color.test.ts
new file mode 100644
index 00000000000..61e85ebdd41
--- /dev/null
+++ b/packages/craftcms-cp/src/components/input-color/input-color.test.ts
@@ -0,0 +1,125 @@
+import {beforeEach, describe, expect, it} from 'vitest';
+import type CraftInputColor from './input-color.js';
+import './input-color.js';
+
+async function createInputColor(): Promise<CraftInputColor> {
+  const element = document.createElement('craft-input-color');
+  element.label = 'Fill Color';
+  document.body.append(element);
+  await element.updateComplete;
+
+  return element;
+}
+
+function textInput(element: CraftInputColor): HTMLInputElement {
+  return element.querySelector('input[slot="input"]') as HTMLInputElement;
+}
+
+function pickerInput(element: CraftInputColor): HTMLInputElement {
+  return element.shadowRoot?.querySelector(
+    '.input-color__picker'
+  ) as HTMLInputElement;
+}
+
+function preview(element: CraftInputColor): HTMLElement {
+  return element.shadowRoot?.querySelector(
+    '.input-color__preview'
+  ) as HTMLElement;
+}
+
+beforeEach(() => {
+  document.body.innerHTML = '';
+});
+
+describe('craft-input-color', () => {
+  it('strips a leading # from typed values', async () => {
+    const element = await createInputColor();
+    const input = textInput(element);
+
+    input.value = '#abc';
+    input.dispatchEvent(
+      new InputEvent('input', {bubbles: true, composed: true})
+    );
+    await element.updateComplete;
+
+    expect(element.modelValue).toBe('abc');
+    expect(input.value).toBe('abc');
+  });
+
+  it('preserves shorthand values while expanding the picker and preview values', async () => {
+    const element = await createInputColor();
+
+    element.modelValue = 'abc';
+    await element.updateComplete;
+
+    expect(element.modelValue).toBe('abc');
+    expect(pickerInput(element).value).toBe('#aabbcc');
+    expect(preview(element).getAttribute('style')).toContain(
+      'background-color: #aabbcc'
+    );
+  });
+
+  it('keeps invalid text values and clears the preview', async () => {
+    const element = await createInputColor();
+
+    element.modelValue = 'not-a-color';
+    await element.updateComplete;
+
+    expect(textInput(element).value).toBe('not-a-color');
+    expect(preview(element).getAttribute('style')).toBe('');
+  });
+
+  it('updates the model from the native color picker without a # prefix', async () => {
+    const element = await createInputColor();
+    const picker = pickerInput(element);
+
+    picker.value = '#112233';
+    picker.dispatchEvent(
+      new InputEvent('input', {bubbles: true, composed: true})
+    );
+    await element.updateComplete;
+
+    expect(element.modelValue).toBe('112233');
+    expect(textInput(element).value).toBe('112233');
+  });
+
+  it('parses presets from a JSON attribute and normalizes them for the picker datalist', async () => {
+    const element = await createInputColor();
+
+    element.setAttribute('presets', '["abc", "#112233", "not-a-color"]');
+    await element.updateComplete;
+
+    const options = [
+      ...element.shadowRoot!.querySelectorAll('datalist option'),
+    ].map((option) => option.getAttribute('value'));
+
+    expect(options).toEqual(['#aabbcc', '#112233']);
+  });
+
+  it('sets disabled state on the native picker', async () => {
+    const element = await createInputColor();
+
+    element.disabled = true;
+    await element.updateComplete;
+
+    expect(pickerInput(element).disabled).toBe(true);
+  });
+
+  it('submits the no-# value with native forms', async () => {
+    const form = document.createElement('form');
+    const element = document.createElement('craft-input-color');
+
+    element.name = 'fill';
+    form.append(element);
+    document.body.append(form);
+    element.modelValue = '#abc';
+    await element.updateComplete;
+
+    expect(new FormData(form).get('fill')).toBe('abc');
+
+    element.disabled = true;
+    await element.updateComplete;
+
+    expect(new FormData(form).has('fill')).toBe(false);
+  });
+});
diff --git a/packages/craftcms-cp/src/components/input-color/input-color.ts b/packages/craftcms-cp/src/components/input-color/input-color.ts
new file mode 100644
index 00000000000..35e4accea8d
--- /dev/null
+++ b/packages/craftcms-cp/src/components/input-color/input-color.ts
@@ -0,0 +1,224 @@
+import {LionInput} from '@lion/ui/input.js';
+import {html, nothing} from 'lit';
+import {property} from 'lit/decorators.js';
+import {inputStyles} from '@src/styles/form.styles';
+import {t} from '@src/utilities/translate';
+import styles from './input-color.styles.js';
+
+const HEX_COLOR_PATTERN = /^[0-9a-f]{6}$/i;
+const SHORT_HEX_COLOR_PATTERN = /^[0-9a-f]{3}$/i;
+
+const presetsConverter = {
+  fromAttribute(value: string | null): string[] {
+    if (!value) {
+      return [];
+    }
+
+    try {
+      const parsedValue = JSON.parse(value);
+
+      if (!Array.isArray(parsedValue)) {
+        return [];
+      }
+
+      return parsedValue.map((preset) => String(preset));
+    } catch {
+      return [];
+    }
+  },
+};
+
+function normalizeColorValue(value: unknown): string {
+  return String(value ?? '')
+    .trim()
+    .replace(/^#/, '');
+}
+
+function expandedHexValue(value: unknown): string | null {
+  const normalizedValue = normalizeColorValue(value);
+
+  if (SHORT_HEX_COLOR_PATTERN.test(normalizedValue)) {
+    return normalizedValue
+      .split('')
+      .map((character) => character + character)
+      .join('');
+  }
+
+  if (HEX_COLOR_PATTERN.test(normalizedValue)) {
+    return normalizedValue;
+  }
+
+  return null;
+}
+
+export default class CraftInputColor extends LionInput {
+  static override get styles() {
+    return [...super.styles, inputStyles, styles];
+  }
+
+  static _browserSupportsColorInputs: boolean | null = null;
+
+  @property({converter: presetsConverter})
+  presets: string[] = [];
+
+  protected _pickerListId = `${this._inputId}-presets`;
+
+  constructor() {
+    super();
+    this.type = 'text';
+  }
+
+  static doesBrowserSupportColorInputs(): boolean {
+    if (CraftInputColor._browserSupportsColorInputs === null) {
+      const input = document.createElement('input');
+      input.setAttribute('type', 'color');
+      CraftInputColor._browserSupportsColorInputs = input.type === 'color';
+    }
+
+    return CraftInputColor._browserSupportsColorInputs;
+  }
+
+  override get slots() {
+    return {
+      ...super.slots,
+      input: () => {
+        const input = document.createElement('input');
+        const value = this.getAttribute('value');
+
+        input.type = 'text';
+        input.inputMode = 'text';
+        input.spellcheck = false;
+        input.setAttribute('autocorrect', 'off');
+        input.setAttribute('autocapitalize', 'off');
+
+        if (value) {
+          input.setAttribute('value', normalizeColorValue(value));
+        }
+
+        return input;
+      },
+    };
+  }
+
+  override parser(value: string) {
+    return normalizeColorValue(value);
+  }
+
+  override formatter(value: unknown) {
+    return normalizeColorValue(value);
+  }
+
+  override serializer(value: unknown) {
+    return normalizeColorValue(value);
+  }
+
+  override deserializer(value: string) {
+    return normalizeColorValue(value);
+  }
+
+  override preprocessor(value: string) {
+    const normalizedValue = normalizeColorValue(value);
+
+    if (normalizedValue === value) {
+      return undefined;
+    }
+
+    return normalizedValue;
+  }
+
+  protected get _expandedHexValue(): string | null {
+    return expandedHexValue(this.modelValue);
+  }
+
+  protected get _pickerValue(): string {
+    return this._expandedHexValue ? `#${this._expandedHexValue}` : '#ffffff';
+  }
+
+  protected get _validPresets(): string[] {
+    return this.presets
+      .map((preset) => expandedHexValue(preset))
+      .filter((preset): preset is string => preset !== null)
+      .map((preset) => `#${preset}`);
+  }
+
+  protected _handlePickerInput(event: Event) {
+    const input = event.target as HTMLInputElement;
+    const normalizedValue = normalizeColorValue(input.value);
+    const wasHandlingUserInput = this._isHandlingUserInput;
+
+    this._isHandlingUserInput = true;
+    this.modelValue = normalizedValue;
+    this.value = normalizedValue;
+    this._isHandlingUserInput = wasHandlingUserInput;
+  }
+
+  protected _pickerTemplate() {
+    if (!CraftInputColor.doesBrowserSupportColorInputs()) {
+      return nothing;
+    }
+
+    const presets = this._validPresets;
+
+    return html`
+      <input
+        class="input-color__picker"
+        type="color"
+        aria-controls="${this._inputId}"
+        aria-label="${t('Color picker')}"
+        .value="${this._pickerValue}"
+        ?disabled="${this.disabled}"
+        list=${presets.length ? this._pickerListId : nothing}
+        @input="${this._handlePickerInput}"
+      />
+      ${presets.length
+        ? html`
+            <datalist id="${this._pickerListId}">
+              ${presets.map(
+                (preset) => html`<option value="${preset}"></option>`
+              )}
+            </datalist>
+          `
+        : nothing}
+    `;
+  }
+
+  protected _swatchTemplate() {
+    const previewStyle = this._expandedHexValue
+      ? `background-color: #${this._expandedHexValue}`
+      : '';
+
+    return html`
+      <label class="input-color__swatch">
+        <span class="input-color__preview" style="${previewStyle}"></span>
+        ${this._pickerTemplate()}
+      </label>
+    `;
+  }
+
+  override _inputGroupTemplate() {
+    return html`
+      <div class="input-color">
+        ${this._inputGroupBeforeTemplate()}
+        <div class="input-color__control">
+          ${this._swatchTemplate()}
+          <div class="input-group__container">
+            <div class="input-group__prefix" aria-hidden="true">#</div>
+            ${this._inputGroupInputTemplate()}
+            ${this._inputGroupSuffixTemplate()}
+          </div>
+        </div>
+        ${this._inputGroupAfterTemplate()}
+      </div>
+    `;
+  }
+}
+
+if (!customElements.get('craft-input-color')) {
+  customElements.define('craft-input-color', CraftInputColor);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'craft-input-color': CraftInputColor;
+  }
+}
diff --git a/packages/craftcms-cp/src/index.ts b/packages/craftcms-cp/src/index.ts
index fc68049f859..2b8fd5c9bde 100644
--- a/packages/craftcms-cp/src/index.ts
+++ b/packages/craftcms-cp/src/index.ts
@@ -15,6 +15,7 @@ export {default as CraftCopyButton} from './components/copy-button/copy-button.j
 export {default as CraftButton} from './components/button/button.js';
 export {default as CraftAvatar} from './components/avatar/avatar.js';
 export {default as CraftInput} from './components/input/input.js';
+export {default as CraftInputColor} from './components/input-color/input-color.js';
 export {default as CraftInputFile} from './components/input-file/input-file.js';
 export {default as CraftInputHandle} from './components/input-handle/input-handle.js';
 export {default as CraftInputPassword} from './components/input-password/input-password.js';
diff --git a/packages/craftcms-cp/vitest.config.ts b/packages/craftcms-cp/vitest.config.ts
index 4b413cdd686..ff016216e31 100644
--- a/packages/craftcms-cp/vitest.config.ts
+++ b/packages/craftcms-cp/vitest.config.ts
@@ -32,6 +32,16 @@ export default defineConfig({
           environment: 'happy-dom',
         },
       },
+      {
+        resolve: {
+          tsconfigPaths: true,
+        },
+        test: {
+          name: 'components',
+          root: './src/components',
+          environment: 'happy-dom',
+        },
+      },
       {
         extends: true,
         plugins: [
diff --git a/resources/js/components/form/ColorInput.vue b/resources/js/components/form/ColorInput.vue
deleted file mode 100644
index cdad2b8d1c7..00000000000
--- a/resources/js/components/form/ColorInput.vue
+++ /dev/null
@@ -1,190 +0,0 @@
-<script setup lang="ts">
-  import CraftInput from '@craftcms/cp/vue/CraftInput.vue';
-  import {t} from '@craftcms/cp';
-  import {computed} from 'vue';
-
-  const model = defineModel<string | null>({default: ''});
-
-  defineProps<{
-    id: string;
-    name?: string;
-    label?: string;
-    disabled?: boolean;
-    error?: string;
-  }>();
-
-  const textValue = computed({
-    get() {
-      return (model.value ?? '').replace(/^#/, '');
-    },
-    set(value: string) {
-      model.value = value.trim().replace(/^#/, '');
-    },
-  });
-
-  const expandedHexValue = computed(() => {
-    const value = textValue.value;
-
-    if (/^[0-9a-fA-F]{3}$/.test(value)) {
-      return value
-        .split('')
-        .map((character) => character + character)
-        .join('');
-    }
-
-    if (/^[0-9a-fA-F]{6}$/.test(value)) {
-      return value;
-    }
-
-    return null;
-  });
-
-  const colorValue = computed({
-    get() {
-      return expandedHexValue.value ? `#${expandedHexValue.value}` : '#ffffff';
-    },
-    set(value: string) {
-      model.value = value.replace(/^#/, '');
-    },
-  });
-
-  const swatchStyle = computed(() => {
-    return expandedHexValue.value
-      ? {backgroundColor: `#${expandedHexValue.value}`}
-      : {};
-  });
-</script>
-
-<template>
-  <div class="color-field">
-    <label v-if="label" class="color-field__label" :for="id">
-      {{ label }}
-    </label>
-
-    <div class="color-field__control">
-      <label
-        class="color-field__swatch"
-        :class="{'color-field__swatch--disabled': disabled}"
-      >
-        <span class="color-field__preview" :style="swatchStyle"></span>
-        <input
-          v-model="colorValue"
-          :disabled="disabled"
-          class="color-field__picker"
-          type="color"
-          :aria-label="t('Choose a color')"
-        />
-      </label>
-
-      <CraftInput
-        :id="id"
-        v-model="textValue"
-        :name="name"
-        :label="label ?? t('Color hex value')"
-        :disabled="disabled"
-        :error="error"
-        class="color-field__input"
-        spellcheck="false"
-        autocorrect="off"
-        autocapitalize="off"
-        inputmode="text"
-        label-sr-only
-      >
-        <span slot="prefix" class="color-field__prefix" aria-hidden="true"
-          >#</span
-        >
-      </CraftInput>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-  .color-field {
-    display: grid;
-    gap: var(--c-spacing-xs);
-  }
-
-  .color-field__label {
-    font-weight: var(--font-weight-bold);
-  }
-
-  .color-field__control {
-    display: flex;
-    align-items: center;
-    gap: var(--c-spacing-sm);
-  }
-
-  .color-field__swatch {
-    position: relative;
-    display: block;
-    inline-size: var(--c-form-control-height);
-    block-size: var(--c-form-control-height);
-    border-radius: 50%;
-    overflow: hidden;
-    background:
-      linear-gradient(
-        45deg,
-        var(--c-color-neutral-fill-quiet) 25%,
-        transparent 25%
-      ),
-      linear-gradient(
-        -45deg,
-        var(--c-color-neutral-fill-quiet) 25%,
-        transparent 25%
-      ),
-      linear-gradient(
-        45deg,
-        transparent 75%,
-        var(--c-color-neutral-fill-quiet) 75%
-      ),
-      linear-gradient(
-        -45deg,
-        transparent 75%,
-        var(--c-color-neutral-fill-quiet) 75%
-      );
-    background-position:
-      0 0,
-      0 0.375rem,
-      0.375rem -0.375rem,
-      -0.375rem 0;
-    background-size: 0.75rem 0.75rem;
-  }
-
-  .color-field__swatch:not(.color-field__swatch--disabled) input {
-    cursor: pointer;
-  }
-
-  .color-field__swatch:focus-within {
-    box-shadow: 0 0 0 2px var(--c-color-accent-border-normal);
-  }
-
-  .color-field__preview {
-    position: absolute;
-    inset: 0;
-    border-radius: 50%;
-    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 15%);
-  }
-
-  .color-field__picker {
-    position: absolute;
-    inset: 0;
-    inline-size: 100%;
-    block-size: 100%;
-    border: 0;
-    margin: 0;
-    padding: 0;
-    opacity: 0;
-  }
-
-  .color-field__prefix {
-    color: var(--c-text-quiet);
-    user-select: none;
-    font-family: var(--c-font-mono);
-  }
-
-  .color-field__input {
-    flex: 0 0 7.25rem;
-    inline-size: 7.25rem;
-    font-family: var(--c-font-mono);
-  }
-</style>
diff --git a/resources/js/pages/settings/assets/transforms/EditImageTransformPage.vue b/resources/js/pages/settings/assets/transforms/EditImageTransformPage.vue
index 2c25f6faabb..a3d7b04ce27 100644
--- a/resources/js/pages/settings/assets/transforms/EditImageTransformPage.vue
+++ b/resources/js/pages/settings/assets/transforms/EditImageTransformPage.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-  import ColorInput from '@/components/form/ColorInput.vue';
   import Pane from '@/components/Pane.vue';
   import {useInputGenerator} from '@/composables/useInputGenerator';
   import useCraftData from '@/composables/useCraftData';
@@ -8,6 +7,7 @@
   import {store as saveTransform} from '@actions/Settings/ImageTransformsController';
   import {t, toHandle} from '@craftcms/cp';
   import CraftInput from '@craftcms/cp/vue/CraftInput.vue';
+  import CraftInputColor from '@craftcms/cp/vue/CraftInputColor.vue';
   import CraftInputHandle from '@craftcms/cp/vue/CraftInputHandle.vue';
   import CraftSelect from '@craftcms/cp/vue/CraftSelect.vue';
   import CraftSwitch from '@craftcms/cp/vue/CraftSwitch.vue';
@@ -184,7 +184,7 @@
           </ul>
         </div>
 
-        <ColorInput
+        <CraftInputColor
           v-if="shouldShowFillColor"
           id="fill"
           name="fill"