@rokkit/states 1.0.0-next.108 → 1.0.0-next.109

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/states",
-  "version": "1.0.0-next.108",
+  "version": "1.0.0-next.109",
   "description": "Contains generic data manipulation functions that can be used in various components.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "@lukeed/uuid": "^2.0.1",
-    "@rokkit/core": "1.0.0-next.106",
+    "@rokkit/core": "1.0.0-next.109",
     "d3-array": "^3.2.4",
     "d3-collection": "^1.0.7",
     "ramda": "^0.30.1",

package/src/derive.svelte.js

@@ -1,5 +1,5 @@
 import { getKeyFromPath, defaultFields, getNestedFields } from '@rokkit/core'
-
+import { Proxy } from './proxy.svelte'
 /**
  *
  * @param {Array<*>} items
@@ -28,30 +28,30 @@ export function flatVisibleNodes(items, fields = defaultFields, path = []) {
 }
 
 /**
- * Derives a flat lookup table for the given items, using the index path as key
+ * Derives a flat lookup table for the given items, using index paths as keys
+ * Each value is a Proxy instance for convenient manipulation
  *
- * @param {Array<*>} items
- * @param {import('@rokkit/core').FieldMapping} fields
- * @param {Array<number>} path
- * @returns {Record<string, { depth: number, item: any }>}
+ * @param {Array<*>} items - Source items array
+ * @param {import('@rokkit/core').FieldMapping} fields - Field mappings configuration
+ * @param {Array<number>} path - Current path in the tree
+ * @returns {Map<string, Proxy>} - Map of path keys to Proxy instances
  */
-export function deriveLookup(items, fields = defaultFields, path = []) {
-	const lookup = {}
+export function deriveLookupWithProxy(items, fields = defaultFields, path = []) {
+	const lookup = new Map()
 
 	items.forEach((item, index) => {
 		const itemPath = [...path, index]
 		const key = getKeyFromPath(itemPath)
+		const proxy = new Proxy(item, fields)
 
-		lookup[key] = { depth: itemPath.length - 1, value: item }
-		const hasChildren =
-			typeof item === 'object' &&
-			Array.isArray(item[fields.children]) &&
-			item[fields.children].length > 0
-
-		if (hasChildren) {
+		lookup.set(key, proxy)
+		// console.log(key, proxy.value)
+		if (proxy.hasChildren) {
 			const childFields = getNestedFields(fields)
-			const result = deriveLookup(item[fields.children], childFields, itemPath)
-			Object.assign(lookup, result)
+			const childLookup = deriveLookupWithProxy(proxy.get('children'), childFields, itemPath)
+			for (const [childKey, childValue] of childLookup.entries()) {
+				lookup.set(childKey, childValue)
+			}
 		}
 	})
 	return lookup

package/src/list-controller.svelte.js

@@ -1,28 +1,29 @@
 import { FieldMapper, defaultFields } from '@rokkit/core'
 import { equals } from 'ramda'
 import { SvelteSet } from 'svelte/reactivity'
-import { flatVisibleNodes } from './derive.svelte'
+import { deriveLookupWithProxy, flatVisibleNodes } from './derive.svelte'
 
 export class ListController {
 	items = $state(null)
 	fields = defaultFields
 	mappers = []
 	#options = $state({})
-	lookup = new Map()
+	// lookup = new Map()
 	selectedKeys = new SvelteSet()
 	focusedKey = $state(null)
 	#currentIndex = -1
 
-	selected = $derived(Array.from(this.selectedKeys).map((key) => this.lookup.get(key)))
-	focused = $derived(this.lookup.get(this.focusedKey))
+	selected = $derived(Array.from(this.selectedKeys).map((key) => this.lookup.get(key).value))
+	focused = $derived(this.lookup.get(this.focusedKey)?.value)
 	data = $derived(flatVisibleNodes(this.items, this.fields))
+	lookup = $derived(deriveLookupWithProxy(this.items, this.fields))
 
 	constructor(items, value, fields, options) {
 		this.items = items
 		this.fields = { ...defaultFields, ...fields }
 		this.mappers.push(new FieldMapper(fields))
 		this.#options = { multiselect: false, ...options }
-		this.init(items, value)
+		this.init(value)
 	}
 
 	/**
@@ -30,8 +31,8 @@ export class ListController {
 	 * @param {Array<*>} items
 	 * @param {*} value
 	 */
-	init(items, value) {
-		items.forEach((item, index) => this.lookup.set(String(index), item))
+	init(value) {
+		// items.forEach((item, index) => this.lookup.set(String(index), item))
 		this.moveToValue(value)
 	}
 
@@ -145,7 +146,7 @@ export class ListController {
 		if (!this.lookup.has(key)) return false
 
 		if (this.focusedKey !== key) {
-			const { index } = this.findByValue(this.lookup.get(key))
+			const { index } = this.findByValue(this.lookup.get(key).value)
 			this.moveToIndex(index)
 		}
 

package/src/nested-controller.svelte.js

@@ -3,16 +3,12 @@ import { equals } from 'ramda'
 import { ListController } from './list-controller.svelte'
 
 export class NestedController extends ListController {
-	constructor(items, value, fields, options) {
-		super(items, value, fields, options)
-	}
-
 	/**
 	 * @protected
 	 * @param {Object} [value]
 	 */
-	init(items, value) {
-		this.createLookup(items)
+	init(value) {
+		// this.createLookup(items)
 		if (value) {
 			this.ensureVisible(value)
 			this.moveToValue(value)
@@ -45,9 +41,14 @@ export class NestedController extends ListController {
 		})
 	}
 
+	/**
+	 * Mark parents as expanded so that item is visible
+	 * @param {*} value
+	 * @returns
+	 */
 	ensureVisible(value) {
-		const result = this.lookup.entries().find((entry) => equals(entry[1], value))
-		if (!Array.isArray(result)) return false
+		const result = this.lookup.entries().find((entry) => equals(entry[1].value, value))
+		// console.log(result)
 		const path = getPathFromKey(result[0])
 
 		for (let i = 1; i < path.length; i++) {
@@ -57,30 +58,51 @@ export class NestedController extends ListController {
 		return true
 	}
 
+	/**
+	 * Toggle expansion of item
+	 * @param {*} value
+	 * @returns
+	 */
 	toggleExpansion(key) {
 		if (!this.lookup.has(key)) return false
-		const item = this.lookup.get(key)
-		const fields = this.fieldsFor(key)
-		item[fields.expanded] = !item[this.fields.expanded]
+		const proxy = this.lookup.get(key)
+		proxy.expanded = !proxy.expanded
+		// const item = this.lookup.get(key)
+		// const fields = this.fieldsFor(key)
+		// item[fields.expanded] = !item[this.fields.expanded]
 		return true
 	}
 
+	/**
+	 * Expand item
+	 * @param {*} value
+	 * @returns
+	 */
 	expand(key) {
 		const actualKey = key ?? this.focusedKey
 		if (!this.lookup.has(actualKey)) return false
-		const item = this.lookup.get(actualKey)
-		const fields = this.fieldsFor(actualKey)
-		item[fields.expanded] = true
+		const proxy = this.lookup.get(actualKey)
+		proxy.expanded = true
+		// const item = this.lookup.get(actualKey)
+		// const fields = this.fieldsFor(actualKey)
+		// item[fields.expanded] = true
 
 		return true
 	}
 
+	/**
+	 * Collapse item
+	 * @param {*} value
+	 * @returns
+	 */
 	collapse(key) {
 		const actualKey = key ?? this.focusedKey
 		if (!this.lookup.has(actualKey)) return false
-		const item = this.lookup.get(actualKey)
-		const fields = this.fieldsFor(actualKey)
-		item[fields.expanded] = false
+		// const item = this.lookup.get(actualKey)
+		// const fields = this.fieldsFor(actualKey)
+		// item[fields.expanded] = false
+		const proxy = this.lookup.get(actualKey)
+		proxy.expanded = false
 		return true
 	}
 

package/src/proxy.svelte.js

@@ -2,12 +2,14 @@ import { defaultFields } from '@rokkit/core'
 import { isNil, has } from 'ramda'
 
 export class Proxy {
-	#value = $state({})
-	#fields = $state(defaultFields)
+	#original = null
+	#value = null
+	#fields = null
 
 	constructor(value, fields) {
-		this.#value = typeof value === 'object' ? value : { text: value }
 		this.fields = fields
+		this.#original = value
+		this.#value = typeof value === 'object' ? value : { [this.fields.text]: value }
 	}
 
 	get fields() {
@@ -18,7 +20,7 @@ export class Proxy {
 	}
 
 	get value() {
-		return this.#value
+		return typeof this.#original === 'object' ? this.#value : this.#original
 	}
 
 	set value(value) {
@@ -34,6 +36,7 @@ export class Proxy {
 			})
 		} else {
 			this.#value.text = value
+			this.#original = value
 		}
 	}
 
@@ -41,10 +44,11 @@ export class Proxy {
 	 * Gets a mapped attribute from the original item
 	 *
 	 * @param {string} fieldName - Name of the field to get
+	 * @param {any} defaultValue - Default value to return if not found
 	 * @returns {any|null} - The attribute value or null if not found
 	 */
-	get(fieldName) {
-		return this.has(fieldName) ? this.value[this.fields[fieldName]] : null
+	get(fieldName, defaultValue = null) {
+		return this.has(fieldName) ? this.#value[this.fields[fieldName]] : defaultValue
 	}
 
 	/**
@@ -54,6 +58,27 @@ export class Proxy {
 	 */
 	has(fieldName) {
 		const mappedField = this.fields[fieldName]
-		return !isNil(mappedField) && has(mappedField, this.value)
+		return !isNil(mappedField) && has(mappedField, this.#value)
+	}
+
+	/**
+	 * Identifies if the item has children
+	 */
+	get hasChildren() {
+		return (
+			typeof this.#original === 'object' &&
+			Array.isArray(this.#value[this.fields.children]) &&
+			this.#value[this.fields.children].length > 0
+		)
+	}
+
+	get expanded() {
+		return this.has('expanded') ? this.#value[this.fields.expanded] : false
+	}
+
+	set expanded(value) {
+		if (typeof this.#original === 'object') {
+			this.#value[this.fields.expanded] = Boolean(value)
+		}
 	}
 }

package/src/traversal.svelte.js

@@ -0,0 +1,137 @@
+/**
+ * Handles navigation through a flattened data structure
+ */
+export class Traversal {
+	#dataProvider
+	#currentKey = $state(null)
+	#currentIndex = $derived(this.getCurrentIndex())
+
+	/**
+	 * @param {object} dataProvider - Data provider component
+	 */
+	constructor(dataProvider) {
+		this.#dataProvider = dataProvider
+	}
+
+	/**
+	 * Gets the current focused key
+	 * @returns {string|null} The current key or null if none selected
+	 */
+	get currentKey() {
+		return this.#currentKey
+	}
+
+	/**
+	 * Gets the current focused index
+	 * @returns {number} The current index or -1 if none selected
+	 */
+	get currentIndex() {
+		return this.#currentIndex
+	}
+
+	/**
+	 * Gets the currently focused item
+	 * @returns {object|null} The focused item or null
+	 */
+	get focused() {
+		return this.#currentKey ? this.#dataProvider.getItemByKey(this.#currentKey) : null
+	}
+
+	/**
+	 * Calculates the current index based on the current key
+	 * @private
+	 * @returns {number} The current index or -1 if not found
+	 */
+	getCurrentIndex() {
+		if (!this.#currentKey) return -1
+
+		const index = this.#dataProvider.getIndexForKey(this.#currentKey)
+		return index !== undefined ? index : -1
+	}
+
+	/**
+	 * Focuses on an item by its key
+	 * @param {string} key - Key of the item to focus
+	 * @returns {boolean} True if focus changed, false otherwise
+	 */
+	moveToKey(key) {
+		if (!key || !this.#dataProvider.lookup.has(key)) return false
+		if (this.#currentKey === key) return false
+
+		this.#currentKey = key
+		return true
+	}
+
+	/**
+	 * Focuses on an item by its index in the flattened list
+	 * @param {number} index - Index of the item to focus
+	 * @returns {boolean} True if focus changed, false otherwise
+	 */
+	moveToIndex(index) {
+		const nodes = this.#dataProvider.nodes
+
+		if (index < 0 || index >= nodes.length) return false
+		if (this.#currentIndex === index) return false
+
+		this.#currentKey = nodes[index].key
+		return true
+	}
+
+	/**
+	 * Focuses on an item by finding its value in the data
+	 * @param {*} value - Value to find and focus
+	 * @returns {boolean} True if found and focused, false otherwise
+	 */
+	moveToValue(value) {
+		if (!value) {
+			this.#currentKey = null
+			return true
+		}
+
+		const key = this.#dataProvider.getKeyForValue(value)
+		if (!key) return false
+
+		return this.moveToKey(key)
+	}
+
+	/**
+	 * Moves focus to the previous visible item
+	 * @returns {boolean} True if moved, false if at the beginning
+	 */
+	movePrev() {
+		if (this.#currentIndex > 0) {
+			return this.moveToIndex(this.#currentIndex - 1)
+		} else if (this.#currentIndex < 0 && this.#dataProvider.nodes.length > 0) {
+			return this.moveLast() // If not focused, go to last item
+		}
+		return false
+	}
+
+	/**
+	 * Moves focus to the next visible item
+	 * @returns {boolean} True if moved, false if at the end
+	 */
+	moveNext() {
+		if (this.#currentIndex < this.#dataProvider.nodes.length - 1) {
+			return this.moveToIndex(this.#currentIndex + 1)
+		}
+		return false
+	}
+
+	/**
+	 * Moves focus to the first item
+	 * @returns {boolean} True if moved, false otherwise
+	 */
+	moveFirst() {
+		return this.#dataProvider.nodes.length > 0 ? this.moveToIndex(0) : false
+	}
+
+	/**
+	 * Moves focus to the last item
+	 * @returns {boolean} True if moved, false otherwise
+	 */
+	moveLast() {
+		const lastIndex = this.#dataProvider.nodes.length - 1
+		return lastIndex >= 0 ? this.moveToIndex(lastIndex) : false
+	}
+}

package/src/base-proxy.svelte.js

@@ -1,243 +0,0 @@
-import { defaultFields } from '@rokkit/core'
-
-/**
- * Base class for all proxy models that provides a common interface
- * for navigation and selection operations.
- *
- * @abstract
- */
-export class BaseProxy {
-	/** @type {any[]} Original data array */
-	data = $state(null)
-	/** @type {NodeProxy|null} Currently focused node */
-	nodes = $state([])
-	/** @type {NodeProxy[]} Flattened array of all visible nodes */
-	visibleNodes = $state([])
-
-	/** @type {NodeProxy|null} Currently focused node */
-	currentNode = $state(null)
-	/** @type {Object|null} Currently focused node */
-	value = $state(null)
-	/** @type {Map<string, NodeProxy>} Map of selected nodes by id */
-	selectedNodes = $state(new Map())
-
-	/** @type {Object} Field mappings */
-	fields
-
-	/** @type {Object} Configuration options */
-	options = {
-		multiSelect: false,
-		keyboardNavigation: true
-	}
-
-	/**
-	 * Creates a new proxy instance
-	 *
-	 * @param {any[]} data - Original data
-	 * @param {Object} fields - Field mappings
-	 * @param {Object} options - Configuration options
-	 */
-	constructor(data, value, fields = {}, options = {}) {
-		this.fields = { ...defaultFields, ...fields }
-		this.options = { ...this.options, ...options }
-		this.value = value
-
-		this.update(data)
-	}
-
-	/**
-	 * Updates the proxy with new data
-	 *
-	 * @param {any} data - New data to use
-	 * @returns {BaseProxy} - This proxy for method chaining
-	 */
-	update(data) {
-		this.data = data
-		this.reset()
-		return this
-	}
-
-	/**
-	 * Resets selection state
-	 *
-	 * @returns {BaseProxy} - This proxy for method chaining
-	 */
-	reset() {
-		this.selectedNodes.clear()
-		this.currentNode = null
-		return this
-	}
-
-	/**
-	 * Move to a specific target (index, path, or item)
-	 *
-	 * @abstract
-	 * @param {number|number[]} target - Target to move to
-	 * @returns {boolean} - True if moved, false otherwise
-	 */
-	moveTo() {
-		throw new Error('moveTo() must be implemented by subclass')
-	}
-
-	/**
-	 * Move to the next item
-	 *
-	 * @abstract
-	 * @returns {boolean} - True if moved, false otherwise
-	 */
-	moveNext() {
-		throw new Error('moveNext() must be implemented by subclass')
-	}
-
-	/**
-	 * Move to the previous item
-	 *
-	 * @abstract
-	 * @returns {boolean} - True if moved, false otherwise
-	 */
-	movePrev() {
-		throw new Error('movePrev() must be implemented by subclass')
-	}
-
-	/**
-	 * Expand the current node
-	 *
-	 * @returns {boolean} - True if expanded, false otherwise
-	 */
-	expand() {
-		// Default implementation for flat lists (no-op)
-		return false
-	}
-
-	/**
-	 * Collapse the current node
-	 *
-	 * @returns {boolean} - True if collapsed, false otherwise
-	 */
-	collapse() {
-		// Default implementation for flat lists (no-op)
-		return false
-	}
-
-	/**
-	 * Toggle expanded/collapsed state
-	 *
-	 * @returns {boolean} - True if state changed, false otherwise
-	 */
-	toggleExpansion() {
-		// Default implementation for flat lists (no-op)
-		return false
-	}
-
-	/**
-	 * Finds a node by a custom condition
-	 *
-	 * @param {Function} condition - Function that returns true for matching nodes
-	 * @returns {NodeProxy|null} - The found node or null
-	 */
-	find(condition) {
-		let result = null
-		for (let i = 0; i < this.nodes.length; i++) {
-			result = this.nodes[i].find(condition)
-			if (result) return result
-		}
-		return null
-	}
-
-	/**
-	 * Finds the path index by a custom condition
-	 *
-	 * @param {Function} condition - Function that returns true for matching nodes
-	 * @returns {number[]} - path index of found node or empty array
-	 */
-	findPathIndex(condition) {
-		const result = this.find(condition)
-		return result?.path ?? []
-	}
-
-	/**
-	 * Gets a node by its path
-	 *
-	 * @param {number|number[]} path - Path to the node
-	 * @returns {NodeProxy|null} - The node or null if not found
-	 */
-	getNodeByPath(path = []) {
-		path = Array.isArray(path) ? path : [path]
-
-		if (!path.length || !this.data) return null
-		return path.reduce((currentNodes, index, depth) => {
-			// If we've hit a dead end or invalid index, return null
-			if (currentNodes === null || index < 0 || index >= currentNodes.length) {
-				return null
-			}
-
-			// Get the node at the current index
-			const node = currentNodes[index]
-
-			// If we've reached the final depth, return the node
-			if (depth === path.length - 1) return node
-
-			// Otherwise, move to the next level (children)
-			return node.children
-		}, this.nodes)
-	}
-
-	/**
-	 * Selects the current node
-	 *
-	 * @param {number|number[]} [path] - The path to the node to toggle selection
-	 * @returns {boolean} - Whether the selection was successful
-	 */
-	select(path) {
-		const node = path ? this.getNodeByPath(path) : this.currentNode
-		if (!node) return false
-
-		if (!this.options.multiSelect) {
-			this.selectedNodes.forEach((node) => {
-				node.selected = false
-			})
-			this.selectedNodes.clear()
-		}
-
-		// Select the current node
-		node.selected = true
-		this.selectedNodes.set(node.id, node)
-		return true
-	}
-
-	/**
-	 * Toggles selection on the current node (for multi-select)
-	 *
-	 * @param {number|number[]} [path] - The path to the node to toggle selection
-	 * @returns {boolean} - Whether the operation was successful
-	 */
-	toggleSelection(path) {
-		const node = path ? this.getNodeByPath(path) : this.currentNode
-
-		if (!node) return false
-
-		node.selected = !node.selected
-		const nodeId = node.id
-
-		if (node.selected) {
-			this.selectedNodes.set(nodeId, node)
-		} else {
-			this.selectedNodes.delete(nodeId)
-		}
-		return true
-	}
-
-	/**
-	 * Extends selection on the current node (for multi-select)
-	 *
-	 * @param {number|number[]} [path] - The path to the node to extend selection
-	 * @returns {boolean} - Whether the operation was successful
-	 */
-	extendSelection(path) {
-		if (this.options.multiSelect) {
-			return this.toggleSelection(path)
-		} else {
-			return this.select(path)
-		}
-	}
-}