@witchcraft/ui 0.0.1

package/src/runtime/components/shared/storyHelpers/playSuggestions.ts

@@ -0,0 +1,105 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import { expect, userEvent, within } from "@storybook/test"
+
+
+export const playBasicSelect = async ({ canvasElement, args }: { canvasElement: HTMLElement, args: any }) => {
+	const canvas = within(canvasElement)
+	const input = canvas.getByLabelText(args.label ?? "", { selector: "input" })
+	await userEvent.type(input, "A")
+	await expect(canvas.queryByRole("option", { name: "A", selected: true })).toBeInTheDocument()
+	await userEvent.type(input, "BCDE")
+	// partial match
+	await expect(canvas.queryByRole("option", { name: "ABCDEFGHIJKLMNOPQRSTUVWXYZ", selected: true })).toBeInTheDocument()
+	await userEvent.keyboard("{Enter}")
+
+	if (args.values !== undefined) {
+		await expect(canvas.getByTestId("model-value").textContent).toBe("")
+		// await expect(canvas.getByTestId("model-value")).toHaveTextContent("")
+		await expect(canvas.queryByRole("listbox")).not.toBeNull()
+	} else {
+		await expect(canvas.getByTestId("model-value")).toHaveTextContent("ABCDEFGHIJKLMNOPQRSTUVWXYZ")
+		// await expect(canvas.getByTestId("model-value").textContent).toBe("ABCDEFGHIJKLMNOPQRSTUVWXYZ")
+		// should be closed after enter
+		await expect(canvas.queryByRole("listbox")).toBeNull()
+	}
+	await userEvent.keyboard("{Backspace}")
+	await expect(canvas.queryByRole("option",{ selected: true })).toBeInTheDocument()
+	await userEvent.clear(input)
+	await userEvent.type(input, "unmatched")
+	if (!args.suggestionsFilter) {
+		await expect(canvas.queryAllByRole("option", { selected: true })).toEqual([])
+	}
+	await userEvent.clear(input)
+
+	// first match should be selected if input is empty
+	await expect(await canvas.findByRole("option", { name: "A", selected: true })).toBeInTheDocument()
+	if (args.restrictToSuggestions && args.values === undefined) {
+		// should still equal last selected
+		await expect(canvas.getByTestId("model-value").textContent).toBe("ABCDEFGHIJKLMNOPQRSTUVWXYZ")
+	}
+
+	await userEvent.keyboard("{Enter}")
+	if (args.values === undefined) {
+		await expect(canvas.getByTestId("model-value").textContent).toBe("A")
+	}
+	await userEvent.clear(input)
+	await userEvent.keyboard("AB{Escape}")
+	await expect(canvas.queryByRole("listbox")).toBeNull()
+	if (args.values === undefined) {
+		if (args.restrictToSuggestions) {
+			await expect(canvas.getByTestId("model-value").textContent).toBe("A")
+		}
+	}
+}
+
+export const playBasicKeyboardSelect = async ({ canvasElement, args }: { canvasElement: HTMLElement , args: any }) => {
+	const canvas = within(canvasElement)
+	const input = canvas.getByLabelText(args.label ?? "", { selector: "input" })
+	await userEvent.clear(input)
+	await userEvent.type(input, "A")
+	await expect(canvas.queryByRole("option", { name: "A", selected: true })).toBeInTheDocument()
+	await userEvent.keyboard("{ArrowDown}")
+	await expect(canvas.queryByRole("option", { name: "AB", selected: true })).toBeInTheDocument()
+	await userEvent.keyboard("{ArrowUp}")
+	await expect(canvas.queryByRole("option", { name: "A", selected: true })).toBeInTheDocument()
+
+	// loops to last item
+	await userEvent.keyboard("{ArrowUp}")
+	await expect(canvas.queryByRole("option", { name: "ABCDEFGHIJKLMNOPQRSTUVWXYZ", selected: true })).toBeInTheDocument()
+
+	// loops back to the first item
+	await userEvent.keyboard("{ArrowDown}")
+	await expect(canvas.queryByRole("option", { name: "A", selected: true })).toBeInTheDocument()
+
+	// goes to last
+	await userEvent.keyboard("{PageDown}")
+	await expect(canvas.queryByRole("option", { name: "ABCDEFGHIJKLMNOPQRSTUVWXYZ", selected: true })).toBeInTheDocument()
+	// goes to first
+	await userEvent.keyboard("{PageUp}")
+	await expect(canvas.queryByRole("option", { name: "A", selected: true })).toBeInTheDocument()
+	
+	const testOpen = async (key: string) => {
+		await userEvent.keyboard("{Escape}")
+		await expect(canvas.queryByRole("listbox")).toBeNull()
+		await userEvent.keyboard(`{${key}}`)
+		await expect(canvas.queryByRole("listbox")).toBeInTheDocument()
+	}
+	await testOpen("ArrowDown")
+	await testOpen("ArrowUp")
+	await testOpen("PageDown")
+	await testOpen("PageUp")
+}
+export const playBasicClickSelect = async ({ canvasElement, args }: { canvasElement: HTMLElement, args: any }) => {
+	const canvas = within(canvasElement)
+	const input = canvas.getByLabelText(args.label ?? "", { selector: "input" })
+	await userEvent.clear(input)
+	await userEvent.type(input, "A")
+	await userEvent.click(canvas.getByRole("option", { name: "AB" }))
+	if (args.values === undefined) {
+		await expect(canvas.getByTestId("model-value").textContent).toBe("AB")
+		await expect(canvas.queryByRole("listbox")).toBeNull()
+	} else {
+		await expect(canvas.getByTestId("values")).toHaveTextContent(/AB$/)
+	}
+}
+

package/src/runtime/composables/index.ts

@@ -0,0 +1,13 @@
+/* Autogenerated Index */
+
+export { useAccesibilityOutline } from "./useAccesibilityOutline.js"
+export { useAriaLabel } from "./useAriaLabel.js"
+export { useDarkMode } from "./useDarkMode.js"
+export { useDivideAttrs } from "./useDivideAttrs.js"
+export { useGlobalResizeObserver } from "./useGlobalResizeObserver.js"
+export { useInjectedDarkMode } from "./useInjectedDarkMode.js"
+export { useNotificationHandler } from "./useNotificationHandler.js"
+export { useScrollNearContainerEdges } from "./useScrollNearContainerEdges.js"
+export { useSetupDarkMode } from "./useSetupDarkMode.js"
+export { useShowDevOnlyKey } from "./useShowDevOnlyKey.js"
+export { useSuggestions } from "./useSuggestions.js"

package/src/runtime/composables/useAccesibilityOutline.ts

@@ -0,0 +1,104 @@
+import { castType } from "@alanscodelog/utils/castType.js"
+import { onBeforeUnmount, onMounted, type Ref, ref, watch } from "vue"
+
+/**
+ * Returns a reactive ref that indicates whether the user presses a key *and* produced a change in focus. Used for only providing a `:focus` outline when the user is navigating via the keyboard.
+ *
+ * Can be optionally passed a reactive ref to enable/disabled the calculation (e.g. based on a user setting). This is returned back by the function in case you want to just use the control variable it auto creates. Event listeners are automatically attached/detached when this is changed.
+ *
+ * In setup:
+ * ```ts
+ * const el = ref(null)
+ *
+ * const {outline, control: outlineControl} = useAccesibilityOutline(el)
+ * outlineControl.value = userSettings.outlineOnlyOnNavigation
+ * // or
+ * useAccesibilityOutline(el, userSettings.outlineOnlyOnNavigation)
+ *
+ * const classes = computed(() =>( {
+ * 	// if setting is false => always outline
+ * 	outline: !userSettings.outlineOnlyOnNavigation || outline.value
+ * }))
+ *
+ * return {
+ * 	classes,
+ * 	el
+ * }
+ * ```
+ *
+ * In the root app component. Note it requires the element have a tabindex.
+ * ```html
+ * 	<div id="app" :class="classes" ref="el" tabindex="-1"></div>
+ * ```
+ *
+ * In style of any subcomponents we can now target `:focus` only when the user is navigating with the keyboard.
+ *
+ * ```css
+ * .outline button:focus {
+ * 	....
+ * }
+ * ```
+ *
+ */
+// TODO tailwind example/plugin?
+export function useAccesibilityOutline(
+	target: Ref<HTMLElement | null>,
+	enable: Ref<boolean> = ref(true),
+): Record<"outline" | "control", Ref<boolean>> {
+	const outline = ref(false)
+	const awaitingFocus = ref(false)
+	const keydown = (_e: KeyboardEvent): void => {
+		awaitingFocus.value = true
+		setTimeout(() => {
+			awaitingFocus.value = false
+		}, 0)
+	}
+	const mousedown = (_e: MouseEvent): void => {
+		awaitingFocus.value = false
+		outline.value = false
+	}
+	const focusin = (_e: FocusEvent): void => {
+		if (awaitingFocus.value && enable.value) {
+			outline.value = true
+		}
+	}
+	let canAttach = false
+	const attach = (): void => {
+		if (!canAttach) return
+		castType<Ref<HTMLElement>>(target.value)
+		if (!target.value) return
+		target.value.addEventListener("focusin", focusin)
+		target.value.addEventListener("keydown", keydown)
+		target.value.addEventListener("mousedown", mousedown)
+	}
+	const detach = (): void => {
+		if (target.value) {
+			castType<Ref<HTMLElement>>(target.value)
+			target.value.removeEventListener("focusin", focusin)
+			target.value.removeEventListener("keydown", keydown)
+			target.value.removeEventListener("mousedown", mousedown)
+		}
+	}
+
+	watch(enable, (newVal, oldVal) => {
+		if (newVal === oldVal) return
+		if (newVal) {
+			attach()
+		} else {
+			outline.value = false
+			detach()
+		}
+	})
+
+	onMounted(() => {
+		canAttach = true
+		if (enable.value) {
+			attach()
+		}
+	})
+	onBeforeUnmount(() => {
+		canAttach = false
+		detach()
+	})
+	return { outline, control: enable }
+}

package/src/runtime/composables/useAriaLabel.ts

@@ -0,0 +1,23 @@
+import { computed, type ComputedRef, onMounted, ref } from "vue"
+
+/** Returns a computed ref that creates aria-label and aria-labelledby with the correct id for labelledby. */
+export const useAriaLabel = (
+	props: { id?: string, label?: string },
+	fallbackId?: string
+
+): ComputedRef<Record<string, string | undefined>> => {
+	const id = computed(() => props.id ?? fallbackId)
+	const labelExists = ref(false)
+
+	const aria = computed(() => ({
+		"aria-label": labelExists.value ? undefined : props.label,
+		"aria-labelledby": labelExists.value ? `label-${id.value}` : undefined,
+	}))
+
+	onMounted(() => {
+		if (id.value && document.querySelector(`#label-${id.value}`)) {
+			labelExists.value = true
+		}
+	})
+	return aria
+}

package/src/runtime/composables/useDarkMode.ts

@@ -0,0 +1,146 @@
+import { computed, type InjectionKey, onMounted, provide, type Ref,ref, watch } from "vue"
+
+
+const defaultLocalStorageKey = "prefersColorSchemeDark"
+const defaultOrder = ["system", "dark", "light"] as const
+/** @deprecated */
+const injectionKey = Symbol("isDarkMode") as InjectionKey<Ref<boolean>>
+/** @deprecated */
+const manualInjectionKey = Symbol("manualDarkMode") as InjectionKey<Ref<boolean | undefined>>
+const commandsInjectionKey = Symbol("darkModeCommands") as InjectionKey<DarkModeCommands>
+const stateInjectionKey = Symbol("darkModeState") as InjectionKey<DarkModeState>
+
+/**
+ * @deprecated Use `useSetupDarkMode` instead.
+ *
+ * A composable for setting up dark mode that automatically takes care of saving the user's preference.
+ *
+ * See the returned utilities for more details.
+ *
+ * It also provides injection keys with a ref so it can be accessed in deep nested components if needed. Alternatively you can use `useInjectedDarkMode` for ease of use.
+ *
+ * Note that this should only be called once at the root of the app.
+ */
+export const useDarkMode = ({
+	useLocalStorage = true,
+	darkModeOrder = defaultOrder,
+	/** True by default, should be passed import.meta.client if using nuxt, or false when running server side. */
+	isClientSide = true
+}: DarkModeOptions = {}): DarkModeState & DarkModeCommands => {
+	const systemDarkMode = ref(false)
+	const manualDarkMode = ref<boolean | undefined>(undefined)
+	
+	if (useLocalStorage && isClientSide) {
+		watch(manualDarkMode, () => {
+			localStorage.setItem(defaultLocalStorageKey, manualDarkMode.value ? "true" : "false")
+		})
+	}
+
+	const darkMode = computed(() => manualDarkMode.value ?? systemDarkMode.value)
+	const darkModeState = computed(() =>
+		manualDarkMode.value === undefined
+		? "system"
+		: manualDarkMode.value
+		? "dark"
+		: "light"
+	)
+	// todo move to useinjected
+	function setDarkMode(value: "dark" | "light" | "system"): void {
+		manualDarkMode.value =
+			value === "dark"
+			? true
+			: value === "light"
+			? false
+			: undefined
+	}
+	function cycleDarkMode(): void {
+		const index = darkModeOrder.indexOf(darkModeState.value)
+
+		if (index === 2) {
+			setDarkMode(darkModeOrder[0])
+		} else {
+			setDarkMode(darkModeOrder[index + 1])
+		}
+	}
+
+	onMounted(() => {
+		window.matchMedia("(prefers-color-scheme: dark)")
+			.addEventListener("change", ({ matches }) => {
+				if (matches) {
+					systemDarkMode.value = true
+				} else {
+					systemDarkMode.value = false
+				}
+			})
+		if (useLocalStorage !== false) {
+			const key = typeof useLocalStorage === "string" ? useLocalStorage : defaultLocalStorageKey
+			const value = localStorage.getItem(key)
+
+			if (value === "true") {
+				manualDarkMode.value = true
+			} else if (value === "false") {
+				manualDarkMode.value = false
+			}
+		}
+	})
+	provide(injectionKey, darkMode)
+	provide(manualInjectionKey, manualDarkMode)
+
+	provide(stateInjectionKey, {
+		darkMode,
+		darkModeState,
+		manualDarkMode,
+		systemDarkMode,
+	})
+	provide(commandsInjectionKey, {
+		setDarkMode,
+		cycleDarkMode,
+	})
+
+	return {
+		darkMode,
+		darkModeState,
+		setDarkMode,
+		cycleDarkMode,
+		manualDarkMode,
+		systemDarkMode,
+	}
+}
+export const defaultDarkModeOrder = defaultOrder
+
+export const isDarkModeInjectionKey = injectionKey
+
+export const manualDarkModeInjectionKey = manualInjectionKey
+
+export const darkModeCommandsInjectionKey = commandsInjectionKey
+
+export const darkModeStateInjectionKey = stateInjectionKey
+
+
+export type DarkModeOptions = {
+	/* Whether to save the manual dark mode to local storage. Uses the key "prefersColorSchemeDark" by default. You can pass a key instead of true to use that as the key instead. */
+	useLocalStorage?: boolean | string
+	/* The order of the string dark modes when using `cycleDarkMode`. Defaults to `["system", "dark", "light"]` */
+	darkModeOrder?: readonly ("system" | "dark" | "light")[]
+	/** True by default, should be passed import.meta.client if using nuxt, or false when running server side. */
+	isClientSide?: boolean
+}
+
+ 
+export interface DarkModeCommands {
+	setDarkMode: (value: "dark" | "light" | "system") => void
+	cycleDarkMode: () => void
+}
+
+ 
+export interface DarkModeState {
+	/** Whether the dark mode should be enabled or not */
+	darkMode: Ref<boolean>
+	/** The current state of the darkMode but as a string (dark, light, system) */
+	darkModeState: Ref<"dark" | "light" | "system">
+	/** The value of the manuably controllable dark mode. You can set this to true/false or undefined to allow the systemDarkMode to take priority. Alternatively use setDarkMode instead. */
+	manualDarkMode: Ref<boolean | undefined>
+	/** The value of the system dark mode. This is automatically set depending on the user's `prefer-color-scheme` and should not be set directly. */
+	systemDarkMode: Ref<boolean>
+
+}

package/src/runtime/composables/useDivideAttrs.ts

@@ -0,0 +1,52 @@
+import { keys } from "@alanscodelog/utils/keys.js"
+import { computed, type Ref, useAttrs } from "vue"
+
+/**
+ * Allows users to more easily pass attributes to different parts of a component. Suppose a component has an input and a wrapper and you want most attributes to go to the input, but any that start with `wrapper` to go to the wrapper.
+ *
+ * You can do:
+ *
+ * ```ts
+ * const extraAttrs = useDivideAttrs(["wrapper"] as const)
+ * ```
+ * This will correctly remove the start of the key. So if the user passes:
+ * ```vue
+ * <your-component regular-attr wrapper-attr wrapperAttrs/>
+ * ```
+ * You will get a ref like:
+ *
+ * ```ts
+ * extraAttrs.value = {
+ * 	attrs: { regular-attr: true },
+ * 	wrapperAttrs: { attr: true, Attrs: true },
+ * }
+ *
+ * Additionally attributes are properly reactive, tough this is probably a bit expensive given they weren't meant to be reactive.
+ *
+ * Note that if using multi-word prefixes, like `inner-wrapper`, they will appear as the key `inner-wrapperAttrs` internally, but users will be able to correctly pass `inner-wrapper-prop`. Aditionally these can be passed down to deeper components, allowing easy wrapping.
+ * ```
+ */
+export const useDivideAttrs = <T extends readonly string[]>(divisionKeys: T): Ref<Record<`${T[number]}Attrs` | "attrs", Record<string, any>>> => computed(() => {
+	const attrs: Record<string, any> = useAttrs()
+	const res: any = { attrs: {} }
+	const unseen = keys(attrs)
+	for (const key of divisionKeys) {
+		res[`${key}Attrs`] = {}
+		for (let i = 0; i < unseen.length; i++) {
+			const attrKey = unseen[i]
+			if (attrKey.startsWith(`${key}-`)) {
+				res[`${key}Attrs`][attrKey.slice(key.length + 1)] = attrs[attrKey]
+				unseen.splice(i, 1)
+				i--
+			} else if (attrKey.startsWith(key)) {
+				res[`${key}Attrs`][attrKey.slice(key.length)] = attrs[attrKey]
+				unseen.splice(i, 1)
+				i--
+			}
+		}
+	}
+	for (const attrKey of unseen) {
+		res.attrs[attrKey] = attrs[attrKey]
+	}
+	return res
+})

package/src/runtime/composables/useGlobalResizeObserver.ts

@@ -0,0 +1,33 @@
+import type { AnyFunction } from "@alanscodelog/utils"
+import { onBeforeUnmount, onMounted, type Ref, watch } from "vue"
+
+import { globalResizeObserver } from "../globalResizeObserver.js"
+
+
+export const useGlobalResizeObserver = (el: Ref<HTMLElement | null>, cb: AnyFunction): void => {
+	let wasMounted = false
+	// in case we accidentally use it in an onMounted hook or somewhere where the element already exists
+	if (el.value) {
+		wasMounted = true
+		globalResizeObserver.observe(el.value, cb)
+	}
+	onMounted(() => {
+		watch(el, (_newval, oldval) => {
+			if (el.value) {
+				globalResizeObserver.observe(el.value, cb)
+			} else {
+				if (oldval) {
+					globalResizeObserver.unobserve(oldval, cb)
+				}
+			}
+		})
+		if (el.value && !wasMounted) {
+			globalResizeObserver.observe(el.value, cb)
+		}
+	})
+	onBeforeUnmount(() => {
+		if (el.value) {
+			globalResizeObserver.unobserve(el.value, cb)
+		}
+	})
+}

package/src/runtime/composables/useInjectedDarkMode.ts

@@ -0,0 +1,15 @@
+import { inject } from "vue"
+
+import { type DarkModeCommands, darkModeCommandsInjectionKey, type DarkModeState,darkModeStateInjectionKey } from "./useDarkMode.js"
+
+export function useInjectedDarkMode(): DarkModeState & DarkModeCommands {
+	const darkModeState = inject(darkModeStateInjectionKey)
+	const darkModeCommands = inject(darkModeCommandsInjectionKey)
+	if (!darkModeState || !darkModeCommands) {
+		throw new Error("useInjectedDarkMode could not find provided state. Did you use useSetupDarkMode?")
+	}
+	return {
+		...darkModeState,
+		...darkModeCommands,
+	}
+}

package/src/runtime/composables/useInjectedI18n.ts

@@ -0,0 +1,10 @@
+import { inject } from "vue"
+
+import { i18nInjectionKey } from "./useSetupI18n.js"
+import { type TranslationFunction } from "./useSetupI18n.js"
+
+export function useInjectedI18n(): TranslationFunction {
+	const val = inject(i18nInjectionKey, undefined)
+	if (val === undefined) throw new Error("witchcraft/ui: i18n is not injected. See useSetupI18n.")
+	return val
+}

package/src/runtime/composables/useInjectedLocale.ts

@@ -0,0 +1,24 @@
+import { inject } from "vue"
+
+import { languageLocaleInjectionKey , timeLocaleInjectionKey , type useSetupLocale } from "./useSetupLocale.js"
+
+export function useInjectedLocale(): ReturnType<typeof useSetupLocale> {
+	const timeLocale = inject(timeLocaleInjectionKey)
+	const languageLocale = inject(languageLocaleInjectionKey)
+	if (timeLocale === undefined || languageLocale === undefined) {
+		throw new Error("useInjectedLocale could not find provided state. Did you use useSetupLocale?")
+	}
+	function setLanguageLocale(value: string): void {
+		languageLocale!.value = value
+	}
+	function setTimeLocale(value: string): void {
+		timeLocale!.value = value
+	}
+	return{
+		timeLocale,
+		languageLocale,
+		setLanguageLocale,
+		setTimeLocale,
+	}
+}
+

package/src/runtime/composables/useNotificationHandler.ts

@@ -0,0 +1,32 @@
+import type { NotificationHandler } from "../helpers/NotificationHandler.js"
+
+let first = true
+const configuration: {
+	notificationHandler: NotificationHandler
+	isClientSide: boolean
+} = {
+	notificationHandler: undefined as any,
+	isClientSide: undefined as any
+}
+export const useNotificationHandler = (
+	handler?: NotificationHandler,
+	/** True by default, should be passed import.meta.client if using nuxt, or false when running server side. */
+	isClientSide?: boolean
+): NotificationHandler => {
+	const clientSide = isClientSide ?? configuration.isClientSide
+
+	if (!clientSide) return undefined as any
+	if (first) {
+		first = false
+		configuration.isClientSide = clientSide ?? true
+		if (handler) {
+			configuration.notificationHandler = handler
+		} else {
+			throw new Error("You must set the notification handler to use at least once before using it.")
+		}
+	} else if (handler || isClientSide) {
+		// eslint-disable-next-line no-console
+		console.warn("You can only configure useNotificationHandler once. (Note that there might be false positive during HMR).")
+	}
+	return configuration.notificationHandler
+}

package/src/runtime/composables/useScrollNearContainerEdges.stories.ts

@@ -0,0 +1,93 @@
+import type { StoryObj } from "@storybook/vue3"
+import { onMounted, ref } from "vue"
+
+import { useScrollNearContainerEdges } from "./useScrollNearContainerEdges.js"
+
+import { twMerge } from "../utils/twMerge.js"
+
+const meta = {
+	title: "Composables/ScrollNearContainerEdges",
+}
+
+export default meta
+type Story = StoryObj // & StoryObj<typeof extraArgs>
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const Primary: Story = {
+	render: args => ({
+		setup: () => {
+			const containerEl = ref<HTMLElement | null>(null)
+			const {
+				resetScrollIndicator,
+				scrollEdges,
+				endScroll,
+				scrollIndicator,
+				isScrolling
+			} = useScrollNearContainerEdges({
+				containerEl,
+				scrollMargin: 20,
+				outerScrollMargin: 20,
+			})
+			const pos = ref({ x: 0, y: 0 })
+			onMounted(() => {
+				pos.value.x = containerEl.value!.getBoundingClientRect().left
+				pos.value.y = containerEl.value!.getBoundingClientRect().top
+			})
+			const moveDrag = (e: MouseEvent): void => {
+				pos.value.x = e.clientX
+				pos.value.y = e.clientY
+				scrollEdges(e.clientX, e.clientY)
+			}
+			const endDrag = (_e: MouseEvent): void => {
+				endScroll()
+				document.removeEventListener("mousemove", moveDrag)
+				document.removeEventListener("mouseup", endDrag)
+			}
+			const startDrag = (_e: MouseEvent): void => {
+				document.addEventListener("mousemove", moveDrag)
+				document.addEventListener("mouseup", endDrag)
+			}
+			return {
+				args,
+				containerEl,
+				resetScrollIndicator,
+				scrollEdges,
+				endScroll,
+				startDrag,
+				scrollIndicator,
+				isScrolling,
+				twMerge,
+				pos
+			}
+		},
+
+		template: `
+		<div>
+			<p>Scroll the container by dragging the red box (which represents the dragging mouse position).</p>
+			<p>It should drag slow, then faster as the mouse nears the edges and scroll indicators should appear on the scrolling edges.</p>
+		</div>
+		<div 
+			:class="twMerge(
+				'relative flex flex-col max-h-[300px] max-w-[300px] border-2 border-red-500',
+				isScrolling && 'after:content-[\\'\\'] after:absolute after:inset-0 after:border-transparent after:border-[15px]', 
+				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 class="h-[1000px] w-[1000px]"/>
+				<div
+					@mousedown="startDrag" 
+					:style="\`top:\${pos.y}px; left:\${pos.x}px;\`"
+					class="h-[20px] w-[20px] -ml-[10px] -mt-[10px] bg-red-500 cursor-move fixed"
+				></div>
+			</div>
+		</div>
+		`,
+	}),
+}