@rimelight/ui 0.0.43 → 0.0.44

package/src/preset.ts

@@ -1,7 +1,8 @@
 import { presetIcons, presetTypography, presetWind4, type Preset } from "unocss"
-import type { ColorModeInput, PresetOptions } from "./types"
+import type { ColorModeInput, UIConfig } from "./types"
+import { getIconSvg } from "./icons.raw"
 
-export const P = {
+export const PALETTES = {
   neutral: [0, 0],
   primary: [0.21, 260],
   secondary: [0.18, 70],
@@ -14,132 +15,133 @@ export const P = {
   source: [0.13, 215]
 } as const
 
-const S =
-    "50:0.985:0.1:0.145:0.2,100:0.965:0.25:0.2:0.35,200:0.925:0.45:0.28:0.55,300:0.85:0.7:0.35:0.75,400:0.72:0.9:0.44:0.9,500:0.55:1:0.53:1,600:0.44:0.9:0.61:0.85,700:0.35:0.75:0.69:0.7,800:0.27:0.6:0.77:0.55,900:0.2:0.45:0.86:0.4,950:0.145:0.3:0.93:0.25"
-      .split(",")
-      .map((s) => s.split(":") as [string, any, any, any, any]),
-  INTENTS: Record<string, Record<string, string>> = Object.fromEntries(
-    "default:700:50:200:300,muted:600:100:200:300,elevated:800:100:200:400,accented:900:200:300:500,dimmed:500:50:300:400,toned:800:700:600:900,highlighted:950:200:800:950,inverted:50:950:800:700"
-      .split(",")
-      .map((s) => s.split(":") as [string, string, string, string, string])
-      .map(([k, text, bg, border, ring]) => [k, { text, bg, border, ring }])
-  ),
-  CSS_PROPS: Record<string, string> = {
-    text: "color",
-    bg: "background-color",
-    border: "border-color",
-    divide: "border-color",
-    ring: "--un-ring-color",
-    outline: "outline-color"
-  },
-  emit = (n: string, fn: (s: string, l1: number, c1: number, l2: number, c2: number) => string) =>
-    S.map(([s, l1, c1, l2, c2]) => `  --color-${n}-${s}: ${fn(s, l1, c1, l2, c2)};\n`).join("") +
-    `  --${n}: var(--color-${n}-500);\n  --${n}-foreground: light-dark(oklch(1 0 0), oklch(0.145 0 0));\n  --${n}-accent: var(--color-${n}-600);\n`,
-  cssVars = (custom: Record<string, ColorModeInput> = {}) =>
-    Object.entries(P)
-      .map(([n, [c, h]]) =>
-        emit(
-          n,
-          (_, l1, c1, l2, c2) =>
-            `light-dark(oklch(${l1} ${(c1 * c).toFixed(3)} ${h}), oklch(${l2} ${(c2 * c).toFixed(3)} ${h}))`
-        )
-      )
-      .join("") +
-    Object.entries(custom)
-      .map(([n, e]) => {
-        const m = (e.light || e.dark ? e : { light: e, dark: e }) as Record<
-            string,
-            Record<string, string>
-          >,
-          l = m.light?.["500"] ?? Object.values(m.light ?? {})[0] ?? "oklch(0.55 0.15 0)"
-        return emit(
-          n,
-          (s) => `light-dark(${m.light?.[s] ?? l}, ${m.dark?.[s] ?? m.dark?.["500"] ?? l})`
-        )
-      })
-      .join("")
+const SHADES = {
+  "50": [0.985, 0.1, 0.145, 0.2],
+  "100": [0.965, 0.25, 0.2, 0.35],
+  "200": [0.925, 0.45, 0.28, 0.55],
+  "300": [0.85, 0.7, 0.35, 0.75],
+  "400": [0.72, 0.9, 0.44, 0.9],
+  "500": [0.55, 1, 0.53, 1],
+  "600": [0.44, 0.9, 0.61, 0.85],
+  "700": [0.35, 0.75, 0.69, 0.7],
+  "800": [0.27, 0.6, 0.77, 0.55],
+  "900": [0.2, 0.45, 0.86, 0.4],
+  "950": [0.145, 0.3, 0.93, 0.25]
+} as const
+
+const SHADE_ENTRIES = Object.entries(SHADES)
+
+const INTENTS: Record<string, Record<string, string>> = {
+  default: { text: "700", bg: "50", border: "200", ring: "300" },
+  muted: { text: "600", bg: "100", border: "200", ring: "300" },
+  elevated: { text: "800", bg: "100", border: "200", ring: "400" },
+  accented: { text: "900", bg: "200", border: "300", ring: "500" },
+  dimmed: { text: "500", bg: "50", border: "300", ring: "400" },
+  toned: { text: "800", bg: "700", border: "600", ring: "900" },
+  highlighted: { text: "950", bg: "200", border: "800", ring: "950" },
+  inverted: { text: "50", bg: "950", border: "800", ring: "700" }
+}
+
+const createThemeShades = (name: string) => ({
+  DEFAULT: `var(--rl-${name}-500)`,
+  ...Object.fromEntries(SHADE_ENTRIES.map(([s]) => [s, `var(--rl-${name}-${s})`]))
+})
+
+const createOklchShadeGetter = ([c, h]: readonly [number, number]) => {
+  const oklch = (l: number, factor: number) => `oklch(${l} ${(factor * c).toFixed(3)} ${h})`
+  return (_: string, [l1, c1, l2, c2]: readonly [number, number, number, number]) => [
+    oklch(l1, c1),
+    oklch(l2, c2)
+  ]
+}
+
+const createCustomShadeGetter = (val: any) => {
+  const isSplit = "light" in val || "dark" in val
+  const light = (isSplit ? val.light : val) ?? {}
+  const dark = (isSplit ? val.dark : light) ?? light
+  const fallback = light["500"] ?? Object.values(light)[0] ?? "oklch(0.55 0.15 0)"
+  return (s: string) => [light[s] ?? fallback, dark[s] ?? fallback]
+}
+
+function resolveTokens(custom: Record<string, ColorModeInput> = {}) {
+  const themeColors: Record<string, Record<string, string>> = {}
+  const tokenVarLines: string[] = []
+
+  for (const [name, val] of Object.entries({ ...PALETTES, ...custom })) {
+    themeColors[name] = createThemeShades(name)
+    const getShade = Array.isArray(val) ? createOklchShadeGetter(val) : createCustomShadeGetter(val)
+
+    for (const [s, coords] of SHADE_ENTRIES) {
+      const [light, dark] = getShade(s, coords as any)
+      tokenVarLines.push(`--rl-${name}-${s}: light-dark(${light}, ${dark});`)
+    }
+  }
+
+  return { themeColors, tokenVarLines }
+}
+
+export default function rimelightUiPreset({ colors, icons, presets = {} }: UIConfig = {}): Preset {
+  const { themeColors, tokenVarLines } = resolveTokens(colors)
 
-export default function rimelightUiPreset(options: PresetOptions = {}): Preset {
-  const allColors = Object.keys({ ...P, ...options.colors })
   return {
     name: "rimelight-ui",
     outputToCssLayers: true,
     safelist: [
-      ...allColors.map((c) => `rl-color-${c}`),
-      ...Object.values(options.icons ?? {}).filter(
+      ...Object.keys(themeColors).map((c) => `rl-color-${c}`),
+      ...Object.values(icons ?? {}).filter(
         (v): v is string => typeof v === "string" && v.startsWith("i-")
       )
     ],
     presets: [
-      options.presets?.wind !== false && presetWind4(),
-      options.presets?.typography !== false && presetTypography(),
-      options.presets?.icons !== false && presetIcons()
+      presets.wind !== false && presetWind4(),
+      presets.typography !== false && presetTypography(),
+      presets.icons !== false && presetIcons({ collections: { rl: getIconSvg } }),
+      {
+        name: "rimelight-theme",
+        theme: {
+          spacing: { md: "1rem" },
+          colors: themeColors
+        }
+      }
     ].filter(Boolean) as Preset[],
+    shortcuts: [
+      [
+        /^(text|bg|ring|border)-([a-z]+)(?:\/(\d+))?$/,
+        ([, p, n, o]) => {
+          const s = INTENTS[n!]?.[p!]
+          if (!s) return
+          const base = `${p}-neutral-${s}${o ? `/${o}` : ""}`
+          return p === "bg" && n === "inverted" ? `${base} text-neutral-50` : base
+        }
+      ]
+    ],
     rules: [
       [
         /^rl-color-([\w-]+)$/,
-        ([, c]) => ({
-          "--rl-bg": `var(--color-${c}-500)`,
-          "--rl-ring": `var(--color-${c}-500)`,
-          "--rl-border": `var(--color-${c}-500)`,
-          "--rl-bg-hover": `var(--color-${c}-600)`,
-          "--rl-text": `var(--color-${c}-600)`
-        })
-      ],
-      [
-        /^(text|bg|ring|border|outline|divide)-([a-z]+)(?:\/(\d+))?$/,
-        ([, p, n, o]) => {
-          const prop = CSS_PROPS[p!],
-            s = INTENTS[n!]?.[p === "divide" ? "border" : p === "outline" ? "ring" : p!]
-          if (!prop || !s) return
-          const b = `var(--color-neutral-${s})`
+        ([, c]) => {
+          const v500 = `var(--rl-${c}-500)`
+          const v600 = `var(--rl-${c}-600)`
           return {
-            [prop]: o ? `color-mix(in srgb, ${b} ${o}%, transparent)` : b,
-            ...(p === "bg" && n === "inverted" && { color: "var(--color-neutral-50)" })
+            "--rl-bg": v500,
+            "--rl-ring": v500,
+            "--rl-border": v500,
+            "--rl-bg-hover": v600,
+            "--rl-text": v600
           }
         }
-      ],
-      [
-        /^rl-select$/,
-        () => `
-select.rl-select, select.rl-select::picker(select) { appearance: base-select; }
-select.rl-select::picker-icon { display: none; }
-select.rl-select::picker(select) { border: 1px solid var(--color-neutral-200, rgba(255, 255, 255, 0.1)); border-radius: 0.5rem; background-color: var(--color-neutral-100, #18181b); color: var(--color-neutral-950, #f4f4f5); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5); padding: 0.25rem; margin-top: 0.25rem; }
-select.rl-select option { padding: 0.375rem 0.625rem; border-radius: 0.375rem; background-color: var(--color-neutral-100, #18181b); color: var(--color-neutral-950, #f4f4f5); font-size: 0.875rem; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; }
-select.rl-select option:hover, select.rl-select option:focus { background-color: var(--color-neutral-200, #27272a); color: var(--color-neutral-950, #ffffff); }
-select.rl-select option:checked { background-color: var(--color-primary-500, #3b82f6); color: #ffffff; font-weight: 500; }
-`
       ]
     ],
-    theme: {
-      spacing: Object.fromEntries(
-        "6xs:0.125,5xs:0.25,4xs:0.375,3xs:0.5,2xs:0.625,xs:0.75,sm:0.875,md:1,lg:1.25,xl:1.5,2xl:2,3xl:3,4xl:4,5xl:6,6xl:8"
-          .split(",")
-          .map((s) => s.split(":") as [string, string])
-          .map(([k, v]) => [k, `${v}rem`])
-      ),
-      radius: Object.fromEntries(
-        "xs:- 0.375,sm:- 0.25,md:- 0.125,lg:,xl:+ 0.25,2xl:+ 0.5,3xl:+ 1"
-          .split(",")
-          .map((s) => s.split(":") as [string, string])
-          .map(([k, v]) => [k, v ? `calc(var(--radius) ${v}rem)` : "var(--radius)"])
-      ),
-      colors: Object.fromEntries(
-        allColors.map((c) => [
-          c,
-          {
-            DEFAULT: `var(--${c})`,
-            foreground: `var(--${c}-foreground)`,
-            accent: `var(--${c}-accent)`,
-            ...Object.fromEntries(S.map(([s]) => [s, `var(--color-${c}-${s})`]))
-          }
-        ])
-      )
-    },
     preflights: [
       {
-        getCSS: () =>
-          `:root {\n  color-scheme: light dark;\n  --radius: 0.625rem;\n  --rl-header-height: 4rem;\n  --rl-container: 90rem;\n}\n:root, .dark, .light, .rl-dark, .rl-light, [data-theme="dark"], [data-theme="light"] {\n${cssVars(options.colors)}}\n.dark, [data-theme="dark"], .rl-dark { color-scheme: dark; }\n.light, [data-theme="light"], .rl-light { color-scheme: light; }\nbody { background-color: light-dark(oklch(1 0 0), var(--color-neutral-50)); color: var(--color-neutral-950); }`
+        getCSS: () => `:root {
+  color-scheme: light dark;
+  --rl-header-height: 4rem;
+  --rl-container: 90rem;
+  ${tokenVarLines.join("\n  ")}
+}
+[data-theme="dark"] { color-scheme: dark; }
+[data-theme="light"] { color-scheme: light; }
+body { background-color: var(--rl-neutral-50); color: var(--rl-neutral-950); }`
       }
     ]
   }

package/src/resolver.ts

@@ -1,20 +1,132 @@
-import { scv, cx } from "css-variants"
-import type { UIConfig } from "./types"
+import uiConfig from "virtual:rimelight/ui"
+import type { ClassValue, ThemeConfig } from "./types"
 
-export const uiConfig: UIConfig = import.meta.env.RIMELIGHT_UI_CONFIG ?? {}
+export function cx(...args: ClassValue[]): string {
+  let str = ""
+  for (let i = 0; i < args.length; i++) {
+    const val = args[i]
+    if (!val) continue
+    if (typeof val === "string" || typeof val === "number") {
+      str += (str ? " " : "") + val
+    } else if (Array.isArray(val)) {
+      if (val.length) {
+        const inner = cx(...val)
+        if (inner) str += (str ? " " : "") + inner
+      }
+    } else if (typeof val === "object") {
+      for (const k in val) {
+        if (val[k]) str += (str ? " " : "") + k
+      }
+    }
+  }
+  return str
+}
+
+export function defineTheme<const S extends string>(name: string, themeConfig: ThemeConfig<S>) {
+  const custom = uiConfig?.components?.themes?.[name]
+  const slots = (custom?.slots ?? themeConfig.slots ?? ["root" as S]) as readonly S[]
+  const rootSlot = (slots.includes("root" as S) ? "root" : slots[0] || "root") as S
+
+  if (uiConfig?.unstyled) {
+    return (props: any = {}): Record<S, string> => {
+      const res = {} as Record<S, string>
+      const hasClass = props.class || props.className
+      for (let i = 0; i < slots.length; i++) {
+        const slot = slots[i]!
+        const base = slot === rootSlot && hasClass ? cx(props.class, props.className) : ""
+        const fn = props.ui?.[slot]
+        res[slot] = typeof fn === "function" ? fn(base) : cx(base, fn)
+      }
+      return res
+    }
+  }
+
+  const autoColor = (custom?.variants ?? themeConfig.variants)?.color === "auto"
+  const defaultVariants = { ...themeConfig.defaultVariants, ...custom?.defaultVariants }
+  const compoundVariants = [
+    ...(themeConfig.compoundVariants ?? []),
+    ...(custom?.compoundVariants ?? [])
+  ]
+
+  const compiledCV = compoundVariants.map((cv) => {
+    const { classNames, class: cls, ...rest } = cv
+    const matchers: Array<{ key: string; exp: any }> = []
+    for (const k in rest) {
+      matchers.push({ key: k, exp: rest[k] })
+    }
+    return { matchers, cls: classNames || cls }
+  })
+
+  const baseMap: Record<string, string> = {}
+  for (let i = 0; i < slots.length; i++) {
+    const s = slots[i]!
+    baseMap[s] = cx(themeConfig.base?.[s], custom?.base?.[s])
+  }
+
+  const variants: Record<string, Record<string, any>> = { ...themeConfig.variants }
+  if (custom?.variants) {
+    for (const k in custom.variants) variants[k] = { ...variants[k], ...custom.variants[k] }
+  }
+
+  const variantKeys = Object.keys(variants).filter((k) => !(k === "color" && autoColor))
 
-export const defineTheme = <const S extends string>(name: string, theme: any) => {
-  const root = (theme.slots.includes("root") ? "root" : theme.slots[0]) as S,
-    autoColor = theme.variants?.color === "auto",
-    scvFn = scv(autoColor ? { ...theme, variants: { ...theme.variants, color: {} } } : theme),
-    globalSlots = uiConfig.components?.themes?.[name]?.slots
   return (props: any = {}): Record<S, string> => {
-    if (uiConfig.unstyled) return { [root]: cx(props.class, props.className) } as any
-    const slots = scvFn(props),
-      color = autoColor && (props.color ?? theme.defaultVariants?.color)
-    slots[root] = cx(slots[root], color && `rl-color-${color}`, props.class, props.className)
-    for (const [k, v] of Object.entries({ ...globalSlots, ...props.ui }))
-      slots[k] = cx(slots[k], typeof v === "function" ? v(slots[k] || "") : v)
-    return slots
+    const res = {} as Record<S, string>
+    for (let i = 0; i < slots.length; i++) {
+      res[slots[i]!] = baseMap[slots[i]!] || ""
+    }
+
+    const values = { ...defaultVariants, ...props }
+    const color = autoColor ? (props.color ?? defaultVariants.color) : undefined
+
+    for (let k = 0; k < variantKeys.length; k++) {
+      const key = variantKeys[k]!
+      const selected = values[key]
+      if (selected != null && variants[key]?.[selected]) {
+        const layer = variants[key][selected]
+        for (let i = 0; i < slots.length; i++) {
+          const s = slots[i]!
+          const l = layer[s]
+          if (l) res[s] = res[s] ? `${res[s]} ${cx(l)}` : cx(l)
+        }
+      }
+    }
+
+    if (compiledCV.length) {
+      for (let c = 0; c < compiledCV.length; c++) {
+        const { matchers, cls } = compiledCV[c]!
+        if (!cls) continue
+        let match = true
+        for (let m = 0; m < matchers.length; m++) {
+          const { key, exp } = matchers[m]!
+          const actual = values[key]
+          if (Array.isArray(exp) ? !exp.includes(actual) : actual !== exp) {
+            match = false
+            break
+          }
+        }
+        if (match) {
+          for (let i = 0; i < slots.length; i++) {
+            const s = slots[i]!
+            const l = cls[s]
+            if (l) res[s] = res[s] ? `${res[s]} ${cx(l)}` : cx(l)
+          }
+        }
+      }
+    }
+
+    for (let i = 0; i < slots.length; i++) {
+      const slot = slots[i]!
+      let slotClass = res[slot]!
+      if (slot === rootSlot) {
+        if (color) slotClass = slotClass ? `${slotClass} rl-color-${color}` : `rl-color-${color}`
+        const extra = cx(props.class, props.className)
+        if (extra) slotClass = slotClass ? `${slotClass} ${extra}` : extra
+      }
+      const override = props.ui?.[slot]
+      res[slot] = typeof override === "function" ? override(slotClass) : cx(slotClass, override)
+    }
+
+    return res
   }
 }

package/src/shortcuts.ts

@@ -1,4 +1,4 @@
-import { atom } from "nanostores"
+import { atom } from "./stores"
 
 export type Handler = (e: KeyboardEvent) => void
 export interface ShortcutConfig {
@@ -23,86 +23,92 @@ export interface RegisteredShortcut {
 }
 
 interface Shortcut {
-  key: string
   handler: Handler
-  mods: number
   usingInput?: boolean | string | undefined
 }
 
 const isMac = typeof navigator !== "undefined" && /Mac|iP/.test(navigator.userAgent),
-  MOD_CMD = isMac ? 2 : 1,
-  SHIFTABLE = new Set([
-    "arrowleft",
-    "arrowright",
-    "arrowup",
-    "arrowdown",
-    "tab",
-    "escape",
-    "enter",
-    "backspace"
-  ]),
-  kMap = (m: string, v: any) => m.split(",").map((k) => [k, v]),
-  MODS: Record<string, number> = Object.fromEntries([
-    ...kMap("ctrl,control", 1),
-    ...kMap("cmd,command,meta", MOD_CMD),
-    ...kMap("alt,opt,option", 4),
-    ["shift", 8]
-  ]),
-  KEYS: Record<string, string> = Object.fromEntries([
-    ...kMap("ctrl,control", "Ctrl"),
-    ...kMap("cmd,command,meta", isMac ? "⌘" : "Ctrl"),
-    ...kMap("alt,opt,option", isMac ? "⌥" : "Alt"),
-    ["shift", isMac ? "⇧" : "Shift"],
-    ..."enter:↵,delete:⌦,backspace:⌫,escape:Esc,tab:⇥,space:Space,arrowup:↑,arrowdown:↓,arrowleft:←,arrowright:→"
-      .split(",")
-      .map((s) => s.split(":") as [string, string])
-  ])
+  KEYS: Record<string, string> = {
+    ctrl: "Ctrl",
+    meta: isMac ? "⌘" : "Ctrl",
+    alt: isMac ? "⌥" : "Alt",
+    shift: isMac ? "⇧" : "Shift",
+    enter: "↵",
+    delete: "⌦",
+    backspace: "⌫",
+    escape: "Esc",
+    tab: "⇥",
+    space: "Space",
+    arrowup: "↑",
+    arrowdown: "↓",
+    arrowleft: "←",
+    arrowright: "→"
+  }
+
+const MODS: Record<string, string> = {
+  cmd: "meta",
+  command: "meta",
+  control: "ctrl",
+  opt: "alt",
+  option: "alt"
+}
+
+export const normalizeModifier = (m: string) => MODS[m.toLowerCase()] || m.toLowerCase()
 
 export const formatShortcutKeys = (k: string): string[] =>
-  k.split(/[_-]/).map((p) => KEYS[p.toLowerCase()] ?? (p ? p[0]!.toUpperCase() + p.slice(1) : ""))
+  k.split(/[_-]/).map((p) => {
+    const norm = normalizeModifier(p)
+    return KEYS[norm] ?? (p ? p[0]!.toUpperCase() + p.slice(1) : "")
+  })
 
 export const activeShortcutsStore = atom<RegisteredShortcut[]>([])
 
 const isUsingInput = (el: Element | null): boolean | string => {
-  while (el?.shadowRoot?.activeElement) el = el.shadowRoot.activeElement
-  return el && (/INPUT|TEXTAREA|SELECT/.test(el.nodeName) || (el as HTMLElement).isContentEditable)
-    ? el.getAttribute("name") || true
+  const target = (el?.shadowRoot?.activeElement || el) as HTMLElement | null
+  return target && (/INPUT|TEXTAREA|SELECT/.test(target.tagName) || target.isContentEditable)
+    ? target.getAttribute("name") || true
     : false
 }
 
 const isEnabled = (s: Shortcut, input: boolean | string) =>
   s.usingInput === true || (s.usingInput ? input === s.usingInput : !input)
 
+const normalizeCombo = (combo: string) => {
+  const parts = combo.toLowerCase().split("_")
+  let meta = ""
+  let ctrl = ""
+  let alt = ""
+  let shift = ""
+  for (let i = 0; i < parts.length - 1; i++) {
+    const m = MODS[parts[i]!] || parts[i]!
+    if (m === "meta") meta = "meta_"
+    else if (m === "ctrl") ctrl = "ctrl_"
+    else if (m === "alt") alt = "alt_"
+    else if (m === "shift") shift = "shift_"
+  }
+  return `${meta}${ctrl}${alt}${shift}${parts[parts.length - 1] || ""}`
+}
+
 export function defineShortcuts(
   config: ShortcutsConfig,
   options: ShortcutsOptions = {}
 ): () => void {
   if (typeof window === "undefined") return () => {}
 
-  const standard: Shortcut[] = [],
-    chained = new Map<string, Shortcut>(),
-    reg: RegisteredShortcut[] = []
-  let maxChain = 2
+  const map = new Map<string, Shortcut>()
+  const reg: RegisteredShortcut[] = []
 
   for (const [k, cfg] of Object.entries(config)) {
     if (!cfg) continue
-    const obj = typeof cfg === "object" ? cfg : null,
-      handler = obj ? obj.handler : cfg
+    const obj = typeof cfg === "object" ? cfg : null
+    const handler = obj ? obj.handler : cfg
     if (typeof handler !== "function") continue
 
-    const chain = k.includes("-") && k !== "-" && !k.includes("_"),
-      parts = k.toLowerCase().split(chain ? "-" : "_")
-    let mods = 0
-    const nonMods = parts.filter((p) => (MODS[p] ? !(mods |= MODS[p]!) : true)),
-      base = chain ? k.toLowerCase() : nonMods.join("_"),
-      item: Shortcut = { key: base, handler, mods, usingInput: obj?.usingInput }
+    const key =
+      k.includes("-") && k !== "-" && !k.includes("_") ? k.toLowerCase() : normalizeCombo(k)
+    map.set(key, { handler, usingInput: obj?.usingInput })
 
-    if (chain) {
-      maxChain = Math.max(maxChain, parts.length)
-      chained.set(base, item)
-    } else standard.push(item)
-
-    if (obj?.label || obj?.description)
+    if (obj?.label || obj?.description) {
       reg.push({
         id: `${obj.category || "system"}-${k}`,
         keys: formatShortcutKeys(k),
@@ -111,62 +117,75 @@ export function defineShortcuts(
         description: obj.description,
         order: obj.order
       })
+    }
   }
 
   const ids = new Set(reg.map((i) => i.id))
-  if (ids.size)
+  if (ids.size) {
     activeShortcutsStore.set(
       activeShortcutsStore
         .get()
         .filter((i) => !ids.has(i.id))
         .concat(reg)
     )
+  }
 
-  const inputs: string[] = []
+  const buffer: string[] = []
   let timer: ReturnType<typeof setTimeout> | undefined
 
   const onKeyDown = (e: KeyboardEvent) => {
-    if (!e.key) return
-    const input = isUsingInput(document.activeElement),
-      trigger = (s: Shortcut) => {
-        e.preventDefault()
-        s.handler(e)
-        inputs.length = 0
-      }
-
-    inputs.push(e.key.toLowerCase())
-    if (inputs.length > maxChain) inputs.shift()
+    if (!e.key || e.isComposing) return
+    const key = e.key === " " ? "space" : e.key.toLowerCase()
+    const codeKey = e.code
+      ? e.code
+          .replace(/^Key/, "")
+          .replace(/^Digit/, "")
+          .toLowerCase()
+      : ""
+    const input = isUsingInput(typeof document !== "undefined" ? document.activeElement : null)
+
+    buffer.push(key)
+    if (buffer.length > 2) buffer.shift()
     clearTimeout(timer)
 
-    if (inputs.length >= 2 && chained.size)
-      for (let len = Math.min(inputs.length, maxChain); len >= 2; len--) {
-        const match = chained.get(inputs.slice(-len).join("-"))
-        if (match && isEnabled(match, input)) return trigger(match)
+    // Chained sequence check (e.g. g-d)
+    if (buffer.length === 2) {
+      const chainedMatch = map.get(buffer.join("-"))
+      if (chainedMatch && isEnabled(chainedMatch, input)) {
+        e.preventDefault()
+        chainedMatch.handler(e)
+        buffer.length = 0
+        return
       }
+    }
 
-    const eMods = +e.ctrlKey | (+e.metaKey << 1) | (+e.altKey << 2) | (+e.shiftKey << 3),
-      c = e.code.toLowerCase(),
-      k = e.key.toLowerCase()
-
-    for (const s of standard) {
-      if ((s.mods & 7) !== (eMods & 7)) continue
-      if (s.mods & 4 ? c !== `key${s.key}` && c !== `digit${s.key}` && c !== s.key : k !== s.key)
-        continue
-      if (
-        Boolean(s.mods & 8) !== e.shiftKey &&
-        (s.mods & 8 || /^[a-z]$/.test(s.key) || SHIFTABLE.has(s.key))
-      )
-        continue
-      if (isEnabled(s, input)) return trigger(s)
+    // Unified event normalization
+    const keysToCheck = Array.from(new Set([key, codeKey].filter(Boolean)))
+    for (const k of keysToCheck) {
+      const sig = `${e.metaKey ? "meta_" : ""}${e.ctrlKey ? "ctrl_" : ""}${e.altKey ? "alt_" : ""}${e.shiftKey ? "shift_" : ""}${k}`
+      const primarySig =
+        !isMac && e.ctrlKey && !e.metaKey
+          ? `meta_${e.altKey ? "alt_" : ""}${e.shiftKey ? "shift_" : ""}${k}`
+          : sig
+
+      const match = map.get(sig) || map.get(primarySig) || map.get(k)
+      if (match && isEnabled(match, input)) {
+        e.preventDefault()
+        match.handler(e)
+        buffer.length = 0
+        return
+      }
     }
 
-    timer = setTimeout(() => void (inputs.length = 0), options.chainDelay ?? 800)
+    timer = setTimeout(() => void (buffer.length = 0), options.chainDelay ?? 800)
   }
 
   window.addEventListener("keydown", onKeyDown)
   return () => {
     window.removeEventListener("keydown", onKeyDown)
     clearTimeout(timer)
-    if (ids.size) activeShortcutsStore.set(activeShortcutsStore.get().filter((i) => !ids.has(i.id)))
+    if (ids.size) {
+      activeShortcutsStore.set(activeShortcutsStore.get().filter((i) => !ids.has(i.id)))
+    }
   }
 }