@rokkit/states 1.0.0-next.106

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@rokkit/states",
+  "version": "1.0.0-next.106",
+  "description": "Contains generic data manipulation functions that can be used in various components.",
+  "author": "Jerry Thomas <me@jerrythomas.name>",
+  "license": "MIT",
+  "main": "index.js",
+  "module": "src/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "prepublishOnly": "tsc --project tsconfig.build.json",
+    "clean": "rm -rf dist",
+    "build": "bun clean && bun prepublishOnly"
+  },
+  "files": [
+    "src/**/*.js",
+    "src/**/*.svelte"
+  ],
+  "exports": {
+    "./src": "./src",
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./src/index.js",
+      "svelte": "./src/index.js"
+    }
+  },
+  "dependencies": {
+    "@lukeed/uuid": "^2.0.1",
+    "@rokkit/core": "1.0.0-next.105",
+    "d3-array": "^3.2.4",
+    "d3-collection": "^1.0.7",
+    "ramda": "^0.30.1",
+    "svelte": "^5.10.0"
+  }
+}

package/src/constants.js

@@ -0,0 +1,31 @@
+import { noop } from '@rokkit/core'
+
+export const DEFAULT_EVENTS = {
+	move: noop,
+	select: noop,
+	expand: noop,
+	collapse: noop
+}
+
+export const VALID_DENSITIES = ['compact', 'comfortable', 'cozy']
+export const VALID_MODES = ['light', 'dark']
+/** @type {string[]} */
+export const DEFAULT_STYLES = ['rokkit', 'minimal', 'material']
+
+export const DEFAULT_VIBE_OPTIONS = {
+	allowed: DEFAULT_STYLES,
+	style: 'rokkit',
+	mode: 'dark',
+	density: 'comfortable'
+}
+
+export const DEFAULT_VIBE_PALETTE = {
+	primary: '#007bff',
+	secondary: '#6c757d',
+	success: '#28a745',
+	info: '#17a2b8',
+	warning: '#ffc107',
+	danger: '#dc3545',
+	light: '#f8f9fa',
+	dark: '#343a40'
+}

package/src/hierarchy.js

@@ -0,0 +1,34 @@
+/**
+ * @typedef {Object} HierarchyItem
+ * @property {number} depth - The depth of the item in the hierarchy.
+ * @property {Array<number>} path - The path of the item in the hierarchy.
+ * @property {any} item   - The item itself.
+ * @property {HierarchyItem} parent - The reference to the parent item.
+ */
+
+/**
+ * Converts a hierarchy of items into a flat array of objects.
+ *ß
+ * @param {Array<any>}                         items - The array of items to convert.
+ * @param {import('@rokkit/core').FieldMapper} mapping - The field mapper to use for mapping.
+ * @param {HierarchyItem}                      parent - The current path of the item.
+ * @returns {Array<Object>} - The flat array of objects.
+ */
+export function flatHierarchy(items, mapping, parent = null) {
+	const data = []
+	const path = parent?.path ?? []
+
+	items.forEach((item, index) => {
+		const props = {
+			depth: path.length,
+			path: [...path, index],
+			item,
+			parent
+		}
+
+		const children = flatHierarchy(mapping.getChildren(item), mapping, props)
+		data.push(props, ...children)
+	})
+
+	return data
+}

package/src/index.js

@@ -0,0 +1,3 @@
+export { DataWrapper } from './nested.svelte'
+export { TableWrapper } from './tabular.svelte'
+export { vibe } from './vibe.svelte'

package/src/nested.svelte.js

@@ -0,0 +1,267 @@
+import { has, equals, pick, omit } from 'ramda'
+import { SvelteMap } from 'svelte/reactivity'
+import { DEFAULT_EVENTS } from './constants'
+import { FieldMapper, getKeyFromPath } from '@rokkit/core'
+
+export class DataWrapper {
+	/* @type number[] */
+	#path = []
+	#events = {}
+	#init = false
+	#keys = null
+	#options = { multiselect: false, autoCloseSiblings: false }
+
+	items = null
+	data = $state(null)
+	value = $state(null)
+	mapping = new FieldMapper()
+	currentNode = $state(null)
+	selected = new SvelteMap()
+
+	constructor(items, mapper, value, options = {}) {
+		this.items = items
+		this.data = items
+		if (mapper) this.mapping = mapper
+
+		this.#events = { ...DEFAULT_EVENTS, ...options.events }
+		this.#options = { ...options, ...pick(['multiselect', 'autoCloseSiblings'], options) }
+		this.#keys = options.keys || null
+		this.moveToValue(value)
+	}
+
+	moveToValue(value) {
+		this.#init = true
+		this.value = value
+		this.moveTo(this.findPathToItem(value))
+		this.#expandPath(this.#path)
+
+		this.#init = false
+	}
+
+	#expandPath(path) {
+		if (!path.length) return
+		for (let i = 0; i < path.length; i++) {
+			const item = this.mapping.getItemByPath(this.data, path.slice(0, i + 1))
+			if (!this.mapping.isExpanded(item)) {
+				this.mapping.toggleExpansion(item)
+			}
+		}
+	}
+	#matchItems(a, b) {
+		if (this.#keys) {
+			return equals(pick(this.#keys, a), pick(this.#keys, b))
+		} else {
+			return equals(a, b)
+		}
+	}
+	/**
+	 * Finds an item in a tree structure and returns the path as array of indices
+	 * @param {*} value - The value to find
+	 * @param {number[]} parent - The current path being explored
+	 * @returns {number[]|null} - Array of indices representing path to item, or null if not found
+	 */
+	findPathToItem(value, parent = []) {
+		const children = this.mapping.getChildrenByPath(this.data, parent)
+		// Direct child check
+		const directIndex = children.findIndex((item) => this.#matchItems(item, value))
+		if (directIndex !== -1) {
+			return [...parent, directIndex]
+		}
+
+		// Recursive search in children
+		return children.reduce((path, _, index) => {
+			if (path.length > 0) return path
+			if (!this.mapping.hasChildren(children[index])) return []
+
+			return this.findPathToItem(value, [...parent, index])
+		}, [])
+	}
+
+	#getLastVisibleDescendant(node, nodePath) {
+		if (!this.mapping.hasChildren(node) || !this.mapping.isExpanded(node)) {
+			return { node, path: nodePath }
+		}
+
+		const children = this.mapping.getChildren(node)
+		if (children.length === 0) {
+			return { node, path: nodePath }
+		}
+
+		const lastChildIndex = children.length - 1
+		const lastChild = children[lastChildIndex]
+		return this.#getLastVisibleDescendant(lastChild, [...nodePath, lastChildIndex])
+	}
+
+	#getPreviousSiblingPath() {
+		const currentIndex = this.#path[this.#path.length - 1]
+		const prevSiblingPath = [...this.#path.slice(0, -1), currentIndex - 1]
+		const prevSibling = this.mapping.getItemByPath(this.data, prevSiblingPath)
+
+		if (this.mapping.isExpanded(prevSibling)) {
+			const { path } = this.#getLastVisibleDescendant(prevSibling, prevSiblingPath)
+			return path
+		} else {
+			return prevSiblingPath
+		}
+	}
+
+	#getNextSiblingPath(inputPath) {
+		const parentPath = inputPath.slice(0, -1)
+		const currentIndex = Number(inputPath[inputPath.length - 1])
+
+		const siblings = this.mapping.getChildrenByPath(this.data, parentPath)
+		if (currentIndex < siblings.length - 1) {
+			return [...parentPath, currentIndex + 1]
+		} else if (parentPath.length > 0) {
+			return this.#getNextSiblingPath(parentPath)
+		}
+		return null
+	}
+
+	emit(type, data) {
+		if (!this.#init && has(type, this.#events)) this.#events[type](data)
+	}
+
+	moveTo(path) {
+		if (!path) return
+		const currentPath = Array.isArray(path) ? path : [path]
+
+		if (equals(currentPath, this.#path)) return
+
+		this.#path = currentPath
+		if (currentPath.length === 0) {
+			this.currentNode = null
+		} else {
+			this.currentNode = this.mapping.getItemByPath(this.data, currentPath)
+			this.emit('move', { path: this.#path, node: this.currentNode })
+		}
+	}
+	movePrev() {
+		let currentPath = [0]
+		if (this.#path.length === 0) this.moveTo([0])
+
+		// Return false if at root level first item
+		if (this.#path.length === 1 && this.#path[0] === 0) {
+			return
+		}
+
+		// Get previous sibling index
+		const currentIndex = this.#path[this.#path.length - 1]
+		if (currentIndex > 0) {
+			// Has previous sibling
+			currentPath = this.#getPreviousSiblingPath()
+		} else {
+			// Move to parent
+			currentPath = this.#path.slice(0, -1)
+		}
+		this.moveTo(currentPath)
+	}
+
+	moveNext() {
+		if (this.#path.length === 0) {
+			this.moveTo([0])
+			return
+		}
+
+		const currentNode = this.currentNode
+
+		// If current node is expanded and has children, move to first child
+		if (this.mapping.isExpanded(currentNode) && this.mapping.hasChildren(currentNode)) {
+			this.moveTo([...this.#path, 0])
+			return
+		}
+
+		// Try to move to next sibling
+		const nextSiblingPath = this.#getNextSiblingPath(this.#path)
+		if (nextSiblingPath) {
+			this.moveTo(nextSiblingPath)
+			return
+		}
+	}
+
+	#collapseParent() {
+		this.moveTo(this.#path.slice(0, -1))
+		if (this.mapping.isExpanded(this.currentNode)) {
+			this.toggleExpansion()
+		}
+	}
+
+	collapse() {
+		// if not expanded child move to parent?
+		if (this.mapping.isExpanded(this.currentNode)) {
+			this.toggleExpansion()
+		} else if (this.#path.length > 1) {
+			this.#collapseParent()
+		}
+	}
+
+	expand() {
+		if (this.mapping.isExpanded(this.currentNode)) return
+		this.toggleExpansion()
+	}
+
+	collapseSiblings() {
+		if (!this.#options.autoCloseSiblings || !this.mapping.isExpanded(this.currentNode)) return
+
+		const parentPath = this.#path.slice(0, -1)
+		const siblings = this.mapping.getChildrenByPath(this.data, parentPath)
+		const currentIndex = this.#path[this.#path.length - 1]
+
+		siblings.forEach((sibling, index) => {
+			if (currentIndex !== index && this.mapping.isExpanded(sibling)) {
+				this.mapping.toggleExpansion(sibling)
+			}
+		})
+	}
+
+	toggleExpansion() {
+		if (!this.currentNode || !this.mapping.hasChildren(this.currentNode)) return
+
+		const eventType = this.mapping.isExpanded(this.currentNode) ? 'collapse' : 'expand'
+		this.mapping.toggleExpansion(this.currentNode)
+		this.collapseSiblings()
+		this.emit(eventType, { path: this.#path, node: this.currentNode })
+	}
+
+	select(path = null) {
+		this.moveTo(path)
+
+		if (this.currentNode) {
+			this.value = this.mapping.getItemByPath(this.data, this.#path)
+			this.selected.clear()
+			this.selected.set(getKeyFromPath(this.#path), this.currentNode)
+			this.emit('select', {
+				path: this.#path,
+				node: this.currentNode,
+				selected: this.selected
+			})
+		}
+	}
+
+	#toggleSelection() {
+		if (!this.currentNode) return
+
+		const isSelected = this.selected.has(getKeyFromPath(this.#path))
+
+		if (isSelected) {
+			this.selected.delete(getKeyFromPath(this.#path))
+		} else {
+			this.selected.set(getKeyFromPath(this.#path), this.currentNode)
+		}
+
+		this.emit('select', {
+			path: this.#path,
+			node: this.currentNode,
+			selected: this.selected
+		})
+	}
+
+	extendSelection(path = null) {
+		this.moveTo(path)
+		if (this.#options.multiselect) {
+			this.#toggleSelection()
+		} else {
+			this.select()
+		}
+	}
+}

package/src/node.js

@@ -0,0 +1,64 @@
+export class Node {
+	#original
+	#state
+	#mapper
+	#children
+
+	constructor(data, mapper) {
+		this.#original = data
+		this.#state = {}
+		this.#mapper = mapper
+
+		// Initialize children if they exist
+		if (this.#mapper.hasChildren(data)) {
+			this.#children = this.#mapper.getChildren(data).map((child) => new Node(child, mapper))
+		}
+
+		// Create getters/setters for all properties except children
+		Object.keys(data).forEach((key) => {
+			if (key !== this.#mapper.fields.children) {
+				Object.defineProperty(this, key, {
+					get: () => this.#state[key] ?? this.#original[key],
+					set: (value) => {
+						this.#original[key] = value
+						this.#state[key] = value
+					},
+					enumerable: true
+				})
+			}
+		})
+	}
+
+	get children() {
+		return this.#children ?? []
+	}
+
+	get original() {
+		return this.#original
+	}
+
+	addChild(data) {
+		if (!this.#mapper.hasChildren(this.#original)) {
+			this.#original[this.#mapper.fields.children] = []
+			this.#children = []
+		}
+
+		const newNode = new Node(data, this.#mapper)
+		this.#original[this.#mapper.fields.children].push(data)
+		this.#children.push(newNode)
+
+		return newNode
+	}
+
+	removeChild(node) {
+		const originalChildren = this.#original[this.#mapper.fields.children]
+		const index = originalChildren.findIndex((child) => child === node.original)
+
+		if (index !== -1) {
+			originalChildren.splice(index, 1)
+			this.#children.splice(index, 1)
+			return true
+		}
+		return false
+	}
+}

package/src/tabular.svelte.js

@@ -0,0 +1,8 @@
+export class TableWrapper {
+	data = null
+	headers = $state([])
+
+	constructor(items) {
+		this.data = items
+	}
+}

package/src/tree-filter.svelte.js

@@ -0,0 +1,33 @@
+import { Node } from './node'
+
+/**
+ * Filters a tree structure based on a predicate
+ * @param {Array} items - The tree data
+ * @param {Function} predicate - Filter function that returns boolean
+ * @param {FieldMapper} mapper - FieldMapper instance
+ * @returns {Array} Filtered tree
+ */
+export function filterTree(nodes, predicate, mapper) {
+	const filterNode = (node) => {
+		// If node matches predicate, include it and all its children
+		if (predicate(node)) {
+			return new Node(node.original, mapper)
+		}
+
+		// If node has children, check them
+		if (node.children.length > 0) {
+			const filteredChildren = node.children.map((child) => filterNode(child)).filter(Boolean)
+
+			if (filteredChildren.length > 0) {
+				// Create new node with only matching children
+				const filteredData = { ...node.original }
+				filteredData[mapper.fields.children] = filteredChildren.map((n) => n.original)
+				return new Node(filteredData, mapper)
+			}
+		}
+
+		return null
+	}
+
+	return nodes.map((node) => filterNode(node)).filter(Boolean)
+}

package/src/vibe.svelte.js

@@ -0,0 +1,159 @@
+/** @typedef {'light' | 'dark'} ThemeMode */
+/** @typedef {'cozy' | 'compact' | 'comfortable'} Density */
+
+import { defaultColors, defaultThemeMapping, themeRules } from '@rokkit/core'
+import { DEFAULT_STYLES, VALID_DENSITIES, VALID_MODES } from './constants'
+import { has } from 'ramda'
+
+/**
+ * Transforms theme rules array into an object grouped by mode
+ * @param {Array<[string, Object.<string, string>]>} themeRules
+ * @returns {Object.<string, Object.<string, string>>}
+ */
+function groupThemeRulesByMode(themeRules) {
+	return themeRules.reduce((acc, [name, variables]) => {
+		const mode = name.includes('light') ? 'light' : 'dark'
+		return { ...acc, [mode]: variables }
+	}, {})
+}
+
+/**
+ * Checks if a value is allowed based on a list of allowed values and the current value
+ * @param {string} value
+ * @param {string[]} allowed
+ * @param {string} current
+ * @returns
+ */
+function isAllowedValue(value, allowed, current) {
+	return allowed.includes(value) && value !== current
+}
+
+/**
+ * Vibe - Theme management
+ */
+class Vibe {
+	#allowedStyles = $state(DEFAULT_STYLES)
+	#mode = $state('dark')
+	#style = $state('rokkit')
+	#colors = $state(defaultColors)
+	#density = $state('comfortable')
+	#colorMap = $state(defaultThemeMapping)
+	#palette = $derived.by(() => {
+		const grouped = groupThemeRulesByMode(themeRules(this.#style, this.#colorMap, this.#colors))
+		return grouped[this.#mode]
+	})
+	#hasChanged = false
+
+	/**
+	 * Private constructor to enforce singleton pattern
+	 * @param {VibeOptions} [options={}]
+	 */
+	constructor(options = {}) {
+		this.mode = options.mode
+		this.style = options.style
+		this.density = options.density
+		this.colorMap = options.colorMap
+		this.colors = options.colors
+	}
+
+	set allowedStyles(input) {
+		const styles = (Array.isArray(input) ? input : [input]).filter(Boolean)
+		if (styles.length > 0) {
+			this.#allowedStyles = styles
+		}
+	}
+
+	set colorMap(value) {
+		if (value) {
+			const missing = Object.values(value).filter((key) => !has(key, this.#colors))
+			if (missing.length > 0) {
+				throw new Error(`Did you forget to define "${missing.join(', ')}"?`)
+			}
+			this.#colorMap = { ...defaultThemeMapping, ...value }
+		}
+	}
+
+	set colors(value) {
+		if (value) {
+			this.#colors = { ...defaultColors, ...value }
+		}
+	}
+
+	get style() {
+		return this.#style
+	}
+
+	set style(value) {
+		if (isAllowedValue(value, this.#allowedStyles, this.#style)) {
+			this.#style = value
+		}
+	}
+
+	get mode() {
+		return this.#mode
+	}
+
+	set mode(value) {
+		if (isAllowedValue(value, VALID_MODES, this.#mode)) {
+			this.#mode = value
+		}
+	}
+
+	get density() {
+		return this.#density
+	}
+
+	set density(value) {
+		if (isAllowedValue(value, VALID_DENSITIES, this.#density)) {
+			this.#density = value
+		}
+	}
+
+	get palette() {
+		return this.#palette
+	}
+
+	/**
+	 * Load theme from storage
+	 * @param {string} key
+	 */
+	load(key) {
+		try {
+			const stored = localStorage.getItem(key)
+			if (stored) {
+				this.update(JSON.parse(stored))
+			}
+		} catch (e) {
+			// eslint-disable-next-line no-console
+			console.warn(`Failed to load theme from storage for key "${key}"`, e.message)
+		}
+	}
+
+	/**
+	 * Save current theme to storage
+	 * @param {string} key
+	 */
+	save(key) {
+		if (!key) throw new Error('Key is required')
+
+		try {
+			const config = { style: this.#style, mode: this.#mode, density: this.#density }
+			localStorage.setItem(key, JSON.stringify(config))
+		} catch (e) {
+			// eslint-disable-next-line no-console
+			console.warn(`Failed to save theme to storage for key "${key}"`, e.message)
+		}
+	}
+
+	/**
+	 * Update theme with new values
+	 * @param {Partial<Theme>} value
+	 */
+	update(value) {
+		this.style = value.style
+		this.mode = value.mode
+		this.density = value.density
+	}
+}
+
+export const vibe = new Vibe()