@bagelink/vue 1.6.43 → 1.6.47

package/package.json

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

package/src/components/AccordionItem.vue

@@ -28,11 +28,11 @@ interface AccordionState {
 	openItem?: string
 }
 
-const accordionState = inject<AccordionState>('accordionState')
+const accordionState = inject<AccordionState | undefined>('accordionState', undefined)
 const id = props.id || Math.random().toString(36).slice(7)
 
 const computedIcon = computed(() => {
-	return 'plus_minus' === props.iconType
+	return props.iconType === 'plus_minus'
 		? (isOpen ? 'remove' : 'add')
 		: 'expand_more'
 })
@@ -44,7 +44,7 @@ if (accordionState) {
 	watch(
 		() => accordionState.openItem,
 		(currentOpenId) => {
-			if (currentOpenId !== id) {isOpen = false}
+			if (currentOpenId !== id) { isOpen = false }
 		},
 		{ immediate: true }
 	)

package/src/components/ModalForm.vue

@@ -5,7 +5,10 @@ import type { ModalFormOptions } from '../plugins/modalTypes'
 import { Btn, Modal, useBagel, BagelForm } from '@bagelink/vue'
 
 // eslint-disable-next-line vue/prop-name-casing
-const props = defineProps<ModalFormOptions<T>>()
+const props = withDefaults(defineProps<ModalFormOptions<T>>(), {
+	visible: true,
+	dismissable: true,
+})
 
 const emit = defineEmits<{
 	'update:modelValue': [value: T]
@@ -28,16 +31,16 @@ const closeModal = () => modal?.closeModal()
 let submitting = $ref(false)
 
 async function runSubmit() {
-	if (submitting) {return}
-	if (false === form?.validateForm()) {return}
+	if (submitting) { return }
+	if (form?.validateForm() === false) { return }
 	submitting = true
 	try {
 		await props.onSubmit?.(formData.value)
 		closeModal()
 	} catch (err: any) {
 		submitting = false
-		if (props.onError) {props.onError(err)}
-		else {bagel.onError?.(err)}
+		if (props.onError) { props.onError(err) }
+		else { bagel.onError?.(err) }
 	}
 }
 

package/src/components/Swiper.vue

@@ -116,8 +116,8 @@ const emit = defineEmits<{
 
 defineSlots<{
 	'default'?: (props: { item: T, index: number, currentIndex: number }) => any
-	'prev-button'?: () => any
-	'next-button'?: () => any
+	'prev-button'?: (props: { prev: () => void }) => any
+	'next-button'?: (props: { next: () => void }) => any
 	'navigation'?: (props: {
 		items: T[]
 		currentIndex: number
@@ -434,12 +434,12 @@ defineExpose({
 			<!-- Default Navigation -->
 			<div v-if="navigation" class="swi-ctrl">
 				<div class="swi-prev hover" @click="handleSlideNav('prev')">
-					<slot name="prev-button">
+					<slot name="prev-button" :prev="() => handleSlideNav('prev')">
 						<Icon name="chevron_left" class="user-select-none hover z-99   color-primary" :size="2" />
 					</slot>
 				</div>
 				<div class="swi-next hover" @click="handleSlideNav('next')">
-					<slot name="next-button">
+					<slot name="next-button" :next="() => handleSlideNav('next')">
 						<Icon name="chevron_right" class="user-select-none hover z-99   color-primary" :size="2" />
 					</slot>
 				</div>

package/src/components/Zoomer.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { useDebounceFn } from '@bagelink/vue'
-import { onMounted, onUnmounted, watch } from 'vue'
+import { onMounted as vueOnMounted, onUnmounted as vueOnUnmounted, watch as vueWatch } from 'vue'
 import TapDetector from '../utils/tapDetector'
 
 // Props interface
@@ -44,9 +44,9 @@ let translateX = $ref(0)
 let animTranslateX = $ref(0)
 let translateY = $ref(0)
 let animTranslateY = $ref(0)
-let _zoom = $ref(zoom || 1)
+let _zoom = $ref(zoom ?? 1)
 let scale = $computed({
-	get: () => zoom === undefined ? _zoom : zoom,
+	get: () => zoom ?? _zoom,
 	set: (val) => {
 		_zoom = val
 		emit('update:zoom', _zoom)
@@ -68,7 +68,15 @@ let tapDetector = $ref<TapDetector | undefined>()
 let translateXValue = $ref(0)
 let translateYValue = $ref(0)
 
+// Momentum/inertia tracking
+let velocityX = $ref(0)
+let velocityY = $ref(0)
+let lastMoveTime = $ref(0)
+let momentumRaf = $ref<number | undefined>()
+
 const wrapperStyle = $computed(() => {
+	// Translation is in normalized coordinates (0.5 = half container)
+	// Convert to pixels
 	translateXValue = containerWidth * animTranslateX
 	translateYValue = containerHeight * animTranslateY
 	return {
@@ -76,14 +84,15 @@ const wrapperStyle = $computed(() => {
 			`translate(${translateXValue}px, ${translateYValue}px)`,
 			`scale(${animScale})`,
 		].join(' '),
+		transformOrigin: '50% 50%',
 	}
 })
 
-watch(() => scale, (newScale) => {
+vueWatch(() => scale, (newScale) => {
 	const { x, y } = calcTranslateLimit()
 	translateX = Math.max(-x, Math.min(x, translateX))
 	translateY = Math.max(-y, Math.min(y, translateY))
-	if (1 !== newScale) {
+	if (newScale !== 1) {
 		panLocked = false
 	}
 })
@@ -98,22 +107,25 @@ function reset() {
 defineExpose({ reset })
 
 function tryToScale(scaleDelta: number) {
-	if (disabled) {return}
+	if (disabled) { return }
 	let newScale = scale * scaleDelta
 	if (zoomingElastic) {
-		if (newScale < minScale! || newScale > maxScale!) {
+		if (newScale < minScale || newScale > maxScale) {
 			let log = Math.log2(scaleDelta)
 			log *= 0.2
 			scaleDelta = 2 ** log
 			newScale = scale * scaleDelta
 		}
 	} else {
-		if (newScale < minScale!) {newScale = minScale!}
-		else if (newScale > maxScale!) {newScale = maxScale!}
+		if (newScale < minScale) {
+			newScale = minScale
+		} else if (newScale > maxScale) {
+			newScale = maxScale
+		}
 	}
 	scaleDelta = newScale / scale
 	scale = newScale
-	if ('image-center' !== pivot) {
+	if (pivot !== 'image-center') {
 		const normMousePosX = (pointerPosX - containerLeft) / containerWidth
 		const normMousePosY = (pointerPosY - containerTop) / containerHeight
 		translateX = (0.5 + translateX - normMousePosX) * scaleDelta + normMousePosX - 0.5
@@ -128,32 +140,78 @@ function setPointerPosCenter() {
 
 function onPointerMove(newMousePosX: number, newMousePosY: number) {
 	if (isPointerDown) {
+		const currentTime = Date.now()
 		const pixelDeltaX = newMousePosX - pointerPosX
 		const pixelDeltaY = newMousePosY - pointerPosY
+
 		if (!panLocked) {
+			// Calculate velocity for momentum
+			const timeDelta = currentTime - lastMoveTime
+			if (timeDelta > 0) {
+				velocityX = pixelDeltaX / timeDelta
+				velocityY = pixelDeltaY / timeDelta
+			}
+
 			const translateLimit = calcTranslateLimit()
 			const maxTranslateX = translateLimit.x
 			const maxTranslateY = translateLimit.y
 			const newTranslateX = translateX + pixelDeltaX / containerWidth
 			const newTranslateY = translateY + pixelDeltaY / containerHeight
+
 			translateX = Math.max(-maxTranslateX, Math.min(maxTranslateX, newTranslateX))
 			translateY = Math.max(-maxTranslateY, Math.min(maxTranslateY, newTranslateY))
+
+			lastMoveTime = currentTime
 		}
 	}
 	pointerPosX = newMousePosX
 	pointerPosY = newMousePosY
 }
 
+function applyMomentum() {
+	if (Math.abs(velocityX) < 0.01 && Math.abs(velocityY) < 0.01) {
+		velocityX = 0
+		velocityY = 0
+		if (momentumRaf) {
+			cancelAnimationFrame(momentumRaf)
+			momentumRaf = undefined
+		}
+		return
+	}
+
+	const translateLimit = calcTranslateLimit()
+	const newTranslateX = translateX + velocityX * 16 / containerWidth
+	const newTranslateY = translateY + velocityY * 16 / containerHeight
+
+	translateX = Math.max(-translateLimit.x, Math.min(translateLimit.x, newTranslateX))
+	translateY = Math.max(-translateLimit.y, Math.min(translateLimit.y, newTranslateY))
+
+	// Apply friction
+	velocityX *= 0.95
+	velocityY *= 0.95
+
+	momentumRaf = requestAnimationFrame(applyMomentum)
+}
+
 const onInteractionEnd = useDebounceFn(() => {
 	limit()
-	panLocked = 1 === scale 
-}, 100)
+	panLocked = scale === 1
+
+	// Start momentum animation if there's significant velocity
+	if (!panLocked && (Math.abs(velocityX) > 0.1 || Math.abs(velocityY) > 0.1)) {
+		if (momentumRaf) cancelAnimationFrame(momentumRaf)
+		applyMomentum()
+	} else {
+		velocityX = 0
+		velocityY = 0
+	}
+}, 50)
 
 function limit() {
-	if (scale < minScale!) {
-		scale = minScale!
-	} else if (scale > maxScale!) {
-		tryToScale(maxScale! / scale)
+	if (scale < minScale) {
+		scale = minScale
+	} else if (scale > maxScale) {
+		tryToScale(maxScale / scale)
 	}
 
 	if (limitTranslation) {
@@ -168,42 +226,39 @@ function limit() {
 }
 
 function calcTranslateLimit() {
-	if ('y' === getMarginDirection()) {
-		const imageToContainerRatio = containerWidth / aspectRatio / containerHeight
-		let translateLimitY = (scale * imageToContainerRatio - 1) / 2
-		if (0 > translateLimitY) {translateLimitY = 0}
-		return {
-			x: scale - 1, // Allow full movement to edges horizontally
-			y: translateLimitY * 2 // Allow full movement to edges vertically
-		}
-	}
-	const imageToContainerRatio = containerHeight * aspectRatio / containerWidth
-	let translateLimitX = (scale * imageToContainerRatio - 1) / 2
-	if (0 > translateLimitX) {translateLimitX = 0}
+	// When scale = 1, no panning needed (image fits in container)
+	// When scale > 1, we can pan to see parts of the image outside the viewport
+
+	// The image is scaled from center, so:
+	// - At scale 2, the image is 2x larger
+	// - The amount that extends beyond the container on EACH side is: (scale - 1) * containerSize / 2
+	// - In normalized coordinates (where 1.0 = full container), this is: (scale - 1) / 2
+
+	// Simple and correct approach:
+	// Max pan distance in normalized coords = (scale - 1) / 2
+	// This works for both X and Y directions regardless of aspect ratio
+
+	const basePanLimit = Math.max(0, (scale - 1) / 2)
+
 	return {
-		x: translateLimitX * 2, // Allow full movement to edges horizontally
-		y: scale - 1 // Allow full movement to edges vertically
+		x: basePanLimit,
+		y: basePanLimit,
 	}
 }
 
-function getMarginDirection() {
-	const containerRatio = containerWidth / containerHeight
-	return containerRatio > aspectRatio ? 'x' : 'y'
-}
-
 function onMouseWheel(ev: WheelEvent) {
-	if (!mouseWheelToZoom) {return}
+	if (!mouseWheelToZoom) { return }
 	ev.preventDefault()
 	const currTime = Date.now()
-	if (120 === Math.abs(ev.deltaY)) {
-		if (50 < currTime - lastFullWheelTime) {
+	if (Math.abs(ev.deltaY) === 120) {
+		if (currTime - lastFullWheelTime > 50) {
 			onMouseWheelDo(ev.deltaY)
 			lastFullWheelTime = currTime
 		}
 	} else {
-		if (50 < currTime - lastWheelTime) {
+		if (currTime - lastWheelTime > 50) {
 			lastWheelDirection = ev.deltaX > ev.deltaY ? 'x' : 'y'
-			if ('y' === lastWheelDirection) {
+			if (lastWheelDirection === 'y') {
 				onMouseWheelDo(ev.deltaY)
 			}
 		}
@@ -212,7 +267,8 @@ function onMouseWheel(ev: WheelEvent) {
 }
 
 function onMouseWheelDo(wheelDelta: number) {
-	const scaleDelta = 1.25 ** (wheelDelta / 120)
+	// More responsive zoom speed
+	const scaleDelta = 1.15 ** (wheelDelta / 120)
 	tryToScale(scaleDelta)
 	onInteractionEnd()
 }
@@ -222,6 +278,13 @@ function onMouseDown(ev: MouseEvent) {
 	isPointerDown = true
 	pointerPosX = ev.clientX
 	pointerPosY = ev.clientY
+	lastMoveTime = Date.now()
+	velocityX = 0
+	velocityY = 0
+	if (momentumRaf) {
+		cancelAnimationFrame(momentumRaf)
+		momentumRaf = undefined
+	}
 	document.addEventListener('mousemove', onMouseMove)
 	document.addEventListener('mouseup', onMouseUp)
 }
@@ -234,16 +297,33 @@ function onMouseUp() {
 }
 
 function onMouseMove(ev: MouseEvent) {
+	// Prevent swiper from handling mouse drag when panning zoomed image
+	if (!panLocked && scale > 1) {
+		ev.stopPropagation()
+	}
 	onPointerMove(ev.clientX, ev.clientY)
 }
 
 function onTouchStart(ev: TouchEvent) {
-	if (1 === ev.touches.length) {
+	if (ev.touches.length === 1) {
 		refreshContainerPos()
 		pointerPosX = ev.touches[0].clientX
 		pointerPosY = ev.touches[0].clientY
+		lastMoveTime = Date.now()
+		velocityX = 0
+		velocityY = 0
+		if (momentumRaf) {
+			cancelAnimationFrame(momentumRaf)
+			momentumRaf = undefined
+		}
 		isPointerDown = true
-	} else if (2 === ev.touches.length) {
+	} else if (ev.touches.length === 2) {
+		if (momentumRaf) {
+			cancelAnimationFrame(momentumRaf)
+			momentumRaf = undefined
+		}
+		velocityX = 0
+		velocityY = 0
 		isPointerDown = true
 		pointerPosX = (ev.touches[0].clientX + ev.touches[1].clientX) / 2
 		pointerPosY = (ev.touches[0].clientY + ev.touches[1].clientY) / 2
@@ -255,11 +335,11 @@ function onTouchStart(ev: TouchEvent) {
 }
 
 function onTouchEnd(ev: TouchEvent) {
-	if (0 === ev.touches.length) {
+	if (ev.touches.length === 0) {
 		isPointerDown = false
-		if (0.1 > Math.abs(scale - 1)) {scale = 1}
+		if (Math.abs(scale - 1) < 0.1) { scale = 1 }
 		onInteractionEnd()
-	} else if (1 === ev.touches.length) {
+	} else if (ev.touches.length === 1) {
 		pointerPosX = ev.touches[0].clientX
 		pointerPosY = ev.touches[0].clientY
 	}
@@ -267,11 +347,15 @@ function onTouchEnd(ev: TouchEvent) {
 }
 
 function onTouchMove(ev: TouchEvent) {
-	if (1 === ev.touches.length) {
+	if (ev.touches.length === 1) {
+		// Prevent swiper from handling touch when panning zoomed image
+		if (!panLocked && scale > 1) {
+			ev.stopPropagation()
+		}
 		onPointerMove(ev.touches[0].clientX, ev.touches[0].clientY)
-	} else if (2
-
-		=== ev.touches.length) {
+	} else if (ev.touches.length === 2) {
+		// Always prevent default during pinch zoom
+		ev.stopPropagation()
 		const distX = ev.touches[0].clientX - ev.touches[1].clientX
 		const distY = ev.touches[0].clientY - ev.touches[1].clientY
 		const newTwoFingerDist = Math.sqrt(distX * distX + distY * distY)
@@ -296,16 +380,21 @@ function loop() {
 }
 
 function gainOn(from: number, to: number) {
-	const delta = (to - from) * 0.3
-	return 1e-5 < Math.abs(delta) ? from + delta : to
+	// Smoother easing with better responsiveness
+	const delta = (to - from) * 0.4
+	return Math.abs(delta) > 1e-5 ? from + delta : to
 }
 
 // Lifecycle hooks
-onMounted(() => {
+vueOnMounted(() => {
 	tapDetector = new TapDetector()
-	if (zoomElement) {tapDetector.attach(zoomElement)}
+	if (zoomElement) { tapDetector.attach(zoomElement) }
 	if (doubleClickToZoom) {
 		tapDetector.onDoubleTap(onDoubleTap as any)
+		// Also add native dblclick event for mouse
+		if (zoomElement) {
+			zoomElement.addEventListener('dblclick', onDoubleTap as any)
+		}
 	}
 	window.addEventListener('resize', onWindowResize)
 	onWindowResize()
@@ -313,20 +402,38 @@ onMounted(() => {
 	loop()
 })
 
-onUnmounted(() => {
-	if (zoomElement) {tapDetector?.detach(zoomElement)}
+vueOnUnmounted(() => {
+	if (zoomElement) {
+		tapDetector?.detach(zoomElement)
+		if (doubleClickToZoom) {
+			zoomElement.removeEventListener('dblclick', onDoubleTap as any)
+		}
+	}
 	window.removeEventListener('resize', onWindowResize)
-	if (raf) {window.cancelAnimationFrame(raf)}
+	if (raf) { window.cancelAnimationFrame(raf) }
+	if (momentumRaf) { window.cancelAnimationFrame(momentumRaf) }
 })
 
 function onDoubleTap(ev: MouseEvent) {
-	if (1 === scale) {
-		if (0 < ev.clientX) {
-			pointerPosX = ev.clientX
-			pointerPosY = ev.clientY
-		}
-		tryToScale(Math.min(3, maxScale!))
+	// Update pointer position if available
+	if (ev.clientX > 0) {
+		pointerPosX = ev.clientX
+		pointerPosY = ev.clientY
+	}
+
+	// Calculate zoom levels
+	const mediumZoom = Math.min(2.5, maxScale / 2 + 0.5)
+	const highZoom = maxScale
+
+	// Cycle through three states: 1x -> medium -> max -> 1x
+	if (scale === 1) {
+		// From no zoom -> medium zoom
+		tryToScale(mediumZoom)
+	} else if (scale < highZoom - 0.1) {
+		// From medium zoom -> max zoom
+		tryToScale(highZoom / scale)
 	} else {
+		// From max zoom -> no zoom (reset)
 		reset()
 	}
 }
@@ -344,16 +451,9 @@ function onWindowResize() {
 
 <template>
 	<div
-		ref="zoomElement"
-		class="vue-zoomer"
-		:style="{ backgroundColor }"
-		@mousewheel="onMouseWheel"
-		@DOMMouseScroll="onMouseWheel"
-		@mousedown="onMouseDown"
-		@mouseout="setPointerPosCenter"
-		@focusout="setPointerPosCenter"
-		@touchstart="onTouchStart"
-		@touchmove="onTouchMove"
+		ref="zoomElement" class="vue-zoomer" :style="{ backgroundColor }" @mousewheel="onMouseWheel"
+		@DOMMouseScroll="onMouseWheel" @mousedown="onMouseDown" @mouseout="setPointerPosCenter"
+		@focusout="setPointerPosCenter" @touchstart="onTouchStart" @touchmove="onTouchMove"
 	>
 		<div class="zoomer" :style="wrapperStyle">
 			<slot />
@@ -371,24 +471,27 @@ function onWindowResize() {
 	z-index: 1000;
 	height: 100px
 }
+
 .vue-zoomer {
-  overflow: hidden;
+	overflow: hidden;
 }
+
 .zoomer {
-  transform-origin: 50% 50%;
-  width: 100%;
-  height: 100%;
-  max-width: 100vw;
-  max-height: 100vh;
+	transform-origin: 50% 50%;
+	width: 100%;
+	height: 100%;
+	max-width: 100vw;
+	max-height: 100vh;
 }
-.zoomer > img {
-  vertical-align: top;
-  user-select: none;
-  -moz-user-drag: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -webkit-user-drag: none;
-  -moz-user-drag: none;
+
+.zoomer>img {
+	vertical-align: top;
+	user-select: none;
+	-moz-user-drag: none;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	-webkit-user-drag: none;
+	-moz-user-drag: none;
 }
 </style>

package/src/components/form/inputs/RichText/utils/media.ts

@@ -4,7 +4,7 @@ import { bagelFormUtils as frm } from '../../../../../utils'
 
 export function insertImage(modal: ModalApi, state: EditorState) {
 	const { range, doc } = state
-	if (!range || !doc) {return}
+	if (!range || !doc) { return }
 
 	modal.showModalForm<{
 		src: string
@@ -73,7 +73,7 @@ export function insertLink(modal: ModalApi, state: EditorState) {
 		if (!success) {
 			console.log('Failed to select word at cursor')
 			// Show a helpful tooltip to the user
-			const showTooltipMessage = (state as any).showTooltipMessage
+			const { showTooltipMessage } = state as any
 			if (showTooltipMessage) {
 				showTooltipMessage('To add a link, please select text first or place cursor within a word')
 			} else {
@@ -107,7 +107,7 @@ export function insertLink(modal: ModalApi, state: EditorState) {
 
 // Helper function to select word at cursor
 function selectWordAtCursor(doc: Document, range: Range): boolean {
-	if (!range.collapsed) {return true} // Already has selection
+	if (!range.collapsed) { return true } // Already has selection
 
 	let textNode = range.startContainer
 	let offset = range.startOffset
@@ -115,7 +115,7 @@ function selectWordAtCursor(doc: Document, range: Range): boolean {
 	// If we're in an element node, try to find a text node
 	if (textNode.nodeType !== Node.TEXT_NODE) {
 		const element = textNode as Element
-		if (0 < element.childNodes.length && offset < element.childNodes.length) {
+		if (element.childNodes.length > 0 && offset < element.childNodes.length) {
 			const childNode = element.childNodes[offset]
 			if (childNode.nodeType === Node.TEXT_NODE) {
 				textNode = childNode
@@ -129,7 +129,7 @@ function selectWordAtCursor(doc: Document, range: Range): boolean {
 	}
 
 	const text = textNode.textContent || ''
-	if (!text) {return false}
+	if (!text) { return false }
 
 	// Find word boundaries - support Hebrew, English, and numbers
 	let start = offset
@@ -139,7 +139,7 @@ function selectWordAtCursor(doc: Document, range: Range): boolean {
 	const wordRegex = /[\u0590-\u05FF\u0600-\u06FF\w]/
 
 	// Move start backwards to find beginning of word
-	while (0 < start && wordRegex.test(text[start - 1])) {
+	while (start > 0 && wordRegex.test(text[start - 1])) {
 		start--
 	}
 
@@ -173,7 +173,7 @@ export interface InsertImbedModalData {
 
 export function insertEmbed(modal: ModalApi, state: EditorState) {
 	const { range, doc } = state
-	if (!range || !doc) {return}
+	if (!range || !doc) { return }
 
 	modal.showModalForm<InsertImbedModalData>({
 		title: 'Embed iframe',

package/src/components/layout/AppContent.vue

@@ -18,7 +18,11 @@ withDefaults(defineProps<Props>(), {
 })
 
 // Inject menu state from parent
-const menuState = inject('menuState') as {
+const menuState = inject('menuState', {
+	isOpen: { value: true },
+	isMobile: { value: false },
+	toggleMenu: () => { },
+}) as {
 	isOpen: { value: boolean }
 	isMobile: { value: boolean }
 	toggleMenu: () => void
@@ -83,8 +87,7 @@ const hasSidebarCard = computed(() => {
 
 		<!-- Page Content -->
 		<main
-			class="pageContent flex-grow overflow pt-1 pb-05 w-100p m_p-05 m_scrollbar-gutter-auto m_vw100"
-			:class="{
+			class="pageContent flex-grow overflow pt-1 pb-05 w-100p m_p-05 m_scrollbar-gutter-auto m_vw100" :class="{
 				'px-1': !hasSidebarCard,
 			}"
 		>

package/src/components/layout/AppSidebar.vue

@@ -38,7 +38,13 @@ const route = useRoute()
 const isTransitioning = ref(false)
 
 // Inject menu state from parent
-const menuState = inject('menuState') as {
+const menuState = inject('menuState', {
+	isOpen: { value: true },
+	isMobile: { value: false },
+	closeOnMobile: () => {},
+	sidebarWidth: '260px',
+	sidebarCollapsedWidth: '66px',
+}) as {
 	isOpen: { value: boolean }
 	isMobile: { value: boolean }
 	closeOnMobile: () => void