do not use preview-api in node

code/core/package.json

@@ -148,6 +148,16 @@
       "import": "./dist/highlight/index.js",
       "require": "./dist/highlight/index.cjs"
     },
+    "./internal/highlight/preview": {
+      "types": "./dist/highlight/preview.d.ts",
+      "import": "./dist/highlight/preview.js",
+      "require": "./dist/highlight/preview.cjs"
+    },
+    "./highlight/preview": {
+      "types": "./dist/highlight/preview.d.ts",
+      "import": "./dist/highlight/preview.js",
+      "require": "./dist/highlight/preview.cjs"
+    },
     "./internal/actions": {
       "types": "./dist/actions/index.d.ts",
       "import": "./dist/actions/index.js",
@@ -457,6 +467,12 @@
       "internal/highlight": [
         "./dist/highlight/index.d.ts"
       ],
+      "internal/highlight/preview": [
+        "./dist/highlight/preview.d.ts"
+      ],
+      "highlight/preview": [
+        "./dist/highlight/preview.d.ts"
+      ],
       "internal/actions": [
         "./dist/actions/index.d.ts"
       ],

code/core/scripts/dts.ts

@@ -30,6 +30,9 @@ async function run() {
     'storybook/measure',
     'storybook/measure/preview',
 
+    'storybook/highlight',
+    'storybook/highlight/preview',
+
     'storybook/outline',
     'storybook/outline/preview',
 

code/core/scripts/entries.ts

@@ -30,6 +30,7 @@ export const getEntries = (cwd: string) => {
     define('src/outline/preview.ts', ['browser', 'node'], true, ['react'], [], [], true),
 
     define('src/highlight/index.ts', ['browser', 'node'], true, ['react'], [], [], false),
+    define('src/highlight/preview.ts', ['browser', 'node'], true, ['react'], [], [], true),
 
     define('src/actions/index.ts', ['browser', 'node'], true, ['react'], [], [], true),
     define('src/actions/preview.ts', ['browser', 'node'], true, ['react'], [], [], true),

code/core/scripts/prep.ts

@@ -211,6 +211,7 @@ async function run() {
                 'storybook/internal': join(cwd, 'src'),
                 'storybook/outline': join(cwd, 'src', 'outline'),
                 'storybook/backgrounds': join(cwd, 'src', 'backgrounds'),
+                'storybook/highlight': join(cwd, 'src', 'highlight'),
                 'storybook/measure': join(cwd, 'src', 'measure'),
                 'storybook/actions': join(cwd, 'src', 'actions'),
                 'storybook/viewport': join(cwd, 'src', 'viewport'),
@@ -247,6 +248,7 @@ async function run() {
                 'storybook/backgrounds': join(cwd, 'src', 'backgrounds'),
                 'storybook/measure': join(cwd, 'src', 'measure'),
                 'storybook/viewport': join(cwd, 'src', 'viewport'),
+                'storybook/highlight': join(cwd, 'src', 'highlight'),
 
                 'storybook/internal': join(cwd, 'src'),
                 react: dirname(require.resolve('react/package.json')),

code/core/src/common/utils/get-story-id.ts

@@ -4,9 +4,9 @@ import { normalizeStories, normalizeStoryPath } from 'storybook/internal/common'
 import { sanitize, storyNameFromExport, toId } from 'storybook/internal/csf';
 import type { Options, StoriesEntry } from 'storybook/internal/types';
 
-import { userOrAutoTitleFromSpecifier } from 'storybook/preview-api';
 import { dedent } from 'ts-dedent';
 
+import { userOrAutoTitleFromSpecifier } from '../../preview-api';
 import { posix } from './posix';
 
 interface StoryIdData {

code/core/src/core-server/utils/StoryIndexGenerator.ts

@@ -25,11 +25,12 @@ import type {
 import { findUp } from 'find-up';
 import picocolors from 'picocolors';
 import slash from 'slash';
-import { sortStoriesV7, userOrAutoTitleFromSpecifier } from 'storybook/preview-api';
 import invariant from 'tiny-invariant';
 import { dedent } from 'ts-dedent';
 import * as TsconfigPaths from 'tsconfig-paths';
 
+import { userOrAutoTitleFromSpecifier } from '../../preview-api/modules/store/autoTitle';
+import { sortStoriesV7 } from '../../preview-api/modules/store/sortStories';
 import { IndexingError, MultipleIndexingError } from './IndexingError';
 import { autoName } from './autoName';
 import { type IndexStatsSummary, addStats } from './summarizeStats';

code/core/src/highlight/preview.ts

@@ -3,7 +3,7 @@ import { STORY_CHANGED } from 'storybook/internal/core-events';
 
 import { global } from '@storybook/global';
 
-import { addons } from 'storybook/preview-api';
+import { addons, definePreview } from 'storybook/preview-api';
 
 import { HIGHLIGHT, RESET_HIGHLIGHT, SCROLL_INTO_VIEW } from './constants';
 
@@ -68,41 +68,53 @@ const highlightStyle = (
   }`;
 };
 
-const channel = addons.getChannel();
-const sheetIds = new Set<string>();
+console.trace('highlight preview');
 
-const highlight = (options: HighlightOptions) => {
-  const sheetId = Math.random().toString(36).substring(2, 15);
-  sheetIds.add(sheetId);
+addons.ready().then(() => {
+  const channel = addons.getChannel();
+  const sheetIds = new Set<string>();
 
-  const sheet = document.createElement('style');
-  sheet.innerHTML = highlightStyle(Array.from(new Set(options.elements)), options);
-  sheet.setAttribute('id', sheetId);
-  document.head.appendChild(sheet);
+  const highlight = (options: HighlightOptions) => {
+    const sheetId = Math.random().toString(36).substring(2, 15);
+    sheetIds.add(sheetId);
 
-  const timeout = options.pulseOut || options.fadeOut;
-  if (timeout) {
-    setTimeout(() => removeHighlight(sheetId), timeout + 500);
-  }
-};
+    const sheet = document.createElement('style');
+    sheet.innerHTML = highlightStyle(Array.from(new Set(options.elements)), options);
+    sheet.setAttribute('id', sheetId);
+    document.head.appendChild(sheet);
 
-const removeHighlight = (id: string) => {
-  const sheetElement = document.getElementById(id);
-  sheetElement?.parentNode?.removeChild(sheetElement);
-  sheetIds.delete(id);
-};
+    const timeout = options.pulseOut || options.fadeOut;
+    if (timeout) {
+      setTimeout(() => removeHighlight(sheetId), timeout + 500);
+    }
+  };
 
-const resetHighlight = () => {
-  sheetIds.forEach(removeHighlight);
-};
+  const removeHighlight = (id: string) => {
+    const sheetElement = document.getElementById(id);
+    sheetElement?.parentNode?.removeChild(sheetElement);
+    sheetIds.delete(id);
+  };
 
-const scrollIntoView = (target: string, options?: ScrollIntoViewOptions) => {
-  const element = document.querySelector(target);
-  element?.scrollIntoView({ behavior: 'smooth', block: 'center', ...options });
-  highlight({ elements: [target], color: '#1EA7FD', width: '2px', offset: '2px', pulseOut: 3000 });
-};
+  const resetHighlight = () => {
+    sheetIds.forEach(removeHighlight);
+  };
 
-channel.on(STORY_CHANGED, resetHighlight);
-channel.on(SCROLL_INTO_VIEW, scrollIntoView);
-channel.on(RESET_HIGHLIGHT, resetHighlight);
-channel.on(HIGHLIGHT, highlight);
+  const scrollIntoView = (target: string, options?: ScrollIntoViewOptions) => {
+    const element = document.querySelector(target);
+    element?.scrollIntoView({ behavior: 'smooth', block: 'center', ...options });
+    highlight({
+      elements: [target],
+      color: '#1EA7FD',
+      width: '2px',
+      offset: '2px',
+      pulseOut: 3000,
+    });
+  };
+
+  channel.on(STORY_CHANGED, resetHighlight);
+  channel.on(SCROLL_INTO_VIEW, scrollIntoView);
+  channel.on(RESET_HIGHLIGHT, resetHighlight);
+  channel.on(HIGHLIGHT, highlight);
+});
+
+export default () => definePreview({});

code/core/src/preview-api/core-annotations.ts

@@ -2,6 +2,7 @@ import componentTestingAnnotations from 'storybook/internal/component-testing/pr
 
 import actionAnnotations from 'storybook/actions/preview';
 import backgroundsAnnotations from 'storybook/backgrounds/preview';
+import highlightAnnotations from 'storybook/highlight/preview';
 import measureAnnotations from 'storybook/measure/preview';
 import outlineAnnotations from 'storybook/outline/preview';
 import testAnnotations from 'storybook/test/preview';
@@ -14,6 +15,8 @@ export function getCoreAnnotations() {
     // @ts-expect-error CJS fallback
     (backgroundsAnnotations.default ?? backgroundsAnnotations)(),
     // @ts-expect-error CJS fallback
+    (highlightAnnotations.default ?? highlightAnnotations)(),
+    // @ts-expect-error CJS fallback
     (outlineAnnotations.default ?? outlineAnnotations)(),
     // @ts-expect-error CJS fallback
     (viewportAnnotations.default ?? viewportAnnotations)(),

code/core/src/types/modules/frameworks.ts

@@ -2,6 +2,7 @@
 export type SupportedFrameworks =
   | 'angular'
   | 'ember'
+  | 'experimental-nextjs-vite'
   | 'html-vite'
   | 'html-webpack5'
   | 'nextjs'