@picked/client 0.0.70-next.6 → 0.0.71-next.1

package/dist/docs/flow-builder/keyboard-shortcuts.md

@@ -4,15 +4,15 @@ layout: docs
 
 # Keyboard shortcuts
 
-These shortcuts are available when the flow builder canvas is focused.
+These shortcuts work when the canvas of the flow builder holds the keyboard input.
 
 ## Canvas tools
 
 | Shortcut (Mac) | Shortcut (PC) | Action |
 | --- | --- | --- |
-| `V` | `V` | Select tool |
-| `H` | `H` | Hand tool (pan) |
-| `Space` (hold) | `Space` (hold) | Temporary hand tool |
+| `V` | `V` | The choose tool |
+| `H` | `H` | The hand tool, which pans the view |
+| `Space`, held | `Space`, held | The hand tool, while you hold the key |
 
 ## Layout
 
@@ -20,19 +20,19 @@ These shortcuts are available when the flow builder canvas is focused.
 | --- | --- | --- |
 | `Shift+L` | `Shift+L` | Auto-layout |
 
-## Selection
+## Choice
 
 | Shortcut (Mac) | Shortcut (PC) | Action |
 | --- | --- | --- |
-| `Cmd+A` | `Ctrl+A` | Select all nodes |
-| `Escape` | `Escape` | Deselect all |
+| `Cmd+A` | `Ctrl+A` | Choose every node |
+| `Escape` | `Escape` | Choose no node |
 
-## Editing
+## Edits
 
 | Shortcut (Mac) | Shortcut (PC) | Action |
 | --- | --- | --- |
-| `Cmd+D` | `Ctrl+D` | Duplicate selected nodes |
-| `Delete` / `Backspace` | `Delete` / `Backspace` | Delete selected nodes |
+| `Cmd+D` | `Ctrl+D` | Make a copy of each chosen node |
+| `Delete` or `Backspace` | `Delete` or `Backspace` | Delete each chosen node |
 | `Cmd+Z` | `Ctrl+Z` | Undo |
 | `Cmd+Shift+Z` | `Ctrl+Shift+Z` | Redo |
 
@@ -40,27 +40,27 @@ These shortcuts are available when the flow builder canvas is focused.
 
 | Shortcut (Mac) | Shortcut (PC) | Action |
 | --- | --- | --- |
-| Arrow keys | Arrow keys | Nudge selected nodes |
-| `Shift`+Arrow keys | `Shift`+Arrow keys | Large nudge |
+| Arrow keys | Arrow keys | Move each chosen node a small distance |
+| `Shift` and an arrow key | `Shift` and an arrow key | Move each chosen node further |
 
 ## Zoom
 
 | Shortcut (Mac) | Shortcut (PC) | Action |
 | --- | --- | --- |
-| Scroll | Scroll | Zoom in/out |
-| Pinch | Pinch | Zoom in/out (trackpad) |
+| Scroll | Scroll | Zoom in or out |
+| Pinch | Pinch | Zoom in or out, on a trackpad |
 | `Cmd+=` | `Ctrl+=` | Zoom in |
 | `Cmd+-` | `Ctrl+-` | Zoom out |
-| `Shift+1` | `Shift+1` | Fit view |
+| `Shift+1` | `Shift+1` | Fit the flow to the view |
 | `Shift+0` | `Shift+0` | Zoom to 100% |
 
 ## Panels
 
 | Shortcut (Mac) | Shortcut (PC) | Action |
 | --- | --- | --- |
-| `Cmd+\` | `Ctrl+\` | Toggle both side panels |
-| `?` | `?` | Toggle shortcuts |
+| `Cmd+\` | `Ctrl+\` | Turn both side panels on or off |
+| `?` | `?` | Turn this shortcut list on or off |
 
 ---
 
-[Overview](/flow-builder/overview) · [Nodes](/flow-builder/nodes) · [Building Flows](/flow-builder/building-flows) · **Keyboard Shortcuts** · [Condition Builder](/flow-builder/condition-builder)
+[Overview](/flow-builder/overview) · [Nodes](/flow-builder/nodes) · [Build Flows](/flow-builder/building-flows) · **Keyboard Shortcuts** · [Condition Builder](/flow-builder/condition-builder)

package/dist/docs/flow-builder/nodes.md

@@ -4,40 +4,53 @@ layout: docs
 
 # Nodes
 
-Nodes are the building blocks of a flow. Each node represents a block in your experience. There are four node types.
+A node is one part of a flow. Each node stands for a block in your experience. There
+are four node types.
 
 ## Origin
 
-Every flow starts with an origin node. It's a gray circle on the left side of the canvas. It has one output handle on its right side.
+Every flow starts with an origin node. It is a gray circle on the left side of the
+canvas, and it has one output handle on its right side.
 
-You can't move, delete, or duplicate the origin. It's always present.
+You cannot move the origin, delete it, or make a copy of it. It is always there.
 
 ## Step
 
-A step node represents a screen shown to visitors. It appears as a blue rectangle on the canvas.
+A step node stands for a screen that a visitor sees. It appears as a blue rectangle
+on the canvas.
 
-Steps hold fields. Drag a field from the entity browser onto a step node to assign it. The node subtitle shows how many fields are assigned.
+A step holds fields. Drag a field from the entity browser onto a step node to assign
+it. The subtitle of the node gives the number of assigned fields.
 
-Each step has a `layoutName` that tells the SDK which visual layout to use when rendering this step. Configure the layout name in the inspector.
+Each step has a `layoutName`. It tells the SDK which visual layout to use for this
+step. Set the layout name in the inspector.
 
 ## Action
 
-An action node represents a side effect — something that happens behind the scenes. It appears as a green rectangle.
+An action node stands for a side effect. A side effect happens where the visitor
+cannot see it. The node appears as a green rectangle.
 
-Actions trigger when the flow reaches them. Use actions for tasks like tracking events, sending data, or triggering integrations.
+An action runs when the flow reaches it. Use an action to record an event, to send
+data, or to start an integration.
 
 ## Condition
 
-A condition node represents a branching point. It appears as an amber rectangle.
+A condition node stands for a point where the flow splits. It appears as an amber
+rectangle.
 
-Condition nodes have two output handles instead of one. The green handle (top-right) connects to the path taken when the condition is true. The red handle (bottom-right) connects to the path taken when it's false.
+A condition node has two output handles, and not one. The green handle at the top
+right connects to the path for a true result. The red handle at the bottom right
+connects to the path for a false result.
 
-Define the condition logic in the inspector using the visual condition builder. See [Conditions](/conditions) for details.
+Define the rule in the inspector, with the visual condition builder. See
+[Conditions](/conditions) for more detail.
 
 ## Handles
 
-Handles are the connection points on nodes. Input handles sit on the left. Output handles sit on the right. Drag from an output handle to an input handle to connect two nodes.
+A handle is a connection point on a node. An input handle is on the left. An output
+handle is on the right. Drag from an output handle to an input handle to connect two
+nodes.
 
 ---
 
-[Overview](/flow-builder/overview) · **Nodes** · [Building Flows](/flow-builder/building-flows) · [Keyboard Shortcuts](/flow-builder/keyboard-shortcuts) · [Condition Builder](/flow-builder/condition-builder)
+[Overview](/flow-builder/overview) · **Nodes** · [Build Flows](/flow-builder/building-flows) · [Keyboard Shortcuts](/flow-builder/keyboard-shortcuts) · [Condition Builder](/flow-builder/condition-builder)

package/dist/docs/flow-builder/overview.mdx

@@ -6,7 +6,9 @@ import { Screenshot } from '../../../components/Screenshot'
 
 # Flow builder
 
-The flow builder is a visual editor for designing experience flows. You drag blocks onto a canvas, connect them with arrows, and configure each node in an inspector panel.
+The flow builder is a visual editor for an experience flow. You drag a block onto a
+canvas, connect the blocks with arrows, and set the options of each node in an
+inspector panel.
 
 <Screenshot
   route="/{orgSlug}/{projectId}/workspaces/{workspaceId}/experiences/{experienceId}"
@@ -15,36 +17,47 @@ The flow builder is a visual editor for designing experience flows. You drag blo
 
 ## Layout
 
-The flow builder has three panels arranged left to right.
+The flow builder has three panels, from left to right.
 
-**Entity browser** (left): Lists all steps, actions, conditions, and fields in your project. Drag items from here onto the canvas.
+**Entity browser**, on the left: it lists every step, action, condition, and field in
+your project. Drag an item from here onto the canvas.
 
-**Canvas** (center): The workspace where you build your flow. Nodes represent blocks. Arrows represent connections between them.
+**Canvas**, in the middle: the area where you build your flow. A node stands for a
+block. An arrow stands for a connection between two blocks.
 
-**Inspector** (right): Shows configuration for the selected node. When nothing is selected, it shows experience-level settings.
+**Inspector**, on the right: it shows the options of the node that you choose. When
+you choose no node, it shows the settings of the experience.
 
 ## Panel controls
 
-Drag the dividers between panels to resize them. Press `Cmd/Ctrl+\` to toggle both side panels. Press `Cmd/Ctrl+Shift+\` to toggle just the inspector.
+Drag a divider between two panels to change their size. Press `Cmd/Ctrl+\` to turn
+both side panels on and off. Press `Cmd/Ctrl+Shift+\` to turn the inspector on and
+off.
 
-## Navigating the canvas
+## Move around the canvas
 
-**Zoom**: Scroll to zoom in and out.
+**Zoom**: scroll to make the view larger or smaller.
 
-**Pan**: Select the hand tool (press `H`) and drag. Or hold `Space` while dragging. Middle-click drag also pans.
+**Pan**: choose the hand tool with `H`, then drag. You can also hold `Space` and
+drag. A drag with the middle mouse button also pans.
 
-**Select tool**: Press `V` to switch back to the select tool. This is the default — click to select nodes, drag on empty space to marquee-select.
+**Choose tool**: press `V` to go back to the default tool.
+Click to choose a node. Drag on empty space to choose every node inside a rectangle.
 
 ## Auto-layout
 
-Click the auto-layout button in the toolbar to automatically arrange all nodes in a clean hierarchy. Useful after adding many nodes or when the canvas gets messy.
+Click the auto-layout button in the toolbar. The flow builder then arranges every
+node into a clean hierarchy. This is useful after you add many nodes, and when the
+canvas becomes messy.
 
-## Saving
+## Save your work
 
-Click **Save** in the toolbar to save your flow. The button is enabled when you have unsaved changes.
+Click **Save** in the toolbar to save your flow. The button is active when you have
+an unsaved change.
 
-The flow builder also auto-saves after a period of inactivity. A dot indicator appears on the save button when there are unsaved changes.
+The flow builder also saves by itself after a period of inactivity. A dot on the save
+button means that you have an unsaved change.
 
 ---
 
-**Flow Builder** · [Nodes](/flow-builder/nodes) · [Building Flows](/flow-builder/building-flows) · [Keyboard Shortcuts](/flow-builder/keyboard-shortcuts) · [Condition Builder](/flow-builder/condition-builder)
+**Flow Builder** · [Nodes](/flow-builder/nodes) · [Build Flows](/flow-builder/building-flows) · [Keyboard Shortcuts](/flow-builder/keyboard-shortcuts) · [Condition Builder](/flow-builder/condition-builder)

package/dist/docs/gtm-template.md

@@ -2,9 +2,10 @@
 layout: docs
 ---
 
-# Google Tag Manager template
+# Template for Google Tag Manager
 
-The Picked Ecommerce GTM Tag Template lets you track ecommerce events and send them to Picked directly from Google Tag Manager.
+The Picked Ecommerce template for Google Tag Manager lets you track an ecommerce
+event and send it to Picked.
 
 ## Automatic installation
 
@@ -13,57 +14,65 @@ Install the template from the GTM Community Gallery:
 1. In Tag Manager, click **Templates**.
 2. In the **Tag Templates** section, click **Search Gallery**.
 3. Search for `Picked Ecommerce`.
-4. Click the Picked Ecommerce template to view details.
-5. Click **Add to workspace**.
-6. Review the required permissions and click **Add**.
+4. Click the Picked Ecommerce template to read its detail.
+5. Click the **Add to workspace** button.
+6. Read the permissions that it needs.
+7. Click **Add**.
 
-![Picked Ecommerce template in the GTM Community Gallery](/gtm/picked-ecommerce-gtm.png)
+![The Picked Ecommerce template in the GTM Community Gallery](/gtm/picked-ecommerce-gtm.png)
 
 ## Manual installation
 
-If you prefer to import the template file directly:
+To import the template file yourself:
 
-1. Download the [template file](https://github.com/picked-app/gtm-template/blob/main/template.tpl) from GitHub (use the download icon).
+1. Download the
+   [template file](https://github.com/picked-app/gtm-template/blob/main/template.tpl)
+   from GitHub with the download icon.
 2. In Google Tag Manager, go to **Templates**.
 3. Click **New**.
-4. Open the three-dot menu and click **Import**.
-5. Select the downloaded template file.
-6. Click **Save**.
+4. Open the three-dot menu.
+5. Click **Import**.
+6. Choose the file that you downloaded.
+7. Click **Save**.
 
 ## Setup
 
 ### 1. Create a Tag ID variable
 
-Sign in to the [Picked Dashboard](https://dashboard.picked.app) and copy your project Tag ID. Save it as a constant variable in GTM (e.g. `Picked Tag ID`).
+Sign in to the [Picked Dashboard](https://dashboard.picked.app) and copy the Tag ID of
+your project. Save it as a constant variable in GTM, for example `Picked Tag ID`.
 
-![Creating a Picked Tag ID variable in GTM](/gtm/gtm-variable.png)
+![How to create a variable in GTM for the Picked Tag ID](/gtm/gtm-variable.png)
 
 ### 2. Create an ecommerce data variable
 
-Create a **Data Layer Variable** with the variable name set to `ecommerce`. This captures the GA4 Enhanced Ecommerce data layer.
+Create a **Data Layer Variable** with the variable name `ecommerce`. It captures what
+GA4 Enhanced Ecommerce writes to the data layer.
 
-![GA4 Enhanced Ecommerce data layer variable](/gtm/gtm-ecommerce-variable.png)
+![The variable for the data layer of GA4 Enhanced Ecommerce](/gtm/gtm-ecommerce-variable.png)
 
 ### 3. Create event triggers
 
-Add a trigger for each ecommerce event you want to track (e.g. `add_to_cart`, `purchase`, `view_item`).
+Add a trigger for each ecommerce event that you want to track, for example
+`add_to_cart`, `purchase`, or `view_item`.
 
-![Event triggers for ecommerce tracking](/gtm/gtm-triggers.png)
+![The event triggers that record an ecommerce event](/gtm/gtm-triggers.png)
 
 ### 4. Create tags
 
-Create a new tag for each event, selecting the **Picked Ecommerce** tag template. Assign the matching trigger and configure the options below.
+Create a new tag for each event. Choose the tag template called **Picked Ecommerce**. Assign
+the trigger that matches. Then set the options below.
 
-![Tags using the Picked Ecommerce template](/gtm/gtm-tags.png)
+![The tags that use the Picked Ecommerce template](/gtm/gtm-tags.png)
 
-## Configuration options
+## Options
 
 | Option | Description |
 | --- | --- |
-| **Tag ID** | Your Picked project Tag ID. Find it in the [Picked Dashboard](https://dashboard.picked.app). |
-| **Event** | The ecommerce event to track (e.g. `add_to_cart`, `purchase`). |
-| **Send ecommerce data** | Enable this to send GA4 Enhanced Ecommerce data to Picked. Should be enabled for all ecommerce events. |
-| **GA4 Enhanced Ecommerce Data** | The GTM variable containing GA4 ecommerce data. Use the data layer variable created in step 2. |
-| **Additional data** | Optional GTM variable for sending extra metadata with the event. |
+| **Tag ID** | The Tag ID of your Picked project. Find it in the [Picked Dashboard](https://dashboard.picked.app). |
+| **Event** | The ecommerce event to track, for example `add_to_cart` or `purchase`. |
+| **Send ecommerce data** | Turn this on to send the data from GA4 Enhanced Ecommerce to Picked. Turn it on for every ecommerce event. |
+| **GA4 Enhanced Ecommerce Data** | The GTM variable that holds the data from GA4 Enhanced Ecommerce. Use the data layer variable from step 2. |
+| **Additional data** | An optional GTM variable, for more metadata with the event. |
 
-![Picked Ecommerce tag configuration](/gtm/gtm-tag.png)
+![The options on a Picked Ecommerce tag](/gtm/gtm-tag.png)

package/dist/docs/guides/build-a-personalized-page.mdx

@@ -10,7 +10,10 @@ Build a personalized landing page with Picked: model it in the dashboard, publis
 
 ## What you will build
 
-A standalone, SEO-critical landing page whose content lives in Picked's CMS and renders on your server. You model the page's shape once, fill it with content, publish it, then fetch and render it in React or Svelte. The lifecycle from authoring to a hydrated page:
+A standalone landing page where the search rank matters. Its content lives in the
+Picked CMS, and your server renders it. You describe the shape of the page one time,
+fill it with content, and publish it. Your server then reads it and renders it in
+React or in Svelte. These are the stages, from the first draft to a hydrated page:
 
 ```
 Author (dashboard) -> Publish -> Delivery API (config + content)
@@ -21,11 +24,15 @@ Author (dashboard) -> Publish -> Delivery API (config + content)
 
 A [Page Layout](/content/layouts) defines the fields your page can hold.
 
-1. Open your workspace and click **Models** in the sidebar.
-2. Click **New Model** and choose **Page Layout**.
-3. Enter a name and a **Key**, for example `page-hero`. The Key is a unique, stable identifier you use in SDK code and API references.
-4. Add a few fields: a **Single-line text** field `title`, a **Markdown** field `body`, and an **Asset** field `image`.
-5. Save the layout.
+1. Open your workspace.
+2. Click **Models** in the sidebar.
+3. Click **New Model**.
+4. Choose **Page Layout**.
+5. Enter a name and a **Key**, for example `page-hero`. The Key is a unique, stable
+   identifier. Your SDK code and your API calls both use it.
+6. Add three fields: a **Single-line text** field `title`, a **Markdown** field
+   `body`, and an **Asset** field `image`.
+7. Save the layout.
 
 <Screenshot
   route="/{orgSlug}/{projectId}/workspaces/{workspaceId}/models"
@@ -36,23 +43,29 @@ See [Page & Step Layouts](/content/layouts) for every field type.
 
 ## Create and fill the page
 
-1. Click **Experiences** in the sidebar, then **New Experience**.
-2. Choose the **Page** type and pick your `page-hero` layout.
-3. On the **Properties** tab, fill in `title`, `body`, and `image`. A [Content Entry](/content/content-entries) is created and linked on first save.
-4. Fix any per-field validation errors.
-5. Publish the workspace to make the page live.
+1. Click **Experiences** in the sidebar.
+2. Click **New Experience**.
+3. Choose the **Page** type.
+4. Choose your `page-hero` layout.
+5. On the **Properties** tab, fill in `title`, `body`, and `image`. On the first save,
+   Picked creates a [Content Entry](/content/content-entries) and links it to the
+   page.
+6. Correct every field error.
+7. Publish the workspace to make the page live.
 
 See [Pages](/content/pages) for the full editor reference.
 
 ## Fetch the config and content
 
-Your server fetches two things from the [Delivery API](/delivery-api): the project config (which experiences and steps exist) and the content for the matching experience.
+Your server reads two things from the [Delivery API](/delivery-api). The first is the
+options of the project, which give the experiences and the steps. The second is the
+content of the experience that matches.
 
 ```bash
-# 1. Project config: find the steps and their content links
+# 1. The project options: find the steps and their content links.
 curl https://api.picked.app/api/v1/projects/proj_123
 
-# 2. Experience content: the entry data backing the page
+# 2. The experience content: the entry data of the page.
 curl https://api.picked.app/api/v1/projects/proj_123/experiences/exp_123/content
 ```
 
@@ -63,7 +76,7 @@ In practice you fetch the config, then let `serialize()` fetch the content for y
 On the server, create a per-request client, call `serialize()` to produce a snapshot, render your app, and embed the snapshot. On the client, seed from the snapshot and hydrate.
 
 ```ts
-// server.ts
+// `server.ts`
 import { createClient } from '@picked/client'
 import { serialize } from '@picked/client/server'
 
@@ -137,7 +150,12 @@ The provider seeds synchronously, so the server HTML and the client's first pain
 
 Confirm the page is crawlable end to end:
 
-1. View the server response (for example with `curl` or your browser's view-source) and check the rendered HTML contains your `title` and `body`, not an empty shell.
-2. Confirm the content endpoint is reachable anonymously and returns your entry data.
+1. Read the response from your server. Use `curl`, or the view-source command of
+   your browser.
+2. Check that the HTML holds your `title` and your `body`, and that it is not an
+   empty shell.
+3. Check that the content endpoint answers an anonymous request.
+4. Check that it returns your entry data.
 
-Published Delivery API responses are crawlable; preview URLs are disallowed. See [Preview, Caching & Crawling](/delivery-api/preview-caching-crawling).
+A crawler can read a published Delivery API response. A preview URL is disallowed.
+See [Preview, cache, and crawlers](/delivery-api/preview-caching-crawling).

package/dist/docs/image-optimisation-service.md

@@ -4,7 +4,10 @@ layout: docs
 
 # Image optimisation service
 
-The Picked image optimisation service is a hosted endpoint at `https://img.picked-content.com`. It fetches images from allowed source domains, resizes them, re-encodes to modern formats (WebP or AVIF), and caches the result.
+The Picked service for image optimisation is a hosted endpoint at
+`https://img.picked-content.com`. It reads an image from an allowed source domain and
+resizes it. It then encodes the image again to a modern format, WebP or AVIF, and
+caches the result.
 
 ## Endpoint
 
@@ -14,35 +17,39 @@ GET https://img.picked-content.com/_next/image?url={source}&w={width}&q={quality
 
 | Parameter | Description |
 |-----------|-------------|
-| `url` | URL-encoded URL of the source image. Must point to an allowed source domain (see below). |
-| `w` | Target width in pixels. Must match one of the supported widths. |
-| `q` | Target quality (`25`, `50`, `75`, or `100`). |
+| `url` | The URL of the source image, URL-encoded. It must point at an allowed source domain. See below. |
+| `w` | The width in pixels. It must be one of the supported widths. |
+| `q` | The quality: `25`, `50`, `75`, or `100`. |
 
-The service performs content negotiation: if the requesting browser advertises `image/avif` or `image/webp` in its `Accept` header, the response uses that format. Otherwise the response uses the source format.
+The service chooses the response format. When the browser advertises `image/avif` or
+`image/webp` in its `Accept` header, the response uses that format. If it does not,
+the response uses the source format.
 
 ## Allowed source domains
 
-The service only fetches from these hostnames:
+The service reads only from these hostnames:
 
 - `**.picked.app`
 
-A request whose `url` parameter resolves to any other hostname returns `400 Bad Request`.
+A request with a `url` parameter for any other hostname returns `400 Bad Request`.
 
 ## Supported widths
 
-Device sizes, for responsive images that span the viewport width:
+Device sizes, for a responsive image that spans the width of the viewport:
 
 ```
 640, 750, 828, 1080, 1200, 1920, 2048, 3840
 ```
 
-Image sizes, for fixed-size UI elements such as icons, avatars, and thumbnails:
+Image sizes, for a UI element of fixed size such as an icon, an avatar, or a
+thumbnail:
 
 ```
 16, 32, 48, 64, 96, 128, 256, 384
 ```
 
-Requests with any other width return `400 Bad Request`. Pick the smallest width that covers your target rendering size at the user's device pixel ratio.
+A request with any other width returns `400 Bad Request`. Choose the smallest width
+that covers the size you render at the device pixel ratio of the visitor.
 
 ## Supported qualities
 
@@ -50,11 +57,13 @@ Requests with any other width return `400 Bad Request`. Pick the smallest width
 25, 50, 75, 100
 ```
 
-Lower values reduce bandwidth significantly. `75` is a good default for most images; use `25` or `50` for thumbnails on slow networks.
+A lower value reduces the bandwidth by a large amount. `75` is a good default for
+most images. Use `25` or `50` for a thumbnail on a slow network.
 
 ## Responsive images
 
-Combine the endpoint with the standard `srcset` attribute to let browsers pick the right width per viewport:
+Use the endpoint together with the standard `srcset` attribute. The browser then
+picks the correct width for each viewport:
 
 ```html
 <img
@@ -69,12 +78,19 @@ Combine the endpoint with the standard `srcset` attribute to let browsers pick t
 />
 ```
 
-## Caching
+## Cache
 
-Optimised responses are cached by the upstream CDN. The minimum cache TTL is 60 seconds; the actual lifetime depends on the CDN's eviction policy. If you change the source image at the same URL, expect the optimised variant to remain cached for at least that interval.
+The upstream CDN caches each optimised response. The smallest cache TTL is 60
+seconds. The real lifetime depends on the eviction policy of the CDN. When you change
+the source image at the same URL, the optimised copy stays in the cache for at least
+that time.
 
 ## Security
 
-- SVG sources are not optimised. Requests for SVG return the original bytes if the source is allowed; the service never executes embedded scripts.
-- Optimised responses carry a strict `Content-Security-Policy` (`default-src *; script-src 'none'; sandbox;`) so even a compromised source cannot run scripts in a viewing browser.
-- The response uses `Content-Disposition: inline`, never `attachment`.
+- The service does not optimise an SVG source. A request for an SVG returns the
+  original bytes when the source is allowed. The service never runs an embedded
+  script.
+- Each optimised response carries a strict `Content-Security-Policy`
+  (`default-src *; script-src 'none'; sandbox;`). A compromised source therefore
+  cannot run a script in the browser that shows the image.
+- The response uses `Content-Disposition: inline`, and never `attachment`.

package/dist/docs/index.md

@@ -2,25 +2,29 @@
 layout: docs
 ---
 
-# Getting Started
+# Start here
 
-Picked lets you build personalized UI flows in a visual editor and deliver them to visitors on your site with a lightweight SDK.
+Picked lets you build personalized UI flows in a visual editor. The SDK then serves
+them to the visitors on your site.
 
 ## How it works
 
-You design experiences in the dashboard using a drag-and-drop flow builder. The SDK fetches your published experiences and renders them on your site.
+You build experiences in the dashboard with a drag-and-drop flow builder. The SDK
+reads your published experiences and renders them on your site.
 
 ## Quick start
 
 ### 1. Create a project
 
-Sign in to the dashboard and create a project. A project represents one website or app.
+Sign in to the dashboard and create a project. A project is one site or one
+application.
 
-See [Projects](/projects) for details.
+See [Projects](/projects) for more detail.
 
 ### 2. Install the SDK
 
-Add the SDK to your site and initialize the client. Copy the snippet from your project home page.
+Add the SDK to your site and start the client. Copy the snippet from your project
+home page.
 
 ```typescript
 import { createClient } from '@picked/client'
@@ -33,11 +37,12 @@ const picked = createClient({
 picked.start()
 ```
 
-See [SDK Installation](/sdk) for full setup options.
+See [SDK Installation](/sdk) for all setup options.
 
 ### 3. Register a component
 
-Register components when creating the client. Each key in the `components` object must match a component name you set in the dashboard.
+Register your components when you create the client. Each key in the `components`
+object must match a component name that you set in the dashboard.
 
 ```typescript
 import { createClient } from '@picked/client'
@@ -52,26 +57,32 @@ const picked = createClient({
 picked.start()
 ```
 
-See [SDK Experiences](/sdk/experiences) for targeting, conditions, and component adapters.
+See [SDK Experiences](/sdk/experiences) for conditions, adapters, and the rules that
+put an experience in a slot.
 
 ### 4. Create an experience
 
-In the dashboard, open your project and click **Experiences** > **New Experience**. Enter a name and set the component name to match your registered component (e.g., `welcome-survey`).
+In the dashboard, open your project. Click **Experiences**, then **New Experience**.
+Enter a name. Set the component name to match your registered component, for example
+`welcome-survey`.
 
-See [Experiences](/experiences) for configuration options.
+See [Experiences](/experiences) for the options.
 
 ### 5. Build the flow
 
-Open the flow builder and drag steps, actions, and conditions onto the canvas. Connect nodes to define the visitor's path through the experience.
+Open the flow builder. Drag steps, actions, and conditions onto the canvas. Connect
+the nodes to define the path that a visitor takes through the experience.
 
-See [Flow Builder](/flow-builder/overview) for a full walkthrough.
+See [Flow Builder](/flow-builder/overview) for a full guide.
 
 ### 6. Save and publish
 
-Click **Save** in the flow builder toolbar. The SDK picks up the published experience and renders it to matching visitors on your site.
+Click **Save** in the flow builder toolbar. The SDK reads the published experience
+and renders it to each visitor who matches.
 
 ## Next steps
 
-- [Flow Builder](/flow-builder/overview) — Build experience flows visually
-- [Steps](/steps), [Fields](/fields), [Actions](/actions), [Conditions](/conditions) — Configure the building blocks of experiences
-- [SDK Installation](/sdk) — Full SDK setup and configuration
+- [Flow Builder](/flow-builder/overview) — Build experience flows in a visual editor
+- [Steps](/steps), [Fields](/fields), [Actions](/actions), [Conditions](/conditions)
+  — Set up the parts of an experience
+- [SDK Installation](/sdk) — Full SDK setup and options