@witchcraft/spellcraft 0.0.1

package/src/internal/updateNativeKeysState.ts

@@ -0,0 +1,84 @@
+import { multisplice } from "@alanscodelog/utils/multisplice"
+
+import { addToChain } from "./addToChain.js"
+import { getModifierState } from "./getModifierState.js"
+import { removeFromChain } from "./removeFromChain.js"
+import { safeSetEmulatedToggleState } from "./safeSetEmulatedToggleState.js"
+
+import { setKeyProp } from "../core/setKeyProp.js"
+import { KnownError } from "../helpers/KnownError.js"
+import type { AnyInputEvent, Manager } from "../types/index.js"
+import { SHORTCUT_ERROR } from "../types/index.js"
+
+/**
+ * Should be used after we attempt to process the event and set key states.
+ *
+ * This should cause it to only actually change the state if it was changed off-focus.
+ *
+ * Technically not neccesary with wheel/mouse events, but ordered similarly for consistency.
+ *
+ * Modifiers need to be added/removed from the chain on changes, but not toggles.
+ *
+ * Mutates the passed keys array to remove processed keys.
+ *
+ */
+export function updateNativeKeysState(
+	manager: Manager,
+	e: AnyInputEvent,
+	keyIds: string[] = []
+): void {
+	const s = manager.options.stringifier
+	for (const id of manager.keys.nativeToggleKeys) {
+		const key = manager.keys.entries[id]
+		if (key.toggleOnPressed && key.toggleOffPressed) {
+			throw new KnownError(SHORTCUT_ERROR.INCORRECT_TOGGLE_STATE, `Key ${s.stringify(key, manager)} is a toggle key whose on and off versions are both pressed, which is not a valid state.`, { key })
+		}
+		// this does not guarantee the key code is valid
+		// it just returns false even for made up keys
+		const modifierState = getModifierState(key, e, manager)
+
+
+		if (modifierState === null) continue
+		if (modifierState) {
+			if (!key.toggleOnPressed) {
+				safeSetEmulatedToggleState(key, true, manager)
+			}
+		} else {
+			if (key.toggleOnPressed) {
+				safeSetEmulatedToggleState(key, false, manager)
+			}
+		}
+	}
+	const added: string[] = []
+	const removed: string[] = []
+	for (const id of manager.keys.nativeModifierKeys) {
+		const key = manager.keys.entries[id]
+		const modifierState = getModifierState(key, e, manager)
+		if (modifierState === null) continue
+		if (modifierState) {
+			if (!key.pressed) {
+				if (setKeyProp(key, "pressed", true, manager).isOk) {
+					added.push(id)
+				}
+			}
+		} else {
+			if (key.pressed) {
+				if (setKeyProp(key, "pressed", false, manager).isOk) {
+					removed.push(id)
+				}
+			}
+		}
+	}
+
+	if (added.length > 0) {
+		addToChain(manager, added, e)
+		const indexes = keyIds.map(key => added.indexOf(key)).filter(i => i > -1)
+		multisplice(keyIds, indexes)
+	}
+	if (removed.length > 0) {
+		removeFromChain(manager, removed, e)
+		const indexes = keyIds.map(key => added.indexOf(key)).filter(i => i > -1)
+		multisplice(keyIds, indexes)
+	}
+}
+

package/src/layouts/createLayout.ts

@@ -0,0 +1,328 @@
+import { calculateAndSetPositionAndSize } from "../helpers/calculateAndSetPositionAndWidth.js"
+import type { RawKey } from "../types/keys.js"
+
+
+const start = 0
+const mediaKey = { height: 0.5, width: 4 / 3 }
+const setY = <T extends Record<"id", string>>(yVal: number) => (val: T): (T & { y: number }) => {
+	(val as any).y = yVal
+	return val as any
+}
+
+/**
+ * Creates the given keyboard layout, assiging the correct sizes and positions to keys.
+ *
+ * It returns an array of raw keys so that if you're extending {@link Key} you can create them with your extended class (you should override {@link Key.create}).
+ *
+ * Labels are assigned for most keys in english as a fallback, see {@link labelWithEvent}/{@link labelWithKeyboardMap} for proper labeling during runtime.
+ *
+ * Currently only supports generating the following layouts: `ansi`, `iso`. Technically the layout returned is a variation of these that includes half height 1.3333u (4u / 3 keys) media keys over the numpad.
+ *
+ * Pull requests for [standard layouts]([https://www.w3.org/TR/uievents-code) welcomed.
+ *
+ * You can remove sections using the options. Note that this just removes them and does not do any repositioning. If you only remove the numpad, for example, the media keys will still be placed above it. The idea is to easily allow reducing the size of the created layout to then adjust only a few keys to your liking.
+ *
+ * Also note the `navigation` section is split into two sections with `navigation` only refering to the 6 `Insert`, `Home`, etc. keys, and `arrowKeys` refering to the arrow keys.
+ *
+ * This also adds the following classes to some keys: `center-label` for media and arrow keys, and `iso-enter` for the iso enter which requires a different approach to styling (see the demo, it's painful).
+ */
+
+export function createLayout<
+	TNumpad extends boolean = true,
+	TMediaKeys extends boolean = true,
+	TFn extends boolean = true,
+	TNavigation extends boolean = true,
+	TArrowKeys extends boolean = true,
+	TNames extends string = "Escape"
+		| (
+	TFn extends true
+		? "F1" | "F2" | "F3" | "F4" | "F5" | "F6" | "F7" | "F8" | "F9" | "F10" | "F11" | "F12"
+		: never
+)
+| "Backquote" | "Digit1" | "Digit2" | "Digit3" | "Digit4" | "Digit5" | "Digit6" | "Digit7" | "Digit8" | "Digit9" | "Digit0" | "Minus" | "Equal" | "Backspace"
+| "Tab" | "KeyQ" | "KeyW" | "KeyE" | "KeyR" | "KeyT" | "KeyY" | "KeyU" | "KeyI" | "KeyO" | "KeyP" | "BracketLeft" | "BracketRight" | "Backslash"
+| "CapsLock" | "KeyA" | "KeyS" | "KeyD" | "KeyF" | "KeyG" | "KeyH" | "KeyJ" | "KeyK" | "KeyL" | "Semicolon" | "Quote" | "Enter"
+| "VirtualShiftLeft" | "IntlBackslash" | "KeyZ" | "KeyX" | "KeyC" | "KeyV" | "KeyB" | "KeyN" | "KeyM" | "Comma" | "Period" | "Slash" | "VirtualShiftRight"
+| "VirtualControlLeft" | "VirtualMetaLeft" | "VirtualAltLeft" | "Space" | "VirtualAltRight" | "VirtualMetaRight" | "ContextMenu" | "VirtualControlRight"
+
+| "PrintScreen"
+| "ScrollLock"
+| "Pause"
+
+| (
+	TNavigation extends true
+		? "Insert" | "Home" | "PageUp"
+		: never
+)
+| (
+	TArrowKeys extends true
+		? "ArrowUp" | "ArrowLeft" | "ArrowDown" | "ArrowRight"
+		: never
+)
+
+| (
+	TMediaKeys extends true
+		? "AudioVolumeMute" | "AudioVolumeDown" | "AudioVolumeUp" | "MediaTrackPrevious" | "MediaTrackPause" | "MediaTrackNext"
+		: never
+)
+| (
+	TNumpad extends true
+		? ("NumLock" | "NumpadDivide" | "NumpadMultiply" | "NumpadSubtract"
+			| "Numpad7" | "Numpad8" | "Numpad9" | "NumpadAdd"
+			| "Numpad4" | "Numpad5" | "Numpad6"
+			| "Numpad1" | "Numpad2" | "Numpad3" | "NumpadEnter"
+			| "Numpad0" | "NumpadDecimal")
+		: never
+)
+>(
+	type: "ansi" | "iso" | "" = "ansi",
+	{
+		numpad = true as any,
+		mediaKeys = true as any,
+		fn = true as any,
+		navigation = true as any,
+		arrowKeys = true as any
+	}:
+	Partial<{
+		numpad: TNumpad
+		mediaKeys: TMediaKeys
+		fn: TFn
+		navigation: TNavigation
+		arrowKeys: TArrowKeys
+	}> = {}
+): RawKey<TNames>[] {
+	const keys = [
+		...calculateAndSetPositionAndSize([
+			{ id: "Escape" as const, label: "Esc" },
+			...(fn
+				? [
+						{ id: "F1" as const, x: 2 },
+						{ id: "F2" as const },
+						{ id: "F3" as const },
+						{ id: "F4" as const },
+						{ id: "F5" as const, x: 6.5 },
+						{ id: "F6" as const },
+						{ id: "F7" as const },
+						{ id: "F8" as const },
+						{ id: "F9" as const, x: 11 },
+						{ id: "F10" as const },
+						{ id: "F11" as const },
+						{ id: "F12" as const }
+					] as const
+				: []
+			)
+		]).map(setY(start + 0)),
+		...calculateAndSetPositionAndSize([
+			{ id: "Backquote" as const, label: "`" },
+			{ id: "Digit1" as const, label: "1" },
+			{ id: "Digit2" as const, label: "2" },
+			{ id: "Digit3" as const, label: "3" },
+			{ id: "Digit4" as const, label: "4" },
+			{ id: "Digit5" as const, label: "5" },
+			{ id: "Digit6" as const, label: "6" },
+			{ id: "Digit7" as const, label: "7" },
+			{ id: "Digit8" as const, label: "8" },
+			{ id: "Digit9" as const, label: "9" },
+			{ id: "Digit0" as const, label: "0" },
+			{ id: "Minus" as const, label: "-" },
+			{ id: "Equal" as const, label: "=" },
+			{ id: "Backspace" as const, width: 2 }
+		] as const).map(setY(start + 2)),
+		...calculateAndSetPositionAndSize([
+			{ id: "Tab" as const, width: 1.5 },
+			{ id: "KeyQ" as const, label: "q" },
+			{ id: "KeyW" as const, label: "w" },
+			{ id: "KeyE" as const, label: "e" },
+			{ id: "KeyR" as const, label: "r" },
+			{ id: "KeyT" as const, label: "t" },
+			{ id: "KeyY" as const, label: "y" },
+			{ id: "KeyU" as const, label: "u" },
+			{ id: "KeyI" as const, label: "i" },
+			{ id: "KeyO" as const, label: "o" },
+			{ id: "KeyP" as const, label: "p" },
+			{ id: "BracketLeft" as const, label: "[" },
+			{ id: "BracketRight" as const, label: "]" },
+			type === "ansi"
+				? { id: "Backslash" as const, label: "\\", width: 1.5 }
+				: type === "iso"
+					? { id: "Enter" as const, width: 1.5, height: 2, classes: ["iso-enter"] }
+					: {} as never
+		] as const).map(setY(start + 3)),
+		...calculateAndSetPositionAndSize([
+			{ id: "CapsLock" as const, width: 1.75, isToggle: "native" as const },
+			{ id: "KeyA" as const, label: "a" },
+			{ id: "KeyS" as const, label: "s" },
+			{ id: "KeyD" as const, label: "d" },
+			{ id: "KeyF" as const, label: "f" },
+			{ id: "KeyG" as const, label: "g" },
+			{ id: "KeyH" as const, label: "h" },
+			{ id: "KeyJ" as const, label: "j" },
+			{ id: "KeyK" as const, label: "k" },
+			{ id: "KeyL" as const, label: "l" },
+			{ id: "Semicolon" as const, label: ";" },
+			{ id: "Quote" as const, label: "'" },
+			type === "ansi"
+				? { id: "Enter" as const, width: 2.25 }
+				: type === "iso"
+					? { id: "Backslash" as const, label: "#", width: 1 }
+					: {} as never
+		] as const).map(setY(start + 4)),
+		...calculateAndSetPositionAndSize([
+			...(type === "ansi"
+				? [
+						{ id: "VirtualShiftLeft" as const, isModifier: "native" as const, label: "Shift", variants: ["ShiftLeft", "ShiftRight", "Shift"], width: 2.25 }
+					]
+				: type === "iso"
+					? [
+							{ id: "VirtualShiftLeft" as const, isModifier: "native" as const, label: "Shift", variants: ["ShiftLeft", "ShiftRight", "Shift"], width: 1.25 },
+							{ id: "IntlBackslash" as const, label: "\\", width: 1 }
+						]
+					: []),
+			{ id: "KeyZ" as const, label: "z" },
+			{ id: "KeyX" as const, label: "x" },
+			{ id: "KeyC" as const, label: "c" },
+			{ id: "KeyV" as const, label: "v" },
+			{ id: "KeyB" as const, label: "b" },
+			{ id: "KeyN" as const, label: "n" },
+			{ id: "KeyM" as const, label: "m" },
+			{ id: "Comma" as const, label: "," },
+			{ id: "Period" as const, label: "." },
+			{ id: "Slash" as const, label: "/" },
+			{
+				id: "VirtualShiftRight" as const,
+				isModifier: "native" as const,
+				label: "Shift",
+				variants: ["ShiftLeft", "ShiftRight", "Shift"],
+				width: 2.75
+			}
+		] as const).map(setY(start + 5)),
+		...calculateAndSetPositionAndSize([
+			{
+				id: "VirtualControlLeft" as const,
+				isModifier: "native" as const,
+				label: "Ctrl",
+				variants: ["ControlLeft", "ControlRight", "Control", "Ctrl"],
+				width: 1.25
+			},
+			{
+				id: "VirtualMetaLeft" as const,
+				isModifier: "native" as const,
+				label: "Meta",
+				variants: ["MetaLeft", "MetaRight", "Meta"],
+				width: 1.25
+			},
+			{
+				id: "VirtualAltLeft" as const,
+				isModifier: "native" as const,
+				label: "Alt",
+				variants: ["AltLeft", "AltRight", "Alt"],
+				width: 1.25
+			},
+			{ id: "Space" as const, label: "", width: 6.25 },
+			{
+				id: "VirtualAltRight" as const,
+				isModifier: "native" as const,
+				label: "Alt",
+				variants: ["AltLeft", "AltRight", "Alt"],
+				width: 1.25
+			},
+			{
+				id: "VirtualMetaRight" as const,
+				isModifier: "native" as const,
+				label: "Meta",
+				variants: ["MetaLeft", "MetaRight", "Meta"],
+				width: 1.25
+			},
+			{ id: "ContextMenu" as const, label: "Menu", width: 1.25 },
+			{
+				id: "VirtualControlRight" as const,
+				isModifier: "native" as const,
+				label: "Ctrl",
+				variants: ["ControlLeft", "ControlRight", "Control", "Ctrl"],
+				width: 1.25
+			}
+		] as const).map(setY(start + 6)),
+		...calculateAndSetPositionAndSize([
+			{ id: "PrintScreen" as const, label: "PrtScn", x: 15.5 },
+			{ id: "ScrollLock" as const, label: "Scroll\nLock", isToggle: "native" as const },
+			{ id: "Pause" as const, label: "Pause\nBreak" }
+		] as const).map(setY(start)),
+		...(navigation
+			? [
+					...calculateAndSetPositionAndSize([
+						{ id: "Insert" as const, x: 15.5 },
+						{ id: "Home" as const },
+						{ id: "PageUp" as const, label: "Pg\nUp" }
+					] as const).map(setY(start + 2)),
+					...calculateAndSetPositionAndSize([
+						{ id: "Delete" as const, x: 15.5 },
+						{ id: "End" as const },
+						{ id: "PageDown" as const, label: "Pg\nDown" }
+					] as const).map(setY(start + 3))
+				]
+			: []
+		),
+		...(arrowKeys
+			? [
+					...calculateAndSetPositionAndSize([
+						{ id: "ArrowUp" as const, label: "▲", x: 16.5, y: start + 5, classes: ["center-label"] }
+					]),
+					...calculateAndSetPositionAndSize([
+						{ id: "ArrowLeft" as const, label: "◄", x: 15.5, classes: ["center-label"] },
+						{ id: "ArrowDown" as const, label: "▼", classes: ["center-label"] },
+						{ id: "ArrowRight" as const, label: "►", classes: ["center-label"] }
+					] as const).map(setY(start + 6))
+				]
+			: []
+		),
+		...(
+			mediaKeys
+				? [
+						...calculateAndSetPositionAndSize([
+							{ id: "AudioVolumeMute" as const, label: "🔇", x: 19, ...mediaKey, classes: ["center-label"] },
+							{ id: "AudioVolumeDown" as const, label: "🔉", ...mediaKey, classes: ["center-label"] },
+							{ id: "AudioVolumeUp" as const, label: "🔊", ...mediaKey, classes: ["center-label"] }
+						]).map(setY(start)),
+						...calculateAndSetPositionAndSize([
+							{ id: "MediaTrackPrevious" as const, label: "⏮️", x: 19, ...mediaKey, classes: ["center-label"] },
+							{ id: "MediaTrackPause" as const, label: "⏯️", ...mediaKey, classes: ["center-label"] },
+							{ id: "MediaTrackNext" as const, label: "⏭️", ...mediaKey, classes: ["center-label"] }
+						]).map(setY(start + 0.5))
+					]
+				: []
+		),
+		...(numpad
+			? [
+					...calculateAndSetPositionAndSize([
+						{ id: "NumLock" as const, label: "Num\nLock", x: 19, isToggle: "native" as const },
+						{ id: "NumpadDivide" as const, label: "/" },
+						{ id: "NumpadMultiply" as const, label: "*" },
+						{ id: "NumpadSubtract" as const, label: "-" }
+					]).map(setY(start + 2)),
+					...calculateAndSetPositionAndSize([
+						{ id: "Numpad7" as const, label: "7", x: 19 },
+						{ id: "Numpad8" as const, label: "8" },
+						{ id: "Numpad9" as const, label: "9" },
+						{ id: "NumpadAdd" as const, label: "+", height: 2 }
+					]).map(setY(start + 3)),
+					...calculateAndSetPositionAndSize([
+						{ id: "Numpad4" as const, label: "4", x: 19 },
+						{ id: "Numpad5" as const, label: "5" },
+						{ id: "Numpad6" as const, label: "6" }
+					]).map(setY(start + 4)),
+					...calculateAndSetPositionAndSize([
+						{ id: "Numpad1" as const, label: "1", x: 19 },
+						{ id: "Numpad2" as const, label: "2" },
+						{ id: "Numpad3" as const, label: "3" },
+						{ id: "NumpadEnter" as const, label: "+", height: 2 }
+					]).map(setY(start + 5)),
+					...calculateAndSetPositionAndSize([
+						{ id: "Numpad0" as const, label: "0", x: 19, width: 2 },
+						{ id: "NumpadDecimal" as const, label: "." }
+					]).map(setY(start + 6))
+				]
+			: []
+		)
+	] satisfies RawKey[]
+	return keys as any
+}

package/src/module.ts

@@ -0,0 +1,62 @@
+import {
+	addImportsDir,
+	addTypeTemplate,
+	createResolver,
+	defineNuxtModule
+} from "@nuxt/kit"
+
+import pkg from "../package.json" with { type: "json" }
+
+
+const { resolve } = createResolver(import.meta.url)
+
+declare module "@nuxt/schema" {
+	interface PublicRuntimeConfig {
+		// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+		witchcraftSpellcraft: {}
+	}
+}
+
+export interface ModuleOptions {
+
+}
+
+export default defineNuxtModule<ModuleOptions>({
+	meta: {
+		name: "witchcraftSpellcraft",
+		configKey: "witchcraftSpellcraft"
+	},
+	defaults: {
+	},
+	moduleDependencies: {
+		"@witchcraft/ui/nuxt": {
+			version: pkg.dependencies["@witchcraft/ui"]
+		}
+	},
+	async setup(_options, nuxt) {
+		// nuxt.options.runtimeConfig.public.witchcraftSpellcraft = defu(
+		// 	nuxt.options.runtimeConfig.public.witchcraftSpellcraft,
+		// 	{
+		// 	}
+		// )
+		addTypeTemplate({
+			filename: "types/witchcraft-spellcraft.d.ts",
+
+			getContents: () => `
+				import { type NavigatorWKeyboard } from "./src/types/general.ts"
+
+
+				declare global {
+					interface Navigator {
+						keyboard: NavigatorWKeyboard["keyboard"]
+					}
+				}
+			`
+		})
+
+		addImportsDir(resolve("runtime/composables"))
+		addImportsDir(resolve("runtime/utils"))
+
+		nuxt.options.alias["#witchcraft-spellcraft"] = resolve("runtime")
+	}
+})

package/src/runtime/composables/useLabeledByKeyboardLayoutMap.ts

@@ -0,0 +1,28 @@
+import { type Ref, ref } from "vue"
+
+import { getKeyboardLayoutMap } from "../../helpers/getKeyboardLayoutMap.js"
+import { labelWithKeyboardMap } from "../../helpers/labelWithKeyboardMap.js"
+import { onKeyboardLayoutChange } from "../../helpers/onKeyboardLayoutChange.js"
+import type { Manager } from "../../types/manager.js"
+
+/**
+ * Sets up {@link getKeyboardLayoutMap} and {@link onKeyboardLayoutChange} to use {@link labelWithKeyboardMap}.
+ *
+ * Returns a ref of the latest key labels to have been set.
+ */
+export function useLabeledByKeyboardLayoutMap(manager: Manager): Ref<ReturnType<typeof labelWithKeyboardMap> | undefined> {
+	const labeledByMap = ref<ReturnType<typeof labelWithKeyboardMap>>()
+
+	void getKeyboardLayoutMap().then(map => {
+		if (map) {
+			labeledByMap.value = labelWithKeyboardMap(manager, { map })
+		}
+	})
+	void onKeyboardLayoutChange(async () => {
+		const map = await getKeyboardLayoutMap()
+		if (map) {
+			labeledByMap.value = labelWithKeyboardMap(manager, { map })
+		}
+	})
+	return labeledByMap
+}

package/src/runtime/composables/usePointerCoords.ts

@@ -0,0 +1,40 @@
+import { computed, type ComputedRef, reactive } from "vue"
+/**
+ * Returns a set of coordinates that includes an initial offset.
+ *
+ * For use with drag or similar events.
+ *
+ * `setInitialOffset` should be called at drag start.
+ *
+ * `setPointerCoords` can then be called on drag move.
+ *
+ * And `coords` will reflect the coordinates of the event + the initial offset.
+ *
+ * This can then be used to position an element and it won't jump, it will stay grabbed from where the user initially grabbed it.
+ */
+
+
+export const usePointerCoords = (): {
+	pointerCoords: { x: number, y: number }
+	coords: ComputedRef<{ x: number, y: number }>
+	setPointerCoords: (e: { clientX: number, clientY: number }) => void
+	setInitialPointerOffset: (e: { clientX: number, clientY: number }, el: HTMLElement) => void
+} => {
+	const pointerCoords = reactive<{ x: number, y: number }>({ x: 0, y: 0 })
+	const offsetCoords = reactive<{ x: number, y: number }>({ x: 0, y: 0 })
+	const coords = computed(() => ({ x: pointerCoords.x - offsetCoords.x, y: pointerCoords.y - offsetCoords.y }))
+
+	const setPointerCoords = (e: { clientX: number, clientY: number }): void => {
+		pointerCoords.x = e.clientX
+		pointerCoords.y = e.clientY
+	}
+
+	const setInitialPointerOffset = (e: { clientX: number, clientY: number }, el: HTMLElement): void => {
+		setPointerCoords(e)
+		const clientRect = el.getBoundingClientRect()
+		offsetCoords.x = pointerCoords.x - clientRect.x
+		offsetCoords.y = pointerCoords.y - clientRect.y
+	}
+
+	return { pointerCoords, coords, setPointerCoords, setInitialPointerOffset }
+}

package/src/runtime/composables/useShortcutManagerContextCount.ts

@@ -0,0 +1,81 @@
+import { keys } from "@alanscodelog/utils/keys"
+import { unreachable } from "@alanscodelog/utils/unreachable"
+import { extractTokens } from "@witchcraft/expressit/utils/extractTokens"
+import { type ComputedRef, type Ref, watch } from "vue"
+
+import type { Manager } from "../../types/manager.js"
+import type { ContextInfo } from "../types.js"
+
+/**
+ * Updates the count of the ctx variables depending on how many shortcuts are using the variable. Requires shortcuts use the expressit library to set the ast property of conditions.
+ *
+ * Useful to know if we can delete a ctx.
+ */
+export function useShortcutManagerContextCount(manager: Ref<Manager> | ComputedRef<Manager>, context: Ref<ContextInfo>): {
+	addContext(ctx: string): void
+	removeContext(ctx: string): void
+	activateContext(ctx: string): void
+	deactivateContext(ctx: string): void
+} {
+	watch(() => manager.value.shortcuts.entries, newShortcuts => {
+		const rc: Record<string, number> = {}
+		for (const shortcut of newShortcuts) {
+			if (!("ast" in shortcut.condition)) continue
+			const c = shortcut.condition.ast
+			if (c) {
+				const tokens = extractTokens(c as any) // todo
+				const seen: string[] = []
+				for (const token of tokens) {
+					if (token.type === "VALUE") {
+						if (seen.includes(token.value)) continue
+						seen.push(token.value)
+						rc[token.value] = rc[token.value] ? rc[token.value] + 1 : 1
+					}
+				}
+			}
+		}
+		for (const ctx of keys(context.value)) {
+			context.value.count[ctx] = rc[ctx] ?? 0
+		}
+		for (const ctx of keys(rc)) {
+			if (!context.value.isActive[ctx]) {
+				context.value.isActive[ctx] = false
+				context.value.count[ctx] = rc[ctx]
+			}
+		}
+	}, { deep: true, immediate: true })
+	// we're using unreachable, because the checks should already be in the ui
+
+	function addContext(ctx: string): void {
+		if (!context.value.isActive[ctx]) {
+			context.value.isActive[ctx] = true
+			context.value.count[ctx] = 0
+		} else {
+			unreachable()
+		}
+	}
+
+	function removeContext(ctx: string): void {
+		if (context.value.count[ctx] === 0) {
+			delete context.value.isActive[ctx]
+			delete context.value.count[ctx]
+		} else {
+			unreachable()
+		}
+	}
+
+	function activateContext(ctx: string): void {
+		context.value.isActive[ctx] ||= true
+	}
+
+	function deactivateContext(ctx: string): void {
+		context.value.isActive[ctx] &&= false
+	}
+
+	return {
+		addContext,
+		removeContext,
+		activateContext,
+		deactivateContext
+	}
+}

package/src/runtime/composables/useShortcutManagerKeysLayout.ts

@@ -0,0 +1,42 @@
+import { useGlobalResizeObserver } from "@witchcraft/ui/composables/useGlobalResizeObserver"
+import { computed, reactive, type Ref, ref, watch } from "vue"
+
+import type { Keys } from "../../types/keys.js"
+
+/**
+ * Watches Keys.layout.x/y and listens to resize changes on the element containing the keys to update what the pixel height of the element should be and what the pixel keyWidth.
+ *
+ * While it also returns the width and the ratio, you should not set the element to them.
+ *
+ */
+export const useShortcutManagerKeysLayout = (keys: Keys, keyboardEl: Ref<HTMLElement | null>): {
+	width: Ref<number>
+	height: Ref<number>
+	ratio: Ref<number>
+	keyWidth: Ref<number>
+	layout: {
+		x: number
+		y: number
+	}
+} => {
+	const layout = reactive({ x: keys.layout.x, y: keys.layout.y })
+	watch([() => keys.layout.x, () => keys.layout.y], ([x, y]) => {
+		layout.x = x
+		layout.y = y
+	})
+
+	const width = ref(0)
+	const keyWidth = computed(() => {
+		const val = width.value / layout.x
+		return Number.isNaN(val) ? 1 : val
+	})
+	const ratio = computed(() => layout.x / layout.y)
+	const height = computed(() => width.value / ratio.value)
+	useGlobalResizeObserver(keyboardEl, function updateSize() {
+		if (keyboardEl.value) {
+			width.value = Math.max(keyboardEl.value.offsetWidth, 1000)
+		}
+	})
+	return { width, height, ratio, keyWidth, layout }
+}
+