@rokkit/states 1.1.13 → 1.1.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/states",
-  "version": "1.1.13",
+  "version": "1.1.15",
   "description": "Contains generic data manipulation functions that can be used in various components.",
   "repository": {
     "type": "git",
@@ -37,8 +37,8 @@
     }
   },
   "dependencies": {
-    "@rokkit/core": "1.1.13",
-    "@rokkit/data": "1.1.13",
+    "@rokkit/core": "1.1.15",
+    "@rokkit/data": "1.1.15",
     "d3-array": "^3.2.4",
     "ramda": "^0.32.0",
     "svelte": "^5.53.5"

package/src/commands.svelte.js

@@ -0,0 +1,123 @@
+/**
+ * App command registry — keyboard shortcuts + actions in one place.
+ * Singleton, like `vibe`/`messages`. See docs/design/19-command-system.md.
+ *
+ * @typedef {Object} Command
+ * @property {string}        id        Unique id; re-registering the same id replaces (warns).
+ * @property {string}        label     Display text (consumer-localized).
+ * @property {() => void}    run       Executed on shortcut match or palette select.
+ * @property {string}        [shortcut] e.g. 'mod+k' | 'mod+shift+p' | '?'. `mod` = Cmd on macOS / Ctrl elsewhere.
+ * @property {string}        [group]   Palette category.
+ * @property {boolean}       [global]  Fire even while a text input is focused (default false).
+ * @property {() => boolean} [enabled] Optional dynamic gate.
+ * @property {string[]}      [keywords] Extra palette search terms.
+ */
+
+const MOD_ORDER = ['ctrl', 'meta', 'alt', 'shift']
+
+const MODIFIER_ALIAS = { cmd: 'meta', meta: 'meta', ctrl: 'ctrl', control: 'ctrl', shift: 'shift', alt: 'alt', option: 'alt' }
+
+function isMac() {
+	if (typeof navigator === 'undefined') return false
+	return /Mac|iPhone|iPad|iPod/.test(navigator.platform || navigator.userAgent || '')
+}
+
+/** Canonicalize a shortcut string: resolve `mod`, sort modifiers, lowercase the key. */
+export function normalizeShortcut(shortcut) {
+	const mods = new Set()
+	let key = ''
+	for (const raw of String(shortcut).toLowerCase().split('+')) {
+		const p = raw.trim()
+		if (!p) continue
+		if (p === 'mod') mods.add(isMac() ? 'meta' : 'ctrl')
+		else if (MODIFIER_ALIAS[p]) mods.add(MODIFIER_ALIAS[p])
+		else key = p
+	}
+	return [...MOD_ORDER.filter((m) => mods.has(m)), key].join('+')
+}
+
+/** Build the canonical shortcut string from a KeyboardEvent. */
+export function eventToShortcut(event) {
+	const mods = []
+	if (event.ctrlKey) mods.push('ctrl')
+	if (event.metaKey) mods.push('meta')
+	if (event.altKey) mods.push('alt')
+	if (event.shiftKey) mods.push('shift')
+	return [...MOD_ORDER.filter((m) => mods.includes(m)), String(event.key).toLowerCase()].join('+')
+}
+
+class CommandRegistry {
+	#commands = $state(/** @type {Command[]} */ ([]))
+	#byShortcut = new Map() // normalized shortcut → id (first registrant wins)
+
+	/** @returns {Command[]} */
+	get all() {
+		return this.#commands
+	}
+
+	/** @param {Command} cmd @returns {() => void} unregister */
+	register(cmd) {
+		const idx = this.#commands.findIndex((c) => c.id === cmd.id)
+		if (idx >= 0) {
+			// eslint-disable-next-line no-console
+			console.warn(`[commands] duplicate id "${cmd.id}" — replacing existing registration`)
+			this.#commands[idx] = cmd
+			// drop any shortcut(s) previously indexed to this id (avoid stale bindings)
+			for (const [sc, owner] of this.#byShortcut) {
+				if (owner === cmd.id) this.#byShortcut.delete(sc)
+			}
+		} else {
+			this.#commands = [...this.#commands, cmd]
+		}
+		if (cmd.shortcut) {
+			const norm = normalizeShortcut(cmd.shortcut)
+			const owner = this.#byShortcut.get(norm)
+			if (owner && owner !== cmd.id) {
+				// eslint-disable-next-line no-console
+				console.warn(
+					`[commands] shortcut "${cmd.shortcut}" already bound to "${owner}"; "${cmd.id}" will not receive it`
+				)
+			} else {
+				this.#byShortcut.set(norm, cmd.id)
+			}
+		}
+		return () => this.unregister(cmd.id)
+	}
+
+	/** @param {Command[]} cmds @returns {() => void} */
+	registerMany(cmds) {
+		const offs = cmds.map((c) => this.register(c))
+		return () => offs.forEach((off) => off())
+	}
+
+	/** @param {string} id */
+	unregister(id) {
+		this.#commands = this.#commands.filter((c) => c.id !== id)
+		for (const [shortcut, owner] of this.#byShortcut) {
+			if (owner === id) this.#byShortcut.delete(shortcut)
+		}
+	}
+
+	/** @param {string} id */
+	execute(id) {
+		const cmd = this.#commands.find((c) => c.id === id)
+		if (!cmd) {
+			// eslint-disable-next-line no-console
+			console.warn(`[commands] unknown command "${id}"`)
+			return
+		}
+		if (cmd.enabled && !cmd.enabled()) return
+		cmd.run()
+	}
+
+	/** @param {KeyboardEvent} event @returns {Command | null} */
+	resolve(event) {
+		const id = this.#byShortcut.get(eventToShortcut(event))
+		if (!id) return null
+		const cmd = this.#commands.find((c) => c.id === id)
+		if (!cmd || (cmd.enabled && !cmd.enabled())) return null
+		return cmd
+	}
+}
+
+export const commands = new CommandRegistry()

package/src/index.js

@@ -1,6 +1,7 @@
 export { alerts } from './alerts.svelte.js'
 export { vibe } from './vibe.svelte.js'
 export { messages } from './messages.svelte.js'
+export { commands, normalizeShortcut, eventToShortcut } from './commands.svelte.js'
 export { ProxyItem, LazyProxyItem, BASE_FIELDS } from './proxy-item.svelte.js'
 export { ProxyTree } from './proxy-tree.svelte.js'
 export { ProxyTable } from './proxy-table.svelte.js'

package/src/messages.svelte.js

@@ -44,7 +44,12 @@ const defaultMessages = {
 		remove: 'Remove'
 	},
 	floatingNav: { label: 'Page navigation', pin: 'Pin navigation', unpin: 'Unpin navigation' },
-	mode: { system: 'System', light: 'Light', dark: 'Dark' }
+	mode: { system: 'System', light: 'Light', dark: 'Dark' },
+	command: {
+		placeholder: 'Run a command…',
+		noResults: 'No commands found',
+		label: 'Command palette'
+	},
 }
 
 /**
@@ -99,6 +104,7 @@ class MessagesStore {
 	uploadProgress = $state({ ...defaultMessages.uploadProgress })
 	floatingNav = $state({ ...defaultMessages.floatingNav })
 	mode = $state({ ...defaultMessages.mode })
+	command = $state({ ...defaultMessages.command })
 
 	// ─── Active locale ─────────────────────────────────────────────────────────
 

package/src/vibe.svelte.js

@@ -22,8 +22,10 @@ function isAllowedValue(value, allowed, current) {
  */
 class Vibe {
 	#allowedStyles = $state(DEFAULT_STYLES)
+	#allowedSkins = $state(['default'])
 	#mode = $state('dark')
 	#style = $state('rokkit')
+	#skin = $state('default')
 	#colors = $state(defaultColors)
 	#density = $state('comfortable')
 	#direction = $state(detectDirection())
@@ -53,6 +55,23 @@ class Vibe {
 		}
 	}
 
+	get allowedSkins() {
+		return this.#allowedSkins
+	}
+
+	set allowedSkins(input) {
+		const skins = (Array.isArray(input) ? input : [input]).filter(Boolean)
+		if (skins.length > 0) this.#allowedSkins = skins
+	}
+
+	get skin() {
+		return this.#skin
+	}
+
+	set skin(value) {
+		if (isAllowedValue(value, this.#allowedSkins, this.#skin)) this.#skin = value
+	}
+
 	get colorMap() {
 		return this.#colorMap
 	}
@@ -158,7 +177,8 @@ class Vibe {
 				style: this.#style,
 				mode: this.#mode,
 				density: this.#density,
-				direction: this.#direction
+				direction: this.#direction,
+				skin: this.#skin
 			}
 			localStorage.setItem(key, JSON.stringify(config))
 		} catch (e) {
@@ -176,6 +196,7 @@ class Vibe {
 		this.mode = value.mode
 		this.density = value.density
 		this.direction = value.direction
+		if (value.skin) this.skin = value.skin
 	}
 
 	/**