@rokkit/states 1.0.0-next.145 → 1.0.0-next.147

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/states",
-  "version": "1.0.0-next.145",
+  "version": "1.0.0-next.147",
   "description": "Contains generic data manipulation functions that can be used in various components.",
   "repository": {
     "type": "git",

package/src/alerts.svelte.js

@@ -0,0 +1,46 @@
+class AlertsStore {
+	/** @type {Array<{id: string, type: string, text?: string, dismissible: boolean, timeout: number, actions?: unknown}>} */
+	#items = $state([])
+	/** @type {Map<string, ReturnType<typeof setTimeout>>} */
+	#timers = new Map()
+
+	get current() {
+		return this.#items
+	}
+
+	/**
+	 * Push a new alert. Returns the alert id.
+	 * @param {{ type?: string, text?: string, dismissible?: boolean, timeout?: number, actions?: unknown }} alert
+	 * @returns {string}
+	 */
+	push({ type = 'info', text, dismissible = false, timeout = dismissible ? 0 : 4000, actions } = {}) {
+		const id = crypto.randomUUID()
+		this.#items = [...this.#items, { id, type, text, dismissible, timeout, actions }]
+		if (timeout > 0) {
+			const timer = setTimeout(() => this.dismiss(id), timeout)
+			this.#timers.set(id, timer)
+		}
+		return id
+	}
+
+	/**
+	 * Dismiss an alert by id, cancelling its timer if any.
+	 * @param {string} id
+	 */
+	dismiss(id) {
+		clearTimeout(this.#timers.get(id))
+		this.#timers.delete(id)
+		this.#items = this.#items.filter((a) => a.id !== id)
+	}
+
+	/**
+	 * Clear all alerts and cancel all timers.
+	 */
+	clear() {
+		for (const timer of this.#timers.values()) clearTimeout(timer)
+		this.#timers.clear()
+		this.#items = []
+	}
+}
+
+export const alerts = new AlertsStore()

package/src/derive.svelte.js

@@ -25,7 +25,9 @@ function visitNode(data, ctx) {
 	const hasChildren = Array.isArray(item[fields.children]) && item[fields.children].length > 0
 	data.push({ key, value: item, level, hasChildren })
 	if (isExpanded(item, fields, key, expandedKeys)) {
-		data.push(...flatVisibleNodes(item[fields.children], getNestedFields(fields), itemPath, expandedKeys))
+		data.push(
+			...flatVisibleNodes(item[fields.children], getNestedFields(fields), itemPath, expandedKeys)
+		)
 	}
 }
 

package/src/index.js

@@ -1,3 +1,4 @@
+export { alerts } from './alerts.svelte.js'
 export { TableController } from './table-controller.svelte.js'
 export { vibe } from './vibe.svelte.js'
 export { ListController } from './list-controller.svelte.js'

package/src/list-controller.svelte.js

@@ -281,7 +281,11 @@ export class ListController {
 		const indices = this.#findRangeIndices(anchorKey, key)
 		if (!indices) return false
 		const { anchorIndex, targetIndex } = indices
-		this.#selectIndexRange(Math.min(anchorIndex, targetIndex), Math.max(anchorIndex, targetIndex), targetIndex)
+		this.#selectIndexRange(
+			Math.min(anchorIndex, targetIndex),
+			Math.max(anchorIndex, targetIndex),
+			targetIndex
+		)
 		return true
 	}
 

package/src/proxy-tree.svelte.js

@@ -74,7 +74,15 @@ function visitProxy(result, proxy, parentLineTypes, position) {
 	const hasChildren = children.length > 0
 	const isExpandable = hasChildren || proxy.get('children') === true // sentinel: lazy-loadable
 	const lineTypes = computeLineTypes(parentLineTypes, position, isExpandable)
-	result.push({ key: proxy.key, proxy, level: proxy.level, hasChildren, isExpandable, type: proxy.type, lineTypes })
+	result.push({
+		key: proxy.key,
+		proxy,
+		level: proxy.level,
+		hasChildren,
+		isExpandable,
+		type: proxy.type,
+		lineTypes
+	})
 	if (hasChildren && proxy.expanded) {
 		result.push(...buildReactiveFlatView(children, lineTypes))
 	}

package/src/wrapper.svelte.js

@@ -42,14 +42,17 @@ export class Wrapper {
 	#onchange
 	#selectedValue = $state(undefined)
 
+	#collapsible
+
 	/**
 	 * @param {import('./proxy-tree.svelte.js').ProxyTree} proxyTree
-	 * @param {{ onselect?: Function, onchange?: Function }} [options]
+	 * @param {{ onselect?: Function, onchange?: Function, collapsible?: boolean }} [options]
 	 */
 	constructor(proxyTree, options = {}) {
 		this.#proxyTree = proxyTree
 		this.#onselect = options.onselect
 		this.#onchange = options.onchange
+		this.#collapsible = options.collapsible ?? true
 	}
 
 	// ─── IWrapper: state read by Navigator ─────────────────────────────────────
@@ -90,7 +93,8 @@ export class Wrapper {
 
 	/**
 	 * Expand focused group, or move focus into it if already open.
-	 * No-op on leaf items.
+	 * No-op on leaf items. When collapsible=false groups are always open,
+	 * so this only ever moves focus into the first child.
 	 */
 	expand(_path) {
 		if (!this.#focusedKey) return
@@ -119,12 +123,13 @@ export class Wrapper {
 	/**
 	 * Collapse focused group, or move focus to parent if already collapsed / leaf.
 	 * At root level with no parent: no-op.
+	 * When collapsible=false, skips closing the group but still moves focus to parent.
 	 */
 	collapse(_path) {
 		if (!this.#focusedKey) return
 		const node = this.flatView.find((n) => n.key === this.#focusedKey)
 		if (!node) return
-		if (node.hasChildren && node.proxy.expanded) {
+		if (node.hasChildren && node.proxy.expanded && this.#collapsible) {
 			node.proxy.expanded = false
 		} else {
 			this.#focusParent()
@@ -147,7 +152,7 @@ export class Wrapper {
 
 	/**
 	 * Select item at path (or focusedKey when path is null).
-	 * Groups toggle expanded. Leaves fire onchange (value differs) and onselect callbacks.
+	 * Groups toggle expanded (only when collapsible=true). Leaves fire onchange and onselect callbacks.
 	 */
 	select(path) {
 		const key = path ?? this.#focusedKey
@@ -156,7 +161,7 @@ export class Wrapper {
 		const proxy = this.#proxyTree.lookup.get(key)
 		if (!proxy) return
 		if (proxy.hasChildren) {
-			proxy.expanded = !proxy.expanded
+			if (this.#collapsible) proxy.expanded = !proxy.expanded
 		} else {
 			this.#selectLeaf(proxy)
 		}
@@ -165,8 +170,10 @@ export class Wrapper {
 	/**
 	 * Toggle expansion of group at path — called by Navigator for accordion-trigger clicks.
 	 * Unlike select(), this only applies to groups and never fires onselect.
+	 * No-op when collapsible=false.
 	 */
 	toggle(path) {
+		if (!this.#collapsible) return
 		const key = path ?? this.#focusedKey
 		if (!key) return
 		const proxy = this.#proxyTree.lookup.get(key)