npm - @jojovms/ninja-keys-core - Versions diffs - 0.0.1 - Mend

@jojovms/ninja-keys-core 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/README.md ADDED Viewed

@@ -0,0 +1,51 @@
+# @jojovms/ninja-keys-core 🥷
+A zero-dependency "Command Palette" interface (Ctrl+K) for Vanilla JS.
+## Installation
+```bash
+npm install @jojovms/ninja-keys-core
+```
+## Usage
+```javascript
+import { NinjaKeys } from '@jojovms/ninja-keys-core';
+const ninja = new NinjaKeys({
+  actions: [
+    { id: 'home', title: 'Go Home', icon: '🏠', handler: () => window.location = '/' },
+    { id: 'theme', title: 'Toggle Dark Mode', icon: '🌙', handler: () => toggleMyTheme() }
+  ],
+  hotkey: 'k' // Ctrl+K or Cmd+K
+});
+ninja.init();
+// You can also open it manually via a button
+document.getElementById('my-btn').onclick = () => ninja.toggle();
+```
+## Options
+| Option | Type | Default | Description |
+|---|---|---|---|
+| `actions` | `NinjaAction[]` | `[]` | Array of actions (see below). |
+| `placeholder` | `string` | `'Type a command...'` | Search input placeholder. |
+| `theme` | `'light' \| 'dark'` | `'light'` | Color theme. |
+| `hotkey` | `string` | `'k'` | Hotkey to toggle (combined with Ctrl/Cmd). |
+## Action Object
+```typescript
+{
+  id: string;
+  title: string;
+  handler: () => void;
+  icon?: string;       // Emoji or SVG
+  hotkey?: string;     // Visual hint (e.g., 'ctrl+h')
+  section?: string;    // (Future support) Grouping
+  keywords?: string;   // Hidden search terms
+}
+```

package/dist/index.d.ts ADDED Viewed

@@ -0,0 +1,36 @@
+export interface NinjaAction {
+    id: string;
+    title: string;
+    hotkey?: string;
+    handler?: () => void;
+    icon?: string;
+    section?: string;
+    keywords?: string;
+}
+export interface NinjaKeysOptions {
+    actions: NinjaAction[];
+    placeholder?: string;
+    theme?: 'light' | 'dark';
+}
+export declare class NinjaKeys {
+    private options;
+    private isOpen;
+    private overlay;
+    private input;
+    private resultsList;
+    private selectedIndex;
+    private filteredActions;
+    private cleanupFns;
+    constructor(options: NinjaKeysOptions);
+    init(): void;
+    cleanup(): void;
+    open(): void;
+    close(): void;
+    toggle(): void;
+    private createOverlay;
+    private filterActions;
+    private moveSelection;
+    private ensureVisible;
+    private executeSelected;
+    private renderList;
+}

package/dist/index.mjs ADDED Viewed

@@ -0,0 +1,160 @@
+var c = Object.defineProperty;
+var p = (l, e, t) => e in l ? c(l, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[e] = t;
+var n = (l, e, t) => p(l, typeof e != "symbol" ? e + "" : e, t);
+class f {
+  constructor(e) {
+    n(this, "options");
+    n(this, "isOpen", !1);
+    n(this, "overlay", null);
+    n(this, "input", null);
+    n(this, "resultsList", null);
+    n(this, "selectedIndex", 0);
+    n(this, "filteredActions", []);
+    n(this, "cleanupFns", []);
+    this.options = {
+      placeholder: "Type a command or search...",
+      theme: "light",
+      ...e
+    }, this.filteredActions = this.options.actions;
+  }
+  init() {
+    this.createOverlay();
+    const e = (t) => {
+      (t.ctrlKey || t.metaKey) && t.key === "k" && (t.preventDefault(), this.toggle()), t.key === "Escape" && this.isOpen && this.close(), this.isOpen && (t.key === "ArrowDown" ? (t.preventDefault(), this.moveSelection(1)) : t.key === "ArrowUp" ? (t.preventDefault(), this.moveSelection(-1)) : t.key === "Enter" && (t.preventDefault(), this.executeSelected()));
+    };
+    window.addEventListener("keydown", e), this.cleanupFns.push(() => window.removeEventListener("keydown", e));
+  }
+  cleanup() {
+    this.cleanupFns.forEach((e) => e()), this.overlay && this.overlay.remove();
+  }
+  open() {
+    this.isOpen || !this.overlay || (this.isOpen = !0, this.overlay.style.display = "flex", this.overlay.style.opacity = "0", requestAnimationFrame(() => {
+      this.overlay && (this.overlay.style.opacity = "1");
+    }), this.input && (this.input.value = "", this.input.focus(), this.filterActions("")));
+  }
+  close() {
+    !this.isOpen || !this.overlay || (this.overlay.style.opacity = "0", setTimeout(() => {
+      this.overlay && (this.overlay.style.display = "none"), this.isOpen = !1;
+    }, 200));
+  }
+  toggle() {
+    this.isOpen ? this.close() : this.open();
+  }
+  createOverlay() {
+    if (this.overlay) return;
+    this.overlay = document.createElement("div"), Object.assign(this.overlay.style, {
+      position: "fixed",
+      top: "0",
+      left: "0",
+      width: "100%",
+      height: "100%",
+      background: "rgba(0,0,0,0.5)",
+      zIndex: "9999",
+      display: "none",
+      justifyContent: "center",
+      alignItems: "flex-start",
+      paddingTop: "10vh",
+      transition: "opacity 0.2s ease",
+      fontFamily: "sans-serif",
+      backdropFilter: "blur(2px)"
+    }), this.overlay.addEventListener("click", (r) => {
+      r.target === this.overlay && this.close();
+    });
+    const e = document.createElement("div"), t = this.options.theme === "dark" ? "#1f2937" : "#ffffff", s = this.options.theme === "dark" ? "#f3f4f6" : "#111827", o = this.options.theme === "dark" ? "#374151" : "#e5e7eb";
+    Object.assign(e.style, {
+      width: "600px",
+      maxWidth: "90%",
+      maxHeight: "80vh",
+      background: t,
+      color: s,
+      borderRadius: "8px",
+      boxShadow: "0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04)",
+      overflow: "hidden",
+      display: "flex",
+      flexDirection: "column",
+      border: `1px solid ${o}`
+    });
+    const i = document.createElement("div");
+    i.style.borderBottom = `1px solid ${o}`, i.style.padding = "16px", this.input = document.createElement("input"), Object.assign(this.input.style, {
+      width: "100%",
+      background: "transparent",
+      border: "none",
+      outline: "none",
+      fontSize: "18px",
+      color: s
+    }), this.input.placeholder = this.options.placeholder || "Type to search...", this.input.addEventListener("input", (r) => {
+      this.filterActions(r.target.value);
+    }), i.appendChild(this.input), e.appendChild(i), this.resultsList = document.createElement("div"), Object.assign(this.resultsList.style, {
+      overflowY: "auto",
+      padding: "8px 0",
+      maxHeight: "50vh"
+    }), e.appendChild(this.resultsList), this.overlay.appendChild(e), document.body.appendChild(this.overlay);
+  }
+  filterActions(e) {
+    const t = e.toLowerCase().trim();
+    t ? this.filteredActions = this.options.actions.filter((s) => {
+      var o, i;
+      return s.title.toLowerCase().includes(t) || ((o = s.keywords) == null ? void 0 : o.toLowerCase().includes(t)) || ((i = s.section) == null ? void 0 : i.toLowerCase().includes(t));
+    }) : this.filteredActions = this.options.actions, this.selectedIndex = 0, this.renderList();
+  }
+  moveSelection(e) {
+    this.selectedIndex += e, this.selectedIndex < 0 && (this.selectedIndex = this.filteredActions.length - 1), this.selectedIndex >= this.filteredActions.length && (this.selectedIndex = 0), this.renderList(), this.ensureVisible();
+  }
+  ensureVisible() {
+    if (!this.resultsList) return;
+    const e = this.resultsList.children[this.selectedIndex];
+    e && e.scrollIntoView({ block: "nearest" });
+  }
+  executeSelected() {
+    const e = this.filteredActions[this.selectedIndex];
+    e && e.handler && (e.handler(), this.close());
+  }
+  renderList() {
+    if (!this.resultsList) return;
+    this.resultsList.innerHTML = "";
+    const e = this.options.theme === "dark" ? "#374151" : "#f3f4f6", t = this.options.theme === "dark" ? "#9ca3af" : "#6b7280";
+    if (this.filteredActions.forEach((s, o) => {
+      const i = document.createElement("div"), r = o === this.selectedIndex;
+      Object.assign(i.style, {
+        padding: "12px 16px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        cursor: "pointer",
+        background: r ? e : "transparent",
+        borderLeft: r ? "4px solid #6366f1" : "4px solid transparent"
+      });
+      const d = document.createElement("div");
+      if (d.style.display = "flex", d.style.alignItems = "center", d.style.gap = "12px", s.icon) {
+        const a = document.createElement("span");
+        a.innerHTML = s.icon, d.appendChild(a);
+      }
+      const h = document.createElement("span");
+      if (h.textContent = s.title, d.appendChild(h), i.appendChild(d), s.hotkey) {
+        const a = document.createElement("div");
+        a.textContent = s.hotkey, Object.assign(a.style, {
+          fontSize: "12px",
+          padding: "2px 6px",
+          borderRadius: "4px",
+          background: this.options.theme === "dark" ? "#4b5563" : "#e5e7eb",
+          color: t
+        }), i.appendChild(a);
+      }
+      i.addEventListener("click", () => {
+        s.handler && (s.handler(), this.close());
+      }), i.addEventListener("mouseenter", () => {
+        this.selectedIndex = o, this.renderList();
+      }), this.resultsList.appendChild(i);
+    }), this.filteredActions.length === 0) {
+      const s = document.createElement("div");
+      s.textContent = "No results found.", Object.assign(s.style, {
+        padding: "20px",
+        textAlign: "center",
+        color: t
+      }), this.resultsList.appendChild(s);
+    }
+  }
+}
+export {
+  f as NinjaKeys
+};

package/dist/index.umd.js ADDED Viewed

@@ -0,0 +1 @@

package/package.json ADDED Viewed

@@ -0,0 +1,43 @@
+{
+    "name": "@jojovms/ninja-keys-core",
+    "version": "0.0.1",
+    "description": "Commandō: Your commands, unleashed. A VS Code-style command palette for your web applications.",
+    "keywords": [
+        "commando",
+        "command-palette",
+        "ninja-keys",
+        "keyboard-shortcuts",
+        "a11y",
+        "framework",
+        "jojovms"
+    ],
+    "author": "Shijo Shaji (https://shijoshaji.in)",
+    "homepage": "https://shijoshaji.in",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/shijoshaji/ninja-keys.git",
+        "directory": "core"
+    },
+    "bugs": {
+        "url": "https://github.com/shijoshaji/ninja-keys/issues"
+    },
+    "license": "MIT",
+    "main": "dist/index.js",
+    "module": "dist/index.mjs",
+    "types": "dist/index.d.ts",
+    "files": [
+        "dist"
+    ],
+    "scripts": {
+        "build": "vite build",
+        "dev": "vite build --watch"
+    },
+    "devDependencies": {
+        "typescript": "^5.0.0",
+        "vite": "^5.0.0",
+        "vite-plugin-dts": "^3.0.0"
+    },
+    "publishConfig": {
+        "access": "public"
+    }
+}