chore: migrate '@web' to @playwright/web

package-lock.json

@@ -1507,6 +1507,10 @@
       "resolved": "packages/playwright-test",
       "link": true
     },
+    "node_modules/@playwright/web": {
+      "resolved": "packages/web",
+      "link": true
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.22.4",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.22.4.tgz",
@@ -7486,10 +7490,6 @@
         }
       }
     },
-    "node_modules/web": {
-      "resolved": "packages/web",
-      "link": true
-    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -7967,6 +7967,7 @@
       "version": "0.0.0"
     },
     "packages/web": {
+      "name": "@playwright/web",
       "version": "0.0.0",
       "dependencies": {
         "codemirror": "5.65.18",

packages/html-reporter/src/DEPS.list

@@ -1,6 +1,6 @@
 [*]
 @playwright/experimental-ct-react
-@web/**
+@playwright/web/**
 
 [chip.spec.tsx]
 ***

packages/html-reporter/src/chip.tsx

@@ -19,7 +19,7 @@ import './chip.css';
 import './colors.css';
 import './common.css';
 import * as icons from './icons';
-import { clsx } from '@web/uiUtils';
+import { clsx } from '@playwright/web/src/uiUtils';
 import { useAnchor } from './links';
 
 export const Chip: React.FC<{

packages/html-reporter/src/index.tsx

@@ -26,7 +26,7 @@ import { ReportView } from './reportView';
 // @ts-ignore
 const zipjs = zipImport as typeof zip;
 
-import logo from '@web/assets/playwright-logo.svg';
+import logo from '@playwright/web/src/assets/playwright-logo.svg';
 import { SearchParamsProvider } from './links';
 const link = document.createElement('link');
 link.rel = 'shortcut icon';

packages/html-reporter/src/links.tsx

@@ -20,8 +20,8 @@ import * as icons from './icons';
 import { TreeItem } from './treeItem';
 import { CopyToClipboard } from './copyToClipboard';
 import './links.css';
-import { linkifyText } from '@web/renderUtils';
-import { clsx } from '@web/uiUtils';
+import { linkifyText } from '@playwright/web/src/renderUtils';
+import { clsx } from '@playwright/web/src/uiUtils';
 
 export function navigate(href: string | URL) {
   window.history.pushState({}, '', href);

packages/html-reporter/src/tabbedPane.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { clsx } from '@web/uiUtils';
+import { clsx } from '@playwright/web/src/uiUtils';
 import './tabbedPane.css';
 import * as React from 'react';
 

packages/html-reporter/src/testCaseView.tsx

@@ -23,9 +23,9 @@ import { Link, ProjectLink, SearchParamsContext } from './links';
 import { statusIcon } from './statusIcon';
 import './testCaseView.css';
 import { TestResultView } from './testResultView';
-import { linkifyText } from '@web/renderUtils';
+import { linkifyText } from '@playwright/web/src/renderUtils';
 import { hashStringToInt, msToString } from './utils';
-import { clsx } from '@web/uiUtils';
+import { clsx } from '@playwright/web/src/uiUtils';
 import { CopyToClipboardContainer } from './copyToClipboard';
 
 export const TestCaseView: React.FC<{

packages/html-reporter/src/testErrorView.css

@@ -14,7 +14,7 @@
   limitations under the License.
 */
 
-@import '@web/third_party/vscode/colors.css';
+@import '@playwright/web/src/third_party/vscode/colors.css';
 
 .test-error-view {
   white-space: pre;

packages/html-reporter/src/testErrorView.tsx

@@ -14,11 +14,11 @@
   limitations under the License.
 */
 
-import { ansi2html } from '@web/ansi2html';
+import { ansi2html } from '@playwright/web/src/ansi2html';
 import * as React from 'react';
 import './testErrorView.css';
-import type { ImageDiff } from '@web/shared/imageDiffView';
-import { ImageDiffView } from '@web/shared/imageDiffView';
+import type { ImageDiff } from '@playwright/web/src/shared/imageDiffView';
+import { ImageDiffView } from '@playwright/web/src/shared/imageDiffView';
 
 export const TestErrorView: React.FC<{
   error: string;

packages/html-reporter/src/testFileView.tsx

@@ -23,7 +23,7 @@ import { generateTraceUrl, Link, navigate, ProjectLink, SearchParamsContext } fr
 import { statusIcon } from './statusIcon';
 import './testFileView.css';
 import { video, image, trace } from './icons';
-import { clsx } from '@web/uiUtils';
+import { clsx } from '@playwright/web/src/uiUtils';
 
 export const TestFileView: React.FC<React.PropsWithChildren<{
   file: TestFileSummary;

packages/html-reporter/src/testResultView.tsx

@@ -22,8 +22,8 @@ import { AutoChip } from './chip';
 import { traceImage } from './images';
 import { Anchor, AttachmentLink, generateTraceUrl } from './links';
 import { statusIcon } from './statusIcon';
-import type { ImageDiff } from '@web/shared/imageDiffView';
-import { ImageDiffView } from '@web/shared/imageDiffView';
+import type { ImageDiff } from '@playwright/web/src/shared/imageDiffView';
+import { ImageDiffView } from '@playwright/web/src/shared/imageDiffView';
 import { TestErrorView, TestScreenshotErrorView } from './testErrorView';
 import './testResultView.css';
 

packages/html-reporter/tsconfig.json

@@ -18,7 +18,6 @@
     "useUnknownInCatchVariables": false,
     "paths": {
       "@protocol/*": ["../protocol/src/*"],
-      "@web/*": ["../web/src/*"],
       "@playwright/*": ["../playwright/src/*"],
       "playwright-core/lib/*": ["../playwright-core/src/*"],
       "playwright/lib/*": ["../playwright/src/*"],

packages/recorder/src/DEPS.list

@@ -1,3 +1,3 @@
 [*]
-@web/**
+@playwright/web/**
 @isomorphic/**

packages/recorder/src/callLog.tsx

@@ -17,7 +17,7 @@
 import './callLog.css';
 import * as React from 'react';
 import type { CallLog } from './recorderTypes';
-import { clsx, msToString } from '@web/uiUtils';
+import { clsx, msToString } from '@playwright/web/src/uiUtils';
 import { asLocator } from '@isomorphic/locatorGenerators';
 import type { Language } from '@isomorphic/locatorGenerators';
 

packages/recorder/src/index.tsx

@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import '@web/common.css';
-import { applyTheme } from '@web/theme';
-import '@web/third_party/vscode/codicon.css';
+import '@playwright/web/src/common.css';
+import { applyTheme } from '@playwright/web/src/theme';
+import '@playwright/web/src/third_party/vscode/codicon.css';
 import * as ReactDOM from 'react-dom/client';
 import { Main } from './main';
 

packages/recorder/src/recorder.tsx

@@ -15,19 +15,19 @@
 */
 
 import type { CallLog, ElementInfo, Mode, Source } from './recorderTypes';
-import { CodeMirrorWrapper } from '@web/components/codeMirrorWrapper';
-import type { SourceHighlight } from '@web/components/codeMirrorWrapper';
-import { SplitView } from '@web/components/splitView';
-import { TabbedPane } from '@web/components/tabbedPane';
-import { Toolbar } from '@web/components/toolbar';
-import { emptySource, SourceChooser } from '@web/components/sourceChooser';
-import { ToolbarButton, ToolbarSeparator } from '@web/components/toolbarButton';
+import { CodeMirrorWrapper } from '@playwright/web/src/components/codeMirrorWrapper';
+import type { SourceHighlight } from '@playwright/web/src/components/codeMirrorWrapper';
+import { SplitView } from '@playwright/web/src/components/splitView';
+import { TabbedPane } from '@playwright/web/src/components/tabbedPane';
+import { Toolbar } from '@playwright/web/src/components/toolbar';
+import { emptySource, SourceChooser } from '@playwright/web/src/components/sourceChooser';
+import { ToolbarButton, ToolbarSeparator } from '@playwright/web/src/components/toolbarButton';
 import * as React from 'react';
 import { CallLogView } from './callLog';
 import './recorder.css';
 import { asLocator } from '@isomorphic/locatorGenerators';
-import { toggleTheme } from '@web/theme';
-import { copy, useSetting } from '@web/uiUtils';
+import { toggleTheme } from '@playwright/web/src/theme';
+import { copy, useSetting } from '@playwright/web/src/uiUtils';
 import yaml from 'yaml';
 import { parseAriaKey } from '@isomorphic/ariaSnapshot';
 import type { AriaKeyError, ParsedYaml } from '@isomorphic/ariaSnapshot';

packages/recorder/tsconfig.json

@@ -20,7 +20,6 @@
       "@isomorphic/*": ["../playwright-core/src/utils/isomorphic/*"],
       "@protocol/*": ["../protocol/src/*"],
       "@recorder/*": ["../recorder/src/*"],
-      "@web/*": ["../web/src/*"],
     }
   },
   "include": ["src"],

packages/trace-viewer/src/DEPS.list

@@ -1,7 +1,7 @@
 [*]
 @isomorphic/**
 @trace/**
-@web/**
+@playwright/web/**
 ui/
 
 [sw-main.ts]

packages/trace-viewer/src/index.tsx

@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import '@web/common.css';
-import { applyTheme } from '@web/theme';
-import '@web/third_party/vscode/codicon.css';
+import '@playwright/web/src/common.css';
+import { applyTheme } from '@playwright/web/src/theme';
+import '@playwright/web/src/third_party/vscode/codicon.css';
 import * as ReactDOM from 'react-dom/client';
 import { WorkbenchLoader } from './ui/workbenchLoader';
 

packages/trace-viewer/src/recorder.tsx

@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import '@web/common.css';
-import { applyTheme } from '@web/theme';
-import '@web/third_party/vscode/codicon.css';
+import '@playwright/web/src/common.css';
+import { applyTheme } from '@playwright/web/src/theme';
+import '@playwright/web/src/third_party/vscode/codicon.css';
 import * as ReactDOM from 'react-dom/client';
 import { RecorderView } from './ui/recorder/recorderView';
 

packages/trace-viewer/src/ui/DEPS.list

@@ -2,7 +2,7 @@
 @injected/**
 @isomorphic/**
 @trace/**
-@web/**
+@playwright/web/**
 ../entries.ts
 ../geometry.ts
 ../../../playwright/src/isomorphic/**

packages/trace-viewer/src/ui/actionList.tsx

@@ -15,17 +15,17 @@
 */
 
 import type { ActionTraceEvent, AfterActionTraceEventAttachment } from '@trace/trace';
-import { msToString } from '@web/uiUtils';
+import { msToString } from '@playwright/web/src/uiUtils';
 import * as React from 'react';
 import './actionList.css';
 import * as modelUtil from './modelUtil';
 import { asLocator } from '@isomorphic/locatorGenerators';
 import type { Language } from '@isomorphic/locatorGenerators';
-import type { TreeState } from '@web/components/treeView';
-import { TreeView } from '@web/components/treeView';
+import type { TreeState } from '@playwright/web/src/components/treeView';
+import { TreeView } from '@playwright/web/src/components/treeView';
 import type { ActionTraceEventInContext, ActionTreeItem } from './modelUtil';
 import type { Boundaries } from './geometry';
-import { ToolbarButton } from '@web/components/toolbarButton';
+import { ToolbarButton } from '@playwright/web/src/components/toolbarButton';
 
 export interface ActionListProps {
   actions: ActionTraceEventInContext[],

packages/trace-viewer/src/ui/annotationsTab.tsx

@@ -17,7 +17,7 @@
 import * as React from 'react';
 import './annotationsTab.css';
 import { PlaceholderPanel } from './placeholderPanel';
-import { linkifyText } from '@web/renderUtils';
+import { linkifyText } from '@playwright/web/src/renderUtils';
 
 type Annotation = { type: string; description?: string; };
 

packages/trace-viewer/src/ui/attachmentsTab.tsx

@@ -16,15 +16,15 @@
 
 import * as React from 'react';
 import './attachmentsTab.css';
-import { ImageDiffView } from '@web/shared/imageDiffView';
+import { ImageDiffView } from '@playwright/web/src/shared/imageDiffView';
 import type { ActionTraceEventInContext, MultiTraceModel } from './modelUtil';
 import { PlaceholderPanel } from './placeholderPanel';
 import type { AfterActionTraceEventAttachment } from '@trace/trace';
-import { CodeMirrorWrapper, lineHeight } from '@web/components/codeMirrorWrapper';
+import { CodeMirrorWrapper, lineHeight } from '@playwright/web/src/components/codeMirrorWrapper';
 import { isTextualMimeType } from '@isomorphic/mimeType';
-import { Expandable } from '@web/components/expandable';
-import { linkifyText } from '@web/renderUtils';
-import { clsx } from '@web/uiUtils';
+import { Expandable } from '@playwright/web/src/components/expandable';
+import { linkifyText } from '@playwright/web/src/renderUtils';
+import { clsx } from '@playwright/web/src/uiUtils';
 
 type Attachment = AfterActionTraceEventAttachment & { traceUrl: string };
 

packages/trace-viewer/src/ui/callTab.tsx

@@ -16,7 +16,7 @@
 
 import type { SerializedValue } from '@protocol/channels';
 import type { ActionTraceEvent } from '@trace/trace';
-import { clsx, msToString } from '@web/uiUtils';
+import { clsx, msToString } from '@playwright/web/src/uiUtils';
 import * as React from 'react';
 import './callTab.css';
 import { CopyToClipboard } from './copyToClipboard';

packages/trace-viewer/src/ui/consoleTab.tsx

@@ -18,10 +18,10 @@ import type * as channels from '@protocol/channels';
 import * as React from 'react';
 import './consoleTab.css';
 import type * as modelUtil from './modelUtil';
-import { ListView } from '@web/components/listView';
+import { ListView } from '@playwright/web/src/components/listView';
 import type { Boundaries } from './geometry';
-import { clsx, msToString } from '@web/uiUtils';
-import { ansi2html } from '@web/ansi2html';
+import { clsx, msToString } from '@playwright/web/src/uiUtils';
+import { ansi2html } from '@playwright/web/src/ansi2html';
 import { PlaceholderPanel } from './placeholderPanel';
 
 export type ConsoleEntry = {

packages/trace-viewer/src/ui/copyToClipboard.tsx

@@ -15,7 +15,7 @@
  */
 
 import * as React from 'react';
-import { ToolbarButton } from '@web/components/toolbarButton';
+import { ToolbarButton } from '@playwright/web/src/components/toolbarButton';
 import './copyToClipboard.css';
 
 export const CopyToClipboard: React.FunctionComponent<{

packages/trace-viewer/src/ui/errorsTab.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { ErrorMessage } from '@web/components/errorMessage';
+import { ErrorMessage } from '@playwright/web/src/components/errorMessage';
 import * as React from 'react';
 import type * as modelUtil from './modelUtil';
 import { PlaceholderPanel } from './placeholderPanel';

packages/trace-viewer/src/ui/filmStrip.tsx

@@ -17,7 +17,7 @@
 import './filmStrip.css';
 import type { Boundaries, Size } from './geometry';
 import * as React from 'react';
-import { useMeasure, upperBound } from '@web/uiUtils';
+import { useMeasure, upperBound } from '@playwright/web/src/uiUtils';
 import type { PageEntry } from '../types/entries';
 import type { ActionTraceEventInContext, MultiTraceModel } from './modelUtil';
 import { renderAction } from './actionList';

packages/trace-viewer/src/ui/inspectorTab.tsx

@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { CodeMirrorWrapper } from '@web/components/codeMirrorWrapper';
-import type { Language } from '@web/components/codeMirrorWrapper';
-import { ToolbarButton } from '@web/components/toolbarButton';
-import { copy } from '@web/uiUtils';
+import { CodeMirrorWrapper } from '@playwright/web/src/components/codeMirrorWrapper';
+import type { Language } from '@playwright/web/src/components/codeMirrorWrapper';
+import { ToolbarButton } from '@playwright/web/src/components/toolbarButton';
+import { copy } from '@playwright/web/src/uiUtils';
 import * as React from 'react';
 import './sourceTab.css';
 

packages/trace-viewer/src/ui/logTab.tsx

@@ -16,9 +16,9 @@
 
 import type { ActionTraceEventInContext } from './modelUtil';
 import * as React from 'react';
-import { ListView } from '@web/components/listView';
+import { ListView } from '@playwright/web/src/components/listView';
 import { PlaceholderPanel } from './placeholderPanel';
-import { msToString } from '@web/uiUtils';
+import { msToString } from '@playwright/web/src/uiUtils';
 import './logTab.css';
 
 const LogList = ListView<{ message: string, time: string }>;

packages/trace-viewer/src/ui/metadataView.tsx

@@ -14,7 +14,7 @@
   limitations under the License.
 */
 
-import { msToString } from '@web/uiUtils';
+import { msToString } from '@playwright/web/src/uiUtils';
 import * as React from 'react';
 import type { MultiTraceModel } from './modelUtil';
 import './callTab.css';

packages/trace-viewer/src/ui/networkResourceDetails.tsx

@@ -17,9 +17,9 @@
 import type { ResourceSnapshot } from '@trace/snapshot';
 import * as React from 'react';
 import './networkResourceDetails.css';
-import { TabbedPane } from '@web/components/tabbedPane';
-import { CodeMirrorWrapper } from '@web/components/codeMirrorWrapper';
-import { ToolbarButton } from '@web/components/toolbarButton';
+import { TabbedPane } from '@playwright/web/src/components/tabbedPane';
+import { CodeMirrorWrapper } from '@playwright/web/src/components/codeMirrorWrapper';
+import { ToolbarButton } from '@playwright/web/src/components/toolbarButton';
 import { generateCurlCommand, generateFetchCall } from '../third_party/devtools';
 import { CopyToClipboardTextButton } from './copyToClipboard';
 import { getAPIRequestCodeGen } from './codegen';

packages/trace-viewer/src/ui/networkTab.tsx

@@ -19,11 +19,11 @@ import * as React from 'react';
 import type { Boundaries } from './geometry';
 import './networkTab.css';
 import { NetworkResourceDetails } from './networkResourceDetails';
-import { bytesToString, msToString } from '@web/uiUtils';
+import { bytesToString, msToString } from '@playwright/web/src/uiUtils';
 import { PlaceholderPanel } from './placeholderPanel';
 import { context, type MultiTraceModel } from './modelUtil';
-import { GridView, type RenderedGridCell } from '@web/components/gridView';
-import { SplitView } from '@web/components/splitView';
+import { GridView, type RenderedGridCell } from '@playwright/web/src/components/gridView';
+import { SplitView } from '@playwright/web/src/components/splitView';
 import type { ContextEntry } from '../types/entries';
 import { NetworkFilters, defaultFilterState, type FilterState, type ResourceType } from './networkFilters';
 import type { Language } from '@isomorphic/locatorGenerators';

packages/trace-viewer/src/ui/recorder/DEPS.list

@@ -1,5 +1,5 @@
 [*]
 @isomorphic/**
 @trace/**
-@web/**
+@playwright/web/**
 ../**

packages/trace-viewer/src/ui/recorder/actionListView.tsx

@@ -15,7 +15,7 @@
 */
 
 import type * as actionTypes from '@recorder/actions';
-import { ListView } from '@web/components/listView';
+import { ListView } from '@playwright/web/src/components/listView';
 import * as React from 'react';
 import '../actionList.css';
 import { traceParamsForAction } from '@isomorphic/recorderUtils';

packages/trace-viewer/src/ui/recorder/modelContext.tsx

@@ -14,7 +14,7 @@
   limitations under the License.
 */
 
-import { sha1 } from '@web/uiUtils';
+import { sha1 } from '@playwright/web/src/uiUtils';
 import * as React from 'react';
 import type { ContextEntry } from '../../types/entries';
 import { MultiTraceModel } from '../modelUtil';

packages/trace-viewer/src/ui/recorder/recorderView.tsx

@@ -15,14 +15,14 @@
 */
 
 import type * as actionTypes from '@recorder/actions';
-import { SourceChooser } from '@web/components/sourceChooser';
-import { SplitView } from '@web/components/splitView';
-import type { TabbedPaneTabModel } from '@web/components/tabbedPane';
-import { TabbedPane } from '@web/components/tabbedPane';
-import { Toolbar } from '@web/components/toolbar';
-import { ToolbarButton, ToolbarSeparator } from '@web/components/toolbarButton';
-import { toggleTheme } from '@web/theme';
-import { copy, useSetting } from '@web/uiUtils';
+import { SourceChooser } from '@playwright/web/src/components/sourceChooser';
+import { SplitView } from '@playwright/web/src/components/splitView';
+import type { TabbedPaneTabModel } from '@playwright/web/src/components/tabbedPane';
+import { TabbedPane } from '@playwright/web/src/components/tabbedPane';
+import { Toolbar } from '@playwright/web/src/components/toolbar';
+import { ToolbarButton, ToolbarSeparator } from '@playwright/web/src/components/toolbarButton';
+import { toggleTheme } from '@playwright/web/src/theme';
+import { copy, useSetting } from '@playwright/web/src/uiUtils';
 import * as React from 'react';
 import { ConsoleTab, useConsoleTabModel } from '../consoleTab';
 import type { Boundaries } from '../geometry';

packages/trace-viewer/src/ui/snapshotTab.tsx

@@ -18,16 +18,16 @@ import './snapshotTab.css';
 import * as React from 'react';
 import type { ActionTraceEvent } from '@trace/trace';
 import { context, type MultiTraceModel, prevInList } from './modelUtil';
-import { Toolbar } from '@web/components/toolbar';
-import { ToolbarButton } from '@web/components/toolbarButton';
-import { clsx, useMeasure } from '@web/uiUtils';
+import { Toolbar } from '@playwright/web/src/components/toolbar';
+import { ToolbarButton } from '@playwright/web/src/components/toolbarButton';
+import { clsx, useMeasure } from '@playwright/web/src/uiUtils';
 import { InjectedScript } from '@injected/injectedScript';
 import { Recorder } from '@injected/recorder/recorder';
 import ConsoleAPI from '@injected/consoleApi';
 import { asLocator } from '@isomorphic/locatorGenerators';
 import type { Language } from '@isomorphic/locatorGenerators';
 import { locatorOrSelectorAsSelector } from '@isomorphic/locatorParser';
-import { TabbedPaneTab } from '@web/components/tabbedPane';
+import { TabbedPaneTab } from '@playwright/web/src/components/tabbedPane';
 import { BrowserFrame } from './browserFrame';
 import type { ElementInfo } from '@recorder/recorderTypes';
 

packages/trace-viewer/src/ui/sourceTab.tsx

@@ -14,18 +14,18 @@
  * limitations under the License.
  */
 
-import { SplitView } from '@web/components/splitView';
+import { SplitView } from '@playwright/web/src/components/splitView';
 import * as React from 'react';
-import { useAsyncMemo } from '@web/uiUtils';
+import { useAsyncMemo } from '@playwright/web/src/uiUtils';
 import './sourceTab.css';
 import { StackTraceView } from './stackTrace';
-import { CodeMirrorWrapper } from '@web/components/codeMirrorWrapper';
-import type { SourceHighlight } from '@web/components/codeMirrorWrapper';
+import { CodeMirrorWrapper } from '@playwright/web/src/components/codeMirrorWrapper';
+import type { SourceHighlight } from '@playwright/web/src/components/codeMirrorWrapper';
 import type { SourceLocation, SourceModel } from './modelUtil';
 import type { StackFrame } from '@protocol/channels';
 import { CopyToClipboard } from './copyToClipboard';
-import { ToolbarButton } from '@web/components/toolbarButton';
-import { Toolbar } from '@web/components/toolbar';
+import { ToolbarButton } from '@playwright/web/src/components/toolbarButton';
+import { Toolbar } from '@playwright/web/src/components/toolbar';
 
 export const SourceTab: React.FunctionComponent<{
   stack?: StackFrame[],

packages/trace-viewer/src/ui/stackTrace.tsx

@@ -16,7 +16,7 @@
 
 import * as React from 'react';
 import './stackTrace.css';
-import { ListView } from '@web/components/listView';
+import { ListView } from '@playwright/web/src/components/listView';
 import type { StackFrame } from '@protocol/channels';
 
 const StackFrameListView = ListView<StackFrame>;

packages/trace-viewer/src/ui/tag.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { clsx } from '@web/uiUtils';
+import { clsx } from '@playwright/web/src/uiUtils';
 import './tag.css';
 
 export const TagView = ({ tag, style, onClick }: { tag: string, style?: React.CSSProperties, onClick?: (e: React.MouseEvent) => void }) => {

packages/trace-viewer/src/ui/timeline.tsx

@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import { clsx, msToString, useMeasure } from '@web/uiUtils';
-import { GlassPane } from '@web/shared/glassPane';
+import { clsx, msToString, useMeasure } from '@playwright/web/src/uiUtils';
+import { GlassPane } from '@playwright/web/src/shared/glassPane';
 import * as React from 'react';
 import type { Boundaries } from './geometry';
 import { FilmStrip } from './filmStrip';

packages/trace-viewer/src/ui/uiModeFiltersView.tsx

@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import '@web/common.css';
-import { Expandable } from '@web/components/expandable';
-import '@web/third_party/vscode/codicon.css';
-import { settings } from '@web/uiUtils';
+import '@playwright/web/src/common.css';
+import { Expandable } from '@playwright/web/src/components/expandable';
+import '@playwright/web/src/third_party/vscode/codicon.css';
+import { settings } from '@playwright/web/src/uiUtils';
 import React from 'react';
 import './uiModeFiltersView.css';
 import type { TeleSuiteUpdaterTestModel } from '@testIsomorphic/teleSuiteUpdater';

packages/trace-viewer/src/ui/uiModeTestListView.tsx

@@ -16,13 +16,13 @@
 
 import type { TreeItem } from '@testIsomorphic/testTree';
 import type { TestTree } from '@testIsomorphic/testTree';
-import '@web/common.css';
-import { Toolbar } from '@web/components/toolbar';
-import { ToolbarButton } from '@web/components/toolbarButton';
-import type { TreeState } from '@web/components/treeView';
-import { TreeView } from '@web/components/treeView';
-import '@web/third_party/vscode/codicon.css';
-import { msToString } from '@web/uiUtils';
+import '@playwright/web/src/common.css';
+import { Toolbar } from '@playwright/web/src/components/toolbar';
+import { ToolbarButton } from '@playwright/web/src/components/toolbarButton';
+import type { TreeState } from '@playwright/web/src/components/treeView';
+import { TreeView } from '@playwright/web/src/components/treeView';
+import '@playwright/web/src/third_party/vscode/codicon.css';
+import { msToString } from '@playwright/web/src/uiUtils';
 import type * as reporterTypes from 'playwright/types/testReporter';
 import React from 'react';
 import type { SourceLocation } from './modelUtil';

packages/trace-viewer/src/ui/uiModeTraceView.tsx

@@ -16,8 +16,8 @@
 
 import { artifactsFolderName } from '@testIsomorphic/folders';
 import type { TreeItem } from '@testIsomorphic/testTree';
-import '@web/common.css';
-import '@web/third_party/vscode/codicon.css';
+import '@playwright/web/src/common.css';
+import '@playwright/web/src/third_party/vscode/codicon.css';
 import type * as reporterTypes from 'playwright/types/testReporter';
 import React from 'react';
 import type { ContextEntry } from '../types/entries';

packages/trace-viewer/src/ui/uiModeView.tsx

@@ -14,22 +14,22 @@
  * limitations under the License.
  */
 
-import '@web/third_party/vscode/codicon.css';
-import '@web/common.css';
+import '@playwright/web/src/third_party/vscode/codicon.css';
+import '@playwright/web/src/common.css';
 import React from 'react';
 import { TeleSuite } from '@testIsomorphic/teleReceiver';
 import { TeleSuiteUpdater, type TeleSuiteUpdaterProgress, type TeleSuiteUpdaterTestModel } from '@testIsomorphic/teleSuiteUpdater';
 import type { TeleTestCase } from '@testIsomorphic/teleReceiver';
 import type * as reporterTypes from 'playwright/types/testReporter';
-import { SplitView } from '@web/components/splitView';
+import { SplitView } from '@playwright/web/src/components/splitView';
 import type { SourceLocation } from './modelUtil';
 import './uiModeView.css';
-import { ToolbarButton } from '@web/components/toolbarButton';
-import { Toolbar } from '@web/components/toolbar';
-import type { XtermDataSource } from '@web/components/xtermWrapper';
-import { XtermWrapper } from '@web/components/xtermWrapper';
-import { useDarkModeSetting } from '@web/theme';
-import { clsx, settings, useSetting } from '@web/uiUtils';
+import { ToolbarButton } from '@playwright/web/src/components/toolbarButton';
+import { Toolbar } from '@playwright/web/src/components/toolbar';
+import type { XtermDataSource } from '@playwright/web/src/components/xtermWrapper';
+import { XtermWrapper } from '@playwright/web/src/components/xtermWrapper';
+import { useDarkModeSetting } from '@playwright/web/src/theme';
+import { clsx, settings, useSetting } from '@playwright/web/src/uiUtils';
 import { statusEx, TestTree } from '@testIsomorphic/testTree';
 import type { TreeItem  } from '@testIsomorphic/testTree';
 import { TestServerConnection, WebSocketTestServerTransport } from '@testIsomorphic/testServerConnection';

packages/trace-viewer/src/ui/workbench.tsx

@@ -14,7 +14,7 @@
   limitations under the License.
 */
 
-import { SplitView } from '@web/components/splitView';
+import { SplitView } from '@playwright/web/src/components/splitView';
 import * as React from 'react';
 import { ActionList } from './actionList';
 import { CallTab } from './callTab';
@@ -27,16 +27,16 @@ import type * as modelUtil from './modelUtil';
 import { NetworkTab, useNetworkTabModel } from './networkTab';
 import { SnapshotTabsView } from './snapshotTab';
 import { SourceTab } from './sourceTab';
-import { TabbedPane } from '@web/components/tabbedPane';
-import type { TabbedPaneTabModel } from '@web/components/tabbedPane';
+import { TabbedPane } from '@playwright/web/src/components/tabbedPane';
+import type { TabbedPaneTabModel } from '@playwright/web/src/components/tabbedPane';
 import { Timeline } from './timeline';
 import { MetadataView } from './metadataView';
 import { AttachmentsTab } from './attachmentsTab';
 import { AnnotationsTab } from './annotationsTab';
 import type { Boundaries } from './geometry';
 import { InspectorTab } from './inspectorTab';
-import { ToolbarButton } from '@web/components/toolbarButton';
-import { useSetting, msToString, clsx } from '@web/uiUtils';
+import { ToolbarButton } from '@playwright/web/src/components/toolbarButton';
+import { useSetting, msToString, clsx } from '@playwright/web/src/uiUtils';
 import type { Entry } from '@trace/har';
 import './workbench.css';
 import { testStatusIcon, testStatusText } from './testUtils';

packages/trace-viewer/src/ui/workbenchLoader.tsx

@@ -14,12 +14,12 @@
   limitations under the License.
 */
 
-import { ToolbarButton } from '@web/components/toolbarButton';
+import { ToolbarButton } from '@playwright/web/src/components/toolbarButton';
 import * as React from 'react';
 import type { ContextEntry } from '../types/entries';
 import { MultiTraceModel } from './modelUtil';
 import './workbenchLoader.css';
-import { toggleTheme } from '@web/theme';
+import { toggleTheme } from '@playwright/web/src/theme';
 import { Workbench } from './workbench';
 import { TestServerConnection, WebSocketTestServerTransport } from '@testIsomorphic/testServerConnection';
 

packages/trace-viewer/src/uiMode.tsx

@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import '@web/common.css';
-import { applyTheme } from '@web/theme';
-import '@web/third_party/vscode/codicon.css';
+import '@playwright/web/src/common.css';
+import { applyTheme } from '@playwright/web/src/theme';
+import '@playwright/web/src/third_party/vscode/codicon.css';
 import * as ReactDOM from 'react-dom/client';
 import { UIModeView } from './ui/uiModeView';
 

packages/trace-viewer/tsconfig.json

@@ -22,7 +22,6 @@
       "@recorder/*": ["../recorder/src/*"],
       "@testIsomorphic/*": ["../playwright/src/isomorphic/*"],
       "@trace/*": ["../trace/src/*"],
-      "@web/*": ["../web/src/*"],
       // Resolving type dependencies will start processing types in @playwright/test
       // which in turn will start parsing the files and hence stumble upon the core
       // imports.

packages/trace-viewer/vite.config.ts

@@ -36,7 +36,6 @@ export default defineConfig({
       '@protocol': path.resolve(__dirname, '../protocol/src'),
       '@testIsomorphic': path.resolve(__dirname, '../playwright/src/isomorphic'),
       '@trace': path.resolve(__dirname, '../trace/src'),
-      '@web': path.resolve(__dirname, '../web/src'),
     },
   },
   build: {

packages/trace-viewer/vite.sw.config.ts

@@ -32,7 +32,6 @@ export default defineConfig({
       '@protocol': path.resolve(__dirname, '../protocol/src'),
       '@testIsomorphic': path.resolve(__dirname, '../playwright-core/src/utils/testIsomorphic'),
       '@trace': path.resolve(__dirname, '../trace/src'),
-      '@web': path.resolve(__dirname, '../web/src'),
     },
   },
   publicDir: false,

packages/web/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "web",
+  "name": "@playwright/web",
   "private": true,
   "version": "0.0.0",
   "scripts": {},

packages/web/src/components/errorMessage.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { ansi2html } from '@web/ansi2html';
+import { ansi2html } from '../ansi2html';
 import * as React from 'react';
 import './errorMessage.css';
 

packages/web/src/components/gridView.tsx

@@ -18,7 +18,7 @@ import * as React from 'react';
 import { ListView } from './listView';
 import type { ListViewProps } from './listView';
 import './gridView.css';
-import { ResizeView } from '@web/shared/resizeView';
+import { ResizeView } from '../shared/resizeView';
 
 export type Sorting<T> = { by: keyof T, negate: boolean };
 

packages/web/src/components/listView.tsx

@@ -16,7 +16,7 @@
 
 import * as React from 'react';
 import './listView.css';
-import { clsx, scrollIntoViewIfNeeded } from '@web/uiUtils';
+import { clsx, scrollIntoViewIfNeeded } from '../uiUtils';
 
 export type ListViewProps<T> = {
   name: string,

packages/web/src/components/tabbedPane.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { clsx } from '@web/uiUtils';
+import { clsx } from '../uiUtils';
 import './tabbedPane.css';
 import { Toolbar } from './toolbar';
 import * as React from 'react';

packages/web/src/components/toolbar.tsx

@@ -14,7 +14,7 @@
   limitations under the License.
 */
 
-import { clsx } from '@web/uiUtils';
+import { clsx } from '../uiUtils';
 import './toolbar.css';
 import * as React from 'react';
 

packages/web/src/components/toolbarButton.tsx

@@ -17,7 +17,7 @@
 import './toolbarButton.css';
 import '../third_party/vscode/codicon.css';
 import * as React from 'react';
-import { clsx } from '@web/uiUtils';
+import { clsx } from '../uiUtils';
 
 export interface ToolbarButtonProps {
   title: string,

packages/web/src/components/treeView.tsx

@@ -15,7 +15,7 @@
 */
 
 import * as React from 'react';
-import { clsx, scrollIntoViewIfNeeded } from '@web/uiUtils';
+import { clsx, scrollIntoViewIfNeeded } from '../uiUtils';
 import './treeView.css';
 
 export type TreeItem = {

packages/web/src/components/xtermWrapper.tsx

@@ -19,8 +19,8 @@ import './xtermWrapper.css';
 import type { ITheme, Terminal } from 'xterm';
 import type { FitAddon } from 'xterm-addon-fit';
 import type { XtermModule } from './xtermModule';
-import { currentTheme, addThemeListener, removeThemeListener } from '@web/theme';
-import { useMeasure } from '@web/uiUtils';
+import { currentTheme, addThemeListener, removeThemeListener } from '../theme';
+import { useMeasure } from '../uiUtils';
 
 export type XtermDataSource = {
   pending: (string | Uint8Array)[];

tests/tsconfig.json

@@ -15,7 +15,6 @@
           "@protocol/*": ["packages/protocol/src/*"],
           "@recorder/*": ["packages/recorder/src/*"],
           "@trace/*": ["packages/trace/src/*"],
-          "@web/*": ["packages/web/src/*"],
         },
     },
     "include": ["**/*.spec.js", "**/*.ts"],

tsconfig.json

@@ -17,7 +17,6 @@
       "@recorder/*": ["./packages/recorder/src/*"],
       "@testIsomorphic/*": ["./packages/playwright/src/isomorphic/*"],
       "@trace/*": ["./packages/trace/src/*"],
-      "@web/*": ["./packages/web/src/*"],
       "playwright-core/lib/*": ["./packages/playwright-core/src/*"],
       "playwright/lib/*": ["./packages/playwright/src/*"],
     },

utils/check_deps.js

@@ -26,7 +26,7 @@ const builtins = new Set(Module.builtinModules);
 const packagesDir = path.resolve(path.join(__dirname, '..', 'packages'));
 
 const packages = new Map();
-packages.set('web', packagesDir + '/web/src/');
+packages.set('@playwright/web', packagesDir + '/web/');
 packages.set('injected', packagesDir + '/playwright-core/src/server/injected/');
 packages.set('isomorphic', packagesDir + '/playwright-core/src/utils/isomorphic/');
 packages.set('testIsomorphic', packagesDir + '/playwright/src/isomorphic/');
@@ -128,14 +128,24 @@ async function innerCheckDeps(root) {
         importPath = path.resolve(path.dirname(fileName), importName);
       } else if (importName.startsWith('@')) {
         const tokens = importName.substring(1).split('/');
-        const package = tokens[0];
-        if (packages.has(package))
-          importPath = packages.get(package) + tokens.slice(1).join('/');
+        if (packages.has(`@${tokens[0]}/${tokens[1]}`)) {
+          // Namespaced package.
+          importPath = packages.get(`@${tokens[0]}/${tokens[1]}`) + tokens.slice(2).join('/');
+        } else if (packages.has(tokens[0])) {
+          // Aliases.
+          importPath = packages.get(tokens[0]) + tokens.slice(1).join('/');
+        }
       }
 
       const mergedDeps = calculateDeps(fileName);
       if (mergedDeps.includes('***'))
         return;
+
+      // Unresolved import.
+      if (allowImport(fileName, importName, mergedDeps))
+        return;
+
+      // Resolved import.
       if (importPath) {
         if (!fs.existsSync(importPath)) {
           if (fs.existsSync(importPath + '.ts'))
@@ -192,8 +202,9 @@ async function innerCheckDeps(root) {
         }
         if (line === '***')
           group.push('***');
-        else if (line.startsWith('@'))
-          group.push(line.replace(/@([\w-]+)\/(.*)/, (_, arg1, arg2) => packages.get(arg1) + arg2));
+        else if (line.startsWith('@')) {
+          group.push(line);
+        }
         else
           group.push(path.resolve(depsDirectory, line));
       }