ref(docs): Update docs for @spotlightjs/spotlight

packages/website/src/components/LandingPage.astro

@@ -23,7 +23,7 @@ import { Content as CodeBlock } from './codeblock.mdx';
 <Section title="Thirty Seconds to Liftoff">
   <FeatureCard
     title="As easy as npm install"
-    description="Two npm packages get you over the finish line. Inject the Spotlight overlay and run the sidecar."
+    description="Install Spotlight, inject the Spotlight overlay and run the sidecar."
     linkUrl="/setup"
     linkText="Setup"
   >

packages/website/src/components/codeblock.mdx

@@ -3,13 +3,13 @@ title: Setup Codeblock
 ---
 
 ```ts
-import * as Spotlight from '@spotlightjs/overlay';
+import * as Spotlight from '@spotlightjs/spotlight';
 
-if (import.meta.env.DEV) {
+if (process.env.NODE_ENV === 'development') {
   Spotlight.init();
 }
 ```
 
 ```shell
-npx @spotlightjs/sidecar
+npx spotlight-sidecar
 ```

packages/website/src/content/docs/about.mdx

@@ -20,16 +20,17 @@ At a high level, Spotlight consists of two components:
 2. A proxy server (`@spotlightjs/sidecar`) which enables push-based communication to the overlay. This is achieved via a simple HTTP relay,
    allowing SDKs to push events to it, and allowing the overlay to receive events using [server-sent events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events).
 
-This means that adoption in most projects is two simple additions:
+For convenience, these packages are combined in a single package (`@spotlightjs/spotlight`), which is the recommended way to use Spotlight.
+This means that adoption in most projects is as simple as adding a single dependency:
 
 ```shell
-npm add @spotlightjs/overlay @spotlightjs/sidecar
+npm add @spotlightjs/spotlight
 ```
 
 Registering Spotlight in your frontend application:
 
 ```typescript
-import * as Spotlight from '@spotlightjs/overlay';
+import * as Spotlight from '@spotlightjs/spotlight';
 
 // only load Spotlight in dev
 if (process.env.NODE_ENV === "development") {
@@ -40,7 +41,7 @@ if (process.env.NODE_ENV === "development") {
 Running the sidecar in the background:
 
 ```shell
-npx @spotlightjs/sidecar
+npx @spotlightjs/spotlight
 ```
 
 The overlay itself behaves a little differently from Sentry. That's intentional both because this is for local

packages/website/src/content/docs/contribute/index.mdx

@@ -41,18 +41,18 @@ pnpm dev:playground
 
 Additionally you may want to link it into an existing project. This is a little brittle, and we're not experts here, so your mileage may vary.
 
-First, when in the Spotlight root directory, you'll need to link the packages you're referencing (likely `@spotlightjs/overlay` and `@spotlightjs/sidecar`):
+{/* TODO: Can we just link @spotlightjs/spotlight? Probably?? */}
+
+First, when in the Spotlight root directory, you'll need to link the packages you're referencing (likely `@spotlightjs/spotlight`):
 
 ```shell
-pnpm link --global -C packages/overlay
-pnpm link --global -C packages/sidecar
+pnpm link --global -C packages/spotlight
 ```
 
 You can now link these within your project. For example if you're using `pnpm`:
 
 ```shell
-pnpm link --global @spotlightjs/overlay
-pnpm link --global @spotlightjs/sidecar
+pnpm link --global @spotlightjs/spotlight
 ```
 
 ## Repository Structure
@@ -62,8 +62,9 @@ The monorepo is mostly straight forward, but here's a quick summary:
 ```
 spotlight
 └── packages                
-    ├── overlay      // @spotlightjs/overlay  - the main overlay
-    ├── sidecar      // @spotlightjs/sidecar  - the sidecar (proxy) for streaming data
-    ├── tsconfig     // @spotlightjs/tsconfig - shared tsconfig
-    └── website      // @spotlightjs/website  - the main overlay
+    ├── overlay      // @spotlightjs/overlay   - the main overlay
+    ├── sidecar      // @spotlightjs/sidecar   - the sidecar (proxy) for streaming data
+    ├── spotlight    // @spotlightjs/spotlight - the main spotlight package, combining overlay and sidecar
+    ├── tsconfig     // @spotlightjs/tsconfig  - shared tsconfig
+    └── website      // @spotlightjs/website   - the main overlay
 ```

packages/website/src/content/docs/reference/configuration.md

@@ -6,7 +6,7 @@ description: All the configuration options for setting up Spotlight
 ## `init`
 
 ```js
-import {init, sentry} as Spotlight from '@spotlightjs/overlay';
+import {init, sentry} as Spotlight from '@spotlightjs/spotlight';
 
 init({
   integrations: [sentry()],

packages/website/src/content/docs/reference/console.mdx

@@ -6,7 +6,7 @@ description: Interface of ConsoleIntegration
 The console integration allows you to easily render console logs within Spotlight.
 
 ```ts
-import { init, console } from "@spotlightjs/overlay";
+import { init, console } from "@spotlightjs/spotlight";
 
 init({
   integrations: [console()]

packages/website/src/content/docs/reference/sentry.mdx

@@ -6,7 +6,7 @@ description: Interface of SentryIntegration
 The Sentry integration is the default in Spotlight. It receives events and envelope formats from Sentry SDKs (when configured with `spotlight=true`) and renders those as Errors and Traces in the overlay.
 
 ```ts
-import { init, sentry } from "@spotlightjs/overlay";
+import { init, sentry } from "@spotlightjs/spotlight";
 
 init({
   integrations: [sentry()],

packages/website/src/content/docs/setup/index.mdx

@@ -15,23 +15,23 @@ While it's not dependent on Sentry, Spotlight is much more powerful if you're us
 
 ## Overlay
 
-Start by installing the `@spotlightjs/overlay` package in your existing frontend application.
+Start by installing the `@spotlightjs/spotlight` package in your existing frontend application.
 
 
 <Tabs>
   <TabItem label="npm">
   ```sh 
-  npm add @spotlightjs/overlay 
+  npm add @spotlightjs/spotlight 
   ```
   </TabItem>
   <TabItem label="pnpm">
   ```sh 
-  pnpm add @spotlightjs/overlay
+  pnpm add @spotlightjs/spotlight
   ```
   </TabItem>
   <TabItem label="yarn">
   ```sh 
-  yarn add @spotlightjs/overlay
+  yarn add @spotlightjs/spotlight
   ```
   </TabItem>
 </Tabs>
@@ -45,7 +45,7 @@ Inject the Spotlight overlay into your application:
 <Tabs>
   <TabItem label="Vite">
   ```js
-  import * as Spotlight from '@spotlightjs/overlay';
+  import * as Spotlight from '@spotlightjs/spotlight';
 
   // only load Spotlight in dev
   if (import.meta.env.DEV) {
@@ -55,7 +55,7 @@ Inject the Spotlight overlay into your application:
   </TabItem>
   <TabItem label="Other Bundlers">
   ```js
-  import * as Spotlight from '@spotlightjs/overlay';
+  import * as Spotlight from '@spotlightjs/spotlight';
 
   // only load Spotlight in dev
   if (process.env.NODE_ENV === "development") {
@@ -70,7 +70,7 @@ Inject the Spotlight overlay into your application:
 
   ```js
   if (process.env.NODE_ENV === "development") {
-    import('@spotlightjs/overlay').then((Spotlight) =>
+    import('@spotlightjs/spotlight').then((Spotlight) =>
       Spotlight.init({ injectImmediately: true })
     );
   }

packages/website/src/content/docs/sidecar/npx.mdx

@@ -1,11 +1,22 @@
 ---
 title: Run Sidecar with NPX
 ---
+import { Tabs, TabItem } from '@astrojs/starlight/components';
 
 To run Sidecar independently with NPX, run the following command:
 
-```sh
-npx @spotlightjs/sidecar
-```
+<Tabs>
+  <TabItem label="npm and yarn">
+    ```sh
+    npx @spotlightjs/spotlight
+    ```
+  </TabItem>
+  <TabItem label="pnpm">
+    ```sh
+    pnpx @spotlightjs/spotlight
+    ```
+  </TabItem>
+</Tabs>
+
 
 This starts the server on port `8969`.