NodeSecure · ErwanRaulo · Apr 7, 2026
diff --git a/.changeset/little-light-bulb.md b/.changeset/little-light-bulb.md
@@ -0,0 +1,6 @@
+---
+"@nodesecure/vis-network": minor
+---
+
+Visualize highlited packages with dashed yellow border
+
diff --git a/README.md b/README.md
@@ -151,6 +151,7 @@ Type a package name directly to search, or prefix with a filter name followed by
 - `ext` — file extension present in the package (e.g. `.js`, `.ts`).
 - `builtin` — Node.js core module used by the package (e.g. `fs`, `path`).
 - `size` — size range (see [size-satisfies](https://github.com/NodeSecure/size-satisfies#usage-example), e.g. `>50kb`, `10kb..200kb`).
+- `highlighted` — all highlighted packages by default.
 
 ## FAQ
 

diff --git a/i18n/arabic.js b/i18n/arabic.js
@@ -243,7 +243,8 @@ const ui = {
   legend: {
     default: "الحزمة بخير.",
     warn: "الحزمة بها تحذيرات.",
-    friendly: "الحزمة تتم صيانتها بواسطة نفس مؤلفي الحزمة الجذرية."
+    friendly: "الحزمة تتم صيانتها بواسطة نفس مؤلفي الحزمة الجذرية.",
+    highlighted: "الحزمة جزء من الحزم المميزة"
   },
   lockedNavigation: {
     next: "التالي",

diff --git a/i18n/english.js b/i18n/english.js
@@ -315,13 +315,15 @@ const ui = {
       author: "name or email",
       ext: "file extension",
       builtin: "node.js module",
-      size: "e.g. >50kb"
+      size: "e.g. >50kb",
+      highlighted: "all"
     }
   },
   legend: {
     default: "The package is fine.",
     warn: "The package has warnings.",
-    friendly: "The package is maintained by the same authors as the root package."
+    friendly: "The package is maintained by the same authors as the root package.",
+    highlighted: "The package is part of highlighted packages"
   },
   lockedNavigation: {
     next: "Next",

diff --git a/i18n/french.js b/i18n/french.js
@@ -315,13 +315,15 @@ const ui = {
       author: "nom ou email",
       ext: "extension de fichier",
       builtin: "module node.js",
-      size: "ex. >50kb"
+      size: "ex. >50kb",
+      highlighted: "all"
     }
   },
   legend: {
     default: "Rien à signaler.",
     warn: "La dépendance contient des menaces.",
-    friendly: "La dépendance est maintenu par des auteurs du package principal."
+    friendly: "La dépendance est maintenu par des auteurs du package principal.",
+    highlighted: "Le package fait partie des packages mis en évidence"
   },
   lockedNavigation: {
     next: "Suivant",

diff --git a/i18n/turkish.js b/i18n/turkish.js
@@ -245,7 +245,8 @@ const ui = {
   legend: {
     default: "Paket sorunsuz.",
     warn: "Pakette uyarılar var.",
-    friendly: "Paket, kök paketin yazarlarıyla aynı kişiler tarafından bakılmaktadır."
+    friendly: "Paket, kök paketin yazarlarıyla aynı kişiler tarafından bakılmaktadır.",
+    highlighted: "Paket, vurgulanan paketlerin bir parçasıdır"
   },
   lockedNavigation: {
     next: "Sonraki",

diff --git a/public/components/command-palette/command-palette.js b/public/components/command-palette/command-palette.js
@@ -11,6 +11,7 @@ import {
   FILTER_HAS_HELPERS,
   FILTER_MULTI_SELECT,
   PRESETS,
+  FILTER_INSTANT_CONFIRM,
   computeMatches,
   getHelperValues
 } from "./filters.js";
@@ -94,12 +95,13 @@ class CommandPalette extends LitElement {
   #init = ({ detail: { linker, packages, network } }) => {
     this.#linker = linker;
     this.#network = network;
-    this.#packages = packages.map(({ id, name, version, flags }) => {
+    this.#packages = packages.map(({ id, name, version, flags, isHighlighted }) => {
       return {
         id: String(id),
         name,
         version,
-        flags
+        flags,
+        isHighlighted
       };
     });
   };
@@ -323,10 +325,15 @@ class CommandPalette extends LitElement {
 
   #selectHelper(helper) {
     if (helper.type === "filter") {
-      this.inputValue = `${helper.value}:`;
-      this.activeFilter = helper.value;
-      this.selectedIndex = -1;
-      this.results = [];
+      if (FILTER_INSTANT_CONFIRM.has(helper.value)) {
+        this.#addQuery(helper.value, "all");
+      }
+      else {
+        this.inputValue = `${helper.value}:`;
+        this.activeFilter = helper.value;
+        this.selectedIndex = -1;
+        this.results = [];
+      }
     }
     else {
       this.#addQuery(this.activeFilter, helper.value);

diff --git a/public/components/command-palette/filters.js b/public/components/command-palette/filters.js
@@ -20,7 +20,7 @@ export const VERSION_PRESETS = [
   { label: "≥ 1.0", value: ">=1.0.0" },
   { label: "< 1.0", value: "<1.0.0" }
 ];
-export const FILTERS_NAME = new Set(["package", "version", "flag", "license", "author", "ext", "builtin", "size"]);
+export const FILTERS_NAME = new Set(["package", "version", "flag", "license", "author", "ext", "builtin", "size", "highlighted"]);
 export const PRESETS = [
   { id: "has_vulnerabilities", filter: "flag", value: "hasVulnerabilities" },
   { id: "has_scripts", filter: "flag", value: "hasScript" },
@@ -32,6 +32,8 @@ export const PRESETS = [
 export const FILTER_HAS_HELPERS = new Set(["license", "ext", "builtin", "author"]);
 // Filters where the mode persists after selection (multi-select)
 export const FILTER_MULTI_SELECT = new Set(["flag"]);
+// Filters that auto-confirm immediately on selection (no text input needed)
+export const FILTER_INSTANT_CONFIRM = new Set(["highlighted"]);
 
 /**
  * Returns per-flag package counts across the full linker.
@@ -243,6 +245,8 @@ function matchesFilter(opt, filterName, inputValue) {
     }
     case "flag":
       return opt.flags.includes(inputValue);
+    case "highlighted":
+      return inputValue === "all" ? opt.isHighlighted === true : opt.isHighlighted !== true;
     default:
       return false;
   }

diff --git a/public/components/legend/legend.js b/public/components/legend/legend.js
@@ -90,6 +90,7 @@ class Legend extends LitElement {
        ${this.#createLegendBoxElement(colors.WARN, legend.warn)}
        ${this.#createLegendBoxElement(colors.FRIENDLY, legend.friendly)}
        ${this.#createLegendBoxElement(colors.DEFAULT, legend.default)}
+       ${this.#createLegendBoxElement(colors.HIGHLIGHTED, legend.highlighted)}
     </div>
     `;
   }
@@ -98,7 +99,7 @@ class Legend extends LitElement {
     theme,
     text
   ) {
-    const style = `background-color: ${theme.color}; color: ${theme.font.color};`;
+    const style = `background-color: ${theme.color}; color: ${(theme.font ?? COLORS.LIGHT.DEFAULT.font).color};`;
 
     return html`
     <div class="legend-box" style=${style}>

diff --git a/public/components/views/home/maintainers/maintainers.js b/public/components/views/home/maintainers/maintainers.js
@@ -238,7 +238,7 @@ width: 16px;
           const { packages, email, url = null, npmAvatar } = data;
           const personClasses = {
             person: true,
-            highlighted: this.secureDataSet.isHighlighted(data)
+            highlighted: this.secureDataSet.isHighlightedContact(data)
           };
 
           return html`
@@ -289,9 +289,9 @@ width: 16px;
 
   #highlightContacts(authors) {
     const highlightedAuthors = authors
-      .filter(([_, contact]) => this.secureDataSet.isHighlighted(contact));
+      .filter(([_, contact]) => this.secureDataSet.isHighlightedContact(contact));
 
-    const authorsRest = authors.filter(([_, contact]) => !this.secureDataSet.isHighlighted(contact));
+    const authorsRest = authors.filter(([_, contact]) => !this.secureDataSet.isHighlightedContact(contact));
 
     return [...highlightedAuthors, ...authorsRest];
   }

diff --git a/public/main.js b/public/main.js
@@ -488,12 +488,7 @@ function onSettingsSaved(defaultConfig = null) {
     window.settings.config.theme = theme;
     window.settings.config.disableExternalRequests = config.disableExternalRequests;
 
-    if (theme === "dark") {
-      document.body.classList.add("dark");
-    }
-    else {
-      document.body.classList.remove("dark");
-    }
+    document.body.classList.toggle("dark", theme === "dark");
 
     await secureDataSet.init(
       secureDataSet.data,

diff --git a/test/e2e/command-palette.spec.js b/test/e2e/command-palette.spec.js
@@ -15,7 +15,7 @@ test.describe("[command-palette] presets and actions", () => {
       return window.i18n[activeLang].search_command;
     });
 
-    await page.locator("body").click();
+    await page.locator(`[data-menu="network--view"].active`).click();
     await page.keyboard.press("Control+k");
 
     await expect(page.locator(".backdrop")).toBeVisible();
@@ -105,7 +105,7 @@ test.describe("[command-palette] ignore flags and warnings", () => {
       return window.i18n[activeLang].search_command;
     });
 
-    await page.locator("body").click();
+    await page.locator(`[data-menu="network--view"].active`).click();
     await page.keyboard.press("Control+k");
 
     await expect(page.locator(".backdrop")).toBeVisible();

diff --git a/test/ui/command-palette-filters.test.js b/test/ui/command-palette-filters.test.js
@@ -18,7 +18,8 @@ const kLinker = new Map([
     uniqueLicenseIds: ["MIT"],
     composition: { extensions: [".js", ".ts"], required_nodejs: ["fs", "path"] },
     author: { name: "TJ Holowaychuk" },
-    size: 102_400
+    size: 102_400,
+    isHighlighted: true
   }],
   [1, {
     name: "lodash",
@@ -27,7 +28,8 @@ const kLinker = new Map([
     uniqueLicenseIds: ["MIT", "ISC"],
     composition: { extensions: [".js", ""], required_nodejs: ["path"] },
     author: "John-David Dalton",
-    size: 5_000
+    size: 5_000,
+    isHighlighted: true
   }],
   [2, {
     name: "semver",
@@ -232,6 +234,20 @@ describe("computeMatches", () => {
       assert.deepEqual(result, new Set());
     });
   });
+
+  describe("filter: highlighted", () => {
+    it("should match only highlighted packages when value is 'all'", () => {
+      const result = computeMatches(kLinker, "highlighted", "all");
+
+      assert.deepEqual(result, new Set(["0", "1"]));
+    });
+
+    it("should match non-highlighted packages when value is not 'all'", () => {
+      const result = computeMatches(kLinker, "highlighted", "none");
+
+      assert.deepEqual(result, new Set(["2"]));
+    });
+  });
 });
 
 describe("getFlagCounts", () => {

diff --git a/workspaces/vis-network/src/constants.ts b/workspaces/vis-network/src/constants.ts
@@ -9,6 +9,7 @@
 
 export type Color = {
   color: string;
+  border?: string;
   font: {
     color: string;
     background?: string;
@@ -18,9 +19,9 @@ export type Color = {
 export const COLORS = Object.freeze({
   LIGHT: {
     SELECTED: {
-      color: "#4527A0",
+      color: "#BFC5E0",
       font: {
-        color: "#FFF"
+        color: "#443730"
       }
     },
     SELECTED_GROUP: {
@@ -36,23 +37,29 @@ export const COLORS = Object.freeze({
       }
     },
     DEFAULT: {
-      color: "#E3F2FD",
+      color: "#BEE7E8",
       font: {
         color: "#121533"
       }
     },
     WARN: {
-      color: "#EF5350",
+      color: "#FFBFA0",
       font: {
-        color: "#FFF"
+        color: "#6B2737"
       }
     },
     FRIENDLY: {
-      color: "#e3fde3",
+      color: "#EDEEC0",
       font: {
         color: "#0e4522"
       }
     },
+    HIGHLIGHTED: {
+      border: "#EA9010",
+      color: "",
+      font: { color: "" },
+      margin: 12
+    },
     CONNECTED_IN: {
       color: "#C8E6C9",
       font: {
@@ -109,6 +116,11 @@ export const COLORS = Object.freeze({
         color: "#FFF"
       }
     },
+    HIGHLIGHTED: {
+      border: "#dec42c",
+      color: "",
+      font: { color: "" }
+    },
     CONNECTED_IN: {
       color: "rgb(89, 44, 109)",
       font: {