@rokkit/core 1.0.0-next.104 → 1.0.0-next.106

package/dist/calendar.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Get the days in the month.
+ *
+ * @param {Date}    value
+ * @param {Array}   holidays
+ * @param {boolean} fixed
+ * @returns {import('./types').CalendarDay[]}
+ */
+export function getCalendarDays(value: Date, holidays?: any[], fixed?: boolean): import("./types").CalendarDay[];
+export const weekdays: string[];

package/dist/connector.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Constructs an array of line types for tree visualization
+ * @param {boolean} hasChildren - Whether the node has children
+ * @param {import('./types').LineType[]} parentTypes - Types from parent nodes
+ * @param {import('./types').LineType} position - Current position type
+ * @returns {import('./types').LineType[]} Array of line types
+ */
+export function getLineTypes(hasChildren?: boolean, parentTypes?: import("./types").LineType[], position?: import("./types").LineType): import("./types").LineType[];

package/dist/events.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Creates an emitter object from the given properties.
+ *
+ * - Filters attributes that start with 'on' and are functions,
+ * - Returns an object with keys that are the event names (without the 'on' prefix)
+ * - If a default event is not present in the props, it will be set to a no-op function.
+ *
+ * @param {Object}        props    - The properties object to filter.
+ * @param {Array<string>} defaults - An array of default events.
+ * @returns {import('./types.js').EventHandlers} The emitter object.
+ */
+export function createEmitter(props: Object, defaults?: Array<string>): import("./types.js").EventHandlers;

package/dist/field-mapper.d.ts

@@ -1,20 +1,62 @@
 export class FieldMapper {
-    constructor(fields?: any, using?: {});
-    _fields: {};
-    _using: {};
-    set fields(fields: {});
-    get fields(): {};
-    set using(using: {});
-    get using(): {};
-    getComponent(value: any): import("svelte").SvelteComponent<Record<string, any>, any, any>;
-    getIcon(value: any): string;
-    getValue(node: any): any;
-    getText(node: any): string;
-    getAttribute(node: any, attr: any): any;
-    getFormattedText(node: any, formatter: any): Function;
-    hasChildren(item: any): boolean;
-    isExpanded(item: any): boolean;
+    constructor(fields?: any, componentMap?: {});
+    hasIcon: ((obj: unknown) => obj is {
+        [x: string]: unknown;
+    }) | undefined;
+    hasImage: ((obj: unknown) => obj is {
+        [x: string]: unknown;
+    }) | undefined;
+    hasText: ((obj: unknown) => obj is {
+        [x: string]: unknown;
+    }) | undefined;
+    hasValue: ((obj: unknown) => obj is {
+        [x: string]: unknown;
+    }) | undefined;
+    hasLabel: ((obj: unknown) => obj is {
+        [x: string]: unknown;
+    }) | undefined;
+    hasComponent: ((obj: unknown) => obj is {
+        [x: string]: unknown;
+    }) | undefined;
+    hasCurrency: ((obj: unknown) => obj is {
+        [x: string]: unknown;
+    }) | undefined;
+    withPrefix: ((x: any) => string) | undefined;
+    excludeFlags: (<U extends Partial<Record<any, any>>>(obj: any extends keyof U ? U : never) => any extends keyof U ? Omit<U, any> : never) | undefined;
+    set fields(fields: any);
+    get fields(): any;
+    set componentMap(components: {});
+    get componentMap(): {};
+    getComponent(value: any): any;
+    getIcon(value: any): string | null;
+    getImage(value: any): any;
+    getValue(value: any): any;
+    getText(value: any): any;
+    getLabel(value: any): any;
+    getAttribute(value: any, attr: any): any;
+    getFormattedText(value: any, formatter: any): any;
+    hasChildren(item: any): item is never;
+    isExpanded(item: any): false;
+    isHidden(item: any): unknown;
     isNested(items: any): boolean;
-    hasImage(item: any): any;
-    hasIcon(item: any): any;
+    toggleVisibility(items: any, visible: any): void;
+    toggleExpansion(item: any): void;
+    getChildren(item: any): never[];
+    /**
+     * Finds children by an index path
+     *
+     * @param {Array<Object>} items
+     * @param {Array<number>} path
+     * @returns {Array<Object>}
+     */
+    getChildrenByPath(items: Array<Object>, path?: Array<number>): Array<Object>;
+    /**
+     * Finds an item by an index path
+     *
+     * @param {Array<Object>} items
+     * @param {Array<number>} path
+     * @returns {Object|null}
+     */
+    getItemByPath(items: Array<Object>, path?: Array<number>): Object | null;
+    #private;
 }

package/dist/index.d.ts

@@ -3,4 +3,10 @@ export * from "./constants.js";
 export * from "./utils.js";
 export * from "./nested.js";
 export * from "./string.js";
+export * from "./theme.js";
 export { FieldMapper } from "./field-mapper.js";
+export { createEmitter } from "./events.js";
+export { getLineTypes } from "./connector.js";
+export { generateTicks } from "./ticks.js";
+export { getItemAtIndex, getIndexForItem } from "./mapped-items.js";
+export { weekdays, getCalendarDays } from "./calendar.js";

package/dist/mapped-items.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Get an item at a specific index
+ * @param {Array<any>} items
+ * @param {any} index
+ * @returns
+ */
+export function getItemAtIndex(items: Array<any>, index: any): any;
+/**
+ *  Get the index for an item in an array
+ * @param {Array<any} items
+ * @param {any} item
+ * @returns
+ */
+export function getIndexForItem(items: Array<any>, item: any): number;

package/dist/string.d.ts

@@ -26,7 +26,7 @@ export function toHyphenCase(text: string): string;
  * @param {String} b
  * @returns
  */
-export function compareStrings(a: string, b: string): 0 | 1 | -1;
+export function compareStrings(a: string, b: string): 1 | 0 | -1;
 /**
  * Sort by splitting hyphen separated strings while keeping strings with same number of parts together
  *

package/dist/theme.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Generate shades for a color using css varuable
+ *
+ * @param {string} name
+ * @param {string} modifier
+ * @returns
+ */
+export function shadesOf(name: string, modifier?: string): {
+    DEFAULT: any;
+    base: any;
+    inset: any;
+    subtle: any;
+    muted: any;
+    raised: any;
+    elevated: any;
+    floating: any;
+    contrast: any;
+    overlay: any;
+};
+/**
+ * Generate shades for a color using css varuable
+ *
+ * @param {string} name
+ * @param {string} modifier
+ * @returns {object}
+ */
+export function stateColors(name: string, modifier?: string): object;
+/**
+ *
+ * @param {string} modifier
+ * @returns
+ */
+export function themeColors(modifier?: string): {};
+/**
+ * Generates contrast colors for light and dark modes based on a given palette. Each color variant in the
+ * palette is mapped to either a light or dark contrast color depending on the shade's value.
+ *
+ * @param {string} [light='#ffffff'] - The default light color used when the shade is >= 500 in light mode or <= 500 in dark mode.
+ * @param {string} [dark='#000000'] - The default dark color used when the shade is < 500 in light mode or > 500 in dark mode.
+ * @param {Array<string>} [palette=defaultPalette] - An array of color variant names to generate contrast colors for.
+ * @returns {Array<Object>} An array containing contrast color rules organized by light and dark modes for each variant in the palette.
+ */
+export function contrastColors(light?: string, dark?: string, palette?: Array<string>): Array<Object>;
+/**
+ * Constructs and returns the light and dark theme variants based on provided color mapping and color definitions.
+ *
+ * @param {string} name                          - The base name for the theme, defaults to 'rokkit' if not provided.
+ * @param {Object} [mapping=defaultThemeMapping] - An object mapping variant names to color property names.
+ * @param {Object} [colors=defaultColors]        - The object containing default color definitions.
+ * @returns {Array<Array>} An array containing two arrays, one for the light theme variant and another for the dark theme.
+ */
+export function themeRules(name?: string, mapping?: Object, colors?: Object): Array<any[]>;

package/dist/ticks.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Generates an array of tick marks for a range of values.
+ *
+ * @param {number} lowerBound                            - The lower bound of the range.
+ * @param {number} upperBound                            - The upper bound of the range.
+ * @param {number} [minorTickStep=upperBound-lowerBound] - The step size for minor ticks.
+ * @param {number} [majorTickStep=1]                     - The step size for major ticks.
+ * @returns {import('./types').TickMark[]>} An array of tick mark objects.
+ */
+export function generateTicks(lowerBound: number, upperBound: number, minorTickStep?: number, majorTickStep?: number): import("./types").TickMark[];

package/dist/types.d.ts

@@ -1,5 +1,6 @@
 declare const _default: {};
 export default _default;
+export type LineType = "child" | "last" | "sibling" | "empty" | "icon";
 /**
  * An object where keys are event names and values are event handler functions.
  */

package/dist/utils.d.ts

@@ -47,3 +47,15 @@ export function iconShortcuts(icons: string[], collection: string, variants: str
  * @returns {string|number}
  */
 export function scaledPath(size: number, x: string | number): string | number;
+/**
+ * Gets a key string from path
+ * @param {string[]} path
+ * @returns {string}
+ */
+export function getKeyFromPath(path: string[]): string;
+/**
+ * Gets a path array from key string
+ * @param {string} key
+ * @returns {string[]}
+ */
+export function getPathFromKey(key: string): string[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/core",
-  "version": "1.0.0-next.104",
+  "version": "1.0.0-next.106",
   "description": "Contains core utility functions and classes that can be used in various components.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -9,6 +9,11 @@
   "publishConfig": {
     "access": "public"
   },
+  "scripts": {
+    "prepublishOnly": "tsc --project tsconfig.build.json",
+    "clean": "rm -rf dist",
+    "build": "bun clean && bun prepublishOnly"
+  },
   "files": [
     "src/**/*.js",
     "src/**/*.json",
@@ -23,10 +28,7 @@
     }
   },
   "dependencies": {
+    "date-fns": "^4.1.0",
     "ramda": "^0.30.1"
-  },
-  "scripts": {
-    "clean": "rm -rf dist",
-    "build": "pnpm clean && pnpm prepublishOnly"
   }
-}
+}

package/src/calendar.js

@@ -0,0 +1,44 @@
+import { getDay, getMonth, getYear, getDaysInMonth, format, isWeekend } from 'date-fns'
+
+export const weekdays = [
+	'Sunday',
+	'Monday',
+	'Tuesday',
+	'Wednesday',
+	'Thursday',
+	'Friday',
+	'Saturday'
+]
+
+/**
+ * Get the days in the month.
+ *
+ * @param {Date}    value
+ * @param {Array}   holidays
+ * @param {boolean} fixed
+ * @returns {import('./types').CalendarDay[]}
+ */
+export function getCalendarDays(value, holidays = [], fixed = false) {
+	const month = getMonth(value)
+	const year = getYear(value)
+	const offset = getDay(new Date(year, month, 1)) + 1
+
+	holidays = holidays.map((x) => format(new Date(x), 'yyyy-MMM-dd'))
+	let days = Array.from({ length: getDaysInMonth(value) }, (_, i) => ({
+		day: i + 1,
+		offset: i === 0 ? offset : 0,
+		date: new Date(year, month, i + 1)
+	})).map((x) => ({
+		...x,
+		text: format(x.date, 'yyyy-MMM-dd'),
+		weekend: isWeekend(x.date),
+		holiday: holidays.includes(format(x.date, 'yyyy-MMM-dd'))
+	}))
+
+	if (fixed && days[0].offset > 4) {
+		const n = 5 * 7 - days[0].offset
+		days = [...days.slice(n + 1), ...days.slice(0, n + 1)]
+	}
+
+	return days
+}

package/src/connector.js

@@ -0,0 +1,34 @@
+const LINE_TYPES = {
+	CHILD: 'child',
+	LAST: 'last',
+	SIBLING: 'sibling',
+	EMPTY: 'empty',
+	ICON: 'icon'
+}
+
+const nextType = {
+	[LINE_TYPES.CHILD]: LINE_TYPES.SIBLING,
+	[LINE_TYPES.LAST]: LINE_TYPES.EMPTY,
+	[LINE_TYPES.SIBLING]: LINE_TYPES.SIBLING,
+	[LINE_TYPES.EMPTY]: LINE_TYPES.EMPTY
+}
+
+/**
+ * Constructs an array of line types for tree visualization
+ * @param {boolean} hasChildren - Whether the node has children
+ * @param {import('./types').LineType[]} parentTypes - Types from parent nodes
+ * @param {import('./types').LineType} position - Current position type
+ * @returns {import('./types').LineType[]} Array of line types
+ */
+export function getLineTypes(hasChildren = false, parentTypes = [], position = LINE_TYPES.CHILD) {
+	return parentTypes
+		.reduce((acc, type, index) => {
+			// For all but the last parent type, convert to next type
+			if (index < parentTypes.length - 1) {
+				return [...acc, nextType[type]]
+			}
+			// For the last parent type, use the position
+			return [...acc, position]
+		}, [])
+		.concat(hasChildren ? LINE_TYPES.ICON : LINE_TYPES.EMPTY)
+}

package/src/constants.js

@@ -18,11 +18,16 @@ export const defaultFields = {
 	props: 'props',
 	target: 'target',
 	state: 'state',
-	isOpen: '_open',
-	isDeleted: '_deleted',
 	level: 'level',
 	parent: 'parent',
-	currency: 'currency'
+	currency: 'currency',
+	label: 'label',
+	/* flag fields  */
+	isSelected: '_selected',
+	isHidden: '_hidden',
+	isOpen: '_open',
+	isDeleted: '_deleted',
+	isFiltered: '_filtered'
 }
 
 export const defaultIcons = [

package/src/events.js

@@ -0,0 +1,32 @@
+import { noop } from './utils.js'
+
+/**
+ * Creates an emitter object from the given properties.
+ *
+ * - Filters attributes that start with 'on' and are functions,
+ * - Returns an object with keys that are the event names (without the 'on' prefix)
+ * - If a default event is not present in the props, it will be set to a no-op function.
+ *
+ * @param {Object}        props    - The properties object to filter.
+ * @param {Array<string>} defaults - An array of default events.
+ * @returns {import('./types.js').EventHandlers} The emitter object.
+ */
+export function createEmitter(props, defaults = []) {
+	const emit = {}
+
+	// Filter and add functions that start with 'on'
+	Object.entries(props)
+		.filter(([key, value]) => key.startsWith('on') && typeof value === 'function')
+		.forEach(([key, value]) => {
+			emit[key.slice(2)] = value
+		})
+
+	// Add default events with no-op function if not present
+	defaults.forEach((event) => {
+		if (!emit[event]) {
+			emit[event] = noop
+		}
+	})
+
+	return emit
+}

package/src/field-mapper.js

@@ -1,81 +1,190 @@
-import { defaultFields } from './constants'
-import {
-	getComponent,
-	getIcon,
-	getValue,
-	getText,
-	getAttribute,
-	getFormattedText,
-	hasChildren,
-	isExpanded
-} from './mapping'
-import { has } from 'ramda'
+import { defaultFields } from './constants.js'
+import { isNil, has, omit } from 'ramda'
+import { isObject } from './utils.js'
 
 export class FieldMapper {
-	_fields = {}
-	_using = {}
-
-	constructor(fields = defaultFields, using = {}) {
-		this.fields = fields
-		this.using = using
+	#fields = { ...defaultFields }
+	#componentMap = {}
+
+	constructor(fields = defaultFields, componentMap = {}) {
+		this.#updateFields(fields)
+		this.#updateComponentMap(componentMap)
+	}
+
+	#updateFields(fields) {
+		Object.keys(fields).forEach((key) => {
+			this.#fields[key] = fields[key]
+		})
+		this.hasIcon = has(this.#fields.icon)
+		this.hasImage = has(this.#fields.image)
+		this.hasText = has(this.#fields.text)
+		this.hasValue = has(this.#fields.value)
+		this.hasLabel = has(this.#fields.label)
+		this.hasComponent = has(this.#fields.component)
+		this.hasCurrency = has(this.#fields.currency)
+		this.withPrefix = (x) => [this.#fields.iconPrefix, x].join('-').replace(/^-+/g, '')
+		this.excludeFlags = omit([
+			this.#fields.isDeleted,
+			this.#fields.isHidden,
+			this.#fields.isSelected,
+			this.#fields.isFiltered,
+			this.#fields.isOpen
+		])
+	}
+
+	#updateComponentMap(components) {
+		if (typeof components === 'object' && components) {
+			Object.keys(components).forEach((key) => {
+				this.#componentMap[key] = components[key]
+			})
+		}
 	}
 
 	get fields() {
-		return this._fields
+		return this.#fields
 	}
 
 	set fields(fields) {
-		this._fields = { ...defaultFields, ...fields }
+		this.#updateFields(fields)
 	}
 
-	get using() {
-		return this._using
+	get componentMap() {
+		return this.#componentMap
 	}
-	set using(using) {
-		this._using = using ?? {}
+
+	set componentMap(components) {
+		this.#updateComponentMap(components)
 	}
 
 	getComponent(value) {
-		return getComponent(value, this.fields, this.using)
+		if (this.hasComponent(value))
+			return this.componentMap[value[this.fields.component]] ?? this.componentMap.default
+		return this.componentMap.default
 	}
 
 	getIcon(value) {
-		return getIcon(value, this.fields)
+		if (!this.hasIcon(value)) return null
+		const icon = value[this.fields.icon]
+		if (isObject(icon)) return this.withPrefix(icon[value[this.fields.state]])
+		return this.withPrefix(icon)
+	}
+	getImage(value) {
+		return this.getAttribute(value, 'image')
 	}
 
-	getValue(node) {
-		return getValue(node, this.fields)
+	getValue(value) {
+		if (this.hasValue(value)) {
+			return value[this.fields.value]
+		}
+		return value
 	}
 
-	getText(node) {
-		return getText(node, this.fields)
+	getText(value) {
+		if (this.hasText(value)) {
+			return value[this.fields.text]
+		}
+		return typeof value === 'object' ? null : value
 	}
 
-	getAttribute(node, attr) {
-		return getAttribute(node, attr)
+	getLabel(value) {
+		return this.getAttribute(value, 'label') ?? this.getText(value)
 	}
 
-	getFormattedText(node, formatter) {
-		return getFormattedText(node, this.fields, formatter)
+	getAttribute(value, attr) {
+		if (has(attr, this.fields)) {
+			return has(this.fields[attr], value) ? value[this.fields[attr]] : null
+		}
+		return null
+	}
+
+	getFormattedText(value, formatter) {
+		const text = this.getText(value)
+		if (isNil(text)) return ''
+
+		if (typeof formatter !== 'function') return text.toString()
+
+		if (this.hasCurrency(value)) {
+			return formatter(text, this.getAttribute(value, 'currency'))
+		}
+		return formatter(text)
 	}
 
 	hasChildren(item) {
-		return hasChildren(item, this.fields)
+		return (
+			!isNil(item) &&
+			has(this.fields.children, item) &&
+			Array.isArray(item[this.fields.children]) &&
+			item[this.fields.children].length > 0
+		)
 	}
 
 	isExpanded(item) {
-		return isExpanded(item, this.fields)
+		if (this.hasChildren(item)) {
+			return has(this.fields.isOpen, item) && item[this.fields.isOpen]
+		}
+		return false
 	}
 
-	isNested(items) {
-		return Array.isArray(items) && items.some((item) => this.hasChildren(item))
+	isHidden(item) {
+		return has(this.fields.isHidden, item) && item[this.fields.isHidden]
 	}
 
-	hasImage(item) {
-		return has(item, this.fields.image)
+	isNested(items) {
+		return Array.isArray(items) && items.some((item) => this.hasChildren(item))
 	}
 
-	hasIcon(item) {
-		return has(item, this.fields.icon)
+	toggleVisibility(items, visible) {
+		items.forEach((item) => {
+			item[this.fields.isHidden] = !visible
+			if (this.hasChildren(item)) {
+				this.toggleVisibility(item[this.fields.children], visible && item[this.fields.isOpen])
+			}
+		})
+	}
+
+	toggleExpansion(item) {
+		if (this.hasChildren(item)) {
+			item[this.fields.isOpen] = !item[this.fields.isOpen]
+			this.toggleVisibility(item[this.fields.children], item[this.fields.isOpen])
+		}
+	}
+
+	getChildren(item) {
+		return this.hasChildren(item) ? item[this.fields.children] : []
+	}
+
+	/**
+	 * Finds children by an index path
+	 *
+	 * @param {Array<Object>} items
+	 * @param {Array<number>} path
+	 * @returns {Array<Object>}
+	 */
+	getChildrenByPath(items, path = []) {
+		const result = path.reduce(
+			(children, index) => children?.[index]?.[this.fields.children],
+			items
+		)
+
+		if (result === undefined) throw new Error('Invalid path')
+		return result
+	}
+
+	/**
+	 * Finds an item by an index path
+	 *
+	 * @param {Array<Object>} items
+	 * @param {Array<number>} path
+	 * @returns {Object|null}
+	 */
+	getItemByPath(items, path = []) {
+		// skipcq: JS-W1042 default undefined is needed
+		const result = path.reduce(
+			(item, index, i) => (i === 0 ? items?.[index] : item?.[this.fields.children]?.[index]),
+			undefined
+		)
+
+		if (result === undefined) throw new Error('Invalid path')
+		return result
 	}
 }

package/src/index.js

@@ -8,4 +8,11 @@ export * from './utils.js'
 export * from './nested.js'
 // skipcq: JS-E1004 - Needed for exposing all functions
 export * from './string.js'
+// skipcq: JS-E1004 - Needed for exposing all functions
+export * from './theme.js'
 export { FieldMapper } from './field-mapper.js'
+export { getItemAtIndex, getIndexForItem } from './mapped-items.js'
+export { createEmitter } from './events.js'
+export { getLineTypes } from './connector.js'
+export { weekdays, getCalendarDays } from './calendar.js'
+export { generateTicks } from './ticks.js'

package/src/key-event-map.js

@@ -1,4 +1,4 @@
-import * as R from 'ramda'
+import { find, toPairs } from 'ramda'
 
 /**
  * Class to manage key event mappings.
@@ -26,10 +26,11 @@ export class KeyEventMap {
 	 * @returns {string|null} - The event name or null if no match is found.
 	 */
 	getEventForKey(key) {
-		const matchEvent = ([eventName, keys]) =>
+		// eslint-disable-next-line no-unused-vars
+		const matchEvent = ([_, keys]) =>
 			(Array.isArray(keys) && keys.includes(key)) || (keys instanceof RegExp && keys.test(key))
 
-		const event = R.find(matchEvent, R.toPairs(this.mapping))
+		const event = find(matchEvent, toPairs(this.mapping))
 		return event ? event[0] : null
 	}
 }

package/src/mapped-items.js

@@ -0,0 +1,22 @@
+import { equals, isNil } from 'ramda'
+
+/**
+ * Get an item at a specific index
+ * @param {Array<any>} items
+ * @param {any} index
+ * @returns
+ */
+export function getItemAtIndex(items, index) {
+	if (isNil(index)) return null
+	return index >= 0 && index < items.length ? items[index] : null
+}
+
+/**
+ *  Get the index for an item in an array
+ * @param {Array<any} items
+ * @param {any} item
+ * @returns
+ */
+export function getIndexForItem(items, item) {
+	return items.findIndex((i) => equals(i, item))
+}

package/src/theme.js

@@ -0,0 +1,205 @@
+import { defaultThemeMapping, defaultColors, syntaxColors } from './constants.js'
+import { shades, defaultPalette } from './colors/index.js'
+
+const modifiers = {
+	hsl: (value) => `hsl(${value})`,
+	rgb: (value) => `rgb(${value})`,
+	none: (value) => value
+}
+
+/**
+ * Generate shades for a color using css varuable
+ *
+ * @param {string} name
+ * @param {string} modifier
+ * @returns
+ */
+export function shadesOf(name, modifier = 'none') {
+	const fn = modifier in modifiers ? modifiers[modifier] : modifiers.none
+
+	return shades.reduce(
+		(result, shade) => ({
+			...result,
+			[shade]: fn(`var(--${name}-${shade})`)
+		}),
+		{
+			DEFAULT: fn(`var(--${name}-500)`),
+			base: fn(`var(--${name}-50)`),
+			inset: fn(`var(--${name}-100)`),
+			subtle: fn(`var(--${name}-200)`),
+			muted: fn(`var(--${name}-300)`),
+			raised: fn(`var(--${name}-400)`),
+			elevated: fn(`var(--${name}-600)`),
+			floating: fn(`var(--${name}-700)`),
+			contrast: fn(`var(--${name}-800)`),
+			overlay: fn(`var(--${name}-900)`)
+		}
+	)
+}
+
+/**
+ * Generate shades for a color using css varuable
+ *
+ * @param {string} name
+ * @param {string} modifier
+ * @returns {object}
+ */
+export function stateColors(name, modifier = 'none') {
+	const fn = modifier in modifiers ? modifiers[modifier] : modifiers.none
+	return {
+		DEFAULT: fn(`var(--${name}-500)`),
+		light: fn(`var(--${name}-200)`),
+		dark: fn(`var(--${name}-700)`)
+	}
+}
+
+/**
+ *
+ * @param {string} modifier
+ * @returns
+ */
+export function themeColors(modifier = 'none') {
+	const fn = modifier in modifiers ? modifiers[modifier] : modifiers.none
+
+	const states = ['info', 'danger', 'warning', 'success', 'error']
+	const variants = ['neutral', 'primary', 'secondary', 'accent']
+	let colors = states.reduce(
+		(acc, state) => ({ ...acc, [state]: stateColors(state, modifier) }),
+		{}
+	)
+	colors = variants.reduce(
+		(acc, variant) => ({ ...acc, [variant]: shadesOf(variant, modifier) }),
+		colors
+	)
+	colors.neutral = {
+		...colors.neutral,
+		// contrast: fn(`var(--neutral-800)`),
+		zebra: fn('var(--neutral-zebra)')
+	}
+
+	return colors
+}
+
+/**
+ * Creates an array of shade mapping objects for a given theme variant and mode.
+ * Each object represents a CSS custom property (variable) with its value set based on a provided condition.
+ *
+ * @param {string}                   variant        - The name of the theme variant (e.g., 'primary', 'secondary').
+ * @param {'light' | 'dark'}         mode           - The theme mode for which the mappings are being created.
+ * @param {function(number): string} valueCondition - A function that takes a shade value and returns the color value
+ *                                                    based on the condition appropriate for light or dark mode.
+ * @returns {{import('./types'}.ShadeMapping[]>} An array of objects, where each object contains key, value, and mode
+ *                                              properties corresponding to  a CSS custom property definition.
+ */
+function createShadeMappings(variant, mode, valueCondition) {
+	return shades.map((shade) => ({
+		key: `--on-${variant}-${shade}`,
+		value: valueCondition(shade),
+		mode
+	}))
+}
+
+/**
+ * Generates contrast colors for light and dark modes based on a given palette. Each color variant in the
+ * palette is mapped to either a light or dark contrast color depending on the shade's value.
+ *
+ * @param {string} [light='#ffffff'] - The default light color used when the shade is >= 500 in light mode or <= 500 in dark mode.
+ * @param {string} [dark='#000000'] - The default dark color used when the shade is < 500 in light mode or > 500 in dark mode.
+ * @param {Array<string>} [palette=defaultPalette] - An array of color variant names to generate contrast colors for.
+ * @returns {Array<Object>} An array containing contrast color rules organized by light and dark modes for each variant in the palette.
+ */
+export function contrastColors(light = '#ffffff', dark = '#000000', palette = defaultPalette) {
+	const colors = palette
+		.flatMap((variant) => [
+			createShadeMappings(variant, 'light', (shade) => (shade < 500 ? dark : light)),
+			createShadeMappings(variant, 'dark', (shade) => (shade > 500 ? dark : light))
+		])
+		.reduce((acc, item) => [...acc, ...item], [])
+	return colors
+}
+/**
+ * Generates color rules for a specific theme variant, for both light and dark modes.
+ *
+ * @param {string} variant - The name of the variant to generate rules for.
+ * @param {Object} colors - The object containing color definitions.
+ * @param {Object} mapping - An object that maps variant names to color property names.
+ * @returns {import('./types').ShadeMappings} An array containing the color rules for both light and dark modes.
+ */
+function generateColorRules(variant, colors, mapping) {
+	return shades.flatMap((shade, index) => [
+		{
+			key: `--${variant}-${shade}`,
+			value: colors[mapping[variant]][shade],
+			mode: 'light'
+		},
+		{
+			key: `--${variant}-${shade}`,
+			value: colors[mapping[variant]][shades[shades.length - index - 1]],
+			mode: 'dark'
+		}
+	])
+}
+
+/**
+ * Filters the rules for a specific mode and transforms them into an object mapping
+ * CSS variable names to their values.
+ *
+ * @param {Array<Object>} rules - The array of rules to filter and transform.
+ * @param {'light' | 'dark'} mode - The mode to filter by.
+ * @returns {Object} An object containing the rules specific to the provided mode.
+ */
+function filterRulesByMode(rules, mode) {
+	return rules
+		.filter((rule) => rule.mode === mode)
+		.reduce((acc, { key, value }) => ({ ...acc, [key]: value }), {})
+}
+
+/**
+ * Creates a theme variant object with a given mode, a collection of color rules, and additional colors.
+ *
+ * @param {string} name - The base name for the theme variant.
+ * @param {'light' | 'dark'} mode - The mode of the theme variant.
+ * @param {Object} colors - The object containing color rules for the theme.
+ * @param {Object} extraColors - Any additional color properties for the theme.
+ * @returns {Array} An array where the first element is the theme's name and the second element
+ * is an object containing all color rules and extra properties for the theme variant.
+ */
+function createThemeVariant(name, mode, colors, extraColors) {
+	return [
+		`${name}-mode-${mode}`,
+		{
+			...colors,
+			...extraColors,
+			'--plot-background': 'var(--neutral-200)'
+		}
+	]
+}
+
+/**
+ * Constructs and returns the light and dark theme variants based on provided color mapping and color definitions.
+ *
+ * @param {string} name                          - The base name for the theme, defaults to 'rokkit' if not provided.
+ * @param {Object} [mapping=defaultThemeMapping] - An object mapping variant names to color property names.
+ * @param {Object} [colors=defaultColors]        - The object containing default color definitions.
+ * @returns {Array<Array>} An array containing two arrays, one for the light theme variant and another for the dark theme.
+ */
+export function themeRules(name = 'rokkit', mapping = defaultThemeMapping, colors = defaultColors) {
+	mapping = { ...defaultThemeMapping, ...mapping }
+	const variants = Object.keys(mapping)
+
+	const rules = variants.reduce(
+		(acc, variant) => [
+			...acc,
+			...generateColorRules(variant, { ...defaultColors, ...colors }, mapping)
+		],
+		[]
+	)
+
+	const lightRules = filterRulesByMode(rules, 'light')
+	const darkRules = filterRulesByMode(rules, 'dark')
+
+	const lightTheme = createThemeVariant(name, 'light', lightRules, syntaxColors['one-dark'].light)
+	const darkTheme = createThemeVariant(name, 'dark', darkRules, syntaxColors['one-dark'].dark)
+
+	return [lightTheme, darkTheme]
+}

package/src/ticks.js

@@ -0,0 +1,26 @@
+/**
+ * Generates an array of tick marks for a range of values.
+ *
+ * @param {number} lowerBound                            - The lower bound of the range.
+ * @param {number} upperBound                            - The upper bound of the range.
+ * @param {number} [minorTickStep=upperBound-lowerBound] - The step size for minor ticks.
+ * @param {number} [majorTickStep=1]                     - The step size for major ticks.
+ * @returns {import('./types').TickMark[]>} An array of tick mark objects.
+ */
+export function generateTicks(
+	lowerBound,
+	upperBound,
+	minorTickStep = upperBound - lowerBound,
+	majorTickStep = 1
+) {
+	const length = 1 + Math.ceil((upperBound - lowerBound) / minorTickStep)
+	return Array.from({ length }, (_, i) => {
+		const value = i === length - 1 ? upperBound : lowerBound + minorTickStep * i
+		const major = i === 0 || i === length - 1 || i % majorTickStep === 0
+		return {
+			value,
+			label: major ? value : '',
+			major
+		}
+	})
+}

package/src/types.js

@@ -1,3 +1,7 @@
+/**
+ * @typedef {'child' | 'last' | 'sibling' | 'empty' | 'icon'} LineType
+ */
+
 /**
  * @typedef {Object.<string, Function>} EventHandlers
  * An object where keys are event names and values are event handler functions.

package/src/utils.js

@@ -83,3 +83,21 @@ export function scaledPath(size, x) {
 	if (Array.isArray(x)) return x.map((v) => scaledPath(size, v)).join(' ')
 	return typeof x === 'number' ? x * size : x
 }
+
+/**
+ * Gets a key string from path
+ * @param {string[]} path
+ * @returns {string}
+ */
+export function getKeyFromPath(path) {
+	return path.join('-')
+}
+
+/**
+ * Gets a path array from key string
+ * @param {string} key
+ * @returns {string[]}
+ */
+export function getPathFromKey(key) {
+	return key.split('-').map(Number)
+}

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2025 Jerry Thomas
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.