Updates

.dockerignore

@@ -0,0 +1,8 @@
+.git
+coverage
+dist
+e2e
+node_modules
+test
+website/.next
+website/node_modules

CLAUDE.md

@@ -126,3 +126,7 @@ Next.js 16 documentation and demo site in `website/`. Imports library via local
 - `ConfigContext` — centralized tour configuration for demos
 - `website/src/components/` — 33 components (ConfigPanel, custom tour components, code blocks, navigation)
 - `website/src/config/` — sidebar nav, default values, hero content
+
+## Visual Customization
+- Visual/cosmetic options (colors, borders, sizes) belong in `styles.*`, not as new Options fields.
+- Before adding a new option for appearance, check if it fits an existing or new `styles` key.

package.json

@@ -52,12 +52,12 @@
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.2",
-    "@gilbarbara/eslint-config": "^1.0.4",
+    "@gilbarbara/eslint-config": "^1.1.0",
     "@gilbarbara/prettier-config": "^1.0.0",
     "@gilbarbara/tsconfig": "^1.0.0",
     "@playwright/test": "^1.58.2",
     "@size-limit/preset-big-lib": "^12.0.1",
-    "@swc/core": "^1.15.18",
+    "@swc/core": "^1.15.21",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
@@ -69,23 +69,22 @@
     "@types/scrollparent": "^2.0.3",
     "@types/use-sync-external-store": "^1.5.0",
     "@vitejs/plugin-react-swc": "^4.3.0",
-    "@vitest/coverage-v8": "^4.1.0",
-    "caniuse-lite": "^1.0.30001780",
+    "@vitest/coverage-v8": "^4.1.2",
     "cross-env": "^10.1.0",
     "del-cli": "^7.0.0",
     "eslint": "^9.39.2",
     "husky": "^9.1.7",
     "jest-extended": "^7.0.0",
-    "jsdom": "^29.0.0",
+    "jsdom": "^29.0.1",
     "prettier": "^3.8.1",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "repo-tools": "^0.3.1",
     "size-limit": "^12.0.1",
-    "tsdown": "^0.21.4",
+    "tsdown": "^0.21.7",
     "typescript": "^5.9.3",
     "vite-tsconfig-paths": "^6.1.1",
-    "vitest": "^4.1.0"
+    "vitest": "^4.1.2"
   },
   "scripts": {
     "build": "tsdown",

src/components/Overlay.tsx

@@ -174,6 +174,9 @@ export default function JoyrideOverlay(props: OverlayProps) {
             }}
           />
         )}
+        {coverPath && Object.keys(styles.spotlight).length > 0 && (
+          <path d={coverPath} fill="none" style={{ pointerEvents: 'none' }} {...styles.spotlight} />
+        )}
       </svg>
     </div>
   );

src/styles.ts

@@ -133,6 +133,7 @@ export default function getStyles(props: Props, step: StepMerged) {
       ...overlay,
       backgroundColor: step.overlayColor,
     },
+    spotlight: {},
     tooltip: {
       backgroundColor: step.backgroundColor,
       borderRadius: 5,

src/types/common.ts

@@ -1,4 +1,4 @@
-import type { CSSProperties, ReactNode } from 'react';
+import type { CSSProperties, ReactNode, SVGAttributes } from 'react';
 
 import { ACTIONS, EVENTS, LIFECYCLE, ORIGIN, STATUS } from '~/literals';
 
@@ -295,6 +295,8 @@ export interface Styles {
   loader: CSSProperties;
   /** Overlay backdrop styles. */
   overlay: CSSProperties;
+  /** Spotlight styles (SVG Path). */
+  spotlight: SVGAttributes<SVGPathElement>;
   /** Tooltip wrapper styles. */
   tooltip: CSSProperties;
   /** Tooltip inner container styles. */

test/__snapshots__/styles.spec.ts.snap

@@ -132,6 +132,7 @@ exports[`styles > should return styles.arrow.color over options.arrowColor (comp
     "top": 0,
     "zIndex": 100,
   },
+  "spotlight": {},
   "tooltip": {
     "backgroundColor": "#ffffff",
     "borderRadius": 5,
@@ -298,6 +299,7 @@ exports[`styles > should return styles.arrow.color over options.arrowColor (step
     "top": 0,
     "zIndex": 100,
   },
+  "spotlight": {},
   "tooltip": {
     "backgroundColor": "#ffffff",
     "borderRadius": 5,
@@ -464,6 +466,7 @@ exports[`styles > should return the default styles 1`] = `
     "top": 0,
     "zIndex": 100,
   },
+  "spotlight": {},
   "tooltip": {
     "backgroundColor": "#ffffff",
     "borderRadius": 5,
@@ -630,6 +633,7 @@ exports[`styles > should return the inherited props' styles 1`] = `
     "top": 0,
     "zIndex": 100,
   },
+  "spotlight": {},
   "tooltip": {
     "backgroundColor": "#00f",
     "borderRadius": 5,
@@ -796,6 +800,7 @@ exports[`styles > should return the step's styles 1`] = `
     "top": 0,
     "zIndex": 100,
   },
+  "spotlight": {},
   "tooltip": {
     "backgroundColor": "#000",
     "borderRadius": 5,

test/hooks/useLifecycleEffect.spec.ts

@@ -1172,7 +1172,7 @@ describe('useLifecycleEffect', () => {
 
       expect(() => {
         rerender({ ...options, step: stepB, state: state2, previousState: state1 });
-      }).not.toThrowError();
+      }).not.toThrow();
 
       expect(options.emitEvent).toHaveBeenCalledWith(
         EVENTS.STEP_AFTER,

test/hooks/usePortalElement.spec.ts

@@ -47,7 +47,7 @@ describe('usePortalElement', () => {
       // Simulate external removal before unmount
       portal?.remove();
 
-      expect(() => unmount()).not.toThrowError();
+      expect(() => unmount()).not.toThrow();
     });
   });
 

test/hooks/useTourEngine.spec.ts

@@ -996,7 +996,7 @@ describe('useTourEngine', () => {
     it('should not crash with empty steps', () => {
       expect(() => {
         renderHook(() => useTourEngine(createProps({ steps: [] })));
-      }).not.toThrowError();
+      }).not.toThrow();
     });
 
     it('should use TOOLTIP for center placement (beacon hidden)', async () => {

test/modules/__snapshots__/step.spec.ts.snap

@@ -185,6 +185,7 @@ exports[`step > getMergedStep > should allow options to override defaultStep 1`]
       "top": 0,
       "zIndex": 100,
     },
+    "spotlight": {},
     "tooltip": {
       "backgroundColor": "#ffffff",
       "borderRadius": 5,
@@ -410,6 +411,7 @@ exports[`step > getMergedStep > should allow step props to override options 1`]
       "top": 0,
       "zIndex": 100,
     },
+    "spotlight": {},
     "tooltip": {
       "backgroundColor": "#ffffff",
       "borderRadius": 5,
@@ -582,6 +584,7 @@ exports[`step > getMergedStep > should include styles in the merged step 1`] = `
     "top": 0,
     "zIndex": 100,
   },
+  "spotlight": {},
   "tooltip": {
     "backgroundColor": "#ffffff",
     "borderRadius": 5,
@@ -801,6 +804,7 @@ exports[`step > getMergedStep > should merge defaultStep values 1`] = `
       "top": 0,
       "zIndex": 100,
     },
+    "spotlight": {},
     "tooltip": {
       "backgroundColor": "#ffffff",
       "borderRadius": 5,
@@ -1047,6 +1051,7 @@ exports[`step > getMergedStep > should merge scrollOffset from props 1`] = `
       "top": 0,
       "zIndex": 100,
     },
+    "spotlight": {},
     "tooltip": {
       "backgroundColor": "#ffffff",
       "borderRadius": 5,
@@ -1272,6 +1277,7 @@ exports[`step > getMergedStep > should preserve unset options defaults when part
       "top": 0,
       "zIndex": 100,
     },
+    "spotlight": {},
     "tooltip": {
       "backgroundColor": "#ffffff",
       "borderRadius": 5,

test/modules/helpers.spec.tsx

@@ -260,7 +260,7 @@ describe('helpers', () => {
 
     it('should throw for bad inputs', () => {
       // @ts-expect-error - invalid value
-      expect(() => omit(['a'])).toThrowError('Expected an object');
+      expect(() => omit(['a'])).toThrow('Expected an object');
     });
   });
 
@@ -282,7 +282,7 @@ describe('helpers', () => {
 
     it('should throw for bad inputs', () => {
       // @ts-expect-error - invalid value
-      expect(() => pick(['a'])).toThrowError('Expected an object');
+      expect(() => pick(['a'])).toThrow('Expected an object');
     });
   });
 

test/modules/store.spec.ts

@@ -281,7 +281,7 @@ describe('store', () => {
 
       expect(() => {
         store.dispatch(createEventData({ type: EVENTS.TOOLTIP }), mockControls);
-      }).not.toThrowError();
+      }).not.toThrow();
     });
 
     it('should isolate errors between handlers', () => {

website/Dockerfile

@@ -0,0 +1,35 @@
+FROM node:22-alpine AS base
+
+RUN corepack enable && corepack prepare pnpm@latest --activate
+
+FROM base AS builder
+
+WORKDIR /app
+COPY . .
+
+RUN pnpm install --frozen-lockfile && \
+    pnpm --dir website install --frozen-lockfile && \
+    pnpm build && \
+    pnpm --dir website build
+
+FROM base AS runner
+
+WORKDIR /app
+
+ENV NODE_ENV=production
+
+RUN addgroup --system --gid 1001 nodejs && \
+    adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/website/public ./website/public
+COPY --from=builder --chown=nextjs:nodejs /app/website/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/website/.next/static ./website/.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT=3000
+ENV HOSTNAME=0.0.0.0
+
+CMD ["node", "website/server.js"]

website/docker-compose.yml

@@ -0,0 +1,14 @@
+services:
+  website:
+    build:
+      context: ..
+      dockerfile: website/Dockerfile
+    environment:
+      - NODE_ENV=production
+    restart: unless-stopped
+    networks:
+      - joyride-network
+
+networks:
+  joyride-network:
+    driver: bridge

website/next.config.ts

@@ -16,6 +16,7 @@ const vendoredRsc = path.resolve(
 );
 
 const nextConfig: NextConfig = {
+  output: 'standalone',
   pageExtensions: ['ts', 'tsx'],
   reactStrictMode: true,
   outputFileTracingRoot: path.resolve(import.meta.dirname, '..'),

website/package.json

@@ -65,7 +65,7 @@
   "scripts": {
     "dev": "next dev --webpack",
     "build": "next build --webpack",
-    "start": "next start",
+    "start": "./scripts/start.sh",
     "lint": "eslint --fix src",
     "typecheck": "tsc --noEmit"
   },

website/scripts/start.sh

@@ -0,0 +1,14 @@
+#!/bin/sh
+set -e
+
+STANDALONE_DIR=".next/standalone/website"
+
+if [ ! -d "$STANDALONE_DIR" ]; then
+  echo "Error: standalone build not found. Run 'pnpm build' first."
+  exit 1
+fi
+
+[ -d "$STANDALONE_DIR/public" ] || cp -r public "$STANDALONE_DIR/public"
+[ -d "$STANDALONE_DIR/.next/static" ] || cp -r .next/static "$STANDALONE_DIR/.next/static"
+
+exec node "$STANDALONE_DIR/server.js"

website/src/app/demos/overview/page.tsx

@@ -4,6 +4,6 @@ import Overview from './Overview';
 
 export const metadata: Metadata = { title: 'Overview (Demo)' };
 
-export default function BasicPage() {
+export default function OverviewPage() {
   return <Overview />;
 }

website/src/app/demos/scroll/Scroll.tsx

@@ -9,7 +9,9 @@ import { useConfig } from '~/context/ConfigContext';
 import useTheme from '~/hooks/useTheme';
 import { getTourColors, logGroup, mergeProps } from '~/modules/helpers';
 
+import Code from '~/components/Code';
 import Container from '~/components/Container';
+import Tip from '~/components/Tip';
 
 interface State {
   run: boolean;
@@ -18,8 +20,15 @@ interface State {
 
 const steps: Step[] = [
   {
-    content:
-      'This showcase lives inside a scrollable container. The tour scrolls within it automatically.',
+    content: (
+      <div>
+        <p>This tour scrolls inside a custom container automatically.</p>
+        <Tip>
+          This demo uses <Code color="primary">styles.spotlight</Code> to add a subtle border around
+          the spotlight.
+        </Tip>
+      </div>
+    ),
     target: '.ds__header',
     title: 'Custom Scroll Parent',
   },
@@ -77,7 +86,17 @@ export default function Scroll() {
       ({
         continuous: true,
         scrollToFirstStep: true,
-        options: getTourColors(isDarkMode),
+        options: {
+          ...getTourColors(isDarkMode),
+          spotlightPadding: 16,
+          spotlightRadius: 16,
+        },
+        styles: {
+          spotlight: {
+            stroke: isDarkMode ? '#ff5e5e99' : '#ff5e5e',
+            strokeWidth: '2px',
+          },
+        },
       }) satisfies Omit<Props, 'steps'>,
     [isDarkMode],
   );