@djangocfg/ui-tools 2.1.166 → 2.1.168

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-tools",
-  "version": "2.1.166",
+  "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.166",
-    "@djangocfg/ui-core": "^2.1.166",
+    "@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.166",
+    "@djangocfg/i18n": "^2.1.168",
     "@djangocfg/playground": "workspace:*",
-    "@djangocfg/typescript-config": "^2.1.166",
-    "@djangocfg/ui-core": "^2.1.166",
+    "@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/components/TourContent.tsx

@@ -1,12 +1,14 @@
 'use client';
 
 import { useMemo } from 'react';
+import { X } from 'lucide-react';
 import { cn } from '@djangocfg/ui-core/lib';
 import {
   Popover,
   PopoverAnchor,
   PopoverContent,
   PopoverArrow,
+  Button,
 } from '@djangocfg/ui-core/components';
 import { TourProgress } from './TourProgress';
 import { TourNavigation } from './TourNavigation';
@@ -103,11 +105,21 @@ export function TourContent({
       >
         {showArrow && <PopoverArrow className="fill-popover" />}
 
-        {/* Header */}
-        <div className="pb-2">
+        {/* Header with close button */}
+        <div className="flex items-start justify-between gap-2 pb-2">
           <h3 id="tour-title" className="text-base font-semibold leading-none tracking-tight">
             {step.title}
           </h3>
+          {showSkipButton && (
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-6 w-6 shrink-0 -mt-1 -mr-2"
+              onClick={onClose}
+            >
+              <X className="h-4 w-4" />
+            </Button>
+          )}
         </div>
 
         {/* Content */}
@@ -127,14 +139,11 @@ export function TourContent({
           <TourNavigation
             onNext={onNext}
             onPrevious={onPrevious}
-            onSkip={onClose}
             isFirstStep={isFirstStep}
             isLastStep={isLastStep}
             nextLabel={step.nextLabel}
             previousLabel={step.previousLabel}
-            skipLabel={skipLabel}
             finishLabel={finishLabel}
-            showSkipButton={showSkipButton}
             nextRoute={step.nextRoute}
             previousRoute={step.previousRoute}
             className="w-full"

package/src/tools/Tour/components/TourNavigation.tsx

@@ -3,25 +3,23 @@
 import { useCallback, useMemo } from 'react';
 import { cn } from '@djangocfg/ui-core/lib';
 import { Button } from '@djangocfg/ui-core/components';
-import { ChevronLeft, ChevronRight, X } from 'lucide-react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
 import { useT } from '@djangocfg/i18n';
 import type { TourNavigationProps } from '../types';
 
 /**
  * Navigation buttons for tour steps.
  * For multi-page tours, use nextRoute/previousRoute with your router.
+ * Skip button is now in TourContent header as × icon.
  */
 export function TourNavigation({
   onNext,
   onPrevious,
-  onSkip,
   isFirstStep,
   isLastStep,
   nextLabel,
   previousLabel,
-  skipLabel,
   finishLabel,
-  showSkipButton = true,
   nextRoute,
   previousRoute,
   className,
@@ -34,13 +32,11 @@ export function TourNavigation({
     return {
       next: nextLabel ?? finishLabel ?? defaultNext,
       previous: previousLabel ?? t('tools.tour.previous'),
-      skip: skipLabel ?? t('tools.tour.skip'),
     };
-  }, [isLastStep, nextLabel, finishLabel, previousLabel, skipLabel, t]);
+  }, [isLastStep, nextLabel, finishLabel, previousLabel, t]);
 
   // Prepare visibility flags
   const showPrevious = !isFirstStep;
-  const showSkip = showSkipButton && !isLastStep && !!onSkip;
   const showNextArrow = !isLastStep;
 
   // Handlers
@@ -59,32 +55,23 @@ export function TourNavigation({
   }, [previousRoute, onPrevious]);
 
   // Styles
-  const containerClassName = cn('flex items-center justify-between gap-2', className);
+  const containerClassName = cn('flex items-center gap-2', className);
 
   return (
     <div className={containerClassName}>
-      <div className="flex items-center gap-2">
-        {showPrevious && (
-          <Button variant="ghost" size="sm" onClick={handlePrevious} className="gap-1">
-            <ChevronLeft className="h-4 w-4" />
-            {labels.previous}
-          </Button>
-        )}
-      </div>
-
-      <div className="flex items-center gap-2">
-        {showSkip && (
-          <Button variant="ghost" size="sm" onClick={onSkip}>
-            {labels.skip}
-            <X className="ml-1 h-3 w-3" />
-          </Button>
-        )}
-
-        <Button size="sm" onClick={handleNext} className="gap-1">
-          {labels.next}
-          {showNextArrow && <ChevronRight className="h-4 w-4" />}
+      {showPrevious ? (
+        <Button variant="ghost" size="sm" onClick={handlePrevious} className="flex-1 gap-1">
+          <ChevronLeft className="h-4 w-4 shrink-0" />
+          <span className="truncate">{labels.previous}</span>
         </Button>
-      </div>
+      ) : (
+        <div className="flex-1" />
+      )}
+
+      <Button size="sm" onClick={handleNext} className="flex-1 gap-1">
+        <span className="truncate">{labels.next}</span>
+        {showNextArrow && <ChevronRight className="h-4 w-4 shrink-0" />}
+      </Button>
     </div>
   );
 }

package/src/tools/Tour/types/index.ts

@@ -192,14 +192,11 @@ export interface TourProgressProps {
 export interface TourNavigationProps {
   onNext: () => void;
   onPrevious: () => void;
-  onSkip?: () => void;
   isFirstStep: boolean;
   isLastStep: boolean;
   nextLabel?: ReactNode;
   previousLabel?: ReactNode;
-  skipLabel?: ReactNode;
   finishLabel?: ReactNode;
-  showSkipButton?: boolean;
   nextRoute?: string;
   previousRoute?: string;
   className?: string;

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 [];
+  }
 }
 
 /**