@rokkit/core 1.0.0-next.99 → 1.0.1

package/src/types.js

@@ -1,3 +1,12 @@
+/**
+ * @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.
+ */
+
 /**
  * Component map to be used to render the item.
  * @typedef {Object<string, import('svelte').SvelteComponent>} ComponentMap
@@ -112,4 +121,40 @@
  * @property {boolean} weekend - Indicates if the day is on the weekend.
  */
 
+/**
+ * @typedef {Object} ColorPalette
+ * @property {string} 50 - The color for the 50 shade.
+ * @property {string} 100 - The color for the 100 shade.
+ * @property {string} 200 - The color for the 200 shade.
+ * @property {string} 300 - The color for the 300 shade.
+ * @property {string} 400 - The color for the 400 shade.
+ * @property {string} 500 - The color for the 500 shade.
+ * @property {string} 600 - The color for the 600 shade.
+ * @property {string} 700 - The color for the 700 shade.
+ * @property {string} 800 - The color for the 800 shade.
+ * @property {string} 900 - The color for the 900 shade.
+ * @property {string} 950 - The color for the 950 shade.
+ */
+
+/**
+ * @typedef {Object<string,ColorPalette>} ColorCollection
+ */
+
+/**
+ * @typedef {Object} ColorMapping
+ * @property {string} [primary]   - The primary color.
+ * @property {string} [secondary] - The secondary color.
+ * @property {string} [tertiary]  - The tertiary color.
+ * @property {string} [surface]   - The surface color.
+ * @property {string} [info]      - The info color.
+ * @property {string} [success]   - The success color.
+ * @property {string} [warning]   - The warning color.
+ * @property {string} [error]     - The error color.
+ */
+
+/**
+ * @typedef {Object} ColorTheme
+ * @property {ColorMapping} [mapping] - The color mapping.
+ * @property {ColorCollection} [colors] - The color collection.
+ */
 export default {}

package/src/utils.js

@@ -1,3 +1,67 @@
+import { has, isNil } from 'ramda'
+import { DATA_IMAGE_REGEX, ITEM_SNIPPET } from './constants'
+
+let idCounter = 0
+
+/**
+ * RTL language codes (ISO 639-1)
+ * @type {string[]}
+ */
+const RTL_LANGUAGES = [
+	'ar', // Arabic
+	'he', // Hebrew
+	'fa', // Persian/Farsi
+	'ur', // Urdu
+	'yi', // Yiddish
+	'ps', // Pashto
+	'sd', // Sindhi
+	'ug', // Uyghur
+	'ku', // Kurdish (Sorani)
+	'dv' // Divehi/Maldivian
+]
+
+/**
+ * Checks dir/lang attributes of the html element for RTL
+ * @returns {'ltr' | 'rtl'}
+ */
+function dirFromHtmlElement() {
+	const htmlDir = document.documentElement.getAttribute('dir')
+	if (htmlDir === 'rtl' || htmlDir === 'ltr') return htmlDir
+
+	const lang = document.documentElement.getAttribute('lang')
+	const primaryLang = lang ? lang.split('-')[0].toLowerCase() : ''
+	return RTL_LANGUAGES.includes(primaryLang) ? 'rtl' : 'ltr'
+}
+
+/**
+ * Detects text direction based on HTML lang attribute
+ * @returns {'ltr' | 'rtl'}
+ */
+export function detectDirection() {
+	if (typeof document === 'undefined') return 'ltr'
+	return dirFromHtmlElement()
+}
+
+/**
+ * Checks if current document direction is RTL
+ * @returns {boolean}
+ */
+export function isRTL() {
+	return detectDirection() === 'rtl'
+}
+/**
+ * Finds the closest ancestor of the given element that has the given attribute.
+ *
+ * @param {HTMLElement} element
+ * @param {string} attribute
+ * @returns {HTMLElement|null}
+ */
+export function getClosestAncestorWithAttribute(element, attribute) {
+	if (!element) return null
+	if (element.getAttribute(attribute)) return element
+	return getClosestAncestorWithAttribute(element.parentElement, attribute)
+}
+
 /**
  * A function that performs no operations.
  */
@@ -10,8 +74,10 @@ export function noop() {
  *
  * @returns {string} A random id
  */
-export function id() {
-	return Math.random().toString(36).substring(2, 9)
+export function id(prefix = '') {
+	return [prefix, Math.random().toString(36).substring(2, 9), ++idCounter]
+		.filter((x) => !isNil(x) && x !== '')
+		.join('-')
 }
 
 /**
@@ -21,7 +87,7 @@ export function id() {
  * @returns {boolean}
  */
 export function isObject(val) {
-	return typeof val === 'object' && val !== null && !(val instanceof Date)
+	return typeof val === 'object' && !isNil(val) && !(val instanceof Date)
 }
 
 /**
@@ -70,3 +136,137 @@ 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 Array.isArray(path) ? path.join('-') : [path].join('-')
+}
+
+/**
+ * Gets a path array from key string
+ * @param {string} key
+ * @returns {string[]}
+ */
+export function getPathFromKey(key) {
+	return key.split('-').map(Number)
+}
+
+/**
+ * Get snippet function from an object
+ * @param {Object} obj
+ * @param {string} key
+ * @param {null|Function} defaultSnippet
+ * @returns {Function|undefined}
+ */
+export function getSnippet(obj, key, defaultSnippet = null) {
+	if (has(key, obj) && typeof obj[key] === 'function') {
+		return obj[key]
+	}
+	return defaultSnippet
+}
+
+/**
+ * Resolve which snippet to render for a proxy item.
+ *
+ * Checks proxy.snippet for a per-item named override first (e.g. item.snippet = 'highlighted').
+ * Falls back to the component-level fallback snippet name (e.g. 'itemContent' / 'groupContent').
+ * Returns null if neither is found.
+ *
+ * @param {Record<string, unknown>} snippets  - snippets passed to the component
+ * @param {{ snippet?: string | null }} proxy  - any object with an optional .snippet property
+ * @param {string} [fallback]                  - fallback snippet name; defaults to ITEM_SNIPPET ('itemContent')
+ * @returns {Function | null}
+ */
+/**
+ * @param {unknown} value
+ * @returns {Function|null}
+ */
+function asSnippet(value) {
+	return typeof value === 'function' ? value : null
+}
+
+export function resolveSnippet(snippets, proxy, fallback = ITEM_SNIPPET) {
+	const name = proxy && proxy.snippet
+	return asSnippet(name && snippets[name]) || asSnippet(snippets[fallback])
+}
+
+/**
+ * convert hex string to `{r} {g} {b}`
+ * @param {string} hex
+ * @return {string}
+ */
+export function hex2rgb(hex) {
+	const [r, g, b] = hex.match(/\w\w/g).map((x) => parseInt(x, 16))
+	return `${r},${g},${b}`
+}
+
+/**
+ * Convert a CSS color value to r,g,b for use in CSS variables.
+ * Hex values (#rrggbb) are converted to "r,g,b" for rgba() support.
+ * All other CSS color formats (oklch, hsl, named) are returned as-is.
+ * Non-string values are returned unchanged.
+ * Note: non-hex values will NOT work with UnoCSS opacity utilities like bg-primary/50.
+ *
+ * @param {unknown} value
+ * @returns {unknown}
+ */
+export function colorToRgb(value) {
+	if (typeof value === 'string' && /^#[0-9a-fA-F]{6}$/.test(value)) {
+		return hex2rgb(value)
+	}
+	return value
+}
+
+/**
+ * Checks if a string is a valid image URL
+ *
+ * @param {string} str - The string to check
+ * @returns {boolean} - Returns true if the string is an image URL
+ */
+function isImageUrl(str) {
+	// Fallback regex-based validation
+	const fallbackValidation = () => {
+		const urlRegex = /^https?:\/\/.+\.(jpg|jpeg|png|gif|bmp|webp|svg|tiff)(\?.*)?$/i
+		return urlRegex.test(str)
+	}
+
+	// Check if the string looks like a URL
+	try {
+		// Use browser-native URL constructor if available
+		if (typeof URL !== 'undefined') {
+			const url = new URL(str)
+			// Only accept HTTP/HTTPS protocols
+			if (url.protocol !== 'http:' && url.protocol !== 'https:') {
+				return false
+			}
+			// Check common image extensions
+			const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp', '.svg', '.tiff']
+			const path = url.pathname.toLowerCase()
+			return imageExtensions.some((ext) => path.endsWith(ext))
+		}
+
+		// Fallback if URL constructor is not available
+		return fallbackValidation()
+	} catch {
+		// Fallback if URL constructor fails
+		return fallbackValidation()
+	}
+}
+/**
+ * A utility function that detects if a string is an image URL or image data (base64)
+ *
+ * @param {string} str - The string to check
+ * @returns {string|null} - Returns the original string if it's an image URL or image data, otherwise null
+ */
+export function getImage(str) {
+	if (DATA_IMAGE_REGEX.test(str)) return str
+	// Check if it's a URL
+
+	if (isImageUrl(str)) return str
+
+	return null
+}

package/src/vite/icon-collections.js

@@ -0,0 +1,73 @@
+import { createRequire } from 'module'
+import { resolve, isAbsolute } from 'path'
+import { readFileSync } from 'fs'
+
+// Two require contexts: CWD (for site-specific packages like @iconify-json/*)
+// and the module's own location (for workspace packages like @rokkit/icons).
+const requireFromCwd = createRequire(resolve(process.cwd(), 'package.json'))
+const requireFromModule = createRequire(import.meta.url)
+
+function requirePackage(jsonPath) {
+	try {
+		return requireFromCwd(jsonPath)
+	} catch {
+		return requireFromModule(jsonPath)
+	}
+}
+
+/**
+ * Creates icon collection loaders for UnoCSS presetIcons from a simple config.
+ *
+ * This function transforms a map of collection names to JSON package paths
+ * into the format expected by UnoCSS's presetIcons.
+ *
+ * Supports three types of paths:
+ * - Package paths (e.g., '@rokkit/icons/ui.json') - resolved via require
+ * - Absolute paths (e.g., '/path/to/icons.json') - used directly
+ * - Relative paths (e.g., './static/icons.json') - resolved from process.cwd()
+ *
+ * @example
+ * // uno.config.js
+ * import { iconCollections } from '@rokkit/core/vite'
+ *
+ * export default defineConfig({
+ *   presets: [
+ *     presetIcons({
+ *       collections: iconCollections({
+ *         rokkit: '@rokkit/icons/ui.json',
+ *         logo: '@rokkit/icons/auth.json',
+ *         solar: '@iconify-json/solar/icons.json',
+ *         custom: './static/icons/custom.json'
+ *       })
+ *     })
+ *   ]
+ * })
+ *
+ * @param {Record<string, string>} config - Map of collection alias to JSON path
+ * @returns {Record<string, () => any>} Collections object for presetIcons
+ */
+export function iconCollections(config) {
+	if (!config || typeof config !== 'object') {
+		return {}
+	}
+
+	return Object.entries(config).reduce((acc, [alias, jsonPath]) => {
+		acc[alias] = () => {
+			// Check if it's a relative path (starts with ./ or ../)
+			if (jsonPath.startsWith('./') || jsonPath.startsWith('../')) {
+				// Resolve relative to current working directory (where the config is)
+				const absolutePath = resolve(process.cwd(), jsonPath)
+				return JSON.parse(readFileSync(absolutePath, 'utf-8'))
+			}
+
+			// Check if it's an absolute path
+			if (isAbsolute(jsonPath)) {
+				return JSON.parse(readFileSync(jsonPath, 'utf-8'))
+			}
+
+			// Otherwise treat as a package path; try CWD first (site packages), then module location
+			return requirePackage(jsonPath)
+		}
+		return acc
+	}, {})
+}

package/src/vite/index.js

@@ -0,0 +1 @@
+export { iconCollections } from './icon-collections.js'

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2022 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.

package/src/colors/index.js

@@ -1,19 +0,0 @@
-import defaultTailwindColors from './tailwind.json'
-import syntaxColorPalette from './syntax.json'
-
-export const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
-export const defaultPalette = [
-	'neutral',
-	'primary',
-	'secondary',
-	'accent',
-	'success',
-	'warning',
-	'danger',
-	'info'
-]
-
-export const syntaxColors = syntaxColorPalette
-export const defaultColors = {
-	...defaultTailwindColors
-}

package/src/mapped-list.js

@@ -1,233 +0,0 @@
-import { defaultFields } from './constants'
-import { isExpanded, hasChildren, getAttribute } from './mapping'
-import { equals } from 'ramda'
-
-/**
- * Checks if a specifc attribute of an item matches a value.
- *
- * @param {Object} item - The item.
- * @param {string} attr - The attribute to check.
- */
-function isMatch(item, attr, value) {
-	const itemValue = attr ? getAttribute(item, attr) : item
-	return equals(itemValue, value)
-}
-
-/**
- * Traverses the tree to find an item by value.
- * @param {Array} items - The items array.
- * @param {Object} fields - The fields mapping.
- * @param {any} value - The value to find.
- * @param {Array} position - The current position in the tree.
- * @returns {Object} The found item, or null if not found.
- */
-function findInChildren(item, index, fields, value, attr, position) {
-	if (hasChildren(item, fields)) {
-		return findItemByValue(value, item[fields.children], fields.fields ?? fields, attr, [
-			...position,
-			index
-		])
-	}
-	return null
-}
-/**
- * Traverses the tree to find an item by value.
- * @param {Array} items - The items array.
- * @param {Object} fields - The fields mapping.
- * @param {any} value - The value to find.
- * @param {Array} position - The current position in the tree.
- * @returns {Object} The found item, or null if not found.
- */
-export function findItemByValue(value, items, fields = defaultFields, attr = null, position = []) {
-	for (let i = 0; i < items.length; i++) {
-		if (isMatch(items[i], attr, value)) {
-			return { item: items[i], position: [...position, i], fields }
-		}
-
-		const foundInChildren = findInChildren(items[i], i, fields, value, attr, position)
-		if (foundInChildren) return foundInChildren
-	}
-
-	return null
-}
-
-/**
- * Gets an item from an items array using an index array.
- * @param {Array} indices - The index array.
- * @param {Array} items - The items array.
- * @param {Object} fields - The fields configuration.
- * @returns {Object} The item.
- */
-export function findItemByIndexArray(indices, items, fields) {
-	let item = items[indices[0]]
-	let levelFields = fields
-	for (let level = 1; level < indices.length; level++) {
-		if (hasChildren(item, levelFields)) {
-			item = item[levelFields.children][indices[level]]
-			levelFields = levelFields.fields ?? levelFields
-		} else {
-			return null
-		}
-	}
-	return { item, position: indices, fields: levelFields }
-}
-
-/**
- *
- * @param {Array<integer>} position
- * @param {Array<*>} items
- * @param {import('./types').FieldMapping} fields
- * @returns
- */
-export function findNearestItemBefore(position, items, fields) {
-	if (items.length === 0) return null
-	if (position.length === 0) return { item: items[0], position: [0], fields }
-
-	let index = position[position.length - 1]
-	let result = null
-	if (index > 0) {
-		index -= 1
-		if (position.length === 1) {
-			return findLastVisibleChild(items[index], [index], fields)
-		}
-
-		const sibling = findItemByIndexArray([...position.slice(0, -1), index], items, fields)
-		result = findLastVisibleChild(sibling.item, sibling.position, sibling.fields)
-	} else {
-		result = findItemByIndexArray(position.slice(0, -1), items, fields)
-	}
-	return result
-}
-
-/**
- * Returns the next sibling of the current item.
- *
- * @param {*} parent
- * @param {Array<integer>} position
- * @param {import('./types').FieldMapping} fields
- * @returns
- */
-export function findLastVisibleChild(parent, position, fields) {
-	if (isExpanded(parent, fields)) {
-		const children = parent[fields.children]
-		return findLastVisibleChild(
-			children[children.length - 1],
-			position.concat(children.length - 1),
-			fields.fields ?? fields
-		)
-	}
-	return { item: parent, position, fields }
-}
-
-/**
- * Returns the next item in the tree.
- * @param {Array} position - The position of the current item.
- * @param {Array} items - The items in the tree.
- * @param {Object} fields - The fields mapping.
- * @returns {Object|null} The next item or null if there is none.
- */
-export function findNearestItemAfter(position, items, fields) {
-	if (items.length === 0) return null
-	if (position.length === 0) return { item: items[0], position: [0], fields }
-
-	const current = findItemByIndexArray(position, items, fields)
-	let result = null
-	if (isExpanded(current.item, current.fields)) {
-		result = getFirstChild(current, position)
-	} else if (position.length === 1) {
-		result = getNextSiblingAtRoot(position, items, fields)
-	} else {
-		result = getNextSiblingOrAncestor(position, items, fields)
-	}
-	return result
-}
-
-/**
- * Returns the next child of the current item.
- * @param {Object} current - The current item.
- * @param {Array} position - The position of the current item.
- * @returns {Object} The next child.
- */
-function getFirstChild(current, position) {
-	return {
-		item: current.item[current.fields.children][0],
-		position: position.concat(0),
-		fields: current.fields.fields ?? current.fields
-	}
-}
-
-/**
- * Returns the next sibling of the current item at the root level.
- * @param {Array} position - The position of the current item.
- * @param {Array} items - The items in the tree.
- * @param {Object} fields - The fields mapping.
- * @returns {Object|null} The next sibling or null if there is none.
- */
-function getNextSiblingAtRoot(position, items, fields) {
-	if (position[0] < items.length - 1) {
-		return {
-			item: items[position[0] + 1],
-			position: [position[0] + 1],
-			fields
-		}
-	}
-	return null
-}
-
-/**
- * Returns the next sibling of the current item or the next item in the ancestor.
- * @param {Array} position - The position of the current item.
- * @param {Array} items - The items in the tree.
- * @param {Object} fields - The fields mapping.
- * @returns {Object|null} The next sibling or ancestor or null if there is none.
- */
-function getNextSiblingOrAncestor(position, items, fields) {
-	let index = position[position.length - 1]
-	let parent = findItemByIndexArray(position.slice(0, -1), items, fields)
-	let children = parent.item[parent.fields.children]
-	if (index < children.length - 1) {
-		index += 1
-		const sibling = findItemByIndexArray([...position.slice(0, -1), index], items, fields)
-		return { item: sibling.item, position: sibling.position, fields }
-	} else {
-		while (index === children.length - 1) {
-			index = position[position.length - 1]
-			position = position.slice(0, -1)
-			if (position.length === 0) return null
-			parent = findItemByIndexArray(position, items, fields)
-			children = parent.item[parent.fields.children]
-		}
-		return {
-			item: children[index + 1],
-			position: [...position, index + 1],
-			fields
-		}
-	}
-}
-
-/**
- * Creates a mapped list from an items array and a fields mapping.
- * @param {Array<Object>} items - The items array.
- * @param {import('./types').FieldMapping} fields - The fields mapping.
- * @returns {Object} The mapped list.
- */
-export function mappedList(items, fields) {
-	const findByValue = (value) => findItemByValue(value, items, fields)
-	const findByAttribute = (value, attr) => findItemByValue(value, items, fields, attr)
-	const findByIndexArray = (index) => findItemByIndexArray(index, items, fields)
-	const previous = (position) => findNearestItemBefore(position, items, fields)
-	const next = (position) => findNearestItemAfter(position, items, fields)
-
-	const update = (newItems, newFields) => {
-		items = newItems
-		fields = newFields
-	}
-	return {
-		findByValue,
-		findByAttribute,
-		findByIndexArray,
-		previous,
-		next,
-		update
-	}
-}