@rokkit/actions 1.0.0-next.99 → 1.0.2

package/src/{swipeable.js → swipeable.svelte.js}

@@ -1,4 +1,4 @@
-import { removeListeners, setupListeners } from './lib'
+import { EventManager } from './lib'
 
 const defaultOptions = {
 	horizontal: true,
@@ -9,53 +9,65 @@ const defaultOptions = {
 }
 
 /**
- * A svelte action function that captures swipe actions and emits event for corresponding movements.
+ * Calculates and returns the distance and duration of the swipe.
  *
- * @param {HTMLElement} node
- * @param {import(./types).SwipeableOptions} options
- * @returns {import('./types').SvelteActionReturn}
+ * @param {Event} event - The event object that initiated the touchEnd.
+ * @param {object} track - The tracking object holding the start of the touch action.
+ * @returns {{distance: {x: number, y: number}, duration: number}} The distance swiped (x and y) and the duration of the swipe.
  */
-export function swipeable(node, options = defaultOptions) {
-	const track = {}
-	let listeners = {}
-
-	const updateListeners = (props) => {
-		removeListeners(node, listeners)
-		listeners = getListeners(node, props, track)
-		setupListeners(node, listeners, props)
-	}
+function getTouchMetrics(event, track) {
+	const touch = event.changedTouches ? event.changedTouches[0] : event
+	const distX = touch.clientX - track.startX
+	const distY = touch.clientY - track.startY
+	const duration = (new Date().getTime() - track.startTime) / 1000
+	return { distance: { x: distX, y: distY }, duration }
+}
 
-	options = { ...defaultOptions, ...options }
-	updateListeners(options)
+/**
+ * Checks if the swipe was fast enough according to the minimum speed requirement.
+ *
+ * @param {{x: number, y: number}} distance - The distance of the swipe action.
+ * @param {number}                 duration - The duration of the swipe action in seconds.
+ * @param {number}                 minSpeed - The minimum speed threshold for the swipe action.
+ * @returns {boolean}              True if the swipe is fast enough, otherwise false.
+ */
+function isSwipeFastEnough(distance, duration, minSpeed) {
+	const speed = Math.max(Math.abs(distance.x), Math.abs(distance.y)) / duration
+	return speed > minSpeed
+}
 
-	return {
-		update: (data) => {
-			options = { ...options, ...data }
-			updateListeners(options)
-		},
-		destroy() {
-			removeListeners(node, listeners)
-		}
+/**
+ * Returns the swipe direction based on the distance in the x and y axis.
+ *
+ * @param {number} distX - The distance in the x axis.
+ * @param {number} distY - The distance in the y axis.
+ * @returns {string} The swipe direction.
+ */
+function getSwipeDirection(distX, distY) {
+	if (Math.abs(distX) > Math.abs(distY)) {
+		return distX > 0 ? 'Right' : 'Left'
+	} else {
+		return distY > 0 ? 'Down' : 'Up'
 	}
 }
 
 /**
- * Returns the listeners for the swipeable action.
- * @param {HTMLElement} node - The node where the event is dispatched.
- * @param {import(./types).SwipeableOptions} options - The options for the swipe.
- * @param {import(./types).TouchTracker} track - The tracking object.
- * @returns {import(./types).Listeners}
+ * Determines swipe validity and direction based on horizontal/vertical preferences and thresholds.
+ *
+ * @param {{x: number, y: number}} distance - The distance of the swipe.
+ * @param {object} options - Configuration options such as direction preferences and thresholds.
+ * @returns {{isValid: boolean, direction?: string}} Object indicating whether the swipe is valid, and if so, its direction.
  */
-function getListeners(node, options, track) {
-	if (!options.enabled) return {}
-
-	const listeners = {
-		touchend: (e) => touchEnd(e, node, options, track),
-		touchstart: (e) => touchStart(e, track),
-		mousedown: (e) => touchStart(e, track),
-		mouseup: (e) => touchEnd(e, node, options, track)
+function getSwipeDetails(distance, options) {
+	const isHorizontalSwipe = options.horizontal && Math.abs(distance.x) >= options.threshold
+	const isVerticalSwipe = options.vertical && Math.abs(distance.y) >= options.threshold
+	if (isHorizontalSwipe || isVerticalSwipe) {
+		return {
+			isValid: true,
+			direction: getSwipeDirection(distance.x, distance.y)
+		}
 	}
-	return listeners
+	return { isValid: false }
 }
 
 /**
@@ -89,62 +101,40 @@ function touchEnd(event, node, options, track) {
 }
 
 /**
- * Calculates and returns the distance and duration of the swipe.
- *
- * @param {Event} event - The event object that initiated the touchEnd.
- * @param {object} track - The tracking object holding the start of the touch action.
- * @returns {{distance: {x: number, y: number}, duration: number}} The distance swiped (x and y) and the duration of the swipe.
- */
-function getTouchMetrics(event, track) {
-	const touch = event.changedTouches ? event.changedTouches[0] : event
-	const distX = touch.clientX - track.startX
-	const distY = touch.clientY - track.startY
-	const duration = (new Date().getTime() - track.startTime) / 1000
-	return { distance: { x: distX, y: distY }, duration }
-}
-
-/**
- * Checks if the swipe was fast enough according to the minimum speed requirement.
- *
- * @param {{x: number, y: number}} distance - The distance of the swipe action.
- * @param {number}                 duration - The duration of the swipe action in seconds.
- * @param {number}                 minSpeed - The minimum speed threshold for the swipe action.
- * @returns {boolean}              True if the swipe is fast enough, otherwise false.
+ * Returns the listeners for the swipeable action.
+ * @param {HTMLElement} node - The node where the event is dispatched.
+ * @param {import(./types).SwipeableOptions} options - The options for the swipe.
+ * @param {import(./types).TouchTracker} track - The tracking object.
+ * @returns {import(./types).Listeners}
  */
-function isSwipeFastEnough(distance, duration, minSpeed) {
-	const speed = Math.max(Math.abs(distance.x), Math.abs(distance.y)) / duration
-	return speed > minSpeed
-}
+function getListeners(node, options, track) {
+	if (!options.enabled) return {}
 
-/**
- * Determines swipe validity and direction based on horizontal/vertical preferences and thresholds.
- *
- * @param {{x: number, y: number}} distance - The distance of the swipe.
- * @param {object} options - Configuration options such as direction preferences and thresholds.
- * @returns {{isValid: boolean, direction?: string}} Object indicating whether the swipe is valid, and if so, its direction.
- */
-function getSwipeDetails(distance, options) {
-	const isHorizontalSwipe = options.horizontal && Math.abs(distance.x) >= options.threshold
-	const isVerticalSwipe = options.vertical && Math.abs(distance.y) >= options.threshold
-	if (isHorizontalSwipe || isVerticalSwipe) {
-		return {
-			isValid: true,
-			direction: getSwipeDirection(distance.x, distance.y)
-		}
+	const listeners = {
+		touchend: (e) => touchEnd(e, node, options, track),
+		touchstart: (e) => touchStart(e, track),
+		mousedown: (e) => touchStart(e, track),
+		mouseup: (e) => touchEnd(e, node, options, track)
 	}
-	return { isValid: false }
+	return listeners
 }
+
 /**
- * Returns the swipe direction based on the distance in the x and y axis.
+ * A svelte action function that captures swipe actions and emits event for corresponding movements.
  *
- * @param {number} distX - The distance in the x axis.
- * @param {number} distY - The distance in the y axis.
- * @returns {string} The swipe direction.
+ * @param {HTMLElement} node
+ * @param {import(./types).SwipeableOptions} options
+ * @returns {import('./types').SvelteActionReturn}
  */
-function getSwipeDirection(distX, distY) {
-	if (Math.abs(distX) > Math.abs(distY)) {
-		return distX > 0 ? 'Right' : 'Left'
-	} else {
-		return distY > 0 ? 'Down' : 'Up'
-	}
+export function swipeable(node, options = defaultOptions) {
+	const track = {}
+	const manager = EventManager(node)
+
+	$effect(() => {
+		const props = { ...defaultOptions, ...options }
+		const listeners = getListeners(node, props, track)
+		manager.update(listeners, props.enabled)
+
+		return () => manager.reset()
+	})
 }

package/src/themable.svelte.js

@@ -0,0 +1,46 @@
+const DEFAULT_THEME = { style: 'rokkit', mode: 'dark', density: 'comfortable' }
+
+/**
+ * Update the theme attributes when the state changes.
+ *
+ * @param {HTMLElement} root
+ * @param {import('./types.js').ThemableConfig} options - Custom key mappings
+ */
+export function themable(root, options) {
+	const { theme = DEFAULT_THEME, storageKey } = options ?? {}
+
+	if (storageKey) {
+		// Initial load from storage
+		theme.load(storageKey)
+
+		// Save changes to storage
+		$effect(() => {
+			theme.save(storageKey)
+		})
+
+		// Handle storage events
+		const handleStorage = (event) => {
+			if (event.key === storageKey && event.newValue !== null) {
+				try {
+					const newTheme = JSON.parse(event.newValue)
+					theme.update(newTheme)
+				} catch (e) {
+					// eslint-disable-next-line no-console
+					console.warn(`Failed to parse theme from storage event for key "${storageKey}"`, e)
+				}
+			}
+		}
+		// Set up storage event listener
+		$effect.root(() => {
+			window.addEventListener('storage', handleStorage)
+			return () => window.removeEventListener('storage', handleStorage)
+		})
+	}
+	$effect(() => {
+		root.dataset.style = theme.style
+		root.dataset.mode = theme.mode
+		root.dataset.density = theme.density
+
+		// if (storageKey) theme.save(storageKey)
+	})
+}

package/src/tooltip.svelte.js

@@ -0,0 +1,149 @@
+/**
+ * Tooltip action — attaches an accessible tooltip to any element.
+ *
+ * Triggers on mouseenter (with configurable delay) and focusin.
+ * Hides on mouseleave, focusout, and Escape.
+ * Auto-flips position when the preferred side overflows the viewport.
+ *
+ * @param {HTMLElement} node
+ * @param {object} [options]
+ * @param {string} [options.content=''] Tooltip text
+ * @param {'top'|'bottom'|'left'|'right'} [options.position='top'] Preferred position
+ * @param {number} [options.delay=300] Show delay in ms
+ */
+
+const GAP = 6
+
+function uid() {
+	return `tt-${Math.random().toString(36).slice(2, 9)}`
+}
+
+function getPositionedAncestor(el) {
+	let parent = el.parentElement
+	while (parent && parent !== document.body) {
+		const pos = getComputedStyle(parent).position
+		if (['relative', 'absolute', 'fixed', 'sticky'].includes(pos)) return parent
+		parent = parent.parentElement
+	}
+	return document.body
+}
+
+function resolveFlip(triggerRect, tooltipRect, preferred) {
+	const vw = window.innerWidth
+	const vh = window.innerHeight
+	const fits = {
+		top: triggerRect.top >= tooltipRect.height + GAP,
+		bottom: triggerRect.bottom + tooltipRect.height + GAP <= vh,
+		left: triggerRect.left >= tooltipRect.width + GAP,
+		right: triggerRect.right + tooltipRect.width + GAP <= vw
+	}
+	if (fits[preferred]) return preferred
+	const flip = { top: 'bottom', bottom: 'top', left: 'right', right: 'left' }
+	if (fits[flip[preferred]]) return flip[preferred]
+	return Object.keys(fits).find((p) => fits[p]) ?? preferred
+}
+
+function positionTooltip(trigger, tooltipEl, preferred) {
+	const triggerRect = trigger.getBoundingClientRect()
+	const container = tooltipEl.parentElement
+	const containerRect = container.getBoundingClientRect()
+
+	// Measure tooltip without layout thrash
+	tooltipEl.style.visibility = 'hidden'
+	tooltipEl.style.position = 'absolute'
+	const tooltipRect = tooltipEl.getBoundingClientRect()
+	tooltipEl.style.visibility = ''
+
+	const pos = resolveFlip(triggerRect, tooltipRect, preferred)
+	tooltipEl.setAttribute('data-tooltip-position', pos)
+
+	let top, left
+	switch (pos) {
+		case 'top':
+			top = triggerRect.top - containerRect.top - tooltipRect.height - GAP
+			left = triggerRect.left - containerRect.left + (triggerRect.width - tooltipRect.width) / 2
+			break
+		case 'bottom':
+			top = triggerRect.bottom - containerRect.top + GAP
+			left = triggerRect.left - containerRect.left + (triggerRect.width - tooltipRect.width) / 2
+			break
+		case 'left':
+			top = triggerRect.top - containerRect.top + (triggerRect.height - tooltipRect.height) / 2
+			left = triggerRect.left - containerRect.left - tooltipRect.width - GAP
+			break
+		case 'right':
+			top = triggerRect.top - containerRect.top + (triggerRect.height - tooltipRect.height) / 2
+			left = triggerRect.right - containerRect.left + GAP
+			break
+		default:
+			top = 0
+			left = 0
+	}
+
+	tooltipEl.style.top = `${top}px`
+	tooltipEl.style.left = `${left}px`
+}
+
+export function tooltip(node, options = {}) {
+	$effect(() => {
+		const opts = { content: '', position: 'top', delay: 300, ...options }
+		const id = uid()
+
+		const el = document.createElement('div')
+		el.setAttribute('data-tooltip-content', '')
+		el.setAttribute('data-tooltip-position', opts.position)
+		el.setAttribute('data-tooltip-visible', 'false')
+		el.id = id
+		el.setAttribute('role', 'tooltip')
+		el.textContent = opts.content
+
+		node.setAttribute('data-tooltip-trigger', '')
+		node.setAttribute('aria-describedby', id)
+
+		const container = getPositionedAncestor(node)
+		container.appendChild(el)
+
+		let timer = null
+
+		function show() {
+			positionTooltip(node, el, opts.position)
+			el.setAttribute('data-tooltip-visible', 'true')
+		}
+
+		function hide() {
+			clearTimeout(timer)
+			el.setAttribute('data-tooltip-visible', 'false')
+		}
+
+		function onMouseEnter() {
+			timer = setTimeout(show, opts.delay)
+		}
+
+		function onMouseLeave() {
+			clearTimeout(timer)
+			hide()
+		}
+
+		function onKeydown(e) {
+			if (e.key === 'Escape') hide()
+		}
+
+		node.addEventListener('mouseenter', onMouseEnter)
+		node.addEventListener('mouseleave', onMouseLeave)
+		node.addEventListener('focusin', show)
+		node.addEventListener('focusout', hide)
+		node.addEventListener('keydown', onKeydown)
+
+		return () => {
+			clearTimeout(timer)
+			node.removeAttribute('data-tooltip-trigger')
+			node.removeAttribute('aria-describedby')
+			node.removeEventListener('mouseenter', onMouseEnter)
+			node.removeEventListener('mouseleave', onMouseLeave)
+			node.removeEventListener('focusin', show)
+			node.removeEventListener('focusout', hide)
+			node.removeEventListener('keydown', onKeydown)
+			el.remove()
+		}
+	})
+}

package/src/trigger.js

@@ -0,0 +1,126 @@
+/**
+ * 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()
+ */
+
+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
+	#onopen
+	#onclose
+	#onlast
+	#isOpenFn
+
+	/**
+	 * @param {HTMLElement} trigger    — the trigger button element
+	 * @param {HTMLElement} container  — the menu root (for click-outside detection)
+	 * @param {{ onopen: () => void, onclose: () => void, onlast?: () => void, isOpen: () => boolean }} callbacks
+	 */
+	constructor(trigger, container, { onopen, onclose, onlast, isOpen }) {
+		this.#trigger = trigger
+		this.#container = container
+		this.#onopen = onopen
+		this.#onclose = onclose
+		this.#onlast = onlast
+		this.#isOpenFn = isOpen
+
+		trigger.addEventListener('click', this.#handleClick)
+		trigger.addEventListener('keydown', this.#handleKeydown)
+		document.addEventListener('click', this.#handleDocClick, true)
+		document.addEventListener('keydown', this.#handleDocKeydown)
+	}
+
+	get isOpen() {
+		return this.#isOpenFn()
+	}
+
+	open() {
+		if (this.isOpen) return
+		this.#onopen()
+	}
+
+	close() {
+		if (!this.isOpen) return
+		this.#onclose()
+		this.#trigger.focus()
+	}
+
+	// ─── Trigger element listeners ────────────────────────────────────────────
+
+	#handleClick = (event) => {
+		// Ignore clicks from interactive children (e.g. tag remove buttons)
+		const closest = event.target.closest('button, [role="button"], a, input, select, textarea')
+		if (closest && closest !== this.#trigger) return
+		if (this.isOpen) this.close()
+		else this.open()
+	}
+
+	#handleKeydown = (event) => {
+		const { key } = event
+		if (key === 'Enter' || key === ' ') {
+			event.preventDefault()
+			handleToggleKey(this)
+		} else if (key === 'ArrowDown') {
+			event.preventDefault()
+			handleArrowDown(this)
+		} else if (key === 'ArrowUp') {
+			event.preventDefault()
+			handleArrowUp(this, this.#onlast)
+		}
+	}
+
+	// ─── Document-level listeners ─────────────────────────────────────────────
+
+	#handleDocClick = (event) => {
+		if (!this.isOpen) return
+		if (!this.#container.contains(event.target)) this.close()
+	}
+
+	#handleDocKeydown = (event) => {
+		if (!this.isOpen || event.key !== 'Escape') return
+		event.preventDefault()
+		this.close()
+	}
+
+	// ─── Cleanup ──────────────────────────────────────────────────────────────
+
+	destroy() {
+		this.#trigger.removeEventListener('click', this.#handleClick)
+		this.#trigger.removeEventListener('keydown', this.#handleKeydown)
+		document.removeEventListener('click', this.#handleDocClick, true)
+		document.removeEventListener('keydown', this.#handleDocKeydown)
+	}
+}