@bagelink/vue 1.15.508 → 1.15.512

package/src/components/form/inputs/TelInput.vue

@@ -2,7 +2,8 @@
 import type { Country } from '@bagelink/vue'
 import type { CountryCode } from 'libphonenumber-js'
 import { Dropdown, Flag, Icon, TextInput, allCountries, ipapi, useI18n, resolveI18n } from '@bagelink/vue'
-import { parsePhoneNumberFromString } from 'libphonenumber-js'
+import { AsYouType, getExampleNumber, parsePhoneNumberFromString } from 'libphonenumber-js'
+import examples from 'libphonenumber-js/examples.mobile.json'
 import { computed, onMounted, ref, watch } from 'vue'
 import type { BagelInputShellProps } from './bagelInputShell'
 import { useBagelInputShell } from './bagelInputShell'
@@ -28,35 +29,107 @@ const emit = defineEmits(['update:modelValue', 'blur', 'focus', 'keydown', 'inpu
 
 const { $t } = useI18n()
 
-const phoneNumber = ref(props.modelValue ?? '')
+// Territories that share their parent country's calling code are represented by
+// the parent in the selector. Independent countries sharing a numbering plan
+// (for example Canada and the United States) remain separate options.
+const SHARED_CALLING_CODE_PARENTS: Record<string, string> = {
+	AS: 'US',
+	AX: 'FI',
+	CC: 'AU',
+	CX: 'AU',
+	GG: 'GB',
+	GU: 'US',
+	IM: 'GB',
+	JE: 'GB',
+	MP: 'US',
+	PR: 'US',
+	SJ: 'NO',
+	VI: 'US',
+}
+
+function normalizeCountryCode(code: string) {
+	const upperCode = code.toUpperCase()
+	return SHARED_CALLING_CODE_PARENTS[upperCode] ?? upperCode
+}
+
+/**
+ * `national` holds ONLY what the user types (no dial code), formatted live via
+ * `AsYouType`. `modelValue` stays E.164 (`+31612345678`) — derived from the
+ * active country's dial code + the national digits — so consumers are unaffected.
+ */
+const national = ref('')
 const search = ref('')
 const activeCountry = ref<Country>()
 const searchInput = ref<InstanceType<typeof TextInput>>()
 const open = ref(false)
 const inputRef = ref<HTMLInputElement | null>(null)
 const isValid = ref(true)
+// Only surface the invalid state after blur, so we don't punish mid-type.
+const touched = ref(false)
+
+/** Raw national digits with any trunk-prefix leading zero(s) stripped. */
+function nationalDigits(): string {
+	return national.value.replace(/\D/g, '').replace(/^0+/, '')
+}
+
+/** Build the E.164 value from the active dial code + national digits. */
+function toE164(): string {
+	const digits = nationalDigits()
+	if (!digits) return ''
+	if (!activeCountry.value) return `+${digits}`
+	return `+${activeCountry.value.dialCode}${digits}`
+}
+
+/** Format national input live using libphonenumber's AsYouType.
+ * Preserves a leading trunk 0 in the *display* (users often type "06…"); the
+ * leading zero is only stripped when we build the E.164 value (see toE164). */
+function formatNational(input: string): string {
+	const code = getCountryCode()
+	const digits = input.replace(/\D/g, '')
+	if (!digits) return ''
+	if (!code) return digits
+	const leadingZero = digits.startsWith('0') ? '0' : ''
+	const formatted = new AsYouType(code).input(digits.replace(/^0+/, ''))
+	return leadingZero + formatted
+}
+
+// Emit E.164 whenever the national part or country changes.
+watch([national, activeCountry], () => emit('update:modelValue', toE164()))
+
+/** Split an incoming E.164 / raw value into active country + national part. */
+function ingestValue(value?: string) {
+	const raw = value ?? ''
+	if (!raw) { national.value = ''; return }
+	const parsed = parsePhoneNumberFromString(raw, getCountryCode())
+	if (parsed) {
+		const match = parsed.country ? findCountry(parsed.country) : undefined
+		if (match) activeCountry.value = match
+		national.value = formatNational(parsed.nationalNumber)
+		return
+	}
+	// Fallback: strip the active dial code if present, else keep digits.
+	const digits = raw.replace(/\D/g, '')
+	if (activeCountry.value && digits.startsWith(activeCountry.value.dialCode)) {
+		national.value = formatNational(digits.slice(activeCountry.value.dialCode.length))
+	} else {
+		national.value = formatNational(digits)
+	}
+}
 
-// Watch for changes to phoneNumber and emit update events
-watch(() => phoneNumber.value, (newValue) => {
-	emit('update:modelValue', newValue)
-})
-
-// Watch for changes to the modelValue prop
+// Keep the field in sync when the bound modelValue changes externally.
 watch(() => props.modelValue, (newValue) => {
-	if (newValue !== phoneNumber.value) {
-		phoneNumber.value = newValue ?? ''
-	}
+	if (newValue !== toE164()) ingestValue(newValue)
 })
 
 const countries = computed(() => {
-	let filteredCountries = allCountries
+	let filteredCountries = allCountries.filter(country => !SHARED_CALLING_CODE_PARENTS[country.iso2])
 	if (props.excludeCountries && props.excludeCountries.length) {
 		const excludeCountries = props.excludeCountries.map(c => c.toLowerCase())
 		filteredCountries = filteredCountries.filter(c => !excludeCountries.includes(c.iso2.toLowerCase()))
 	}
 	if (props.onlyCountries && props.onlyCountries.length) {
-		const onlyCountries = props.onlyCountries.map(c => c.toLowerCase())
-		filteredCountries = filteredCountries.filter(c => onlyCountries.includes(c.iso2.toLowerCase()))
+		const onlyCountries = props.onlyCountries.map(normalizeCountryCode)
+		filteredCountries = filteredCountries.filter(c => onlyCountries.includes(c.iso2))
 	}
 	if (search.value.length) {
 		const lowerCaseSearch = search.value.toLowerCase()
@@ -70,11 +143,19 @@ const countries = computed(() => {
 
 const activeCountryCode = computed(() => activeCountry.value?.iso2)
 
+/** A real, correctly-formatted example national number for the active country. */
+const examplePlaceholder = computed(() => {
+	const code = getCountryCode()
+	if (!code) return ''
+	try {
+		const example = getExampleNumber(code, examples)
+		return example ? example.formatNational() : ''
+	} catch { return '' }
+})
+
 const computedPlaceholder = computed(() => {
 	if (props.placeholder) return resolveI18n(props.placeholder)
-	if (activeCountry.value) {
-		return `+${activeCountry.value.dialCode} ${resolveI18n(props.label) || $t('tel.phoneNumber')}`
-	}
+	if (examplePlaceholder.value) return examplePlaceholder.value
 	return resolveI18n(props.label) || $t('tel.phoneNumber')
 })
 
@@ -82,30 +163,14 @@ function selectCountry(country: Country) {
 	activeCountry.value = country
 	open.value = false
 	search.value = ''
-
-	if (!phoneNumber.value) {
-		// Don't auto-fill for non-required empty fields
-		if (props.required) {
-			phoneNumber.value = `+${activeCountry.value.dialCode}`
-		}
-	} else if (phoneNumber.value.startsWith('+')) {
-		// Replace existing country code with the new one
-		const existingCountry = countries.value.find(c => phoneNumber.value.startsWith(`+${c.dialCode}`))
-		if (existingCountry && existingCountry !== country) {
-			// Remove the old country code and replace with new one
-			const nationalPart = phoneNumber.value.substring(`+${existingCountry.dialCode}`.length).trim()
-			phoneNumber.value = `+${activeCountry.value.dialCode}${nationalPart ? ` ${nationalPart}` : ''}`
-		}
-	} else {
-		// Phone number doesn't start with +, prepend the country code
-		phoneNumber.value = `+${activeCountry.value.dialCode} ${phoneNumber.value.replace(/^0+/, '')}`
-	}
+	// Re-run the current national digits through the new country's formatter.
+	national.value = formatNational(national.value)
 }
 
 function findCountry(iso2?: string | null) {
 	if (!iso2) return undefined
-	const code = iso2.toLowerCase()
-	return countries.value.find(c => c.iso2.toLowerCase() === code)
+	const code = normalizeCountryCode(iso2)
+	return countries.value.find(c => c.iso2 === code)
 }
 
 /** Locale / language fallback when geo-IP is blocked (CORS, rate limit, offline). */
@@ -138,70 +203,33 @@ function getCountryCode(): CountryCode | undefined {
 	return activeCountry.value?.iso2 ? activeCountry.value.iso2.toUpperCase() as CountryCode : undefined
 }
 
-// Parse and format the phone number
-function parseAndFormatPhoneNumber(value: string): string {
-	if (!value) { return value }
-
-	try {
-		const parsedNumber = parsePhoneNumberFromString(value, getCountryCode())
-		if (parsedNumber && parsedNumber.isValid()) {
-			return parsedNumber.formatInternational()
-		}
-	} catch (error) {
-		console.error('Error parsing phone number:', error)
-	}
-	return value
-}
-
-// Validate the phone number and set custom validity
+/** Validate the E.164 value and set the native custom validity. */
 function validatePhoneNumber() {
 	if (!inputRef.value) { return }
+	const value = toE164()
 
-	// If not required and empty (or just a country code), skip validation
-	if (!props.required) {
-		const strippedValue = phoneNumber.value.replace(/[\s+]/g, '')
-		const isJustDialCode = activeCountry.value && strippedValue === activeCountry.value.dialCode
-		if (!phoneNumber.value || isJustDialCode) {
-			inputRef.value.setCustomValidity('')
-			isValid.value = true
-			return
-		}
+	// If not required and empty (or just a dial code), skip validation.
+	if (!props.required && !nationalDigits()) {
+		inputRef.value.setCustomValidity('')
+		isValid.value = true
+		return
 	}
 
 	try {
-		const parsedNumber = parsePhoneNumberFromString(phoneNumber.value, getCountryCode())
-		if (parsedNumber && parsedNumber.isValid()) {
-			inputRef.value.setCustomValidity('')
-			isValid.value = true
-		} else {
-			inputRef.value.setCustomValidity($t('tel.invalidPhone'))
-			isValid.value = false
-		}
+		const parsed = parsePhoneNumberFromString(value, getCountryCode())
+		const ok = Boolean(parsed && parsed.isValid())
+		inputRef.value.setCustomValidity(ok ? '' : $t('tel.invalidPhone'))
+		isValid.value = ok || !touched.value
 	} catch (error) {
 		console.error('Error validating phone number:', error)
 		inputRef.value.setCustomValidity($t('tel.invalidPhone'))
-		isValid.value = false
-	}
-}
-
-function detectCountryFromNumber(value: string): boolean {
-	if (!value.startsWith('+')) { return false }
-
-	const digits = value.replace(/\D/g, '')
-	if (digits.length <= 1) { return false }
-
-	for (const country of countries.value) {
-		if (digits.startsWith(country.dialCode) && country !== activeCountry.value) {
-			selectCountry(country)
-			return true
-		}
+		isValid.value = !touched.value
 	}
-	return false
 }
 
 async function initializeCountry() {
-	if (phoneNumber.value) {
-		detectCountryFromNumber(phoneNumber.value)
+	if (props.modelValue) {
+		ingestValue(props.modelValue)
 	} else {
 		try {
 			await getIp()
@@ -209,43 +237,25 @@ async function initializeCountry() {
 			selectFallbackCountry()
 		}
 	}
-	const formatted = parseAndFormatPhoneNumber(phoneNumber.value)
-	if (formatted !== phoneNumber.value) {
-		phoneNumber.value = formatted
-		emit('input', phoneNumber.value)
-		validatePhoneNumber()
-	}
 	validatePhoneNumber()
 }
 
 function handlePhoneInput(event: Event) {
 	const input = event.target as HTMLInputElement
-	const { value } = input
-	detectCountryFromNumber(value)
-
-	if (value.startsWith('+')) {
-		const formatted = parseAndFormatPhoneNumber(value)
-		if (formatted !== value) {
-			phoneNumber.value = formatted
-			emit('input', event)
-			validatePhoneNumber()
-			return
-		}
+	// If the user pastes/types a full international number, re-detect country.
+	if (input.value.trim().startsWith('+')) {
+		ingestValue(input.value)
+	} else {
+		national.value = formatNational(input.value)
 	}
-
-	phoneNumber.value = value
+	// Reflect the formatted value back into the field.
+	input.value = national.value
 	emit('input', event)
-	validatePhoneNumber()
+	if (touched.value) validatePhoneNumber()
 }
 
 function handleBlur(event: Event) {
-	if (phoneNumber.value && !phoneNumber.value.startsWith('+') && activeCountry.value) {
-		const nationalNumber = phoneNumber.value.replace(/^0+/, '')
-		phoneNumber.value = `+${activeCountry.value.dialCode} ${nationalNumber}`
-	} else if (phoneNumber.value) {
-		phoneNumber.value = parseAndFormatPhoneNumber(phoneNumber.value)
-	}
-
+	touched.value = true
 	validatePhoneNumber()
 	emit('blur', event)
 }
@@ -253,10 +263,7 @@ function handleBlur(event: Event) {
 const disableDropdown = computed(() => countries.value.length === 1 && !search.value)
 const searchable = computed(() => countries.value.length > 7 || search.value)
 
-const hasValue = computed(() => {
-	const val = phoneNumber.value
-	return Boolean(val && String(val).length > 0)
-})
+const hasValue = computed(() => Boolean(national.value))
 
 function focusSearchInput() {
 	setTimeout(() => searchInput.value?.focus(), 100)
@@ -284,6 +291,7 @@ onMounted(initializeCountry)
 						<span class="flex gap-05 country-code-display" @click="open = !open">
 							<Icon v-if="!disableDropdown" :icon="open ? 'collapse_all' : 'expand_all'" />
 							<Flag v-if="activeCountryCode" :country="activeCountryCode" />
+							<span v-if="activeCountry" class="dial-code">+{{ activeCountry.dialCode }}</span>
 						</span>
 					</template>
 					<div class="p-075 tel-countryp-dropdown">
@@ -308,11 +316,13 @@ onMounted(initializeCountry)
 					</div>
 				</Dropdown>
 				<input
-					:id="id" ref="inputRef" v-model="phoneNumber" v-pattern.tel :required="required"
-					:placeholder="underlined ? ' ' : computedPlaceholder" :disabled="disabled" type="tel" autocomplete="tel" :name="id"
+					:id="id" ref="inputRef" :value="national" v-pattern.tel :required="required"
+					:placeholder="underlined ? ' ' : computedPlaceholder" :disabled="disabled" type="tel"
+					inputmode="tel" autocomplete="tel-national" :name="id"
 					tabindex="0" class="national-number-input" @blur="handleBlur($event)" @focus="emit('focus', $event)"
 					@keydown="emit('keydown', $event)" @input="handlePhoneInput($event)" @paste="emit('paste', $event)"
 				>
+				<Icon v-if="touched && isValid && hasValue" icon="check" class="valid-check color-green" />
 			</div>
 		</label>
 		<div v-if="error" class="error-message">
@@ -392,6 +402,12 @@ align-items: center;
 white-space: nowrap;
 }
 
+.valid-check {
+flex-shrink: 0;
+margin-inline-end: 0.4rem;
+font-size: 1rem;
+}
+
 .dial-code {
 font-size: var(--bgl-input-font-size);
 color: var(--bgl-input-color);

package/src/components/form/inputs/Upload/UploadInput.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { UploadInputProps } from '../../../../types/BagelForm'
 import { Btn, IMAGE_FORMATS_REGEXP, Icon, Card, Image, pathKeyToURL, Loading, useI18n, resolveI18n } from '@bagelink/vue'
-import { watch, computed, useSlots } from 'vue'
+import { watch, computed, ref, useSlots } from 'vue'
 import { useFileDropzone } from '../../../file-drop/useFileDropzone'
 import { useFileUpload } from './useFileUpload'
 import { useBagelInputShell } from '../bagelInputShell'
@@ -13,6 +13,7 @@ const props = withDefaults(defineProps<UploadInputProps>(), {
 	showIcon: true,
 	icon: 'upload_2',
 	iconSize: 2.5,
+	uploadFrame: true,
 })
 
 const emit = defineEmits(['update:modelValue', 'addFileStart'])
@@ -77,7 +78,26 @@ const showDropZonePlaceholder = computed(
 	() => (!pathKeys.value.length && !fileQueue.value.length) || !!props.multiple
 )
 
-const isImage = (str: string) => IMAGE_FORMATS_REGEXP.test(str)
+const acceptsImages = computed(() => props.accept
+	.split(',')
+	.some(type => type.trim().toLowerCase().startsWith('image/')))
+const detectedImageKeys = ref(new Set<string>())
+const probedImageKeys = new Set<string>()
+const isImage = (str: string) => acceptsImages.value
+	|| IMAGE_FORMATS_REGEXP.test(str.split(/[?#]/)[0] ?? '')
+	|| detectedImageKeys.value.has(str)
+
+function probeImage(pathKey: string) {
+	if (typeof window === 'undefined' || isImage(pathKey) || probedImageKeys.has(pathKey)) return
+	probedImageKeys.add(pathKey)
+	const image = new window.Image()
+	image.onload = () => {
+		detectedImageKeys.value = new Set([...detectedImageKeys.value, pathKey])
+	}
+	image.src = pathKeyToURL(pathKey) ?? pathKey
+}
+
+watch(pathKeys, keys => keys.forEach(probeImage), { immediate: true })
 
 const { isDragging: isDragOver, handlers } = useFileDropzone({
 	disabled: () => props.disabled,
@@ -152,6 +172,7 @@ function fileName(pathKey: string) {
 				'fileDropZone': !pathKeys.length && !fileQueue.length,
 				'dragover': isDragOver,
 				'bgl_oval-upload': oval,
+				'border overflow-hidden': props.uploadFrame,
 			}" :style="{ width, height }" v-on="handlers" @click="browse()"
 		>
 			<slot name="files" :files="pathKeys" :fileQueue>
@@ -265,3 +286,13 @@ function fileName(pathKey: string) {
 </template>
 
 <style src="./upload.css" scoped></style>
+<style>
+.bgl-single-preview:hover .bgl_btn{
+	filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.6));
+}
+
+.single-image-item-preview::after{
+	filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.6));
+
+}
+</style>

package/src/components/form/inputs/Upload/upload.css

@@ -123,10 +123,18 @@
     pointer-events: none;
     opacity: 0;
     transition: all 0.4s ease;
+    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.6));
+    background: #00000050;
+    height: 50px;
+    width: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .single-image-item-preview:hover::after {
     opacity: 1;
+
 }
 
 .single-image-item-preview img {

package/src/components/kanban/KanbanBoard.vue

@@ -21,6 +21,8 @@ const slots = defineSlots<{
 	card?: (p: { item: T; column: KanbanColumn<T> }) => any
 	'column-header'?: (p: { column: KanbanColumn<T>; count: number }) => any
 	'column-footer'?: (p: { column: KanbanColumn<T> }) => any
+	/** Replaces the default spinner while a column loads. `initial` = no items yet. */
+	loading?: (p: { column: KanbanColumn<T>; initial: boolean }) => any
 }>()
 
 /* ── mode resolution ───────────────────────────────────────────── */
@@ -158,7 +160,11 @@ function cardBadges(item: T) {
 				</div>
 
 				<EmptyState v-if="!col.items.length && !col.loading" compact icon="inbox" :title="emptyText" class="bgl-kanban-empty py-075 opacity-5" />
-				<Loading v-if="col.loading" class="bgl-kanban-loading p-1 display-flex justify-content-center" />
+				<template v-if="col.loading">
+					<slot name="loading" :column="col" :initial="!col.items.length">
+						<Loading class="bgl-kanban-loading p-1 display-flex justify-content-center" />
+					</slot>
+				</template>
 				<!-- footer / load more -->
 				<div v-if="canLoadMore(col) || slots['column-footer']" class="bgl-kanban-foot">
 					<slot name="column-footer" :column="col">

package/src/form-flow/FormFlowPlayer.vue

@@ -252,19 +252,24 @@ function validateStep(): boolean {
 }
 
 async function onPrimary() {
+	// Single-flight: the lock spans `beforePrimary` too, since hosts may do
+	// network work there. Double clicks / auto-advance can't re-enter.
+	if (submitting.value) return
 	if (!validateStep()) return
 
 	const step = currentStep.value
-	const proceed = await props.beforePrimary?.({
-		data: { ...formData.value },
-		currentStep: step!,
-		isTerminal: isTerminal.value,
-	})
-	if (proceed === false) return
-
-	if (isTerminal.value) {
-		submitting.value = true
-		try {
+	submitting.value = true
+	// Stay locked while a post-submit redirect is navigating away.
+	let keepLocked = false
+	try {
+		const proceed = await props.beforePrimary?.({
+			data: { ...formData.value },
+			currentStep: step!,
+			isTerminal: isTerminal.value,
+		})
+		if (proceed === false) return
+
+		if (isTerminal.value) {
 			const submittedData = normalizeCustomFormSubmission(allFields.value, formData.value)
 			// `skipSubmit` terminals (e.g. disqualification leaves) end the flow
 			// without creating a submission — the host's onComplete is bypassed,
@@ -277,32 +282,33 @@ async function onPrimary() {
 			// can unmount this component before navigation executes.
 			const url = step?.redirectUrl?.trim()
 			if (url) {
+				keepLocked = true
 				emit('redirect', url)
 				if (props.redirect && typeof window !== 'undefined') {
 					window.location.assign(url)
 				}
 			}
 			emit('complete', { ...formData.value })
+			return
 		}
-		finally {
-			submitting.value = false
+
+		// Advance to the resolved next step.
+		const target = nextKey.value
+		if (target && currentKey.value) {
+			completedKeys.value = new Set([...completedKeys.value, currentKey.value])
+			const destination = stepByKey(props.structure, target)
+			emit('stepComplete', {
+				...buildPayload(currentKey.value),
+				destinationStepKey: target,
+				destinationStepTitle: destination?.title ?? '',
+			})
+			slideDir.value = 'next'
+			history.value.push(currentKey.value)
+			currentKey.value = target
 		}
-		return
 	}
-
-	// Advance to the resolved next step.
-	const target = nextKey.value
-	if (target && currentKey.value) {
-		completedKeys.value = new Set([...completedKeys.value, currentKey.value])
-		const destination = stepByKey(props.structure, target)
-		emit('stepComplete', {
-			...buildPayload(currentKey.value),
-			destinationStepKey: target,
-			destinationStepTitle: destination?.title ?? '',
-		})
-		slideDir.value = 'next'
-		history.value.push(currentKey.value)
-		currentKey.value = target
+	finally {
+		if (!keepLocked) submitting.value = false
 	}
 }
 

package/src/form-flow/custom-field-registry.ts

@@ -21,6 +21,13 @@ export interface CustomFormFieldJSONSchemaContext {
 	required: boolean
 }
 
+export interface CustomFormFieldTranslatableSetting<TConfig extends Record<string, unknown>> {
+	/** Key stored in the custom field config (normally under `x-field-settings`). */
+	key: Extract<keyof TConfig, string>
+	/** Human-readable label used by translation editors. */
+	label: string
+}
+
 export interface CustomFormFieldDefinition<
 	TValue = unknown,
 	TConfig extends Record<string, unknown> = Record<string, unknown>,
@@ -32,6 +39,8 @@ export interface CustomFormFieldDefinition<
 	settingsComponent?: Component
 	settingsConfig?: Record<string, unknown>
 	settingsDefaults?: Partial<TConfig>
+	/** String settings that locale editors may translate without changing behavior. */
+	translatableSettings?: CustomFormFieldTranslatableSetting<TConfig>[]
 	jsonSchema?: {
 		type?: string
 		parse?: (

package/src/form-flow/form-flow.ts

@@ -603,7 +603,14 @@ class Schema<T extends Record<string, any> = Record<string, any>> implements Sch
 
 			// Field type (useful for rendering)
 			if (field._type !== 'text') xUi.fieldType = field._type
-			if (customDefinition) prop['x-field-type'] = field._type
+			if (customDefinition) {
+				prop['x-field-type'] = field._type
+				const translatableSettings = customDefinition.translatableSettings
+					?.map(setting => setting.key)
+				if (translatableSettings?.length) {
+					prop['x-translatable-settings'] = translatableSettings
+				}
+			}
 
 			// UI-specific hints
 			if (config.placeholder) xUi.placeholder = config.placeholder
@@ -842,6 +849,7 @@ interface JSONSchemaProperty {
 	// (schema-fields.ts `fieldsToSchema`). fromJSONSchema honors these too so a
 	// designer-built schema renders identically in FormFlow/FormFlowPlayer.
 	'x-field-type'?: string
+	'x-translatable-settings'?: string[]
 	'x-options'?: { label: string, value: any }[]
 	'x-options-source'?: JSONSchemaOptionsSource
 	'x-placeholder'?: string

package/src/types/BagelForm.ts

@@ -207,6 +207,8 @@ export interface UploadInputProps extends BagelInputShellProps {
 	height?: string | 'auto'
 	dirPath?: string
 	fill?: boolean
+	/** Adds a border and clips the upload preview to its frame. */
+	uploadFrame?: boolean
 	oval?: boolean
 	theme?: 'dropzone' | 'basic'
 	accept?: string