New SDK release

packages/projects-docs/pages/faq.mdx

@@ -342,14 +342,6 @@ If everything seems to be in order but you're still having issues with the payme
 
 Yes, you can upgrade or downgrade your plan at any time from the settings page.
 
-## How can I add more credits?
-
-You can add more credits from the "Plan & Billing" tab of your [Workspace Settings](https://codesandbox.io/t/billing):
-
-1. Click "Manage addons", under "Plan".
-2. Select the VM credit package(s) you'd like to purchase.
-3. Click "Next" and then "Confirm changes".
-
 ## Can I keep my legacy per-user Pro plan?
 
 Absolutely! You can choose to keep your legacy Pro plan until further notice. In case we require any change to your subscription in the future, rest assured that we will give you two months’ notice so you can accommodate the changes. If you wish to upgrade, follow the steps shown in our [upgrade flow](https://codesandbox.io/upgrade).

packages/projects-docs/pages/learn/credit-usage/credits.mdx

@@ -10,35 +10,32 @@ import { Callout } from 'nextra-theme-docs'
 Credits serve as the unit of measurement for VM runtime. They simplify understanding and managing the costs of running your Devboxes and Repositories. One credit equates to a specific amount of resources used per hour, which ensures clarity and transparency in your billing.
 
 | VM size | Credits / hour | Cost / hour | CPU      | RAM    |
-| ------ | -------------- | ----------- | -------- | ------ |
-| Nano   | 10 credits     | $0.18       | 2 cores  | 4 GB   |
-| Micro  | 20 credits     | $0.36       | 4 cores  | 8 GB   |
-| Small  | 40 credits     | $0.72       | 8 cores  | 16 GB  |
-| Medium | 80 credits     | $1.44       | 16 cores | 32 GB  |
-| Large  | 160 credits    | $2.88       | 32 cores | 64 GB  |
-| XLarge | 320 credits    | $5.76       | 64 cores | 128 GB |
+| ------- | -------------- | ----------- | -------- | ------ |
+| Pico    | 5 credits      | $0.0743     | 2 cores  | 1 GB   |
+| Nano    | 10 credits     | $0.1486     | 2 cores  | 4 GB   |
+| Micro   | 20 credits     | $0.2972     | 4 cores  | 8 GB   |
+| Small   | 40 credits     | $0.5944     | 8 cores  | 16 GB  |
+| Medium  | 80 credits     | $1.1888     | 16 cores | 32 GB  |
+| Large   | 160 credits    | $2.3776     | 32 cores | 64 GB  |
+| XLarge  | 320 credits    | $4.7552     | 64 cores | 128 GB |
 
 <Callout emoji="ℹ️">
 Sandboxes do not run on VMs, so any time spent on a Sandbox will not count toward your credit spend.
 </Callout>
 
 ## Types of credits
 
-### Subscription credits 
-Subscription credits are allocated monthly credits per workspace according to the subscription plan. A workspace on the free plan gets 400 credits per month. The Pro plan has a base of 1000 credits a month, but more can be purchased with credit add-ons. 
+### Subscription credits
+
+Subscription credits are allocated monthly credits per workspace according to the subscription plan. A workspace on the free plan gets 400 credits per month. The Pro plan has a base of 1000 credits a month, but more can be purchased with credit add-ons.
 
 <Callout emoji="ℹ️">
 Unused credits do not roll over month-to-month.
 </Callout>
 
-### On-demand credits 
-Once subscription credits have been used, VM usage will begin running on on-demand credits. These credits will be tracked and billed at the end of the billing cycle. 
-On-demand credits are not subject to discount and are billed at a standard $0.18 per hour.
-
-To prevent unexpected bills due to unusually high on-demand credit usage, every Pro workspace is required to set a [spending limit](/learn/credit-usage/controlling-usage#spending-limit).
-
-
-
-
+### On-demand credits
 
+Once subscription credits have been used, VM usage will begin running on on-demand credits. These credits will be tracked and billed at the end of the billing cycle.
+On-demand credits are not subject to discount and are billed at a standard $0.1486 per hour.
 
+To prevent unexpected bills due to unusually high on-demand credit usage, every Pro workspace is required to set a [spending limit](/learn/credit-usage/controlling-usage#spending-limit).

packages/projects-docs/pages/learn/plans/pricing-faq.mdx

@@ -13,7 +13,7 @@ Credit use depends on the time spent on a VM and the type of VM a project runs o
 
 ### Do credits apply to Sandbox use?
 
-No. Credits are used to measure VM use. Sandboxes run in the browser and therefore don't require VMs, making them free to use.
+No. Credits are used to measure VM use. Browser Sandboxes (not to be confused with CodeSandbox SDK sandboxes) run in the browser and therefore don't require VMs, making them free to use.
 
 ### Can I always use CodeSandbox for free?
 
@@ -45,19 +45,11 @@ If you have Sandboxes over the limit of your subscription, you can regain access
 
 ### How much does a credit cost?
 
-Credits are priced at $0.018 each. You can conveniently purchase them as add-ons to your base package, starting at $9 for a bundle of 500 credits. Discounts are available for packages with more credits.
+Credits are priced at $0.01486 each.
 
-### How can I add more credits?
+### What are subscription credits?
 
-You can add more credits from the "Plan & Billing" tab of your [Workspace Settings](https://codesandbox.io/t/billing):
-
-1. Click "Manage addons", under "Plan".
-2. Select the VM credit package(s) you'd like to purchase.
-3. CLick "Next" and then "Confirm changes".
-
-### What is the difference between subscription credits and add-on credits?
-
-Subscription credits are a monthly allocation that comes bundled with your base plan. On the other hand, add-on credits are available for purchase at any time, don't renew automatically, and remain accessible until you've used them all.
+Subscription credits are a monthly allocation that comes bundled with your base plan.
 
 ### Can I add a repository to multiple workspaces?
 

packages/projects-docs/pages/sdk/_meta.json

@@ -1,34 +1,60 @@
 {
   "index": "Introduction",
   "use-cases": "Use Cases",
+  "playground": {
+    "href": "https://wkyxcw-5173.csb.app/",
+    "title": "Example Playground"
+  },
+  "faq": "FAQ",
   "pricing": "Pricing",
-  "contact": {
-    "title": "Contact Us",
-    "href": "https://codesandbox.io/support#form",
-    "newWindow": true
+  "-- guides": {
+    "type": "separator",
+    "title": "Guides"
   },
-
-  "-- api-reference": {
+  "templates": "Templates",
+  "browser": "Browser",
+  "browser-previews": "Previews",
+  "docker": "Docker & Docker Compose",
+  "-- privacy-security": {
     "type": "separator",
-    "title": "API Reference"
+    "title": "Privacy & Security"
   },
-  "sandboxes": "Sandboxes",
-  "filesystem": "File System",
-  "shells": "Shells",
-  "ports": "Ports & Previews",
-  "tasks": "Tasks & Setup",
-  "sessions": "Sessions",
+  "sandbox-privacy": "Sandbox Privacy",
+  "preview-api-access": "Preview API Access",
+  "-- sandboxes": {
+    "type": "separator",
+    "title": "Sandboxes"
+  },
+  "lifecycle": "Lifecycle",
+  "create-resume": "Create & Resume",
+  "hibernate": "Hibernate",
+  "fork": "Fork",
+  "restart-shutdown": "Restart & Shutdown",
   "specs": "VM Specs",
+  "persistence": "Persistence",
+  "update-sandbox": "Update Sandbox",
+  "-- sessions": {
+    "type": "separator",
+    "title": "Sessions"
+  },
+  "create-session": "Create Session",
+  "filesystem": "File System",
+  "terminals": "Terminals",
+  "commands": "Commands",
+  "interpreters": "Interpreters",
+  "ports": "Ports",
+  "hosts": "Hosts",
+  "tasks": "Tasks",
+  "setup": "Setup",
 
   "-- resources": {
     "type": "separator",
     "title": "Resources"
   },
-  "snapshot-library": "Snapshot Library",
-  "snapshot-builder": "Snapshot Builder",
-  "environment": "Environment",
-  "docker": "Docker & Docker Compose",
-  "persistence": "Persistence",
-  "fork": "Fork",
-  "faq": "FAQ"
+  "template-library": "Template Library",
+  "contact": {
+    "title": "Contact Us",
+    "href": "https://codesandbox.io/support#form",
+    "newWindow": true
+  }
 }

packages/projects-docs/pages/sdk/browser-previews.mdx

@@ -0,0 +1,97 @@
+---
+title: Previews
+description: Learn how you can interact with previews in your sandbox.
+---
+
+import { Callout } from 'nextra-theme-docs'
+
+# Previews
+
+The previews API allows you to create and interact with previews in the browser. You can navigate, listen to messages and even inject custom code into the preview.
+
+## API
+
+```ts
+import { connectToSandbox, createPreview } from '@codesandbox/sdk/browser'
+
+const sandbox = await connectToSandbox({
+    session: initialSessionFromServer,
+    getSession: (id) => fetchJson(`/api/sandboxes/${id}`))
+})
+
+// We have a dev server running on port 5173
+const preview = createPreview(sandbox.hosts.getUrl(5173))
+
+document.querySelector('#preview-container').appendChild(preview.iframe)
+```
+
+<Callout>
+If you are running public previews you can also just use the port url directly without a preview token.
+</Callout>
+
+## Messages
+
+You can listen to messages from the preview:
+
+```ts
+preview.onMessage((message) => {
+    switch (message.type) {
+        case 'SET_URL': {
+            // Url that was set
+            message.url
+            // If you can move backward
+            message.back
+            // If you can move forward
+            message.forward
+            break;
+        }
+        case 'RELOAD': {
+            // If preview reloaded
+        }
+        case 'PREVIEW_UNLOADING': {
+            // Preview will unload
+        }
+    }
+})
+```
+
+<Callout>
+By injecting your own code you can extend these messages to your own.
+</Callout>
+
+## Navigate
+
+```ts
+// Replace the current url
+preview.setUrl("...")
+
+// Navigate back
+preview.back()
+
+// Navigate forward
+preview.forward()
+
+// Reload the iframe
+preview.reload()
+```
+
+## Inject and Invoke
+
+You can inject any code into the preview. This is useful if you want to insert custom UI elements, background processes.etc The injected code can listen to messages, send messages and has access to any variables (scope) you send to the injected code.
+
+```ts
+preview.onMessage((message) => {
+    console.log(message)
+})
+
+preview.injectAndInvoke(function MyInjectedFunction({ previewProtocol, previewWindow, scope }) {
+    alert(scope.message)
+    previewProtocol.sendMessage({ type: 'ALERTED' })
+}, {
+    message: 'Hello World'
+})
+```
+
+<Callout>
+Note that the function passed to `injectAndInvoke` will be stringified and sent to the preview. Be careful about your build tool transforming this function into invalid code.
+</Callout>

packages/projects-docs/pages/sdk/browser.mdx

@@ -0,0 +1,103 @@
+---
+title: Browser
+description: Learn how to connect to a sandbox in the browser with the CodeSandbox SDK.
+---
+
+import { Callout } from 'nextra-theme-docs'
+
+# Browser
+
+Connecting to a Sandbox in the browser requires some collaboration with your server.
+
+```ts
+app.post('/api/sandboxes', async (req, res) => {
+  const sandbox = await sdk.sandboxes.create();
+  const session = await sandbox.createBrowserSession({
+    // Create isolated sessions by using a unique reference to the user
+    id: req.session.username,
+  });
+
+  res.json(session)
+})
+
+app.get('/api/sandboxes/:sandboxId', async (req, res) => {
+  const sandbox = await sdk.sandboxes.resume(req.params.sandboxId);
+  const session = await sandbox.createBrowserSession({
+    // Resume any existing session by using the same user reference
+    id: req.session.username,
+  });
+
+  res.json(session)
+})
+```
+
+Then in the browser:
+
+```ts
+import { connectToSandbox } from '@codesandbox/sdk/browser';
+
+const sandbox = await connectToSandbox({
+  // The session object you either passed on page load or fetched from the server
+  session: initialSessionFromServer,
+  // When reconnecting to the sandbox, fetch the session from the server
+  getSession: (id) => fetchJson(`/api/sandboxes/${id}`)
+});
+
+await sandbox.fs.writeTextFile('test.txt', 'Hello World');
+```
+
+The Browser session automatically manages the connection and will reconnect if the connection is lost. This is controlled by an option called `onFocusChange` and by default it will reconnect when the page is visible.
+
+```ts
+const sandbox = await connectToSandbox({
+  session: initialSessionFromServer,
+  getSession: (id) => fetchJson(`/api/sandboxes/${id}`),
+  onFocusChange: (notify) => {
+    const onVisibilityChange = () => {
+      notify(document.visibilityState === 'visible');
+    }
+
+    document.addEventListener('visibilitychange', onVisibilityChange);
+
+    return () => {
+      document.removeEventListener('visibilitychange', onVisibilityChange);
+    }
+  }
+});
+```
+
+If you tell the browser session when it is in focus it will automatically reconnect when hibernated. Unless you explicitly disconnect the session.
+
+While the `connectToSandbox` promise is resolving you can also listen to initialization events to show a loading state:
+
+```ts
+const sandbox = await connectToSandbox({
+  session: initialSessionFromServer,
+  getSession: (id) => fetchJson(`/api/sandboxes/${id}`),
+  onInitCb: (event) => {}
+});
+```
+
+## Disconnecting the Sandbox
+
+Disconnecting the session will end the session and automatically hibernate the sandbox after a timeout. You can also hibernate the sandbox explicitly from the server.
+
+```ts
+import { connectToSandbox } from '@codesandbox/sdk/browser'
+
+const sandbox = await connectToSandbox({
+  session: initialSessionFromServer,
+  getSession: (id) => fetchJson(`/api/sandboxes/${id}`),
+})
+
+// Disconnect returns a promise that resolves when the session is disconnected
+sandbox.disconnect();
+
+// Optionally hibernate the sandbox explicitly by creating an endpoint on your server
+fetch('/api/sandboxes/' + sandbox.id + '/hibernate', {
+  method: 'POST'
+})
+
+// You can reconnect explicitly from the browser by
+sandbox.reconnect()
+```