@djangocfg/ui-tools 2.1.167 → 2.1.168

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-tools",
-  "version": "2.1.167",
+  "version": "2.1.168",
   "description": "Heavy React tools with lazy loading - for Electron, Vite, CRA, Next.js apps",
   "keywords": [
     "ui-tools",
@@ -78,8 +78,8 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.167",
-    "@djangocfg/ui-core": "^2.1.167",
+    "@djangocfg/i18n": "^2.1.168",
+    "@djangocfg/ui-core": "^2.1.168",
     "lucide-react": "^0.545.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
@@ -112,10 +112,10 @@
     "@maplibre/maplibre-gl-geocoder": "^1.7.0"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.167",
+    "@djangocfg/i18n": "^2.1.168",
     "@djangocfg/playground": "workspace:*",
-    "@djangocfg/typescript-config": "^2.1.167",
-    "@djangocfg/ui-core": "^2.1.167",
+    "@djangocfg/typescript-config": "^2.1.168",
+    "@djangocfg/ui-core": "^2.1.168",
     "@types/mapbox__mapbox-gl-draw": "^1.4.8",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",

package/src/tools/Tour/utils/dom.ts

@@ -1,5 +1,14 @@
+import { emitRuntimeError } from '@djangocfg/ui-core/utils';
+
 import { logger } from './logger';
 
+/**
+ * Safely escape string for use in CSS attribute selector
+ */
+function escapeCSS(str: string): string {
+  return str.replace(/["\\]/g, '\\$&');
+}
+
 /**
  * Find target elements for a tour step.
  * Supports CSS selectors and data-tour-step-id attribute.
@@ -10,10 +19,18 @@ export function findTargetElements(
 ): HTMLElement[] {
   if (!target) {
     // Fallback to data-tour-step-id attribute
-    const elements = document.querySelectorAll<HTMLElement>(
-      `[data-tour-step-id="${stepId}"], [data-tour-step-id*="${stepId}"]`
-    );
-    return filterValidElements(Array.from(elements));
+    try {
+      const escapedStepId = escapeCSS(stepId);
+      const elements = document.querySelectorAll<HTMLElement>(
+        `[data-tour-step-id="${escapedStepId}"], [data-tour-step-id*="${escapedStepId}"]`
+      );
+      return filterValidElements(Array.from(elements));
+    } catch (error) {
+      const err = error instanceof Error ? error : new Error(String(error));
+      logger.error(`Tour: Invalid stepId selector "${stepId}"`, { error: err.message, stepId });
+      emitRuntimeError('Tour', `Invalid stepId: ${stepId}`, err);
+      return [];
+    }
   }
 
   // Try as CSS selector first
@@ -21,15 +38,26 @@ export function findTargetElements(
     const elements = document.querySelectorAll<HTMLElement>(target);
     const valid = filterValidElements(Array.from(elements));
     if (valid.length > 0) return valid;
-  } catch {
-    logger.warn(`Invalid selector: ${target}`);
+  } catch (error) {
+    const err = error instanceof Error ? error : new Error(String(error));
+    logger.warn(`Tour: Invalid target selector "${target}"`, { error: err.message, target, stepId });
+    emitRuntimeError('Tour', `Invalid selector: ${target}`, err);
+    return [];
   }
 
   // Fallback to data attribute
-  const elements = document.querySelectorAll<HTMLElement>(
-    `[data-tour-step-id="${target}"], [data-tour-step-id*="${target}"]`
-  );
-  return filterValidElements(Array.from(elements));
+  try {
+    const escapedTarget = escapeCSS(target);
+    const elements = document.querySelectorAll<HTMLElement>(
+      `[data-tour-step-id="${escapedTarget}"], [data-tour-step-id*="${escapedTarget}"]`
+    );
+    return filterValidElements(Array.from(elements));
+  } catch (error) {
+    const err = error instanceof Error ? error : new Error(String(error));
+    logger.error(`Tour: Invalid fallback selector for "${target}"`, { error: err.message, target, stepId });
+    emitRuntimeError('Tour', `Invalid fallback selector: ${target}`, err);
+    return [];
+  }
 }
 
 /**