@witchcraft/ui 0.0.1

package/src/runtime/composables/useScrollNearContainerEdges.ts

@@ -0,0 +1,205 @@
+import { reactive, type Ref, ref } from "vue"
+
+import type { ScrollNearContainerEdgesOptions } from "../types/index.js"
+
+
+/**
+ * Creates a function `scrollContainer` that allows scrolling a container manually when the coordinates are near it's edges.
+ * Supports scrolling faster the closer one is to the edge, and configuing an inner and outer margin.
+ *
+ * It can be used in any *move event.
+ *
+ * By default it sets a setInterval timer to continue scrolling even when the user does not move.
+ * An `endScroll` function is provided which should be called on the *up event to cleanup the timer and variables properly (there is also the individual `clearScrollInterval` and `resetCanScroll` functions.
+ *
+ * It also provides an `isScrolling` ref and a `scrollIndicator` reactive object for knowing which direction the user is scrolling in to be able to style the element. They can be force cleared with the `resetCanScroll` function.
+ *
+ * ```ts
+ * const {
+ * 	scrollEdges,
+ * 	isScrolling,
+ * 	scrollIndicator,
+ * 	endScroll,
+ * } = useScrollNearContainerEdges({
+ * 	containerEl,
+ * 	scrollMargin,
+ * 	outerScrollMargin,
+ * })
+ *
+ * const onPointerMove = (e: PointerEvent): void => {
+ * 	scrollEdges(e.clientX, e.clientY)
+ * 	if (isScrolling.value) {
+ * 		e.preventDefault()
+ * 		return
+ * 	}
+ * 	//...
+ * }
+ * const onPointerUp = (_e: PointerEvent): void => {
+ * 	endScroll()
+ * 	//...
+ * }
+ * ```
+ * Styling example with tailwind and tailwind-merge:
+ *
+ * ```vue
+ * <div
+ * 	:class="twMerge(
+ * 		isScrolling && `relative after:content-[''] after:absolute after:inset after:border-2 after:border-transparent`,
+ * 		scrollIndicator.right && `after:border-r-accent-500/60`,
+ * 		scrollIndicator.down && `after:border-b-accent-500/60`,
+ * 		scrollIndicator.left && `after:border-l-accent-500/60`,
+ * 		scrollIndicator.up && `after:border-t-accent-500/60`,
+ * 	)"
+ * >
+ * 	<div class="overflow-auto" ref="containerEl" >
+ * </div>
+ * ```
+ */
+ 
+export const useScrollNearContainerEdges = ({
+	containerEl,
+	scrollMargin = 10,
+	outerScrollMargin,
+	fastPixelMultiplier = 4,
+	fastPixelAmount,
+	useTimer = true,
+	timerInterval = 1,
+}: ScrollNearContainerEdgesOptions): {
+		scrollEdges: (clientX: number, clientY: number, overrideUseTimer?: boolean) => void
+		/** Reactive. */
+		scrollIndicator: { left: boolean, right: boolean, down: boolean, up: boolean }
+		resetScrollIndicator: () => void
+		clearScrollInterval: () => void
+		isScrolling: Ref<boolean>
+		endScroll: () => void
+	} => {
+	fastPixelMultiplier = fastPixelAmount !== undefined ? fastPixelAmount * 2 : fastPixelMultiplier
+	const scrollIndicator = reactive({ left: false, right: false, down: false, up: false })
+	const isScrolling = ref(false)
+	const resetScrollIndicator = (): void => {
+		scrollIndicator.right = false
+		scrollIndicator.left = false
+		scrollIndicator.up = false
+		scrollIndicator.down = false
+		isScrolling.value = false
+	}
+	let timer: ReturnType<typeof setTimeout>
+
+	const scrollContainerRelative = (x: number, y: number): void => {
+		const el = containerEl.value
+		if (!el) return
+		const leftSpace = el.scrollLeft
+		const topSpace = el.scrollTop
+		el.scroll(leftSpace + x, topSpace + y)
+	}
+
+	const move = { x: 0, y: 0 }
+	const resetMove = (): void => {
+		move.x = 0; move.y = 0
+	}
+	const m = scrollMargin
+	const M = outerScrollMargin ?? 0
+
+	const tryScrollContainer = (x: number, y: number): void => {
+		const el = containerEl.value
+		if (!el) return
+		const box = el.getBoundingClientRect()
+		
+		/*
+		     rightRightLimit│
+		                    │
+		  rightLeftLimit│   │
+		                │   ▼
+		┌───────────────┼───┐
+		│OuterLimit     │   │
+		│ ┌─────────────┴─┐ │
+		│ │Container    ▼ │ │
+		│ │ ┌───────────┐ │ │
+		│ │ │InnerLimit │ │ │
+		│ │ └───────────┘ │ │
+		│ └───────────────┘ │
+		└───────────────────┘
+		*/
+		const leftLimit = box.x
+		const rightLimit = box.x + box.width
+		const topLimit = box.y
+		const bottomLimit = box.y + box.height
+
+		const leftLeftLimit = leftLimit - M
+		const leftRightLimit = leftLimit + m
+		const rightLeftLimit = rightLimit - M
+		const rightRightLimit = rightLimit + m
+
+		const topTopLimit = topLimit - M
+		const topBottomLimit = topLimit + m
+		const bottomTopLimit = bottomLimit - m
+		const bottomBottomLimit = bottomLimit + M
+		const t = m + M
+
+		resetScrollIndicator()
+		resetMove()
+
+		if (x > leftLeftLimit && x < leftRightLimit) {
+			const leftSpace = el.scrollLeft
+			if (leftSpace > 0) {
+				const edgeOffset = ((leftLimit + m) - x) / t
+				move.x = -edgeOffset * fastPixelMultiplier
+			}
+		} else if (x > rightLeftLimit && x < rightRightLimit) {
+			const rightSpace = (el.scrollWidth - el.scrollLeft) - Math.round(box.width)
+			if (rightSpace > 0) {
+				const edgeOffset = (x - (rightLimit - m)) / t
+				move.x = edgeOffset * fastPixelMultiplier
+			}
+		}
+		if (y > topTopLimit && y < topBottomLimit) {
+			const topSpace = el.scrollTop
+			if (topSpace > 0) {
+				const edgeOffset = ((topLimit + m) - y) / t
+				move.y = -edgeOffset * fastPixelMultiplier
+			}
+		} else if (y > bottomTopLimit && y < bottomBottomLimit) {
+			const bottomSpace = (el.scrollHeight - el.scrollTop) - Math.round(box.height)
+			if (bottomSpace > 0) {
+				const edgeOffset = (y - (bottomLimit - m)) / t
+				move.y = edgeOffset * fastPixelMultiplier
+			}
+		}
+		if (move.x !== 0 || move.y !== 0) {
+			isScrolling.value = true
+			scrollIndicator.right = move.x > 0
+			scrollIndicator.left = move.x < 0
+			scrollIndicator.up = move.y < 0
+			scrollIndicator.down = move.y > 0
+			scrollContainerRelative(move.x, move.y)
+		}
+	}
+	const clearScrollInterval = (): void => {
+		clearInterval(timer)
+	}
+
+	const scrollEdges = (clientX: number, clientY: number, overrideUseTimer?: boolean): void => {
+		clearInterval(timer)
+		tryScrollContainer(clientX, clientY)
+
+		if (overrideUseTimer ? overrideUseTimer : useTimer) {
+			timer = setInterval(() => {
+				tryScrollContainer(clientX, clientY)
+			}, timerInterval)
+		}
+	}
+	const endScroll = (): void => {
+		clearScrollInterval()
+		resetScrollIndicator()
+		resetMove()
+	}
+	return {
+		scrollEdges,
+		scrollIndicator,
+		resetScrollIndicator,
+		clearScrollInterval,
+		isScrolling,
+		endScroll,
+		/* resetMove does not need to be returned since the user cannot call the timer interval manually and the scrollContainer function resets it before starting. */
+	}
+}

package/src/runtime/composables/useSetupDarkMode.ts

@@ -0,0 +1,14 @@
+import { useDarkMode } from "./useDarkMode.js"
+/**
+ * A composable for setting up dark mode that automatically takes care of saving the user's preference.
+ *
+ * See the returned utilities for more details.
+ *
+ * Use it's twin, `useInjectedDarkMode` for accessing the injected state and commands in components
+ *
+ * Note that this should only be called once at the root of the app.
+ *
+ */
+export function useSetupDarkMode(...args: Parameters<typeof useDarkMode>): ReturnType<typeof useDarkMode> {
+	return useDarkMode(...args)
+}

package/src/runtime/composables/useSetupI18n.ts

@@ -0,0 +1,77 @@
+import {
+	type InjectionKey,
+	provide,
+	type Ref,
+	ref,
+	watch,
+} from "vue"
+
+import { defaultTranslationFunction } from "../helpers/defaultTranslationFunction.js"
+
+
+export type TranslationFunction = (key: string, replacements?: Record<string, any>) => string
+
+const _i18nInjectionKey = Symbol("witchcraftUiI18n") as InjectionKey<TranslationFunction>
+const _translationMessagesInjectionKey = Symbol("witchcraftUiI18nMessages") as InjectionKey<Ref<Record<string, any>>>
+
+const messagesGlob = import.meta.glob("../assets/locales/*.json")
+const loaded: Record<string, any> = {}
+const dummyLibraryMessages = new Proxy({}, {
+	get() {
+		return "..."
+	},
+})
+const dummyMessageSet = new Proxy({}, {
+	get(_, key: string) {
+		if (key === "witchcraft-ui") {
+			return dummyLibraryMessages
+		} else return undefined
+	},
+})
+
+
+/**
+ * A composable for providing a translation function + messages for the library. Note the Root component already takes care of setting this up with defaults, disable it via it's `useBuiltinTranslations` option.
+ *
+ * Should be called only once. You can choose to await it or not (see the `useDummyMessageSetWhileLoading` option).
+ *
+ * A default function is available, see {@link defaultTranslationFunction}.
+ */
+export async function useSetupI18n({
+	locale,
+	useBuiltinTranslations = false,
+	useDummyMessageSetWhileLoading = true,
+	translationFunction = defaultTranslationFunction,
+}: {
+	locale: Ref<string>
+	/** Will asynchronously load the built-in translations for the current locale (watching and updating if needed). If you don't use this, you'll need to provide a custom translation function. */
+	useBuiltinTranslations?: boolean
+	/** To avoid having to wrap the component in a Suspense component because of the await on `useSetupI18n`, we can provide a dummy message proxy that just returns empty text until the messages are loaded. */
+	useDummyMessageSetWhileLoading?: boolean
+	/** A	custom translation function. The default requires the `useBuiltinTranslations` option to be true. */
+	translationFunction?: TranslationFunction
+}): Promise<void> {
+	provide(_i18nInjectionKey, translationFunction)
+	if (useBuiltinTranslations) {
+		const messages = ref(useDummyMessageSetWhileLoading ? dummyMessageSet : {})
+		provide(_translationMessagesInjectionKey, messages)
+		async function loadMessageSet(l: string): Promise<void> {
+			const isLoaded = loaded[l]
+			if (isLoaded) {
+				messages.value = loaded[l]
+			} else {
+				const newMessages = ((await messagesGlob[`../assets/locales/${l}.json`]()) as any).default as any
+				loaded[l] = newMessages
+				messages.value = newMessages
+			}
+		}
+		void loadMessageSet(locale.value)
+		watch(locale, async () => {
+			void loadMessageSet(locale.value)
+		})
+	}
+}
+
+export const i18nInjectionKey = _i18nInjectionKey
+export const translationMessagesInjectionKey = _translationMessagesInjectionKey
+

package/src/runtime/composables/useSetupLocale.ts

@@ -0,0 +1,32 @@
+import { type InjectionKey, provide,type Ref,ref } from "vue"
+
+
+export const languageLocaleInjectionKey = Symbol("witchcraftUiLanguageLocale") as InjectionKey<Ref<string>>
+export const timeLocaleInjectionKey = Symbol("witchcraftUiTimeLocale") as InjectionKey<Ref<string>>
+
+export function useSetupLocale(): {
+	languageLocale: Ref<string>
+	timeLocale: Ref<string>
+	setLanguageLocale: (value: string) => void
+	setTimeLocale: (value: string) => void
+} {
+	const languageLocale = ref("en")
+	// GB instead of US so we can get sane dd/mm/yy.
+	const timeLocale = ref("en-GB")
+	function setLanguageLocale(value: string): void {
+		languageLocale.value = value
+	}
+	function setTimeLocale(value: string): void {
+		timeLocale.value = value
+	}
+	
+	provide(languageLocaleInjectionKey, languageLocale)
+	provide(timeLocaleInjectionKey, timeLocale)
+	return {
+		languageLocale,
+		timeLocale,
+		setLanguageLocale,
+		setTimeLocale,
+	}
+}
+

package/src/runtime/composables/useShowDevOnlyKey.ts

@@ -0,0 +1,28 @@
+import { onBeforeUnmount, onMounted, provide, ref } from "vue"
+
+const injectionKey = Symbol("showDevOnly")
+/**
+	* For nuxt only.
+	*
+	* Communicates with the dev only component to show/hide it depending on a keypress (single key, no modifiers, `F1` by default). 	*
+	*/
+export function useShowDevOnlyKey(key: string = "F1"): void {
+	if (!(import.meta as any).dev) return
+	const showDevOnly = ref(false)
+	provide(injectionKey, showDevOnly)
+
+	const listener = (e: KeyboardEvent): void => {
+		if (e.key === key && !e.ctrlKey && !e.metaKey && !e.altKey) {
+			showDevOnly.value = !showDevOnly.value
+			e.preventDefault()
+		}
+	}
+	onMounted(() => {
+		document.addEventListener("keydown", listener)
+	})
+	onBeforeUnmount(() => {
+		document.removeEventListener("keydown", listener)
+	})
+}
+
+export const showDevOnlyInjectionKey = injectionKey

package/src/runtime/composables/useSuggestions.ts

@@ -0,0 +1,297 @@
+/* eslint-disable no-console */
+import { isBlank } from "@alanscodelog/utils/isBlank.js"
+import { isObject } from "@alanscodelog/utils/isObject.js"
+import { computed, type Ref, ref, toRaw, watch } from "vue"
+
+import { type SuggestionsEmits,type SuggestionsOptions } from "../components/shared/props.js"
+
+
+/**
+ * The logic for the suggestions component.
+ *
+ * Note that while object suggestions are supported, the `suggestionLabel` prop is required and $inputModel and $modelValue will still be string values (as returned by the suggestionLabel function).
+ */
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export function useSuggestions<TSuggestion>(
+	$inputValue: Ref<string>,
+	$modelValue: Ref<string>,
+	emit: SuggestionsEmits,
+	opts: SuggestionsOptions<TSuggestion>,
+	debug: boolean = false
+) {
+	if (typeof opts.suggestions?.[0] === "object" && !opts.suggestionLabel && !opts.suggestionsFilter) {
+		throw new Error("`suggestionLabel` or `suggestionsFilter` must be passed if suggestions are objects.")
+	}
+
+	const isOpen = ref(false)
+	const activeSuggestion = ref(-1)
+	watch(isOpen, val => { emit("update:isOpen", val) })
+	watch(activeSuggestion, val => { emit("update:activeSuggestion", val) })
+	const suggestionKey = (item: any): string => {
+		if (isObject<any>(item)) {
+			if (opts.suggestionLabel) {
+				return opts.suggestionLabel(item)
+			}
+			throw new Error("`suggestionLabel` must be passed if suggestions are objects.")
+		}
+		return item
+	}
+	const getSuggestionLabel = (item: any): string => opts.suggestionLabel?.(item) ?? suggestionKey(item) ?? ""
+
+	const defaultSuggestionsFilter = (input: string, items: TSuggestion[]): TSuggestion[] => input === ""
+		? [...items]
+		: items.filter(item => getSuggestionLabel(item).toLowerCase().includes(input.toLowerCase()))
+	const suggestionsFilter = computed(() => opts.suggestionsFilter ?? defaultSuggestionsFilter)
+
+	const suggestionsList = computed(() => {
+		if (opts.suggestions) {
+			const res = suggestionsFilter.value($inputValue.value, opts.suggestions)
+			return res
+		}
+		return undefined
+	})
+
+	const suggestionAvailable = computed<boolean>(() =>
+		(suggestionsList.value?.length ?? 0) > 0)
+
+	const moreThanOneSuggestionAvailable = computed<boolean>(() =>
+		(suggestionsList.value?.length ?? 0) > 1)
+
+	const exactlyMatchingSuggestion = computed(() =>
+		opts.suggestions?.find(suggestion =>
+			$inputValue.value === getSuggestionLabel(suggestion)))
+
+	const isValidSuggestion = computed(() =>
+		((!opts.restrictToSuggestions && opts.isValid) || suggestionAvailable.value))
+
+	const openable = computed(() =>
+		opts.canOpen && (
+			(isBlank($inputValue.value) && opts.allowOpenEmpty) ||
+			suggestionAvailable.value
+
+		)
+	)
+
+	const filteredSuggestions = computed(() => {
+		if (opts.suggestions) {
+			const res = (suggestionAvailable.value
+				? suggestionsList.value!
+				: opts.suggestions!)
+
+			if (opts.restrictToSuggestions && !isValidSuggestion.value) return res
+			if (opts.preventDuplicateValues && opts.values) {
+				return res.filter(suggestion => !opts.values!.includes(suggestionKey(suggestion)))
+			}
+			return res
+		}
+		return undefined
+	})
+
+
+	// methods
+
+	const closeSuggestions = (): void => {
+		if (debug) console.log("closeSuggestions")
+		isOpen.value = false
+		activeSuggestion.value = -1
+	}
+	const openSuggestions = (): void => {
+		if (debug) console.log("openSuggestions", { openable: openable.value })
+		if (!openable.value) return
+		if (activeSuggestion.value === -1) {
+			if (exactlyMatchingSuggestion.value) {
+				activeSuggestion.value = suggestionsList.value?.indexOf(exactlyMatchingSuggestion.value) ?? -1
+			} else {
+				activeSuggestion.value = 0
+			}
+		}
+		isOpen.value = true
+	}
+	
+	function enterSuggestion(num: number): void {
+		if (num < -1 || num > (filteredSuggestions.value?.length ?? 0)) return
+		if (debug) console.log("enterSuggestion", num)
+		if (filteredSuggestions.value === undefined) return
+	
+		const suggestion = filteredSuggestions.value[num]
+		const val = suggestionKey(suggestion)
+		$modelValue.value = val
+		$inputValue.value = getSuggestionLabel(suggestion)
+		closeSuggestions()
+		emit("submit", val, toRaw(suggestion))
+	}
+
+	const enterSelected = (): void => {
+		if (activeSuggestion.value === -1) {
+			if (!opts.restrictToSuggestions) {
+				if (debug) console.log("enterSelected, unrestricted, emitting submit")
+				emit("submit", $inputValue.value)
+			} else {
+				if (debug) console.log("enterSelected, no active suggestion, ignoring")
+			}
+			return
+		}
+		if (debug) console.log("enterSelected")
+		enterSuggestion(activeSuggestion.value)
+	}
+	const selectSuggestion = (num: number): void => {
+		if (debug) console.log("selectSuggestion", num)
+		if (num >= -1) {
+			activeSuggestion.value = num
+		}
+		if (num === Infinity && (filteredSuggestions.value?.length ?? 0) > 0) {
+			activeSuggestion.value = filteredSuggestions.value!.length - 1
+		}
+	}
+	
+	const toggleSuggestions = (): void => {
+		isOpen.value ? closeSuggestions() : openSuggestions()
+	}
+
+	const prevSuggestion = (): void => {
+		if (!filteredSuggestions.value) return
+		if (activeSuggestion.value > 0) {
+			activeSuggestion.value--
+		} else if (filteredSuggestions.value) {
+			activeSuggestion.value = filteredSuggestions.value.length - 1
+		}
+	}
+
+	const nextSuggestion = (): void => {
+		if (!filteredSuggestions.value) return
+		if (activeSuggestion.value >= filteredSuggestions.value.length - 1) {
+			activeSuggestion.value = 0
+		} else {
+			activeSuggestion.value++
+		}
+	}
+	const firstSuggestion = (): void => {
+		selectSuggestion(0)
+	}
+	const lastSuggestion = (): void => {
+		selectSuggestion(Infinity)
+	}
+	
+	const cancel = (): void => {
+		if (debug) console.log("cancel")
+		$inputValue.value = getSuggestionLabel($modelValue.value)
+		closeSuggestions()
+	}
+
+	
+	watch(() => opts.canOpen, val => {
+		if (!val) {
+			if (debug) console.log("canOpen changed to false, closing suggestions")
+			closeSuggestions()
+		}
+	})
+	
+	watch(openable, val => {
+		if (!val) {
+			if (debug) console.log("openable changed to false, closing suggestions")
+			closeSuggestions()
+		}
+	})
+	
+	watch(isValidSuggestion, () => {
+		if (!isValidSuggestion.value) {
+			if (debug) console.log("isValidSuggestion changed to false, opening suggestions")
+			openSuggestions()
+		}
+	})
+	
+	// sync vmodels and vmodel effects
+	
+	watch($modelValue, () => {
+		$inputValue.value = getSuggestionLabel($modelValue.value)
+		if (debug) console.log("modelValue changed")
+	})
+
+	const defaultSuggestionSelector = (suggestions: TSuggestion[], input: string): number => {
+		if (input.length === 0) return 0
+		let longestMatch
+		let ii = -1
+		for (let i = 0; i < suggestions.length; i++) {
+			const suggestion = suggestions[i]
+			const label = getSuggestionLabel(suggestion)
+			const labelPart = label.slice(0, input.length)
+			if (labelPart === input) {
+				if (label.length > (longestMatch?.[0]?.length ?? 0)) {
+					longestMatch = label
+					ii = i
+				}
+			}
+		}
+		return ii
+	}
+
+	watch($inputValue, () => {
+		if (debug) console.log("input changed:", $inputValue.value, "modelValue:", $modelValue.value)
+		if (getSuggestionLabel($modelValue.value) === $inputValue.value) return
+
+		if (suggestionAvailable.value) {
+			if (debug) console.log("input changed, suggestion available, opening suggestions")
+			openSuggestions()
+		}
+		
+		if (!opts.restrictToSuggestions) {
+			if (debug) console.log("input changed, unrestricted, setting modelValue")
+			$modelValue.value = $inputValue.value
+		}
+		if (exactlyMatchingSuggestion.value && suggestionsList.value) {
+			if (debug) console.log("input changed, exactly matching, setting activeSuggestion")
+			selectSuggestion(suggestionsList.value.indexOf(exactlyMatchingSuggestion.value))
+		} else {
+			if (debug) console.log("input changed, not exactly matching, finding longest match")
+			
+			const i =
+				opts.suggestionSelector?.(filteredSuggestions.value ?? [], $inputValue.value)
+				?? defaultSuggestionSelector(filteredSuggestions.value ?? [], $inputValue.value)
+
+			selectSuggestion(i)
+		}
+	})
+
+
+	return {
+		list: suggestionsList,
+		filtered: filteredSuggestions,
+		active: activeSuggestion,
+		available: suggestionAvailable,
+		moreThanOneAvailable: moreThanOneSuggestionAvailable,
+		hasExactlyMatching: exactlyMatchingSuggestion,
+		/** Whether there is a valid suggestion that can be submitted. If `restrictToSuggestions` is true, this will be true if isValid is true, otherwise this is considered to be true if suggestions are available. */
+		hasValidSuggestion: isValidSuggestion,
+		openable,
+		getLabel: getSuggestionLabel,
+		isOpen,
+		open: openSuggestions,
+		close: closeSuggestions,
+		enterSelected,
+		enterSuggestion,
+		toggle: toggleSuggestions,
+		cancel,
+		select: selectSuggestion,
+		prev: prevSuggestion,
+		next: nextSuggestion,
+		first: firstSuggestion,
+		last: lastSuggestion,
+	}
+}
+
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export function useSuggestionsInputAria(
+	id: Ref<string>,
+	isOpen: Ref<boolean>,
+	activeSuggestion: Ref<number>,
+	suggestions: Ref<any | undefined>
+) {
+	const ariaInputProps = computed(() => ({
+		"aria-autocomplete": suggestions !== undefined ? "both" as const : undefined,
+		"aria-controls": suggestions !== undefined ? `suggestions-${id.value}` : undefined,
+		role: suggestions ? "combobox" : undefined,
+		"aria-expanded": suggestions !== undefined ? isOpen.value : undefined,
+		"aria-activedescendant": isOpen.value ? `suggestion-${id.value}-${activeSuggestion.value}` : undefined,
+	}))
+	return ariaInputProps
+}

package/src/runtime/directives/index.ts

@@ -0,0 +1,6 @@
+/* Autogenerated Index */
+
+export { vDetectFlex } from "./vDetectFlex.js"
+export { vExtractRootEl } from "./vExtractRootEl.js"
+export { vResizableCols } from "./vResizableCols.js"
+export { vResizeObserver } from "./vResizeObserver.js"