diff --git a/@fiction/cards/gallery/index.ts b/@fiction/cards/gallery/index.ts
index 4abc7ab74..0c014bdbf 100644
--- a/@fiction/cards/gallery/index.ts
+++ b/@fiction/cards/gallery/index.ts
@@ -1,10 +1,10 @@
 import { vue } from '@fiction/core'
 import { CardTemplate } from '@fiction/site'
 import { InputOption } from '@fiction/ui'
+import { stockMediaHandler } from '@fiction/ui/stock/index.js'
 import { z } from 'zod'
 import type { SiteUserConfig } from '@fiction/site/schema'
 import { standardOption } from '../inputSets'
-import { stockMediaHandler } from '../stock/index.js'
 
 const templateId = 'gallery'
 
diff --git a/@fiction/cards/hero/index.ts b/@fiction/cards/hero/index.ts
index 3ac535721..ce69b1835 100644
--- a/@fiction/cards/hero/index.ts
+++ b/@fiction/cards/hero/index.ts
@@ -1,10 +1,10 @@
 import { colorTheme, vue } from '@fiction/core'
 import { CardTemplate } from '@fiction/site'
 import { InputOption } from '@fiction/ui'
+import { stockMediaHandler } from '@fiction/ui/stock/index.js'
 import { z } from 'zod'
 import { standardOption } from '../inputSets'
 import { XButtonSchema } from '../schemaSets.js'
-import { stockMediaHandler } from '../stock/index.js'
 
 const templateId = 'hero'
 
diff --git a/@fiction/cards/hitlist/index.ts b/@fiction/cards/hitlist/index.ts
index 2745dafcf..3882c0b2d 100644
--- a/@fiction/cards/hitlist/index.ts
+++ b/@fiction/cards/hitlist/index.ts
@@ -1,8 +1,8 @@
 import { vue } from '@fiction/core'
 import { CardTemplate } from '@fiction/site'
 import { InputOption } from '@fiction/ui'
+import { stockMediaHandler } from '@fiction/ui/stock/index.js'
 import { z } from 'zod'
-import { stockMediaHandler } from '../stock/index.js'
 
 const templateId = 'hitlist'
 
diff --git a/@fiction/cards/magazine/index.ts b/@fiction/cards/magazine/index.ts
index 008d289fd..e904fd566 100644
--- a/@fiction/cards/magazine/index.ts
+++ b/@fiction/cards/magazine/index.ts
@@ -1,10 +1,10 @@
 import { PostHandlingSchema, safeDirname, vue } from '@fiction/core'
 import { CardTemplate } from '@fiction/site'
 import { InputOption } from '@fiction/ui'
+import { stockMediaHandler } from '@fiction/ui/stock/index.js'
 import { z } from 'zod'
 import type { Site } from '@fiction/site'
 import type { SiteUserConfig } from '@fiction/site/schema'
-import { stockMediaHandler } from '../stock/index.js'
 
 const templateId = 'magazine'
 
diff --git a/@fiction/cards/marquee/index.ts b/@fiction/cards/marquee/index.ts
index 768c46de8..252efc52f 100644
--- a/@fiction/cards/marquee/index.ts
+++ b/@fiction/cards/marquee/index.ts
@@ -1,11 +1,11 @@
 import { vue } from '@fiction/core'
 import { CardTemplate } from '@fiction/site'
 import { InputOption } from '@fiction/ui'
+import { stockMediaHandler } from '@fiction/ui/stock/index.js'
 import { z } from 'zod'
 import type { MediaItem } from '@fiction/core'
+import type { Tag } from '@fiction/ui/stock/index.js'
 import { standardOption } from '../inputSets'
-import { stockMediaHandler } from '../stock/index.js'
-import type { Tag } from '../stock/index.js'
 
 const el = vue.defineAsyncComponent(async () => import('./ElMarquee.vue'))
 
diff --git a/@fiction/cards/overSlide/index.ts b/@fiction/cards/overSlide/index.ts
index 857ec62c4..fdf262620 100644
--- a/@fiction/cards/overSlide/index.ts
+++ b/@fiction/cards/overSlide/index.ts
@@ -1,9 +1,9 @@
 import { vue } from '@fiction/core'
 import { CardTemplate } from '@fiction/site'
 import { InputOption } from '@fiction/ui'
+import { stockMediaHandler } from '@fiction/ui/stock/index.js'
 import { z } from 'zod'
 import { mediaSchema } from '../schemaSets.js'
-import { stockMediaHandler } from '../stock/index.js'
 
 const templateId = 'overSlide'
 
diff --git a/@fiction/cards/people/index.ts b/@fiction/cards/people/index.ts
index 07e33c714..471094126 100644
--- a/@fiction/cards/people/index.ts
+++ b/@fiction/cards/people/index.ts
@@ -1,8 +1,8 @@
 import { vue } from '@fiction/core'
 import { CardTemplate } from '@fiction/site'
 import { InputOption } from '@fiction/ui'
+import { stockMediaHandler } from '@fiction/ui/stock/index.js'
 import { z } from 'zod'
-import { stockMediaHandler } from '../stock/index.js'
 
 const templateId = 'people'
 
diff --git a/@fiction/cards/profile/index.ts b/@fiction/cards/profile/index.ts
index a6b9236ef..527d1ad51 100644
--- a/@fiction/cards/profile/index.ts
+++ b/@fiction/cards/profile/index.ts
@@ -1,9 +1,9 @@
 import { vue } from '@fiction/core'
 import { CardTemplate } from '@fiction/site/card'
 import { InputOption } from '@fiction/ui'
+import { stockMediaHandler } from '@fiction/ui/stock/index.js'
 import { z } from 'zod'
 import { standardOption } from '../inputSets'
-import { stockMediaHandler } from '../stock/index.js'
 
 export const schema = z.object({
   heading: z.string().optional().describe('Primary headline for profile 3 to 8 words'),
diff --git a/@fiction/cards/showcase/index.ts b/@fiction/cards/showcase/index.ts
index 8b9c7ad8a..702cc23b0 100644
--- a/@fiction/cards/showcase/index.ts
+++ b/@fiction/cards/showcase/index.ts
@@ -1,10 +1,10 @@
 import { vue } from '@fiction/core'
 import { CardTemplate } from '@fiction/site'
 import { InputOption } from '@fiction/ui'
+import { stockMediaHandler } from '@fiction/ui/stock/index.js'
 import { z } from 'zod'
 import type { PostItem } from '@fiction/core'
 import { standardOption } from '../inputSets'
-import { stockMediaHandler } from '../stock/index.js'
 
 const el = vue.defineAsyncComponent(async () => import('./ElShowcase.vue'))
 const aspects = ['square', 'tall', 'wide', 'golden', 'portrait', 'landscape', 'cinema'] as const
diff --git a/@fiction/cards/statement/index.ts b/@fiction/cards/statement/index.ts
index e33303990..51406dd58 100644
--- a/@fiction/cards/statement/index.ts
+++ b/@fiction/cards/statement/index.ts
@@ -2,12 +2,12 @@ import { ActionButtonSchema, vue } from '@fiction/core'
 import { CardTemplate } from '@fiction/site'
 import { CardFactory } from '@fiction/site/cardFactory'
 import { InputOption } from '@fiction/ui'
+import { stockMediaHandler } from '@fiction/ui/stock/index.js'
 import { z } from 'zod'
 import type { Site, TableCardConfig } from '@fiction/site'
 import type { SiteUserConfig } from '@fiction/site/schema'
 import { getCardTemplates } from '../index.js'
 import { standardOption } from '../inputSets'
-import { stockMediaHandler } from '../stock/index.js'
 
 const templateId = 'statement'
 
diff --git a/@fiction/cards/story/index.ts b/@fiction/cards/story/index.ts
index 12ffb805b..9390d9460 100644
--- a/@fiction/cards/story/index.ts
+++ b/@fiction/cards/story/index.ts
@@ -1,9 +1,9 @@
 import { vue } from '@fiction/core'
 import { CardTemplate } from '@fiction/site'
 import { InputOption } from '@fiction/ui'
+import { stockMediaHandler } from '@fiction/ui/stock/index.js'
 import { z } from 'zod'
 import type { Site } from '@fiction/site'
-import { stockMediaHandler } from '../stock/index.js'
 
 const templateId = 'story'
 
diff --git a/@fiction/cards/testimonials/index.ts b/@fiction/cards/testimonials/index.ts
index d48f7b227..91d624e11 100644
--- a/@fiction/cards/testimonials/index.ts
+++ b/@fiction/cards/testimonials/index.ts
@@ -1,10 +1,10 @@
 import { vue } from '@fiction/core'
 import { CardTemplate } from '@fiction/site'
 import { InputOption } from '@fiction/ui'
+import { stockMediaHandler } from '@fiction/ui/stock/index.js'
 import { z } from 'zod'
 import type { SiteUserConfig } from '@fiction/site/schema'
 import { standardOption } from '../inputSets'
-import { stockMediaHandler } from '../stock/index.js'
 
 const templateId = 'testimonials'
 
diff --git a/@fiction/cards/tour/index.ts b/@fiction/cards/tour/index.ts
index 268d7f96c..56d13eede 100644
--- a/@fiction/cards/tour/index.ts
+++ b/@fiction/cards/tour/index.ts
@@ -1,9 +1,9 @@
 import { vue } from '@fiction/core'
 import { CardTemplate } from '@fiction/site'
 import { InputOption } from '@fiction/ui'
+import { stockMediaHandler } from '@fiction/ui/stock/index.js'
 import { z } from 'zod'
 import { options as heroOptions, schema as heroSchema } from '../hero/index'
-import { stockMediaHandler } from '../stock/index.js'
 
 const templateId = 'tour'
 
diff --git a/@fiction/cards/trek/index.ts b/@fiction/cards/trek/index.ts
index 4fd0e1383..49365010a 100644
--- a/@fiction/cards/trek/index.ts
+++ b/@fiction/cards/trek/index.ts
@@ -1,8 +1,8 @@
 import { vue } from '@fiction/core'
 import { CardTemplate } from '@fiction/site'
 import { InputOption } from '@fiction/ui'
+import { stockMediaHandler } from '@fiction/ui/stock/index.js'
 import { z } from 'zod'
-import { stockMediaHandler } from '../stock/index.js'
 
 const templateId = 'trek'
 
diff --git a/@fiction/themes/fiction/home/index.ts b/@fiction/themes/fiction/home/index.ts
index 98d9aae3b..11f1a66b5 100644
--- a/@fiction/themes/fiction/home/index.ts
+++ b/@fiction/themes/fiction/home/index.ts
@@ -1,6 +1,6 @@
-import { stockMediaHandler } from '@fiction/cards/stock/index.js'
 import { createCard } from '@fiction/site/theme.js'
 import { staticFileUrls } from '@fiction/site/utils/site.js'
+import { stockMediaHandler } from '@fiction/ui/stock/index.js'
 import type { Site } from '@fiction/site/site.js'
 import { templates } from '../templates.js'
 import andrew from './img/andrew.jpg'
diff --git a/@fiction/themes/minimal/index.ts b/@fiction/themes/minimal/index.ts
index 7f9edfdf9..a3e9ed8d9 100644
--- a/@fiction/themes/minimal/index.ts
+++ b/@fiction/themes/minimal/index.ts
@@ -1,8 +1,8 @@
 import { getCardTemplates } from '@fiction/cards/index.js'
-import { stockMediaHandler } from '@fiction/cards/stock/index.js'
 import { safeDirname } from '@fiction/core'
 import { CardFactory } from '@fiction/site/cardFactory.js'
 import { Theme } from '@fiction/site/theme.js'
+import { stockMediaHandler } from '@fiction/ui/stock/index.js'
 import type { FictionEnv } from '@fiction/core'
 import type { Site } from '@fiction/site/site.js'
 
diff --git a/@fiction/ui/media/XMediaInline.vue b/@fiction/ui/media/XMediaInline.vue
index 66d8c6f7d..4d25653a8 100644
--- a/@fiction/ui/media/XMediaInline.vue
+++ b/@fiction/ui/media/XMediaInline.vue
@@ -22,22 +22,29 @@ const emit = defineEmits<{
 }>()
 
 const mediaFormat = vue.computed(() => {
-  if (props.media.format) return props.media.format
+  if (props.media.format)
+    return props.media.format
   if (props.media.url) {
     const extension = props.media.url.split('.').pop()?.toLowerCase()
-    if (extension && ['mp4', 'webm', 'ogg'].includes(extension)) return 'video'
+    if (extension && ['mp4', 'webm', 'ogg'].includes(extension))
+      return 'video'
     return 'image'
   }
-  if (props.media.html) return 'html'
-  if (props.media.typography) return 'typography'
-  if (props.media.iconId) return 'iconId'
-  if (props.media.el) return 'component'
+  if (props.media.html)
+    return 'html'
+  if (props.media.typography)
+    return 'typography'
+  if (props.media.iconId)
+    return 'iconId'
+  if (props.media.el)
+    return 'component'
   return 'url'
 })
 
 const typographyStyle = vue.computed(() => {
   const typography = props.media.typography
-  if (!typography) return {}
+  if (!typography)
+    return {}
   return {
     fontFamily: typography.font,
     fontWeight: typography.weight,
@@ -57,9 +64,11 @@ const containerClass = vue.computed(() => {
 
   if (props.alignment === 'left') {
     classes.push('justify-start')
-  } else if (props.alignment === 'center') {
+  }
+  else if (props.alignment === 'center') {
     classes.push('justify-center')
-  } else if (props.alignment === 'right') {
+  }
+  else if (props.alignment === 'right') {
     classes.push('justify-end')
   }
 
@@ -94,9 +103,11 @@ const htmlWrapperClass = vue.computed(() => {
 
   if (props.alignment === 'left') {
     classes.push('justify-start')
-  } else if (props.alignment === 'center') {
+  }
+  else if (props.alignment === 'center') {
     classes.push('justify-center')
-  } else if (props.alignment === 'right') {
+  }
+  else if (props.alignment === 'right') {
     classes.push('justify-end')
   }
 
@@ -105,21 +116,19 @@ const htmlWrapperClass = vue.computed(() => {
   return classes
 })
 
-
-
 const iconStyling = vue.computed(() => {
-
   let maskPosition = 'center'
 
   if (props.alignment === 'left') {
     maskPosition = 'left'
-  } else if (props.alignment === 'right') {
+  }
+  else if (props.alignment === 'right') {
     maskPosition = 'right'
   }
 
   return {
-    classes:  ['w-full h-full'],
-    style: {  maskPosition,  }
+    classes: ['w-full h-full'],
+    style: { maskPosition },
   }
 })
 </script>
@@ -169,7 +178,7 @@ const iconStyling = vue.computed(() => {
       </video>
     </template>
 
-    <template v-else-if="mediaFormat === 'component'" class="">
+    <template v-else-if="mediaFormat === 'component'">
       <component
         :is="media.el"
         v-bind="media"
diff --git a/scripts/cloudinaryUrls.ts b/scripts/cloudinaryUrls.ts
index 6b9fcc27d..344ec80c3 100644
--- a/scripts/cloudinaryUrls.ts
+++ b/scripts/cloudinaryUrls.ts
@@ -5,7 +5,7 @@ import { fileURLToPath } from 'node:url'
 import { v2 as cloudinary } from 'cloudinary'
 import dotenv from 'dotenv'
 import fetch from 'node-fetch'
-import { tagSet } from '../@fiction/cards/stock/tags.js'
+import { tagSet } from '../@fiction/ui/stock/tags.js'
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url))
 
@@ -34,7 +34,7 @@ type MediaItem = {
   slug: string
 }
 
-function flattenTagSet(tagSet: typeof import('../@fiction/cards/stock/tags.js').tagSet): string[] {
+function flattenTagSet(tagSet: typeof import('../@fiction/ui/stock/tags.js').tagSet): string[] {
   return Object.values(tagSet).flat()
 }