@rokkit/core 1.0.0-next.120 → 1.0.0-next.122

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/core",
-  "version": "1.0.0-next.120",
+  "version": "1.0.0-next.122",
   "description": "Contains core utility functions and classes that can be used in various components.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",

package/src/colors/extra.json

@@ -0,0 +1,16 @@
+{
+  "shark": {
+    "DEFAULT": "#828C9F",
+    "50": "#ffffff",
+    "100": "#efefef",
+    "200": "#E0E0E0",
+    "300": "#C1C6D0",
+    "400": "#828C9F",
+    "500": "#677287",
+    "600": "#51596A",
+    "700": "#3B414D",
+    "800": "#2E323C",
+    "900": "#20242A",
+    "950": "#1A1C22"
+  }
+}

package/src/colors/index.js

@@ -1,5 +1,7 @@
-import defaultTailwindColors from './tailwind.json' with { type: 'json' }
+import { colors } from '@unocss/preset-mini/colors'
+// import defaultTailwindColors from './tailwind.json' with { type: 'json' }
 import syntaxColorPalette from './syntax.json' with { type: 'json' }
+import extraColors from './extra.json' with { type: 'json' }
 
 export const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
 export const defaultPalette = [
@@ -15,5 +17,6 @@ export const defaultPalette = [
 
 export const syntaxColors = syntaxColorPalette
 export const defaultColors = {
-	...defaultTailwindColors
+	...colors,
+	...extraColors
 }

package/src/colors/tailwind.json

@@ -271,19 +271,5 @@
     "800": "#27272a",
     "900": "#18181b",
     "950": "#000000"
-  },
-  "shark": {
-    "DEFAULT": "#677287",
-    "50": "#ffffff",
-    "100": "#efefef",
-    "200": "#E0E0E0",
-    "300": "#C1C6D0",
-    "400": "#828C9F",
-    "500": "#677287",
-    "600": "#51596A",
-    "700": "#3B414D",
-    "800": "#2E323C",
-    "900": "#20242A",
-    "950": "#1A1C22"
   }
 }

package/src/constants.js

@@ -38,6 +38,8 @@ export const defaultIcons = [
 	'action-clear',
 	'action-search',
 	'action-close',
+	'action-copy',
+	'action-copysuccess',
 	'node-opened',
 	'node-closed',
 	'selector-opened',
@@ -71,7 +73,15 @@ export const defaultIcons = [
 	'validity-failed',
 	'validity-passed',
 	'validity-unknown',
-	'validity-warning'
+	'validity-warning',
+	'alert-clear',
+	'alert-unread',
+	'align-horizontal-left',
+	'align-horizontal-right',
+	'align-horizontal-center',
+	'align-vertical-top',
+	'align-vertical-bottom',
+	'align-vertical-middle'
 ]
 
 export const defaultOptions = {
@@ -102,6 +112,38 @@ export const defaultThemeMapping = {
 	info: 'cyan'
 }
 
+export const TONE_MAP = {
+	z1: 50,
+	z2: 100,
+	z3: 200,
+	z4: 300,
+	z5: 500,
+	z6: 600,
+	z7: 700,
+	z8: 800,
+	z9: 900,
+	z10: 950
+	// base: 50,
+	// inset: 100,
+	// subtle: 200,
+	// muted: 300,
+	// raised: 400,
+	// elevated: 600,
+	// floating: 700,
+	// contrast: 800,
+	// overlay: 900
+}
+/**
+ * Splits an icon name into its group and key components.
+ * @param {string} name - The icon name to split.
+ * @returns {{ group: string, key: string, value: string }} An object containing the group, key, and value of the icon name.
+ */
+function splitIconName(name) {
+	const parts = name.split('-')
+	const group = parts.slice(0, parts.length - 1).join('-')
+	return { group, key: parts[parts.length - 1], value: name }
+}
+
 /**
  * Generate a state icon mapping from a list of icon names
  *
@@ -109,15 +151,13 @@ export const defaultThemeMapping = {
  * @returns {import('./types').StateIcons}
  */
 export function stateIconsFromNames(icons) {
-	return icons
-		.map((k) => [...k.split('-')])
-		.reduce(
-			(acc, parts) => ({
-				...acc,
-				[parts[0]]: { ...acc[parts[0]], [parts[1]]: parts.join('-') }
-			}),
-			{}
-		)
+	return icons.map(splitIconName).reduce(
+		(acc, { group, key, value }) => ({
+			...acc,
+			[group]: { ...acc[group], [key]: value }
+		}),
+		{}
+	)
 }
 
 export const defaultStateIcons = stateIconsFromNames(defaultIcons)

package/src/theme.js

@@ -1,11 +1,11 @@
-import { defaultThemeMapping, defaultColors, syntaxColors } from './constants.js'
-import { shades, defaultPalette } from './colors/index.js'
+import { defaultThemeMapping, defaultColors, TONE_MAP } from './constants.js'
+import { shades } from './colors/index.js'
 import { hex2rgb } from './utils'
 
 const modifiers = {
 	hsl: (value) => `hsl(${value} / <alpha-value>)`,
-	rgb: (value) => `rgb(${value} / <alpha-value>)`
-	// rgb: (value) => value
+	rgb: (value) => `rgb(${value} / <alpha-value>)`,
+	none: (value) => value
 }
 
 /**
@@ -15,109 +15,20 @@ const modifiers = {
  * @param {string} modifier
  * @returns
  */
-export function shadesOf(name, modifier = 'rgb') {
-	const fn = modifier in modifiers ? modifiers[modifier] : modifiers.rgb
+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})`)
+			[shade]: fn(`var(--color-${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)`)
+			DEFAULT: fn(`var(--color-${name}-500)`)
 		}
 	)
 }
 
-/**
- * Generate shades for a color using css varuable
- *
- * @param {string} name
- * @param {string} modifier
- * @returns {object}
- */
-export function stateColors(name, modifier = 'rgb') {
-	const fn = modifier in modifiers ? modifiers[modifier] : modifiers.rgb
-	return {
-		DEFAULT: fn(`var(--${name}-500)`),
-		light: fn(`var(--${name}-200)`),
-		dark: fn(`var(--${name}-700)`)
-	}
-}
-
-/**
- *
- * @param {string} modifier
- * @returns
- */
-export function themeColors(modifier = 'rgb') {
-	const fn = modifier in modifiers ? modifiers[modifier] : modifiers.rgb
-
-	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.
  *
@@ -127,80 +38,123 @@ export function contrastColors(light = '#ffffff', dark = '#000000', palette = de
  * @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: hex2rgb(colors[mapping[variant]][shade]),
-			mode: 'light'
-		},
+	return ['DEFAULT', ...shades].flatMap((shade) => [
 		{
-			key: `--${variant}-${shade}`,
-			value: hex2rgb(colors[mapping[variant]][shades[shades.length - index - 1]]),
-			mode: 'dark'
+			key: shade === 'DEFAULT' ? `--color-${variant}` : `--color-${variant}-${shade}`,
+			value: colors[mapping[variant]][`${shade}`]
 		}
 	])
 }
 
 /**
- * Filters the rules for a specific mode and transforms them into an object mapping
- * CSS variable names to their values.
+ * Constructs and returns the light and dark theme variants based on provided color mapping and color definitions.
  *
- * @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.
+ * @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.
  */
-function filterRulesByMode(rules, mode) {
-	return rules
-		.filter((rule) => rule.mode === mode)
+export function themeRules(mapping = defaultThemeMapping, colors = defaultColors) {
+	mapping = { ...defaultThemeMapping, ...mapping }
+	colors = { ...defaultColors, ...colors }
+	const variants = Object.keys(mapping)
+	const rules = variants
+		.flatMap((variant) => generateColorRules(variant, colors, mapping))
 		.reduce((acc, { key, value }) => ({ ...acc, [key]: value }), {})
+
+	return rules
 }
 
 /**
- * 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.
+ * Generates UnoCSS shortcut definitions for semantic tones with bg, border, text.
+ * @param {string} name - Color name (e.g., 'primary')
+ * @returns {Array} Array of shortcut definitions
  */
-function createThemeVariant(name, mode, colors, extraColors) {
-	return [
-		`${name}-mode-${mode}`,
-		{
-			...colors,
-			...extraColors,
-			'--plot-background': 'var(--neutral-200)'
+export function semanticShortcuts(name) {
+	const prefixes = ['bg', 'border', 'text', 'ring', 'outline', 'from', 'to', 'divide']
+	const shortcuts = []
+
+	for (const [toneName, lightValue] of Object.entries(TONE_MAP)) {
+		const darkValue = 1000 - lightValue
+
+		for (const prefix of prefixes) {
+			// Variant-prefixed regex (e.g., hover:bg-primary-base)
+			const variantPattern = new RegExp(`^(.+):${prefix}-${name}-${toneName}$`)
+			shortcuts.push([
+				variantPattern,
+				([, variant]) =>
+					`${variant}:${prefix}-${name}-${lightValue} ${variant}:dark:${prefix}-${name}-${darkValue}`
+			])
+
+			// Exact static shortcut (e.g., bg-primary-base)
+			const exactPattern = `${prefix}-${name}-${toneName}`
+			shortcuts.push([
+				exactPattern,
+				`${prefix}-${name}-${lightValue} dark:${prefix}-${name}-${darkValue}`
+			])
 		}
-	]
+	}
+
+	return shortcuts
 }
 
 /**
- * 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.
+ * Theme class for managing color palettes, mappings, and semantic shortcuts.
  */
-export function themeRules(name = 'rokkit', mapping = defaultThemeMapping, colors = defaultColors) {
-	mapping = { ...defaultThemeMapping, ...mapping }
-	const variants = Object.keys(mapping)
+export class Theme {
+	#colors
+	#mapping
 
-	const rules = variants.reduce(
-		(acc, variant) => [
-			...acc,
-			...generateColorRules(variant, { ...defaultColors, ...colors }, mapping)
-		],
-		[]
-	)
+	constructor({ colors = defaultColors, mapping = defaultThemeMapping } = {}) {
+		this.#colors = { ...defaultColors, ...colors }
+		this.#mapping = { ...defaultThemeMapping, ...mapping }
+	}
 
-	const lightRules = filterRulesByMode(rules, 'light')
-	const darkRules = filterRulesByMode(rules, 'dark')
+	get colors() {
+		return this.#colors
+	}
+	set colors(colors) {
+		this.#colors = { ...colors }
+	}
 
-	const lightTheme = createThemeVariant(name, 'light', lightRules, syntaxColors['one-dark'].light)
-	const darkTheme = createThemeVariant(name, 'dark', darkRules, syntaxColors['one-dark'].dark)
+	get mapping() {
+		return this.#mapping
+	}
+	set mapping(mapping) {
+		this.#mapping = { ...mapping }
+	}
 
-	return [lightTheme, darkTheme]
+	mapVariant(color, variant) {
+		return Object.keys(color).reduce(
+			(acc, key) => ({
+				...acc,
+				[key]: key === 'DEFAULT' ? `var(--color-${variant})` : `var(--color-${variant}-${key})`
+			}),
+			{}
+		)
+	}
+
+	getColorRules(mapping = null) {
+		const variants = Object.entries({ ...this.#mapping, ...mapping })
+		return variants.reduce(
+			(acc, [variant, key]) => ({
+				...acc,
+				[variant]: this.mapVariant(this.#colors[key], variant)
+			}),
+			{}
+		)
+	}
+
+	getPalette(mapping = null) {
+		const useMapping = { ...this.#mapping, ...mapping }
+		const useColors = { ...defaultColors, ...this.#colors }
+		const variants = Object.keys(useMapping)
+		const rules = variants
+			.flatMap((variant) => generateColorRules(variant, useColors, useMapping))
+			.reduce((acc, { key, value }) => ({ ...acc, [key]: value }), {})
+		return rules
+	}
+
+	getShortcuts(name) {
+		return semanticShortcuts(name)
+	}
 }

package/src/utils.js

@@ -1,5 +1,4 @@
 import { has, isNil } from 'ramda'
-import { URL } from 'url'
 import { DATA_IMAGE_REGEX } from './constants'
 
 let idCounter = 0
@@ -156,23 +155,31 @@ export function hex2rgb(hex) {
  * @returns {boolean} - Returns true if the string is an image URL
  */
 function isImageUrl(str) {
-	// Check if the string is a URL
+	// Check if the string looks like a URL
 	try {
-		const url = new URL(str)
-
-		// Check common image extensions
-		const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp', '.svg', '.tiff']
-		const path = url.pathname.toLowerCase()
-
-		if (imageExtensions.some((ext) => path.endsWith(ext))) {
-			return true
+		// Use browser-native URL constructor or fallback to regex
+		const url = typeof URL !== 'undefined' ? new URL(str) : null
+
+		if (url) {
+			// Check common image extensions
+			const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp', '.svg', '.tiff']
+			const path = url.pathname.toLowerCase()
+
+			if (imageExtensions.some((ext) => path.endsWith(ext))) {
+				return true
+			}
+		} else {
+			// Fallback regex-based URL validation for image extensions
+			const urlRegex = /^https?:\/\/.+\.(jpg|jpeg|png|gif|bmp|webp|svg|tiff)(\?.*)?$/i
+			return urlRegex.test(str)
 		}
 
 		return false
 		// eslint-disable-next-line no-unused-vars
 	} catch (e) {
-		// Not a valid URL
-		return false
+		// Fallback regex-based validation
+		const urlRegex = /^https?:\/\/.+\.(jpg|jpeg|png|gif|bmp|webp|svg|tiff)(\?.*)?$/i
+		return urlRegex.test(str)
 	}
 }
 /**

package/dist/packages/actions/src/delegate.svelte.d.ts

@@ -1,13 +0,0 @@
-/**
- * Svelte action function for forwarding keyboard events from a parent element to a child.
- * The child is selected using a CSS selector passed in the options object.
- * Optionally, you can specify which keyboard events you want to forward: "keydown", "keyup", and/or "keypress".
- * By default, all three events are forwarded.
- *
- * @param {HTMLElement} element - The parent element from which keyboard events will be forwarded.
- * @param {import('./types').PushDownOptions} options - The options object.
- * @returns {{destroy: Function}}
- */
-export function delegateKeyboardEvents(element: HTMLElement, { selector, events }: import("./types").PushDownOptions): {
-    destroy: Function;
-};

package/dist/packages/actions/src/dismissable.svelte.d.ts

@@ -1,7 +0,0 @@
-/**
- * A svelte action function that captures clicks outside the element or escape keypress
- * emits a `dismiss` event. This is useful for closing a modal or dropdown.
- *
- * @param {HTMLElement} node
- */
-export function dismissable(node: HTMLElement): void;

package/dist/packages/actions/src/fillable.svelte.d.ts

@@ -1,8 +0,0 @@
-/**
- * Action for filling a <del>?</del> element in html block.
- *
- * @param {HTMLElement} node
- * @param {import('./types').FillOptions} options
- * @returns
- */
-export function fillable(node: HTMLElement, data: any): void;

package/dist/packages/actions/src/index.d.ts

@@ -1,11 +0,0 @@
-export * from "./types.js";
-export { keyboard } from "./keyboard.svelte.js";
-export { pannable } from "./pannable.svelte.js";
-export { swipeable } from "./swipeable.svelte.js";
-export { navigator } from "./navigator.svelte.js";
-export { themable } from "./themable.svelte.js";
-export { skinnable } from "./skinnable.svelte.js";
-export { dismissable } from "./dismissable.svelte.js";
-export { navigable } from "./navigable.svelte.js";
-export { fillable } from "./fillable.svelte.js";
-export { delegateKeyboardEvents } from "./delegate.svelte.js";

package/dist/packages/actions/src/kbd.d.ts

@@ -1,44 +0,0 @@
-/**
- * Gets keyboard action handlers based on orientation and direction
- * @param {Object} options - Configuration options
- * @param {Object} handlers - Event handler functions
- * @returns {Object} Object mapping key presses to handler functions
- */
-export function getKeyboardActions(options: Object, handlers: Object): Object;
-/**
- * Creates a keyboard action mapping based on navigation options
- *
- * @param {Object} options - Navigation options
- * @param {string} options.orientation - Whether navigation is horizontal or vertical
- * @param {string} options.dir - Text direction ('ltr' or 'rtl')
- * @param {boolean} options.nested - Whether navigation is nested
- * @returns {Object} Mapping of keys to actions
- */
-export function createKeyboardActionMap(options: {
-    orientation: string;
-    dir: string;
-    nested: boolean;
-}): Object;
-/**
- * Creates a keyboard action mapping for modifier keys based on navigation options
- *
- * @param {Object} options - Navigation options
- * @param {string} options.orientation - Whether navigation is horizontal or vertical
- * @returns {Object} Mapping of keys to actions
- */
-export function createModifierKeyboardActionMap(options: {
-    orientation: string;
-}): Object;
-/**
- * Gets the keyboard action for a key event
- * @param {KeyboardEvent} event - The keyboard event
- * @param {Object} options - Configuration options
- * @returns {string|null} The action to perform, or null if no action is defined
- */
-export function getKeyboardAction(event: KeyboardEvent, options?: Object): string | null;
-export namespace defaultNavigationOptions {
-    let orientation: string;
-    let dir: string;
-    let nested: boolean;
-    let enabled: boolean;
-}

package/dist/packages/actions/src/keyboard.svelte.d.ts

@@ -1,7 +0,0 @@
-/**
- * Handle keyboard events
- *
- * @param {HTMLElement} root
- * @param {import('./types.js').KeyboardConfig} options - Custom key mappings
- */
-export function keyboard(root: HTMLElement, options?: import("./types.js").KeyboardConfig): void;

package/dist/packages/actions/src/lib/event-manager.d.ts

@@ -1,8 +0,0 @@
-/**
- * EventManager class to manage event listeners on an element.
- *
- * @param {HTMLElement} element  - The element to listen for events on.
- * @param {Object}      handlers - An object with event names as keys and event handlers as values.
- * @returns {Object} - An object with methods to activate, reset, and update the event listeners.
- */
-export function EventManager(element: HTMLElement, handlers?: Object, enabled?: boolean): Object;

package/dist/packages/actions/src/lib/index.d.ts

@@ -1,2 +0,0 @@
-export * from "./internal";
-export { EventManager } from "./event-manager";

package/dist/packages/actions/src/lib/internal.d.ts

@@ -1,19 +0,0 @@
-/**
- * Sets up event handlers based on the given options.
- * Returns whether or not the event handlers are listening.
- *
- * @param {HTMLElement} element
- * @param {import('../types').EventHandlers} listeners
- * @param {import('../types').TraversableOptions} options
- * @returns {void}
- */
-export function setupListeners(element: HTMLElement, listeners: import("../types").EventHandlers, options: import("../types").TraversableOptions): void;
-/**
- * Removes event handlers based on the given options.
- * Returns whether or not the event handlers are listening.
- *
- * @param {HTMLElement} element
- * @param {import('../types').EventHandlers} listeners
- * @returns {void}
- */
-export function removeListeners(element: HTMLElement, listeners: import("../types").EventHandlers): void;

package/dist/packages/actions/src/navigable.svelte.d.ts

@@ -1,8 +0,0 @@
-/**
- * A svelte action function that captures keyboard evvents and emits event for corresponding movements.
- *
- * @param {HTMLElement} node
- * @param {import('./types').NavigableOptions} options
- * @returns {import('./types').SvelteActionReturn}
- */
-export function navigable(node: HTMLElement, options: import("./types").NavigableOptions): import("./types").SvelteActionReturn;