@bagelink/vue 1.15.166 → 1.15.170

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.15.166",
+  "version": "1.15.170",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",

package/src/components/Badge.vue

@@ -53,14 +53,16 @@ const props = defineProps<{
 	round?: boolean
 	btn?: BtnProp
 	btnEnd?: BtnProp
-	size?: 'sm' | 'md' | 'lg'
-	/** Boolean size shorthands: <Badge sm value="New" /> */
+	size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+	/** Boolean size shorthands: <Badge sm value="New" /> — xs · sm · md · lg · xl */
+	xs?: boolean
 	sm?: boolean
 	lg?: boolean
+	xl?: boolean
 	/** Mobile-only size override (≤ 910px). Lets a `lg` desktop badge shrink on
 	    phones so it doesn't overflow / touch neighbours. e.g.
 	    <Badge lg mobile-size="sm" />. Mirrors `Icon`'s `mobileSize` prop. */
-	mobileSize?: 'sm' | 'md' | 'lg'
+	mobileSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
 	uppercase?: boolean
 }>()
 
@@ -91,8 +93,10 @@ const computedPairClass = computed(() => {
 
 const computedSize = computed(() => {
 	if (props.size) { return props.size }
+	if (props.xs) { return 'xs' }
 	if (props.sm) { return 'sm' }
 	if (props.lg) { return 'lg' }
+	if (props.xl) { return 'xl' }
 	return 'md'
 })
 
@@ -122,11 +126,15 @@ const computedClasses = computed(() => {
 		'soft': computedVariant.value === 'soft',
 		'frost': computedVariant.value === 'frost',
 		'gradient': computedVariant.value === 'gradient',
-		'pillLarge': computedSize.value === 'lg',
+		'pillXSmall': computedSize.value === 'xs',
 		'pillSmall': computedSize.value === 'sm',
-		'm_pillLarge': computedMobileSize.value === 'lg',
-		'm_pillMd': computedMobileSize.value === 'md',
+		'pillLarge': computedSize.value === 'lg',
+		'pillXLarge': computedSize.value === 'xl',
+		'm_pillXSmall': computedMobileSize.value === 'xs',
 		'm_pillSmall': computedMobileSize.value === 'sm',
+		'm_pillMd': computedMobileSize.value === 'md',
+		'm_pillLarge': computedMobileSize.value === 'lg',
+		'm_pillXLarge': computedMobileSize.value === 'xl',
 		'bgl_pill-flush': props.flush,
 	}
 
@@ -146,7 +154,7 @@ const computedClasses = computed(() => {
 	>
 		<div class="flex h-100 justify-content-center relative ">
 			<div v-if="loading" class="loading absolute inset-0 mx-auto" />
-			<div class="px-025 flex gap-025 justify-content-center align-items-center" :class="{ 'opacity-0': loading }">
+			<div class="px-025 flex gap-025 justify-content-center align-items-center" :class="{ 'opacity-0': loading }" style="font-size: var(--bgl-pill-font-size)">
 				<Btn v-if="btn" class="bgl_pill-btn -ms-025" icon-size="0.8" round v-bind="btn" />
 				<span v-if="dot" class="bgl_pill-dot" />
 				<Icon v-if="icon" class="line-height-0" :icon="icon" style="font-size: var(--bgl-pill-font-size)" />
@@ -165,30 +173,58 @@ const computedClasses = computed(() => {
 
 <style scoped>
 
-.pillLarge{
---bgl-pill-font-size: var(--bgl-font-size);
---bgl-pill-height:auto;
-}
-.pillSmall{
+/* Size scale (xs → xl). Each size drives font-size, height, and corner radius
+   together so the pill scales naturally; padding derives from font-size on
+   .bgl_pill, so it follows along. `md` is the base (theme.css defaults). */
+.pillXSmall {
 --bgl-pill-font-size: 9px;
---bgl-pill-height:15px;
+--bgl-pill-height: 15px;
+--bgl-pill-border-radius: 5px;
+}
+.pillSmall {
+--bgl-pill-font-size: 10px;
+--bgl-pill-height: 17px;
+--bgl-pill-border-radius: 6px;
+}
+.pillLarge {
+--bgl-pill-font-size: 16px;
+--bgl-pill-height: 28px;
+--bgl-pill-border-radius: 10px;
+}
+.pillXLarge {
+--bgl-pill-font-size: 18px;
+--bgl-pill-height: 34px;
+--bgl-pill-border-radius: 12px;
 }
 
 /* Mobile-only size overrides (≤ 910px). These win over the desktop size class
    because the size is driven entirely by --bgl-pill-font-size / --bgl-pill-height,
    and a later @media rule with equal specificity overrides the base class. */
 @media screen and (max-width: 910px) {
-	.m_pillLarge {
-		--bgl-pill-font-size: var(--bgl-font-size);
-		--bgl-pill-height: auto;
+	.m_pillXSmall {
+		--bgl-pill-font-size: 9px;
+		--bgl-pill-height: 15px;
+		--bgl-pill-border-radius: 5px;
+	}
+	.m_pillSmall {
+		--bgl-pill-font-size: 10px;
+		--bgl-pill-height: 17px;
+		--bgl-pill-border-radius: 6px;
 	}
 	.m_pillMd {
 		--bgl-pill-font-size: 12px;
 		--bgl-pill-height: 20px;
+		--bgl-pill-border-radius: 8px;
 	}
-	.m_pillSmall {
-		--bgl-pill-font-size: 9px;
-		--bgl-pill-height: 15px;
+	.m_pillLarge {
+		--bgl-pill-font-size: 16px;
+		--bgl-pill-height: 28px;
+		--bgl-pill-border-radius: 10px;
+	}
+	.m_pillXLarge {
+		--bgl-pill-font-size: 18px;
+		--bgl-pill-height: 34px;
+		--bgl-pill-border-radius: 12px;
 	}
 }
 .pillText{

package/src/components/BglVideo.vue

@@ -12,6 +12,8 @@ interface Props {
 	loop?: boolean
 	status?: string
 	playsinline?: boolean
+	/** Accessible name for embed iframes / native video */
+	title?: string
 }
 
 const props = defineProps<Props>()
@@ -108,13 +110,14 @@ const videoUrl = computed(() => {
 <template>
 	<div ref="videoContainer" class="bgl_vid" :class="{ vid_empty: !src, vid_short: isYoutubeShort }">
 		<iframe
-			v-if="embedType" :src="videoUrl" :style="{ aspectRatio }" frameborder="0" title="Video"
+			v-if="embedType" :src="videoUrl" :style="{ aspectRatio }" frameborder="0" :title="title || 'Video'"
 			allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
 			referrerpolicy="strict-origin-when-cross-origin" allowfullscreen
 		/>
 		<video
 			v-else-if="src" ref="video" :autoplay="autoplay === true" :muted="mute" :loop="loop"
 			:style="{ aspectRatio }" :controls="controls" :playsinline="playsinline"
+			:aria-label="title || undefined"
 		>
 			<source :src="src" :type="`video/${videoFormat}`">
 		</video>

package/src/components/Btn.vue

@@ -81,6 +81,8 @@ const emit = defineEmits<{
 }>()
 
 const { $t } = useI18n()
+// Must run in setup — inject() cannot be called from click handlers.
+const dialog = useDialog()
 
 const { isGradient, gradientStyle } = useGradientVariant({
 	gradient: () => props.gradient,
@@ -152,11 +154,10 @@ onUnmounted(() => {
 
 async function handleClick(event: MouseEvent) {
 	if (props.confirm !== undefined && props.confirm !== false) {
-		const { confirm } = useDialog()
 		const message = typeof props.confirm === 'string' ? props.confirm : $t('modalConfirm.message')
-		const confirmed = await confirm({
+		const confirmed = await dialog.confirm({
 			title: $t('modalConfirm.title'),
-			message
+			message,
 		})
 
 		if (!confirmed) { return }

package/src/components/RouterWrapper.vue

@@ -1,8 +1,28 @@
 <script setup lang="ts">
+import type { RouteLocationNormalizedLoaded } from 'vue-router'
 import { nextTick, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import Loading from './Loading.vue'
 
+// Key used for the routed component + its transition. The key IS the identity of
+// the mounted view: it changes only when we actually switch to a different view,
+// so we remount + animate on real view changes but NOT on same-view param/query
+// changes (e.g. /ai/:chatId → /ai/new, or /user/1 → /user/2 — params drive
+// reactive updates inside the component, not a remount).
+//
+// The identity of a view is the deepest matched route record's static `path`
+// (which component is mounted), independent of its dynamic params. A parent can
+// still opt to stay mounted while a nested <RouterView> swaps its children by
+// setting `meta.persistOnChildNav: true`: the key then resolves to that record's
+// path so the parent shell isn't remounted on child navigation.
+function viewKey(route: RouteLocationNormalizedLoaded): string {
+	const persistRecord = [...route.matched].reverse().find(r => r.meta?.persistOnChildNav)
+	if (persistRecord) return persistRecord.path
+	// Default: the deepest matched record — i.e. the routed component's identity.
+	const leaf = route.matched[route.matched.length - 1]
+	return leaf?.path ?? route.path
+}
+
 // Reset the scroll position on every route change. The app's scroll container is
 // the inner `.pageContent` element in AppContent (the window itself doesn't
 // scroll), so a plain vue-router `scrollBehavior` wouldn't help. We scroll the
@@ -32,7 +52,7 @@ watch(
 			</div>
 		</slot>
 		<transition v-else :duration="300" name="slide-fade" mode="out-in" appear>
-			<component :is="Component" :key="route.fullPath" />
+			<component :is="Component" :key="viewKey(route)" />
 		</transition>
 	</RouterView>
 </template>

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

@@ -21,6 +21,8 @@ const props = defineProps<{
 	itemLabel?: string
 	collapsible?: boolean
 	simple?: boolean
+	/** Factory for new rows. Prefer this over pushing `undefined` (which becomes `null` after JSON sync). */
+	createItem?: () => T
 } & BagelInputShellProps>()
 
 const { shellClass, shellStyle } = useBagelInputShell(props)
@@ -96,8 +98,10 @@ watch(
 )
 
 function addItem() {
-	items.value.push(undefined as T)
-	minimizedItems.value.push(true)
+	const next = props.createItem ? props.createItem() : ({} as T)
+	items.value.push(next)
+	// Open the new row so nested FormFlow mounts and the user can edit immediately.
+	minimizedItems.value.push(false)
 	updateModel()
 }
 

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

@@ -45,6 +45,7 @@ const props = withDefaults(
 		textColor?: string
 		textAlign?: 'left' | 'center' | 'right'
 		wrapperClass?: string
+		inline?: boolean
 	} & BagelInputShellProps>(),
 	{
 		align: 'center'
@@ -143,9 +144,9 @@ function handleChange() {
 		<p v-if="label" :id="`${name}-label`" class="group-label">
 			{{ resolveI18n(label) }} <span v-if="required">*</span>
 		</p>
-<div class="radio-group-wrap" :class="wrapperClass">
+<div class="radio-group-wrap" :class="[wrapperClass, { 'radio-group-wrap--inline': inline }]">
 	<label v-for="(opt, index) in visibleOptions" :key="opt.id || `${name}-${index}`" class="border rounded flex active-list-item hover mb-05" :for="opt.id || `${name}-${index}`"
-		:class="{ 'p-05 gap-025': thin, 'py-1 gap-075': !thin, 'ps-05': !hideRadio, 'bg-gray-light': !bgColor && !flat, 'align-items-start': align === 'start' || align === 'top', 'align-items-center': align === 'center', 'align-items-end': align === 'end' || align === 'bottom', invertedActive, 'is-option-disabled': disabled || opt.disabled }"
+		:class="{ 'p-05 gap-025': thin, 'py-1 gap-075': !thin, 'ps-05': !hideRadio, 'px-1': hideRadio && !thin, 'bg-gray-light': !bgColor && !flat, 'align-items-start': align === 'start' || align === 'top', 'align-items-center': align === 'center', 'align-items-end': align === 'end' || align === 'bottom', invertedActive, 'is-option-disabled': disabled || opt.disabled }"
 				:style="{ backgroundColor: bgColor, borderColor }">
 				<input :id="opt.id || `${name}-${index}`" v-model="selectedOption" :disabled="disabled || opt.disabled" :tabindex="optionTabindex(opt, index)" class="radio-input-list" type="radio" :name :value="opt.value" :required="required" :class="{
 					'mt-025': align === 'start' || align === 'top',
@@ -200,6 +201,21 @@ accent-color: var(--bgl-input-label-active-color, var(--bgl-primary));
 display: none;
 }
 
+.radio-group-wrap--inline {
+display: flex;
+flex-wrap: wrap;
+gap: 0.5rem;
+}
+
+.radio-group-wrap--inline > label {
+flex: 1 1 0;
+margin-bottom: 0 !important;
+}
+
+.radio-group-wrap--inline > label > .w-100 {
+width: auto;
+}
+
 .is-option-disabled {
 opacity: 0.5;
 cursor: not-allowed;

package/src/composables/index.ts

@@ -13,6 +13,7 @@ export { useGradientVariant } from './useGradientVariant'
 export { useImageSrc } from './useImageSrc'
 export { useLocalStore } from './useLocalStore'
 export { usePolling } from './usePolling'
+export { usePrefersReducedMotion } from './usePrefersReducedMotion'
 export { useQuery } from './useQuery'
 export { useResizableLayoutProvider } from './useResizableLayout'
 export type { PanelConfig, PanelState, ResizableContext } from './useResizableLayout'

package/src/composables/usePrefersReducedMotion.ts

@@ -0,0 +1,24 @@
+import { onMounted, onUnmounted, ref } from 'vue'
+
+/** Whether the user requested reduced motion — use to disable autoplay, etc. */
+export function usePrefersReducedMotion() {
+	const prefersReducedMotion = ref(false)
+
+	let mq: MediaQueryList | undefined
+	function onChange(e: MediaQueryListEvent) {
+		prefersReducedMotion.value = e.matches
+	}
+
+	onMounted(() => {
+		if (typeof window === 'undefined' || !window.matchMedia) return
+		mq = window.matchMedia('(prefers-reduced-motion: reduce)')
+		prefersReducedMotion.value = mq.matches
+		mq.addEventListener('change', onChange)
+	})
+
+	onUnmounted(() => {
+		mq?.removeEventListener('change', onChange)
+	})
+
+	return prefersReducedMotion
+}

package/src/dialog/useDialog.ts

@@ -19,7 +19,14 @@ export const DialogSymbol: InjectionKey<DialogApi> = Symbol('dialog')
 let globalDialogApi: DialogApi | null = null
 
 export function useDialog(): DialogApi {
-	const dialogApi = inject(DialogSymbol, null)
+	// Prefer inject when called inside setup(); fall back to the plugin singleton
+	// when inject is unavailable (e.g. legacy call sites outside setup).
+	let dialogApi: DialogApi | null = null
+	try {
+		dialogApi = inject(DialogSymbol, null)
+	} catch {
+		dialogApi = null
+	}
 	if (!dialogApi) {
 		if (globalDialogApi) {
 			return globalDialogApi

package/src/form-flow/FormFlow.vue

@@ -90,17 +90,52 @@ function setNestedValue(obj: any, path: string, value: any): void {
 	target[keys[keys.length - 1]] = value
 }
 
+/** Deep-clone defaults so array/object defaults are never shared across form instances. */
+function cloneDefault<V>(value: V): V {
+	if (value === undefined || value === null || typeof value !== 'object') return value
+	try {
+		return structuredClone(value)
+	} catch {
+		return JSON.parse(JSON.stringify(value)) as V
+	}
+}
+
 function applyDefaults(modelValue: T | undefined): T {
 	const data = { ...(modelValue ?? {}) } as T
 	for (const [key, field] of Object.entries(props.schema._fields)) {
 		const defaultValue = (field as FieldBuilder)._config.default
 		if (defaultValue !== undefined && getNestedValue(data, key) === undefined) {
-			setNestedValue(data, key, defaultValue)
+			setNestedValue(data, key, cloneDefault(defaultValue))
 		}
 	}
 	return data
 }
 
+/** Build a new array row from nested schema field defaults, or a clone of the array's sample default item. */
+function createArrayItem(field: FieldBuilder): Record<string, unknown> {
+	const nested = field._config.schema as SchemaDefinition | undefined
+	if (nested && typeof (nested as any).getDefaults === 'function') {
+		const fromFields = cloneDefault((nested as any).getDefaults() as Record<string, unknown>)
+		if (fromFields && Object.keys(fromFields).length > 0) return fromFields
+	}
+	// Prefer a template from the array field's default sample (e.g. TeamGroupBlox).
+	const sample = field._config.default
+	if (Array.isArray(sample) && sample.length > 0 && sample[0] != null && typeof sample[0] === 'object') {
+		return cloneDefault(toRawPlain(sample[0] as Record<string, unknown>))
+	}
+	// Nested schema fields without defaults → empty plain object (not undefined/null).
+	return {}
+}
+
+/** Strip Vue proxies before clone (structuredClone rejects Proxy). */
+function toRawPlain<V extends Record<string, unknown>>(value: V): V {
+	try {
+		return JSON.parse(JSON.stringify(value)) as V
+	} catch {
+		return { ...value }
+	}
+}
+
 const formData = ref(applyDefaults(props.modelValue)) as any
 const validationErrors = ref<Record<string, string>>({})
 const hasSubmitted = ref(false)
@@ -116,7 +151,9 @@ watch(() => props.modelValue, (newVal) => {
 
 watch(formData, (newVal) => {
 	isInternalUpdate = true
-	emit('update:modelValue', newVal)
+	// Emit a plain clone so parent state never shares reactive refs with
+	// formData (shared refs make deep modelValue watches fight array pushes).
+	emit('update:modelValue', cloneDefault(newVal))
 	nextTick(() => { isInternalUpdate = false })
 }, { deep: true })
 
@@ -288,10 +325,18 @@ function getFieldProps(field: FieldBuilder, key: string) {
 	}
 
 	if (field._type === 'array') {
+		// `default` / `schema` are form-schema metadata — never pass them through to ArrayInput
+		// (and the earlier `...field._config` spread may have already set them).
+		delete baseProps.default
+		delete baseProps.schema
+		delete baseProps.itemType
 		const configWithoutSchema = Object.fromEntries(
-			Object.entries(field._config).filter(([k]) => k !== 'schema' && k !== 'itemType')
+			Object.entries(field._config).filter(([k]) => k !== 'schema' && k !== 'itemType' && k !== 'default')
 		)
 		Object.assign(baseProps, configWithoutSchema)
+		// Re-apply binding after config spread so handlers never get overwritten.
+		baseProps.modelValue = getFieldValue(key)
+		baseProps['onUpdate:modelValue'] = (val: any) => { updateField(key, val, field) }
 		baseProps.allowAdd = baseProps.allowAdd ?? true
 		baseProps.allowDelete = baseProps.allowDelete ?? true
 	}
@@ -412,7 +457,7 @@ defineExpose({
 				>
 					<!-- Array field with nested schema -->
 					<template v-if="field._type === 'array' && field._config.schema?._isSchema">
-						<ArrayInput v-bind="getFieldProps(field, key)">
+						<ArrayInput v-bind="getFieldProps(field, key)" :create-item="() => createArrayItem(field)">
 							<template #default="{ item }">
 							<!-- @vue-ignore -->
 							<FormFlow
@@ -427,7 +472,7 @@ defineExpose({
 
 					<!-- Array field with primitive string item type e.g. $.array('Label', 'text') -->
 					<template v-else-if="field._type === 'array' && typeof field._config.schema === 'string'">
-						<ArrayInput v-bind="getFieldProps(field, key)">
+						<ArrayInput v-bind="getFieldProps(field, key)" :create-item="() => '' as any">
 							<template #default="{ item }">
 								<component
 									:is="getFieldComponent(field._config.schema as string)"
@@ -440,7 +485,7 @@ defineExpose({
 
 					<!-- Array field with custom component -->
 					<template v-else-if="field._type === 'array' && field._config.schema">
-						<ArrayInput v-bind="getFieldProps(field, key)">
+						<ArrayInput v-bind="getFieldProps(field, key)" :create-item="() => createArrayItem(field)">
 							<template #default="{ item }">
 								<component :is="resolveComponent(field._config.schema)" v-model="item.value" />
 							</template>
@@ -449,7 +494,7 @@ defineExpose({
 
 					<!-- Array field with primitive item type (e.g. from JSON Schema type: array with items: { type: string }) -->
 					<template v-else-if="field._type === 'array' && field._config.itemType">
-						<ArrayInput v-bind="getFieldProps(field, key)">
+						<ArrayInput v-bind="getFieldProps(field, key)" :create-item="() => '' as any">
 							<template #default="{ item }">
 								<component
 									:is="getFieldComponent(field._config.itemType)"

package/src/styles/appearance.css

@@ -340,7 +340,15 @@
     mask-image: linear-gradient(to right, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
 }
 
+.isolation-isolate {
+    isolation: isolate !important;
+}
+
 @media screen and (max-width: 910px) {
+    .m_isolation-isolate {
+        isolation: isolate !important;
+    }
+
     .m_filters-mask {
         -webkit-mask-image: linear-gradient(to right, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
         mask-image: linear-gradient(to right, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);