@rokkit/actions 1.0.0-next.137 → 1.0.0-next.139

package/dist/hover-lift.svelte.d.ts

@@ -1,16 +1,4 @@
-/**
- * Hover lift action — adds translateY + elevated shadow on hover.
- * Sets transition on mount, applies transform + box-shadow on mouseenter, resets on mouseleave.
- *
- * @param {HTMLElement} node
- * @param {HoverLiftOptions} [options]
- *
- * @typedef {Object} HoverLiftOptions
- * @property {string} [distance='-0.25rem'] Translate distance on hover (negative = up)
- * @property {string} [shadow='0 10px 25px -5px rgba(0,0,0,0.1)'] Box shadow on hover
- * @property {number} [duration=200] Transition duration (ms)
- */
-export function hoverLift(node: HTMLElement, options?: HoverLiftOptions): void;
+export function hoverLift(node: any, options?: {}): void;
 /**
  * Hover lift action — adds translateY + elevated shadow on hover.
  * Sets transition on mount, applies transform + box-shadow on mouseenter, resets on mouseleave.

package/dist/magnetic.svelte.d.ts

@@ -1,15 +1,4 @@
-/**
- * Magnetic action — element shifts subtly toward the cursor on hover.
- * Calculates cursor offset from element center and translates proportionally.
- *
- * @param {HTMLElement} node
- * @param {MagneticOptions} [options]
- *
- * @typedef {Object} MagneticOptions
- * @property {number} [strength=0.3] Maximum displacement as fraction of element size (0–1)
- * @property {number} [duration=300] Transition duration for return to center (ms)
- */
-export function magnetic(node: HTMLElement, options?: MagneticOptions): void;
+export function magnetic(node: any, options?: {}): void;
 /**
  * Magnetic action — element shifts subtly toward the cursor on hover.
  * Calculates cursor offset from element center and translates proportionally.

package/dist/reveal.svelte.d.ts

@@ -1,22 +1,4 @@
-/**
- * Scroll-triggered reveal action using IntersectionObserver.
- * Applies CSS transitions (opacity + translate) when element enters viewport.
- * When stagger > 0, applies reveal to each child element independently.
- *
- * @param {HTMLElement} node
- * @param {RevealOptions} [options]
- *
- * @typedef {Object} RevealOptions
- * @property {'up' | 'down' | 'left' | 'right' | 'none'} [direction='up'] Slide direction
- * @property {string} [distance='1.5rem'] Slide distance (CSS unit)
- * @property {number} [duration=600] Animation duration (ms)
- * @property {number} [delay=0] Delay before animation starts (ms)
- * @property {number} [stagger=0] Delay increment per child in ms (0 = disabled)
- * @property {boolean} [once=true] Only animate once
- * @property {number} [threshold=0.1] IntersectionObserver threshold (0–1)
- * @property {string} [easing='cubic-bezier(0.4, 0, 0.2, 1)'] CSS easing function
- */
-export function reveal(node: HTMLElement, options?: RevealOptions): void;
+export function reveal(node: any, options?: {}): void;
 /**
  * Scroll-triggered reveal action using IntersectionObserver.
  * Applies CSS transitions (opacity + translate) when element enters viewport.

package/dist/ripple.svelte.d.ts

@@ -1,16 +1,4 @@
-/**
- * Ripple action — material-design inspired click ripple effect.
- * Appends a circular expanding span at click coordinates that scales and fades out.
- *
- * @param {HTMLElement} node
- * @param {RippleOptions} [options]
- *
- * @typedef {Object} RippleOptions
- * @property {string} [color='currentColor'] Ripple color
- * @property {number} [opacity=0.15] Ripple opacity
- * @property {number} [duration=500] Ripple animation duration (ms)
- */
-export function ripple(node: HTMLElement, options?: RippleOptions): void;
+export function ripple(node: any, options?: {}): void;
 /**
  * Ripple action — material-design inspired click ripple effect.
  * Appends a circular expanding span at click coordinates that scales and fades out.

package/dist/trigger.d.ts

@@ -1,26 +1,3 @@
-/**
- * Trigger
- *
- * Manages dropdown open/close from a trigger button.
- * Pairs with Navigator (on the dropdown) to form a complete dropdown component.
- *
- * Responsibilities:
- *   - click on trigger     → toggle open/close
- *   - Enter / Space        → toggle open/close
- *   - ArrowDown            → open (callback can focus first item)
- *   - ArrowUp              → open (callback can focus last item)
- *   - Escape (document)    → close + return focus to trigger
- *   - Click outside (doc)  → close
- *
- * Usage:
- *   const trigger = new Trigger(triggerEl, containerEl, {
- *     onopen: () => { isOpen = true },
- *     onclose: () => { isOpen = false },
- *     onlast: () => { wrapper.last(null) }  // optional: ArrowUp opens at end
- *   })
- *   // …
- *   trigger.destroy()
- */
 export class Trigger {
     /**
      * @param {HTMLElement} trigger    — the trigger button element

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/actions",
-  "version": "1.0.0-next.137",
+  "version": "1.0.0-next.139",
   "description": "Contains generic actions that can be used in various components.",
   "repository": {
     "type": "git",

package/src/hover-lift.svelte.js

@@ -10,46 +10,53 @@
  * @property {string} [shadow='0 10px 25px -5px rgba(0,0,0,0.1)'] Box shadow on hover
  * @property {number} [duration=200] Transition duration (ms)
  */
+
+function resolveHoverLiftOpts(options) {
+	return {
+		distance: '-0.25rem',
+		shadow: '0 10px 25px -5px rgba(0,0,0,0.1)',
+		duration: 200,
+		...options
+	}
+}
+
+function isReducedMotion() {
+	return typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches
+}
+
+function applyHoverLift(node, opts) {
+	const originalTransform = node.style.transform
+	const originalBoxShadow = node.style.boxShadow
+	const originalTransition = node.style.transition
+
+	node.style.transition = `transform ${opts.duration}ms ease, box-shadow ${opts.duration}ms ease`
+
+	function onEnter() {
+		node.style.transform = `translateY(${opts.distance})`
+		node.style.boxShadow = opts.shadow
+	}
+
+	function onLeave() {
+		node.style.transform = originalTransform
+		node.style.boxShadow = originalBoxShadow
+	}
+
+	node.addEventListener('mouseenter', onEnter)
+	node.addEventListener('mouseleave', onLeave)
+
+	return () => {
+		node.removeEventListener('mouseenter', onEnter)
+		node.removeEventListener('mouseleave', onLeave)
+		node.style.transform = originalTransform
+		node.style.boxShadow = originalBoxShadow
+		node.style.transition = originalTransition
+	}
+}
+
 export function hoverLift(node, options = {}) {
 	$effect(() => {
-		const opts = {
-			distance: '-0.25rem',
-			shadow: '0 10px 25px -5px rgba(0,0,0,0.1)',
-			duration: 200,
-			...options
-		}
-
-		const reducedMotion =
-			typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches
-
-		if (reducedMotion) return
-
-		// Store original values
-		const originalTransform = node.style.transform
-		const originalBoxShadow = node.style.boxShadow
-		const originalTransition = node.style.transition
-
-		node.style.transition = `transform ${opts.duration}ms ease, box-shadow ${opts.duration}ms ease`
-
-		function onEnter() {
-			node.style.transform = `translateY(${opts.distance})`
-			node.style.boxShadow = opts.shadow
-		}
-
-		function onLeave() {
-			node.style.transform = originalTransform
-			node.style.boxShadow = originalBoxShadow
-		}
-
-		node.addEventListener('mouseenter', onEnter)
-		node.addEventListener('mouseleave', onLeave)
-
-		return () => {
-			node.removeEventListener('mouseenter', onEnter)
-			node.removeEventListener('mouseleave', onLeave)
-			node.style.transform = originalTransform
-			node.style.boxShadow = originalBoxShadow
-			node.style.transition = originalTransition
-		}
+		const opts = resolveHoverLiftOpts(options)
+		if (isReducedMotion()) return
+		return applyHoverLift(node, opts)
 	})
 }

package/src/kbd.js

@@ -93,6 +93,23 @@ export function getKeyboardActions(options, handlers) {
 	return { ...common, ...movement, ...expandCollapse }
 }
 
+function buildHorizontalMovementMap(dir) {
+	return dir === 'rtl'
+		? { ArrowRight: 'previous', ArrowLeft: 'next' }
+		: { ArrowLeft: 'previous', ArrowRight: 'next' }
+}
+
+function buildVerticalNestedMap(dir) {
+	return dir === 'rtl'
+		? { ArrowRight: 'collapse', ArrowLeft: 'expand' }
+		: { ArrowLeft: 'collapse', ArrowRight: 'expand' }
+}
+
+function buildNestedActions(isHorizontal, dir) {
+	if (isHorizontal) return { ArrowUp: 'collapse', ArrowDown: 'expand' }
+	return buildVerticalNestedMap(dir)
+}
+
 /**
  * Creates a keyboard action mapping based on navigation options
  *
@@ -106,31 +123,12 @@ export function createKeyboardActionMap(options) {
 	const { orientation, dir, nested } = options
 	const isHorizontal = orientation === 'horizontal'
 
-	// Define movement actions based on orientation and direction
-	let movementActions = {}
-	if (isHorizontal) {
-		movementActions =
-			dir === 'rtl'
-				? { ArrowRight: 'previous', ArrowLeft: 'next' }
-				: { ArrowLeft: 'previous', ArrowRight: 'next' }
-	} else {
-		movementActions = { ArrowUp: 'previous', ArrowDown: 'next' }
-	}
+	const movementActions = isHorizontal
+		? buildHorizontalMovementMap(dir)
+		: { ArrowUp: 'previous', ArrowDown: 'next' }
 
-	// Define expand/collapse actions for nested option
-	let nestedActions = {}
-	if (nested) {
-		if (isHorizontal) {
-			nestedActions = { ArrowUp: 'collapse', ArrowDown: 'expand' }
-		} else {
-			nestedActions =
-				dir === 'rtl'
-					? { ArrowRight: 'collapse', ArrowLeft: 'expand' }
-					: { ArrowLeft: 'collapse', ArrowRight: 'expand' }
-		}
-	}
+	const nestedActions = nested ? buildNestedActions(isHorizontal, dir) : {}
 
-	// Common actions regardless of options
 	const commonActions = {
 		Enter: 'select',
 		' ': 'select',
@@ -138,12 +136,7 @@ export function createKeyboardActionMap(options) {
 		End: 'last'
 	}
 
-	// Combine all possible actions
-	return {
-		...commonActions,
-		...movementActions,
-		...nestedActions
-	}
+	return { ...commonActions, ...movementActions, ...nestedActions }
 }
 
 /**
@@ -171,6 +164,19 @@ export function createShiftKeyboardActionMap() {
 	return { ' ': 'range' }
 }
 
+const KEY_LAYER_RESOLVERS = {
+	shift: (key, _opts) => createShiftKeyboardActionMap()[key] || null,
+	modifier: (key, opts) => createModifierKeyboardActionMap(opts)[key] || null,
+	plain: (key, opts) => createKeyboardActionMap(opts)[key] || null
+}
+
+function getKeyLayer(ctrlKey, metaKey, shiftKey) {
+	if (ctrlKey) return 'modifier'
+	if (metaKey) return 'modifier'
+	if (shiftKey) return 'shift'
+	return 'plain'
+}
+
 /**
  * Gets the keyboard action for a key event
  * @param {KeyboardEvent} event - The keyboard event
@@ -179,25 +185,7 @@ export function createShiftKeyboardActionMap() {
  */
 export function getKeyboardAction(event, options = {}) {
 	const { key, ctrlKey, metaKey, shiftKey } = event
-
-	// Use updated options with defaults
 	const mergedOptions = { ...defaultNavigationOptions, ...options }
-
-	// Check for shift key (range selection)
-	if (shiftKey && !ctrlKey && !metaKey) {
-		const shiftMap = createShiftKeyboardActionMap()
-		return shiftMap[key] || null
-	}
-
-	// Check for modifier keys (ctrl/cmd)
-	if (ctrlKey || metaKey) {
-		const modifierMap = createModifierKeyboardActionMap(mergedOptions)
-		return modifierMap[key] || null
-	}
-
-	// Get the action map based on options
-	const actionMap = createKeyboardActionMap(mergedOptions)
-
-	// Return the action or null if no matching key
-	return actionMap[key] || null
+	const layer = getKeyLayer(ctrlKey, metaKey, shiftKey)
+	return KEY_LAYER_RESOLVERS[layer](key, mergedOptions)
 }

package/src/keymap.js

@@ -34,6 +34,14 @@ function getArrows(orientation, dir) {
 	return ARROWS[`vertical-${dir}`]
 }
 
+function buildPlainLayer(arrows, collapsible) {
+	return {
+		...PLAIN_FIXED,
+		...arrows.move,
+		...(collapsible ? arrows.nested : {})
+	}
+}
+
 // ─── buildKeymap ──────────────────────────────────────────────────────────────
 
 /**
@@ -52,11 +60,7 @@ export function buildKeymap({ orientation = 'vertical', dir = 'ltr', collapsible
 	const arrows = getArrows(orientation, dir)
 
 	return {
-		plain: {
-			...PLAIN_FIXED,
-			...arrows.move,
-			...(collapsible ? arrows.nested : {})
-		},
+		plain: buildPlainLayer(arrows, collapsible),
 		shift: { ...SHIFT_FIXED },
 		ctrl: { ...CTRL_FIXED }
 	}
@@ -64,6 +68,13 @@ export function buildKeymap({ orientation = 'vertical', dir = 'ltr', collapsible
 
 // ─── resolveAction ────────────────────────────────────────────────────────────
 
+function pickLayer(shiftKey, ctrlKey, metaKey) {
+	if (ctrlKey) return 'ctrl'
+	if (metaKey) return 'ctrl'
+	if (shiftKey) return 'shift'
+	return 'plain'
+}
+
 /**
  * Resolve the action for a keyboard event given a pre-built keymap.
  * Returns null if the key has no binding.
@@ -74,8 +85,5 @@ export function buildKeymap({ orientation = 'vertical', dir = 'ltr', collapsible
  */
 export function resolveAction(event, keymap) {
 	const { key, ctrlKey, metaKey, shiftKey } = event
-
-	if (shiftKey && !ctrlKey && !metaKey) return keymap.shift[key] ?? null
-	if (ctrlKey || metaKey) return keymap.ctrl[key] ?? null
-	return keymap.plain[key] ?? null
+	return keymap[pickLayer(shiftKey, ctrlKey, metaKey)][key] ?? null
 }

package/src/magnetic.svelte.js

@@ -9,49 +9,53 @@
  * @property {number} [strength=0.3] Maximum displacement as fraction of element size (0–1)
  * @property {number} [duration=300] Transition duration for return to center (ms)
  */
-export function magnetic(node, options = {}) {
-	$effect(() => {
-		const opts = {
-			strength: 0.3,
-			duration: 300,
-			...options
-		}
-
-		const reducedMotion =
-			typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches
 
-		if (reducedMotion) return
+function resolveMagneticOpts(options) {
+	return { strength: 0.3, duration: 300, ...options }
+}
 
-		const originalTransform = node.style.transform
-		const originalTransition = node.style.transition
+function isReducedMotion() {
+	return typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches
+}
 
-		node.style.transition = `transform ${opts.duration}ms ease`
+function applyMagnetic(node, opts) {
+	const originalTransform = node.style.transform
+	const originalTransition = node.style.transition
 
-		function onMove(e) {
-			const rect = node.getBoundingClientRect()
-			const centerX = rect.left + rect.width / 2
-			const centerY = rect.top + rect.height / 2
+	node.style.transition = `transform ${opts.duration}ms ease`
 
-			const offsetX = (e.clientX - centerX) * opts.strength
-			const offsetY = (e.clientY - centerY) * opts.strength
+	function onMove(e) {
+		const rect = node.getBoundingClientRect()
+		const centerX = rect.left + rect.width / 2
+		const centerY = rect.top + rect.height / 2
 
-			node.style.transition = 'none'
-			node.style.transform = `translate(${offsetX}px, ${offsetY}px)`
-		}
+		const offsetX = (e.clientX - centerX) * opts.strength
+		const offsetY = (e.clientY - centerY) * opts.strength
 
-		function onLeave() {
-			node.style.transition = `transform ${opts.duration}ms ease`
-			node.style.transform = originalTransform
-		}
+		node.style.transition = 'none'
+		node.style.transform = `translate(${offsetX}px, ${offsetY}px)`
+	}
 
-		node.addEventListener('mousemove', onMove)
-		node.addEventListener('mouseleave', onLeave)
+	function onLeave() {
+		node.style.transition = `transform ${opts.duration}ms ease`
+		node.style.transform = originalTransform
+	}
+
+	node.addEventListener('mousemove', onMove)
+	node.addEventListener('mouseleave', onLeave)
+
+	return () => {
+		node.removeEventListener('mousemove', onMove)
+		node.removeEventListener('mouseleave', onLeave)
+		node.style.transform = originalTransform
+		node.style.transition = originalTransition
+	}
+}
 
-		return () => {
-			node.removeEventListener('mousemove', onMove)
-			node.removeEventListener('mouseleave', onLeave)
-			node.style.transform = originalTransform
-			node.style.transition = originalTransition
-		}
+export function magnetic(node, options = {}) {
+	$effect(() => {
+		const opts = resolveMagneticOpts(options)
+		if (isReducedMotion()) return
+		return applyMagnetic(node, opts)
 	})
 }

package/src/navigator.js

@@ -38,9 +38,9 @@ import { buildKeymap, resolveAction } from './keymap.js'
  */
 function getClickAction(event) {
 	const { shiftKey, ctrlKey, metaKey, target } = event
-
-	if (shiftKey && !ctrlKey && !metaKey) return 'range'
-	if (ctrlKey || metaKey) return 'extend'
+	if (shiftKey) return 'range'
+	if (ctrlKey) return 'extend'
+	if (metaKey) return 'extend'
 	if (target.closest('[data-accordion-trigger]')) return 'toggle'
 	return 'select'
 }
@@ -201,6 +201,25 @@ export class Navigator {
 
 	// ─── Typeahead ───────────────────────────────────────────────────────────
 
+	#isPrintableKey(key, ctrlKey, metaKey, altKey) {
+		if (ctrlKey) return false
+		if (metaKey) return false
+		if (altKey) return false
+		if (key.length !== 1) return false
+		return key !== ' '
+	}
+
+	#appendBuffer(key) {
+		const startAfter = this.#buffer.length === 0 ? this.#wrapper.focusedKey : null
+		this.#buffer += key
+		if (this.#bufferTimer) {
+			clearTimeout(this.#bufferTimer)
+			this.#bufferTimer = null
+		}
+		this.#bufferTimer = setTimeout(() => this.#clearTypeahead(), TYPEAHEAD_RESET_MS)
+		return startAfter
+	}
+
 	/**
 	 * Handle printable character keys for typeahead search.
 	 * Returns true if the event was consumed.
@@ -211,20 +230,9 @@ export class Navigator {
 	#tryTypeahead(event) {
 		const { key, ctrlKey, metaKey, altKey } = event
 
-		// Only single printable characters, no modifier combos
-		if (ctrlKey || metaKey || altKey) return false
-		if (key.length !== 1) return false
-		if (key === ' ') return false // Space is a keymap action, not typeahead
-
-		const startAfter = this.#buffer.length === 0 ? this.#wrapper.focusedKey : null
-		this.#buffer += key
+		if (!this.#isPrintableKey(key, ctrlKey, metaKey, altKey)) return false
 
-		// Cancel the existing reset timer but keep the accumulated buffer
-		if (this.#bufferTimer) {
-			clearTimeout(this.#bufferTimer)
-			this.#bufferTimer = null
-		}
-		this.#bufferTimer = setTimeout(() => this.#clearTypeahead(), TYPEAHEAD_RESET_MS)
+		const startAfter = this.#appendBuffer(key)
 
 		const matchKey = this.#wrapper.findByText(this.#buffer, startAfter)
 		if (matchKey !== null) {

package/src/navigator.svelte.js

@@ -99,6 +99,98 @@ function getHandlers(wrapper) {
 		toggle: (path) => wrapper.toggleExpansion(path)
 	}
 }
+
+function isTypeaheadEvent(event) {
+	if (event.ctrlKey) return false
+	if (event.metaKey) return false
+	if (event.altKey) return false
+	if (event.key.length !== 1) return false
+	return event.key !== ' '
+}
+
+function dispatchFocusMoveEvent(node, wrapper) {
+	node.dispatchEvent(
+		new CustomEvent('action', {
+			detail: {
+				name: 'move',
+				data: { value: wrapper.focused, selected: wrapper.selected }
+			}
+		})
+	)
+}
+
+const SCROLL_ACTIONS = new Set(['first', 'last', 'previous', 'next', 'expand', 'collapse'])
+
+function isNativeLink(action, target) {
+	return action === 'select' && Boolean(target.closest('a[href]'))
+}
+
+function notifyFocusMove(node, wrapper, action, prevKey) {
+	if (action !== 'expand' && action !== 'collapse') return false
+	if (wrapper.focusedKey === prevKey) return false
+	dispatchFocusMoveEvent(node, wrapper)
+	return true
+}
+
+function runTypeahead(config, wrapper, ta, event) {
+	if (!config.typeahead) return
+	if (!wrapper.findByText) return
+	ta.handle(event)
+}
+
+function makeKeydownHandler(ctx, config, handlers, ta) {
+	const { node, wrapper } = ctx
+	return (event) => {
+		const action = getKeyboardAction(event, config)
+		if (isNativeLink(action, event.target)) return
+
+		const prevKey = wrapper.focusedKey
+		const handled = handleAction(event, handlers[action])
+		if (!handled) { runTypeahead(config, wrapper, ta, event); return }
+
+		ta.reset()
+		emitAction(node, wrapper, action, true)
+		notifyFocusMove(node, wrapper, action, prevKey)
+		if (SCROLL_ACTIONS.has(action)) setTimeout(() => scrollFocusedIntoView(node, wrapper), 0)
+	}
+}
+
+function getTypeaheadStart(buffer, wrapper) {
+	if (buffer.length === 0) return wrapper.focusedKey
+	return null
+}
+
+function makeTypeahead(node, wrapper) {
+	let buffer = ''
+	let timer = null
+
+	function reset() {
+		buffer = ''
+		if (timer) { clearTimeout(timer); timer = null }
+	}
+
+	function handle(event) {
+		if (!isTypeaheadEvent(event)) return false
+
+		const startAfter = getTypeaheadStart(buffer, wrapper)
+		buffer += event.key
+		if (timer) clearTimeout(timer)
+		timer = setTimeout(reset, 500)
+
+		const matchKey = wrapper.findByText(buffer, startAfter)
+		if (matchKey === null) return false
+		if (!wrapper.moveTo(matchKey)) return false
+
+		event.preventDefault()
+		event.stopPropagation()
+		emitAction(node, wrapper, 'first', true)
+		setTimeout(() => scrollFocusedIntoView(node, wrapper), 0)
+		return true
+	}
+
+	return { reset, handle }
+}
+
 /**
  * A svelte action function that captures keyboard evvents and emits event for corresponding movements.
  *
@@ -110,88 +202,13 @@ export function navigator(node, options) {
 	const { wrapper } = options
 	const config = { ...defaultNavigationOptions, ...omit(['wrapper'], options) }
 	const handlers = getHandlers(wrapper)
-
-	// Type-ahead state
-	let typeaheadBuffer = ''
-	let typeaheadTimer = null
-
-	function resetTypeahead() {
-		typeaheadBuffer = ''
-		if (typeaheadTimer) {
-			clearTimeout(typeaheadTimer)
-			typeaheadTimer = null
-		}
-	}
-
-	function handleTypeahead(event) {
-		const { key, ctrlKey, metaKey, altKey } = event
-		if (ctrlKey || metaKey || altKey) return false
-		if (key.length !== 1 || key === ' ') return false
-
-		// Single-char repeat: start after current to cycle through matches
-		const startAfter = typeaheadBuffer.length === 0 ? wrapper.focusedKey : null
-
-		typeaheadBuffer += key
-		if (typeaheadTimer) clearTimeout(typeaheadTimer)
-		typeaheadTimer = setTimeout(resetTypeahead, 500)
-
-		const matchKey = wrapper.findByText(typeaheadBuffer, startAfter)
-		if (matchKey !== null && wrapper.moveTo(matchKey)) {
-			event.preventDefault()
-			event.stopPropagation()
-			emitAction(node, wrapper, 'first', true) // emit 'move'
-			setTimeout(() => scrollFocusedIntoView(node, wrapper), 0)
-			return true
-		}
-		return false
-	}
-
-	const handleKeydown = (event) => {
-		const action = getKeyboardAction(event, config)
-		const prevKey = wrapper.focusedKey
-
-		// For activation keys (Enter/Space) on anchor elements, let the browser
-		// navigate natively. The click handler will update controller state when
-		// the browser fires the synthetic click.
-		if (action === 'select' && event.target.closest('a[href]')) {
-			return
-		}
-
-		const handled = handleAction(event, handlers[action])
-		if (handled) {
-			resetTypeahead()
-			emitAction(node, wrapper, action, true)
-			// If expand/collapse moved focus, also emit move so components update DOM focus
-			const focusMoved = ['expand', 'collapse'].includes(action) && wrapper.focusedKey !== prevKey
-			if (focusMoved) {
-				node.dispatchEvent(
-					new CustomEvent('action', {
-						detail: {
-							name: 'move',
-							data: { value: wrapper.focused, selected: wrapper.selected }
-						}
-					})
-				)
-			}
-			// Scroll focused element into view for navigation and focus-moving expand/collapse
-			if (focusMoved || ['first', 'last', 'previous', 'next'].includes(action)) {
-				setTimeout(() => scrollFocusedIntoView(node, wrapper), 0)
-			}
-			return
-		}
-
-		// Type-ahead: when no navigation action matched and typeahead is enabled
-		if (config.typeahead && wrapper.findByText) {
-			handleTypeahead(event)
-		}
-	}
+	const ta = makeTypeahead(node, wrapper)
+	const handleKeydown = makeKeydownHandler({ node, wrapper }, config, handlers, ta)
 
 	const handleClick = (event) => {
 		const action = getClickAction(event)
 		const path = getPathFromEvent(event)
 
-		// Anchor elements with href handle navigation natively — don't preventDefault.
-		// Still call the handler so focus/selection state stays in sync.
 		if (event.target.closest('a[href]')) {
 			const handler = handlers[action]
 			if (handler?.(path)) emitAction(node, options.wrapper, action)
@@ -204,10 +221,6 @@ export function navigator(node, options) {
 
 	$effect(() => {
 		const cleanup = [on(node, 'keydown', handleKeydown), on(node, 'click', handleClick)]
-
-		return () => {
-			resetTypeahead()
-			cleanup.forEach((fn) => fn())
-		}
+		return () => { ta.reset(); cleanup.forEach((fn) => fn()) }
 	})
 }

package/src/reveal.svelte.js

@@ -16,114 +16,132 @@
  * @property {number} [threshold=0.1] IntersectionObserver threshold (0–1)
  * @property {string} [easing='cubic-bezier(0.4, 0, 0.2, 1)'] CSS easing function
  */
-export function reveal(node, options = {}) {
-	$effect(() => {
-		const opts = {
-			direction: 'up',
-			distance: '1.5rem',
-			duration: 600,
-			delay: 0,
-			stagger: 0,
-			once: true,
-			threshold: 0.1,
-			easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
-			...options
-		}
 
-		const reducedMotion =
-			typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches
+function resolveRevealOpts(options) {
+	return {
+		direction: 'up',
+		distance: '1.5rem',
+		duration: 600,
+		delay: 0,
+		stagger: 0,
+		once: true,
+		threshold: 0.1,
+		easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
+		...options
+	}
+}
 
-		const isStagger = opts.stagger > 0
+function applyReveal(el, opts) {
+	el.style.setProperty('--reveal-duration', `${opts.duration}ms`)
+	el.style.setProperty('--reveal-distance', opts.distance)
+	el.style.setProperty('--reveal-easing', opts.easing)
+	el.setAttribute('data-reveal', opts.direction)
+}
 
-		function applyReveal(el) {
-			el.style.setProperty('--reveal-duration', `${opts.duration}ms`)
-			el.style.setProperty('--reveal-distance', opts.distance)
-			el.style.setProperty('--reveal-easing', opts.easing)
-			el.setAttribute('data-reveal', opts.direction)
-		}
+function cleanReveal(el) {
+	el.removeAttribute('data-reveal')
+	el.removeAttribute('data-reveal-visible')
+	el.style.removeProperty('--reveal-duration')
+	el.style.removeProperty('--reveal-distance')
+	el.style.removeProperty('--reveal-easing')
+	el.style.removeProperty('transition-delay')
+}
 
-		function cleanReveal(el) {
-			el.removeAttribute('data-reveal')
-			el.removeAttribute('data-reveal-visible')
-			el.style.removeProperty('--reveal-duration')
-			el.style.removeProperty('--reveal-distance')
-			el.style.removeProperty('--reveal-easing')
-			el.style.removeProperty('transition-delay')
-		}
+function initRevealElements(node, opts, isStagger) {
+	if (isStagger) {
+		Array.from(node.children).forEach((child) => applyReveal(child, opts))
+	} else {
+		applyReveal(node, opts)
+		if (opts.delay > 0) node.style.transitionDelay = `${opts.delay}ms`
+	}
+}
 
+function handleReducedMotion(node, isStagger) {
+	if (isStagger) {
+		Array.from(node.children).forEach((child) => child.setAttribute('data-reveal-visible', ''))
+	} else {
+		node.setAttribute('data-reveal-visible', '')
+	}
+	node.dispatchEvent(new CustomEvent('reveal', { detail: { visible: true } }))
+	return () => {
 		if (isStagger) {
-			Array.from(node.children).forEach((child) => applyReveal(child))
+			Array.from(node.children).forEach((child) => cleanReveal(child))
 		} else {
-			applyReveal(node)
-			if (opts.delay > 0) {
-				node.style.transitionDelay = `${opts.delay}ms`
-			}
+			cleanReveal(node)
 		}
+	}
+}
 
-		if (reducedMotion) {
-			if (isStagger) {
-				Array.from(node.children).forEach((child) => child.setAttribute('data-reveal-visible', ''))
-			} else {
-				node.setAttribute('data-reveal-visible', '')
-			}
-			node.dispatchEvent(new CustomEvent('reveal', { detail: { visible: true } }))
-			return () => {
-				if (isStagger) {
-					Array.from(node.children).forEach((child) => cleanReveal(child))
-				} else {
-					cleanReveal(node)
+function handleIntersectEnter(node, opts, isStagger, timers) {
+	if (isStagger) {
+		timers.forEach((t) => clearTimeout(t))
+		const kids = Array.from(node.children)
+		const newTimers = kids.map((child, i) => {
+			if (!child.hasAttribute('data-reveal')) applyReveal(child, opts)
+			return setTimeout(
+				() => child.setAttribute('data-reveal-visible', ''),
+				opts.delay + i * opts.stagger
+			)
+		})
+		return newTimers
+	}
+	node.setAttribute('data-reveal-visible', '')
+	return timers
+}
+
+function handleIntersectLeave(node, isStagger, timers) {
+	if (isStagger) {
+		timers.forEach((t) => clearTimeout(t))
+		Array.from(node.children).forEach((child) => child.removeAttribute('data-reveal-visible'))
+		return []
+	}
+	node.removeAttribute('data-reveal-visible')
+	return timers
+}
+
+function buildObserver(node, opts, isStagger) {
+	let timers = []
+
+	const observer = new IntersectionObserver(
+		(entries) => {
+			for (const entry of entries) {
+				if (entry.isIntersecting) {
+					timers = handleIntersectEnter(node, opts, isStagger, timers)
+					node.dispatchEvent(new CustomEvent('reveal', { detail: { visible: true } }))
+					if (opts.once) observer.unobserve(node)
+				} else if (!opts.once) {
+					timers = handleIntersectLeave(node, isStagger, timers)
+					node.dispatchEvent(new CustomEvent('reveal', { detail: { visible: false } }))
 				}
 			}
+		},
+		{ threshold: opts.threshold }
+	)
+
+	observer.observe(node)
+
+	return () => {
+		timers.forEach((t) => clearTimeout(t))
+		observer.disconnect()
+		if (isStagger) {
+			Array.from(node.children).forEach((child) => cleanReveal(child))
+		} else {
+			cleanReveal(node)
 		}
+	}
+}
 
-		let timers = []
+export function reveal(node, options = {}) {
+	$effect(() => {
+		const opts = resolveRevealOpts(options)
+		const reducedMotion =
+			typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches
+		const isStagger = opts.stagger > 0
 
-		const observer = new IntersectionObserver(
-			(entries) => {
-				for (const entry of entries) {
-					if (entry.isIntersecting) {
-						if (isStagger) {
-							timers.forEach((t) => clearTimeout(t))
-							const kids = Array.from(node.children)
-							timers = kids.map((child, i) => {
-								if (!child.hasAttribute('data-reveal')) applyReveal(child)
-								return setTimeout(
-									() => child.setAttribute('data-reveal-visible', ''),
-									opts.delay + i * opts.stagger
-								)
-							})
-						} else {
-							node.setAttribute('data-reveal-visible', '')
-						}
-						node.dispatchEvent(new CustomEvent('reveal', { detail: { visible: true } }))
-						if (opts.once) observer.unobserve(node)
-					} else if (!opts.once) {
-						if (isStagger) {
-							timers.forEach((t) => clearTimeout(t))
-							timers = []
-							Array.from(node.children).forEach((child) =>
-								child.removeAttribute('data-reveal-visible')
-							)
-						} else {
-							node.removeAttribute('data-reveal-visible')
-						}
-						node.dispatchEvent(new CustomEvent('reveal', { detail: { visible: false } }))
-					}
-				}
-			},
-			{ threshold: opts.threshold }
-		)
+		initRevealElements(node, opts, isStagger)
 
-		observer.observe(node)
+		if (reducedMotion) return handleReducedMotion(node, isStagger)
 
-		return () => {
-			timers.forEach((t) => clearTimeout(t))
-			observer.disconnect()
-			if (isStagger) {
-				Array.from(node.children).forEach((child) => cleanReveal(child))
-			} else {
-				cleanReveal(node)
-			}
-		}
+		return buildObserver(node, opts, isStagger)
 	})
 }

package/src/ripple.svelte.js

@@ -10,78 +10,79 @@
  * @property {number} [opacity=0.15] Ripple opacity
  * @property {number} [duration=500] Ripple animation duration (ms)
  */
-export function ripple(node, options = {}) {
-	$effect(() => {
-		const opts = {
-			color: 'currentColor',
-			opacity: 0.15,
-			duration: 500,
-			...options
-		}
 
-		const reducedMotion =
-			typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches
+function resolveRippleOpts(options) {
+	return { color: 'currentColor', opacity: 0.15, duration: 500, ...options }
+}
 
-		if (reducedMotion) return
+function isReducedMotion() {
+	return typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches
+}
 
-		// Ensure host can contain the ripple
-		const originalOverflow = node.style.overflow
-		const originalPosition = node.style.position
-		const computed = getComputedStyle(node).position
-		if (!computed || computed === 'static') {
-			node.style.position = 'relative'
+function injectRippleKeyframes() {
+	if (document.querySelector('#rokkit-ripple-keyframes')) return
+	const style = document.createElement('style')
+	style.id = 'rokkit-ripple-keyframes'
+	style.textContent = `
+		@keyframes rokkit-ripple {
+			to {
+				transform: scale(1);
+				opacity: 0;
+			}
 		}
-		node.style.overflow = 'hidden'
+	`
+	document.head.appendChild(style)
+}
 
-		function onClick(e) {
-			const rect = node.getBoundingClientRect()
-			const size = Math.max(rect.width, rect.height) * 2
-			const x = e.clientX - rect.left - size / 2
-			const y = e.clientY - rect.top - size / 2
+function createRippleSpan(e, node, opts) {
+	const rect = node.getBoundingClientRect()
+	const size = Math.max(rect.width, rect.height) * 2
+	const x = e.clientX - rect.left - size / 2
+	const y = e.clientY - rect.top - size / 2
 
-			const span = document.createElement('span')
-			span.style.position = 'absolute'
-			span.style.left = `${x}px`
-			span.style.top = `${y}px`
-			span.style.width = `${size}px`
-			span.style.height = `${size}px`
-			span.style.borderRadius = '50%'
-			span.style.background = opts.color
-			span.style.opacity = String(opts.opacity)
-			span.style.transform = 'scale(0)'
-			span.style.pointerEvents = 'none'
-			span.style.animation = `rokkit-ripple ${opts.duration}ms ease-out forwards`
+	const span = document.createElement('span')
+	span.style.position = 'absolute'
+	span.style.left = `${x}px`
+	span.style.top = `${y}px`
+	span.style.width = `${size}px`
+	span.style.height = `${size}px`
+	span.style.borderRadius = '50%'
+	span.style.background = opts.color
+	span.style.opacity = String(opts.opacity)
+	span.style.transform = 'scale(0)'
+	span.style.pointerEvents = 'none'
+	span.style.animation = `rokkit-ripple ${opts.duration}ms ease-out forwards`
+	return span
+}
 
-			node.appendChild(span)
-			span.addEventListener('animationend', () => span.remove(), { once: true })
+function applyRipple(node, opts) {
+	const originalOverflow = node.style.overflow
+	const originalPosition = node.style.position
+	const computed = getComputedStyle(node).position
+	if (!computed || computed === 'static') node.style.position = 'relative'
+	node.style.overflow = 'hidden'
 
-			// Fallback removal in case animationend doesn't fire (JSDOM)
-			setTimeout(() => {
-				if (span.parentNode) span.remove()
-			}, opts.duration + 100)
-		}
+	function onClick(e) {
+		const span = createRippleSpan(e, node, opts)
+		node.appendChild(span)
+		span.addEventListener('animationend', () => span.remove(), { once: true })
+		setTimeout(() => { if (span.parentNode) span.remove() }, opts.duration + 100)
+	}
 
-		// Inject keyframes if not already present
-		if (!document.querySelector('#rokkit-ripple-keyframes')) {
-			const style = document.createElement('style')
-			style.id = 'rokkit-ripple-keyframes'
-			style.textContent = `
-				@keyframes rokkit-ripple {
-					to {
-						transform: scale(1);
-						opacity: 0;
-					}
-				}
-			`
-			document.head.appendChild(style)
-		}
+	injectRippleKeyframes()
+	node.addEventListener('click', onClick)
 
-		node.addEventListener('click', onClick)
+	return () => {
+		node.removeEventListener('click', onClick)
+		node.style.overflow = originalOverflow
+		node.style.position = originalPosition
+	}
+}
 
-		return () => {
-			node.removeEventListener('click', onClick)
-			node.style.overflow = originalOverflow
-			node.style.position = originalPosition
-		}
+export function ripple(node, options = {}) {
+	$effect(() => {
+		const opts = resolveRippleOpts(options)
+		if (isReducedMotion()) return
+		return applyRipple(node, opts)
 	})
 }

package/src/trigger.js

@@ -22,6 +22,20 @@
  *   trigger.destroy()
  */
 
+function handleToggleKey(self) {
+	if (self.isOpen) self.close()
+	else self.open()
+}
+
+function handleArrowDown(self) {
+	self.open()
+}
+
+function handleArrowUp(self, onlast) {
+	self.open()
+	onlast?.()
+}
+
 export class Trigger {
 	#trigger
 	#container
@@ -78,15 +92,13 @@ export class Trigger {
 		const { key } = event
 		if (key === 'Enter' || key === ' ') {
 			event.preventDefault()
-			if (this.isOpen) this.close()
-			else this.open()
+			handleToggleKey(this)
 		} else if (key === 'ArrowDown') {
 			event.preventDefault()
-			this.open()
+			handleArrowDown(this)
 		} else if (key === 'ArrowUp') {
 			event.preventDefault()
-			this.open()
-			this.#onlast?.()
+			handleArrowUp(this, this.#onlast)
 		}
 	}
 

package/src/utils.js

@@ -125,6 +125,10 @@ function isAccordionTrigger(target) {
 }
 // getKeyboardAction moved to kbd.js
 
+function isToggleTarget(target) {
+	return isNodeToggle(target) || isNodeToggle(target.parentElement) || isAccordionTrigger(target)
+}
+
 /**
  * Determines an action based on a click event
  *
@@ -134,26 +138,9 @@ function isAccordionTrigger(target) {
 export const getClickAction = (event) => {
 	const { ctrlKey, metaKey, shiftKey, target } = event
 
-	// Check for shift key first (range selection)
-	if (shiftKey && !ctrlKey && !metaKey) {
-		return 'range'
-	}
-
-	// Check for modifier keys (toggle selection)
-	if (ctrlKey || metaKey) {
-		return 'extend'
-	}
-
-	// Check if clicked on icon with collapsed/expanded state
-	if (isNodeToggle(target) || isNodeToggle(target.parentElement)) {
-		return 'toggle'
-	}
-
-	// Check if clicked on accordion trigger (header area)
-	if (isAccordionTrigger(target)) {
-		return 'toggle'
-	}
-
-	// Default action
+	if (shiftKey) return 'range'
+	if (ctrlKey) return 'extend'
+	if (metaKey) return 'extend'
+	if (isToggleTarget(target)) return 'toggle'
 	return 'select'
 }