@dev.smartpricing/message-composer-layer 1.0.16 → 1.0.18

package/app/components/Brand/BrandPreview.vue

@@ -14,6 +14,9 @@ import {
   DEFAULT_BUTTON_SETTINGS,
   DEFAULT_HEADING_SETTINGS,
   emptyEmailBlock,
+  emptyHeadingBlock,
+  emptyParagraphBlock,
+  emptyButtonBlock,
 } from '@dev.smartpricing/message-composer-utils/types'
 import { useDebounceFn } from '@vueuse/core'
 import HtmlPreviewIframe from '~/components/Common/HtmlPreviewIframe.vue'
@@ -41,14 +44,14 @@ const sampleMessage: PostEntity<EmailMessage> = {
     blocks: [
       emptyEmailBlock('header'),
       {
-        ...emptyEmailBlock('heading'),
+        ...emptyHeadingBlock(),
         settings: {
           ...DEFAULT_HEADING_SETTINGS,
           content: createTipTapContent('<p>Lorem ipsum
dolor</p>', { preset: 'email' }),
         },
       },
       {
-        ...emptyEmailBlock('paragraph'),
+        ...emptyParagraphBlock(),
         settings: {
           ...DEFAULT_PARAGRAPH_SETTINGS,
           content: createTipTapContent(
@@ -58,7 +61,7 @@ const sampleMessage: PostEntity<EmailMessage> = {
         },
       },
       {
-        ...emptyEmailBlock('button'),
+        ...emptyButtonBlock(),
         settings: {
           ...DEFAULT_BUTTON_SETTINGS,
           content: createTipTapContent('BUTTON', { preset: 'email' }),

package/app/components/Brand/Steps/BrandStepVisual.vue

@@ -38,6 +38,7 @@ async function extractColorsFromImage(file: File) {
       img.onload = () => resolve()
       img.onerror = reject
     })
+    // @ts-expect-error colorthief types lack construct signature
     const colorThief = new ColorThief()
     const palette = colorThief.getPalette(img, 4)
     const extracted = new Set(['#FFFFFF', '#000000'])

package/app/components/Common/LanguageList.vue

@@ -193,8 +193,8 @@ function askDeleteMessage(message: Message | PostEntity<Message>) {
     title: t('dialogs.delete_message.title'),
     message: t('dialogs.delete_message.message', { name: message.language_id }),
     destructive: true,
-    confirmLabel: t('common.actions.delete'),
-    cancelLabel: t('common.actions.cancel'),
+    confirmProps: { label: t('common.actions.delete') },
+    cancelProps: { label: t('common.actions.cancel') },
     action: async () => {
       if ('id' in message && 'message_group_id' in message) {
         await deleteMessageMutation({

package/app/components/Common/PhoneInput.vue

@@ -760,7 +760,7 @@ function updateNumber(value: number | undefined) {
 }
 
 const prefixes = Object.keys(PhoneCodes['en']).map((key) => ({
-  label: PhoneCodes['en'][key],
+  label: PhoneCodes['en'][key as unknown as keyof (typeof PhoneCodes)['en']],
   value: key,
   onSelect: () => {
     updatePrefix(key)

package/app/components/Common/PreviewById.vue

@@ -42,7 +42,7 @@ const isEmail = computed(() => selectedMessage.value?.render_type === 'email_v1'
 
     <EmailPreview
       v-else-if="isEmail && selectedMessage"
-      :message="selectedMessage as EmailMessage"
+      :message="selectedMessage as unknown as EmailMessage"
       :message-group-id="id"
       :show-subject="showSubject"
       :view="view"
@@ -52,7 +52,7 @@ const isEmail = computed(() => selectedMessage.value?.render_type === 'email_v1'
 
     <WhatsappPreview
       v-else-if="isWhatsapp && selectedMessage"
-      :message="selectedMessage as WhatsappMessage"
+      :message="selectedMessage as unknown as WhatsappMessage"
       :dynamic-data="dynamicData"
     />
   </div>

package/app/components/Composer/MessageLibrary.vue

@@ -60,8 +60,8 @@ function askDeleteGroup(row: MessageGroupWithMessageSummary) {
     title: t('dialogs.delete_message_group.title'),
     message: t('dialogs.delete_message_group.message', { name: row.name }),
     destructive: true,
-    confirmLabel: t('common.actions.delete'),
-    cancelLabel: t('common.actions.cancel'),
+    confirmProps: { label: t('common.actions.delete') },
+    cancelProps: { label: t('common.actions.cancel') },
     action: async () => {
       await deleteGroup(row.id)
       trackEvent('message_delete', getMessageTrackingProps(row))
@@ -81,8 +81,8 @@ function askPublishGroup(row: MessageGroupWithMessageSummary) {
   confirm({
     title: t('dialogs.publish_message_group.title'),
     message: t('dialogs.publish_message_group.message', { name: row.name }),
-    confirmLabel: t('common.actions.publish'),
-    cancelLabel: t('common.actions.cancel'),
+    confirmProps: { label: t('common.actions.publish') },
+    cancelProps: { label: t('common.actions.cancel') },
     action: async () => {
       await publishGroup(row.id)
       notifyParent('TEMPLATE_PUBLISHED', { id: row.id, name: row.name })
@@ -101,8 +101,8 @@ function askUnpublishGroup(row: MessageGroupWithMessageSummary) {
   confirm({
     title: t('dialogs.unpublish_message_group.title'),
     message: t('dialogs.unpublish_message_group.message', { name: row.name }),
-    confirmLabel: t('common.actions.unpublish'),
-    cancelLabel: t('common.actions.cancel'),
+    confirmProps: { label: t('common.actions.unpublish') },
+    cancelProps: { label: t('common.actions.cancel') },
     action: async () => {
       await unpublishGroup(row.id)
       notifyParent('TEMPLATE_UNPUBLISHED', { id: row.id, name: row.name })

package/app/components/DynamicDataSlideover.vue

@@ -28,7 +28,7 @@ watch(
     if (props.defaultContext && contextKeys.value.includes(props.defaultContext)) {
       activeTab.value = props.defaultContext
     } else if (contextKeys.value.length > 0) {
-      activeTab.value = contextKeys.value[0]
+      activeTab.value = contextKeys.value[0]!
     }
   },
   { immediate: true },
@@ -58,7 +58,7 @@ const contextDescriptions = computed(() => {
     .filter((ctx) => ctx.description)
 })
 
-const commandGroups = computed<CommandPaletteGroup<DynamicValueField>[]>(() => {
+const commandGroups = computed<{ id: string; items: DynamicValueField[] }[]>(() => {
   if (!data.value || !activeContextKey.value) return []
 
   const fields = data.value[activeContextKey.value]?.fields || []

package/app/components/Editor/RichTextEditor.vue

@@ -368,8 +368,8 @@ defineExpose({
         content-type="json"
         :image="false"
         :extensions="extensions"
-        :starter-kit="starterKitConfig"
-        :on-update="handleUpdate"
+        :starter-kit="starterKitConfig as any"
+        :on-update="handleUpdate as any"
         :mention="false"
         :on-blur="handleBlur"
         :placeholder="$t('editor.placeholder.insert_text')"

package/app/components/Email/Editor/Blocks/ButtonBlock.vue

@@ -37,8 +37,8 @@ const buttonStyles = computed(() => {
   const styles: Record<string, string> = {
     fontFamily: `${fontFamily}, sans-serif`,
     fontSize: `${props.block.settings.fontSize}px`,
-    color: props.block.settings.textColor ?? resolved.button.textColor,
-    backgroundColor: props.block.settings.backgroundColor ?? resolved.button.backgroundColor,
+    color: props.block.settings.textColor ?? resolved.button.textColor ?? '',
+    backgroundColor: props.block.settings.backgroundColor ?? resolved.button.backgroundColor ?? '',
     textAlign: 'center',
     borderRadius:
       props.block.settings.shape === 'square'

package/app/components/Email/Editor/Blocks/GridSettings.vue

@@ -36,8 +36,8 @@ function updateColumns(newColumns: 1 | 2 | 3) {
       confirm({
         title: t('dialogs.grid_reduce_columns.title'),
         message: t('dialogs.grid_reduce_columns.message'),
-        confirmLabel: t('dialogs.grid_reduce_columns.confirm'),
-        cancelLabel: t('common.actions.cancel'),
+        confirmProps: { label: t('dialogs.grid_reduce_columns.confirm') },
+        cancelProps: { label: t('common.actions.cancel') },
         action: () => applyColumnChange(newColumns),
       })
       return

package/app/components/Email/Editor/Blocks/HeaderSettings.vue

@@ -14,7 +14,7 @@ const emailEditorStore = useEmailEditorStore()
 const { t } = useI18n()
 
 const src = computed({
-  get: () => props.block.settings.src || emailEditorStore.brand?.logo_url || undefined,
+  get: () => props.block.settings.src || emailEditorStore.brand?.logo_url || '',
   set: (value) => updateSettings({ src: value }),
 })
 

package/app/components/Email/Editor/Blocks/SpacerSettings.vue

@@ -44,7 +44,7 @@ defineOptions({
         <USelect
           :items="sizePresetItems"
           :disabled="block.settings.customSize"
-          v-model="block.settings.height"
+          v-model="block.settings.height as any"
           :data-testid="spacerSettingsTestIds.sizePresetSelect"
         />
       </UFormField>

package/app/components/Email/Editor/GeneralStyleSettings.vue

@@ -20,8 +20,8 @@ defineOptions({
         {{ $t('editor.email.generalStyle.brandSection') }}
       </h3>
       <USelectMenu
-        v-model="brand"
-        :items="brands"
+        v-model="brand as any"
+        :items="brands as any"
         label-key="name"
         :placeholder="$t('editor.email.generalStyle.selectBrand')"
         class="w-full"

package/app/components/Email/Editor/Index.vue

@@ -28,7 +28,7 @@ const tabs: TabsItem[] = [
   { label: t('common.mobile'), value: 'mobile' },
 ] as const
 
-const currentView = ref<(typeof tabs)[number]['value']>('desktop')
+const currentView = ref<'desktop' | 'mobile'>('desktop')
 
 const width = computed(() => {
   return currentView.value === 'mobile' ? '400px' : '100%'

package/app/components/Email/InlinePreview.vue

@@ -35,7 +35,7 @@ const { mutate: preview, data: previewed, isLoading: isPreviewing } = usePreview
 
 const previewEmail = useDebounceFn(() => {
   preview({
-    message: props.message,
+    message: props.message as any,
     parameters: parameterValues.value,
     brand: props.brand
       ? {

package/app/components/Email/PreviewPanel.vue

@@ -24,7 +24,7 @@ const tabs: TabsItem[] = [
   { label: t('common.mobile'), value: 'mobile' },
 ] as const
 
-const currentView = ref<(typeof tabs)[number]['value']>('desktop')
+const currentView = ref<'desktop' | 'mobile'>('desktop')
 </script>
 
 <template>

package/app/components/Email/SendTestEmailModal.vue

@@ -107,7 +107,9 @@ const schema = z.object({
 
 type Schema = z.output<typeof schema>
 
-const resolvedBrandId = computed(() => props.brandId ?? emailEditorStore.brandId)
+const resolvedBrandId = computed(
+  () => props.brandId ?? messageGroup.value?.brand_id ?? emailEditorStore.brandId,
+)
 
 function onSubmit() {
   if (!resolvedMessage.value) return

package/app/components/Email/Translator/Index.vue

@@ -74,10 +74,10 @@ const translatableBlocks = computed<BlockInfo[]>(() => {
     })
     .filter((block) => {
       if (!block) return false
-      if (!translatorComponents[block.type]) return false
+      if (!translatorComponents[block.type as keyof typeof translatorComponents]) return false
       if (filteredBlockIds && !filteredBlockIds.includes(block.baseBlock.id)) return false
       return true
-    })
+    }) as BlockInfo[]
 })
 
 // Get block type display name
@@ -127,7 +127,7 @@ function getBlockTypeLabel(type: string): string {
         <!-- Content row -->
         <div class="px-4 py-3 show-list">
           <component
-            :is="translatorComponents[info.type]"
+            :is="translatorComponents[info.type as keyof typeof translatorComponents]"
             :base-block="info.baseBlock"
             v-model="info.targetBlock"
           />

package/app/components/Whatsapp/CategoryChanger.vue

@@ -33,8 +33,10 @@ function handleCategoryChange(newCategory: string) {
       t(`categories.${modelValue.value}`),
       t(`categories.${newCategory}`),
     ]),
-    confirmLabel: t('dialogs.whatsapp_change_category.change_to', [t(`categories.${newCategory}`)]),
-    cancelLabel: t('dialogs.whatsapp_change_category.cancel'),
+    confirmProps: {
+      label: t('dialogs.whatsapp_change_category.change_to', [t(`categories.${newCategory}`)]),
+    },
+    cancelProps: { label: t('dialogs.whatsapp_change_category.cancel') },
     action: () => {
       modelValue.value = newCategory
       selectedCategory.value = newCategory

package/app/components/Whatsapp/Editor/Buttons.vue

@@ -19,7 +19,12 @@ import {
 import { extractFromLocale } from '@/utils/locale'
 import { computed, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
-import type { DropdownSectionAction } from '#ui/types'
+interface DropdownSectionAction {
+  value?: string
+  label: string
+  disabled?: boolean
+  onClick?: () => void
+}
 import PhoneInput from '@/components/Common/PhoneInput.vue'
 import { z } from 'zod'
 import {

package/app/components/Whatsapp/Editor/Index.vue

@@ -5,6 +5,7 @@ import type {
   WhatsappMessage,
   WaButtonV1,
   HeaderBlockV1,
+  ManagedLocales,
 } from '@dev.smartpricing/message-composer-utils/types'
 import WhatsappEditorHeader from './Header.vue'
 import WhatsappEditorBody from './Body.vue'
@@ -80,7 +81,7 @@ const bodyGenerateContext = computed(() => {
     <WhatsappEditorButtons
       class="px-4"
       v-model="model.body.buttons"
-      :locale="model.language_id"
+      :locale="model.language_id as ManagedLocales"
       @button-added="emit('buttonAdded', $event)"
       @button-removed="emit('buttonRemoved', $event)"
       @button-type-changed="emit('buttonTypeChanged', $event)"

package/app/components/Whatsapp/Translator/Button.vue

@@ -139,7 +139,7 @@ const linkButtonSchema = z.object({
             <UForm
               v-if="button.type === 'link'"
               :schema="linkButtonSchema"
-              :state="targetButtons[index]"
+              :state="targetButtons[index] as unknown as Record<string, unknown>"
               :validate-on="['blur']"
             >
               <UFormField
@@ -184,7 +184,7 @@ const linkButtonSchema = z.object({
             <UForm
               v-if="button.type === 'phone'"
               :schema="phoneButtonSchema"
-              :state="targetButtons[index]"
+              :state="targetButtons[index] as unknown as Record<string, unknown>"
               :validate-on="['blur']"
             >
               <UFormField

package/app/composables/composerContext.ts

@@ -24,7 +24,9 @@ export function defineComposerContext(context: ComposerContext): void {
 }
 
 export function useComposerContext(): ComposerContext {
-  const context = inject(COMPOSER_CONTEXT_KEY)
+  // runWithContext ensures inject() can reach app-level provides
+  // even outside component setup (e.g. Pinia stores, middleware).
+  const context = useNuxtApp().vueApp.runWithContext(() => inject(COMPOSER_CONTEXT_KEY))
   if (!context) {
     throw new Error(
       '[message-composer] ComposerContext not provided. ' +

package/app/composables/useAutoTranslateEmail.ts

@@ -59,13 +59,14 @@ export function useAutoTranslateEmail() {
       case 'paragraph':
       case 'footer':
       case 'unsubscribe_link': {
+        const target = targetBlock as typeof baseBlock
         // Check if base has content
         if (isTiptapEmpty(baseBlock.settings.content, 'email_v1')) {
           return false
         }
 
         // If onlyEmpty, check if target already has content
-        if (onlyEmpty && !isTiptapEmpty(targetBlock.settings.content, 'email_v1')) {
+        if (onlyEmpty && !isTiptapEmpty(target.settings.content, 'email_v1')) {
           return false
         }
 
@@ -78,27 +79,29 @@ export function useAutoTranslateEmail() {
         if (!translated) return false
 
         // Update target block
-        targetBlock.settings.content = createTipTapContent(translated, { preset: 'email' })
+        target.settings.content = createTipTapContent(translated, { preset: 'email' })
         return true
       }
 
       case 'discount': {
+        const target = targetBlock as typeof baseBlock
         // Check if base has content
         if (isTiptapEmpty(baseBlock.settings.content, 'email_v1')) {
           return false
         }
-        targetBlock.settings.content = deepClone(baseBlock.settings.content)
+        target.settings.content = deepClone(baseBlock.settings.content)
         return true
       }
 
       case 'button': {
+        const target = targetBlock as typeof baseBlock
         // Check if base has content
         if (isTiptapEmpty(baseBlock.settings.content, 'email_v1')) {
           return false
         }
 
         // If onlyEmpty, check if target already has content
-        if (onlyEmpty && !isTiptapEmpty(targetBlock.settings.content, 'email_v1')) {
+        if (onlyEmpty && !isTiptapEmpty(target.settings.content, 'email_v1')) {
           return false
         }
 
@@ -111,18 +114,19 @@ export function useAutoTranslateEmail() {
         if (!translated) return false
 
         // Update target block content only
-        targetBlock.settings.content = createTipTapContent(translated, { preset: 'email' })
+        target.settings.content = createTipTapContent(translated, { preset: 'email' })
         return true
       }
 
       case 'raw_html': {
+        const target = targetBlock as typeof baseBlock
         const translated = await translateText(
           baseBlock.settings.html,
           baseLanguage,
           targetLanguage,
         )
         if (!translated) return false
-        targetBlock.settings.html = translated
+        target.settings.html = translated
         return true
       }
 

package/app/composables/useChangeTrackingEmail.ts

@@ -1,6 +1,10 @@
 import { ref, computed, watch, toRaw, type MaybeRef } from 'vue'
 import { deepClone, deepEqual } from '@dev.smartpricing/message-composer-utils/utils'
-import type { EmailMessage, EmailBlock } from '@dev.smartpricing/message-composer-utils/types'
+import type {
+  EmailMessage,
+  EmailBlock,
+  PostEntity,
+} from '@dev.smartpricing/message-composer-utils/types'
 
 /**
  * Storage key pattern for email change tracking
@@ -117,7 +121,10 @@ export function useChangeTrackingEmail(messageGroupId: MaybeRef<string | number>
    * @param currentMessage - Current email message to compare
    * @returns Array of block IDs that have changed
    */
-  function getChangedBlockIds(language: string, currentMessage: EmailMessage): string[] {
+  function getChangedBlockIds(
+    language: string,
+    currentMessage: EmailMessage | PostEntity<EmailMessage>,
+  ): string[] {
     const original = originalStates.value[language]
     if (!original) return []
 
@@ -149,7 +156,10 @@ export function useChangeTrackingEmail(messageGroupId: MaybeRef<string | number>
    * @param currentMessage - Current email message to compare
    * @returns true if subject changed
    */
-  function hasSubjectChanged(language: string, currentMessage: EmailMessage): boolean {
+  function hasSubjectChanged(
+    language: string,
+    currentMessage: EmailMessage | PostEntity<EmailMessage>,
+  ): boolean {
     const original = originalStates.value[language]
     if (!original) return false
     return original.subject !== currentMessage.body.subject

package/app/composables/useExitConfirmation.ts

@@ -20,8 +20,8 @@ export function useExitConfirmation(shouldBlockNavigation: ComputedRef<boolean>)
       confirm({
         title: t('dialogs.unsaved_changes.title'),
         message: t('dialogs.unsaved_changes.message'),
-        confirmLabel: t('dialogs.unsaved_changes.leave'),
-        cancelLabel: t('dialogs.unsaved_changes.cancel'),
+        confirmProps: { label: t('dialogs.unsaved_changes.leave') },
+        cancelProps: { label: t('dialogs.unsaved_changes.cancel') },
         action: () => {
           const target = isNavigatingTo.value
           if (target) {

package/app/composables/useMediaLimits.ts

@@ -18,7 +18,7 @@ export function useMediaLimits(mediaType: MaybeRefOrGetter<MediaType>) {
   })
 
   function validateFile(file: File): boolean {
-    if (!limits.value.accept.includes(file.type)) {
+    if (!(limits.value.accept as readonly string[]).includes(file.type)) {
       useToast().add({
         color: 'error',
         title: t('common.imageUpload.mediaInvalidType'),

package/app/composables/useTemplateFormValidation.ts

@@ -29,7 +29,12 @@ export function useTemplateFormValidation(options: UseTemplateFormValidationOpti
   const { t } = useI18n()
   const emailEditorStore = useEmailEditorStore()
 
-  const formRef = useTemplateRef('templateForm')
+  const formRef = useTemplateRef<{
+    clear: () => void
+    validate: () => Promise<void>
+    errors: { message: string }[]
+    setErrors: (errors: { message: string; name: string }[]) => void
+  }>('templateForm')
   const validationErrors = ref<string[]>([])
 
   const formState = computed(() => ({

package/app/composables/useTemplateOperations.ts

@@ -12,6 +12,7 @@ import type {
   Message,
   PostEntity,
   MessageStatus,
+  MessageGroup,
 } from '@dev.smartpricing/message-composer-utils/types'
 
 interface TemplateData<T = Message | PostEntity<Message>> {
@@ -55,7 +56,9 @@ export function useTemplateOperations(options: UseTemplateOperationsOptions = {}
   async function createTemplate(data: TemplateData, status: MessageStatus = 'draft') {
     saving.value = true
     try {
-      const createdMessageGroup = await createMessageGroup(data.messageGroup)
+      const createdMessageGroup = await createMessageGroup(
+        data.messageGroup as PostEntity<MessageGroup>,
+      )
 
       if (createdMessageGroup?.id) {
         for (const message of Object.values(data.messages)) {

package/app/composables/useTranslationFiltersEmail.ts

@@ -78,7 +78,10 @@ export function useTranslationFiltersEmail(params: EmailTranslationFiltersParams
   /**
    * Check if a block matches the search query
    */
-  function matchesSearch(blockId: string, baseMsg: EmailMessage): boolean {
+  function matchesSearch(
+    blockId: string,
+    baseMsg: EmailMessage | PostEntity<EmailMessage>,
+  ): boolean {
     if (!searchQuery.value || !searchQuery.value.trim()) return true
 
     const query = searchQuery.value.toLowerCase().trim()
@@ -93,7 +96,10 @@ export function useTranslationFiltersEmail(params: EmailTranslationFiltersParams
   /**
    * Check if a block has missing translation
    */
-  function hasMissingTranslation(blockId: string, targetMsg: EmailMessage): boolean {
+  function hasMissingTranslation(
+    blockId: string,
+    targetMsg: EmailMessage | PostEntity<EmailMessage>,
+  ): boolean {
     const block = findBlockById(targetMsg.body.blocks, blockId)
     if (!block) return true
 
@@ -117,7 +123,7 @@ export function useTranslationFiltersEmail(params: EmailTranslationFiltersParams
   /**
    * Get all translatable block IDs from a message, including parent grid blocks
    */
-  function getAllTranslatableBlockIds(message: EmailMessage): string[] {
+  function getAllTranslatableBlockIds(message: EmailMessage | PostEntity<EmailMessage>): string[] {
     const blockIds = new Set<string>()
 
     function isTranslatableOrMedia(type: string): boolean {

package/app/pages/preview/[id].vue

@@ -39,11 +39,11 @@ const isEmail = computed(() => selectedMessage.value?.render_type === 'email_v1'
 
 <template>
   <div :data-testid="previewPageTestIds.page" class="w-full overflow-y-auto">
-    <WhatsappPreview v-if="isWhatsapp && selectedMessage" :message="selectedMessage" />
+    <WhatsappPreview v-if="isWhatsapp && selectedMessage" :message="selectedMessage as any" />
 
     <EmailPreview
       v-else-if="isEmail && selectedMessage"
-      :message="selectedMessage"
+      :message="selectedMessage as any"
       :show-subject="route.query.showSubject === 'true'"
       :message-group-id="route.params.id as string"
       :brand-id="brandId"

package/app/queries/brands.ts

@@ -11,7 +11,7 @@ export function useBrandsQuery(options?: {
   direction?: 'asc' | 'desc'
 }) {
   return useQuery({
-    key: () => ['brands', options?.sort_by, options?.direction],
+    key: () => ['brands', options?.sort_by ?? '', options?.direction ?? ''],
     query: () => brandsApi.getAll(options),
     staleTime: 2 * 60 * 1000,
   })

package/app/stores/emailEditor.ts

@@ -153,10 +153,10 @@ export const useEmailEditorStore = defineStore('emailEditor', () => {
   async function initBrand(brandIdToRestore?: string | null) {
     const list = await fetchBrands({ sort_by: 'created_at', direction: 'asc' })
     if (brandIdToRestore) {
-      brand.value = list.find((b) => b.id === brandIdToRestore) ?? null
+      brand.value = (list.find((b) => b.id === brandIdToRestore) ?? null) as BrandFromDb | null
     } else if (brandIdToRestore === undefined && list.length) {
       // Create mode: default to oldest brand
-      brand.value = list[0]
+      brand.value = (list[0] ?? null) as BrandFromDb | null
     }
     // brandIdToRestore === null → keep null (explicit no-brand)
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dev.smartpricing/message-composer-layer",
-  "version": "1.0.16",
+  "version": "1.0.18",
   "private": false,
   "type": "module",
   "main": "./nuxt.config.ts",
@@ -39,7 +39,7 @@
     "vue-router": "^5.0.6",
     "vue3-emoji-picker": "^1.1.8",
     "zod": "^4.4.1",
-    "@dev.smartpricing/message-composer-utils": "3.1.16"
+    "@dev.smartpricing/message-composer-utils": "3.1.18"
   },
   "devDependencies": {
     "@nuxt/eslint": "^1.15.2",
@@ -57,6 +57,7 @@
     "dev": "nuxt dev",
     "lint": "eslint app/ --fix",
     "format": "prettier --write app/",
+    "typecheck": "nuxt typecheck",
     "postinstall": "nuxt prepare",
     "test:e2e": "playwright test",
     "test:e2e:debug": "playwright test --debug",