@picked/client 0.0.61 → 0.0.62-next.10

package/dist/docs/pickedql/schema.md

@@ -132,8 +132,8 @@ Aggregated step-transition edges for sankey / funnel charts. Parameters are supp
 
 | Column | Type | Description |
 |---|---|---|
-| `source` | String | Edge start, formatted as `NN. step_id` (e.g., `01. welcome`). |
-| `target` | String | Edge end, formatted as `NN. step_id`. |
+| `source` | String | Edge start, formatted as `NN. <step title>` (e.g., `001. Welcome screen`) |
+| `target` | String | Edge end, formatted as `NN. <step title>`. 
 | `users` | UInt64 | Distinct `user_canonical_id` count that traversed this edge. |
 
 ### Parameters (via `WHERE`)

package/dist/docs/pickedql/virtual-functions.md

@@ -149,6 +149,33 @@ Funnel metrics are being continuously updated. Check back for new functions.
 | `step_enter_users()` | Users who entered a funnel step |
 | `step_enter_sessions()` | Sessions that entered a funnel step |
 
+## Cohort filters (`events` only)
+
+Predicate-shaped functions that emit a `user_canonical_id IN (SELECT … FROM events …)` subquery. Use in `WHERE` to restrict any analysis to users who have at least one event matching a custom condition.
+
+| Function | Description |
+|---|---|
+| `user_cohort_filter('<condition>')` | Restrict the query to users with ≥1 `events` row matching `<condition>` |
+| `user_cohort_filter(filter='<condition>')` | Same, named-arg form |
+
+`<condition>` uses the same `column=value [AND\|OR …]` shorthand as `control_users` / `variant_users`.
+
+```sql
+-- Funnel scoped to users who eventually submitted lead capture
+SELECT all_users(), all_purchase_users()
+FROM events
+WHERE project_id = 'proj-abc'
+  AND user_cohort_filter('event_type=lead_capture')
+
+-- Multi-condition cohort with OR-grouping
+SELECT all_sessions()
+FROM events
+WHERE project_id = 'proj-abc'
+  AND user_cohort_filter('event_type=signup OR event_type=trial_start')
+```
+
+The outer query MUST filter by a single `project_id` — the function bakes that tenant into the inner subquery so the cohort scan is scoped to your project, not the whole warehouse.
+
 ## Feature functions (`features` / `events`)
 
 Parameterized functions that accept the feature name, bucket, and an optional feature key:

package/dist/docs/sdk/actions.md

@@ -14,7 +14,6 @@ Register actions when creating the Picked client. Each key in the `actions` obje
 import { createClient } from '@picked/client'
 
 const picked = createClient({
-  organizationId: 'your-org-id',
   projectId: 'your-project-id',
   actions: {
     'track-signup': () => {

package/dist/docs/sdk/content-security-policy.md

@@ -4,21 +4,22 @@ layout: docs
 
 # Content Security Policy
 
-The Picked SDK makes outbound HTTPS requests to the following domains. Add them to your `connect-src` directive.
+The Picked SDK loads resources from the following domains. Add each to the matching CSP directive.
 
 ## Required domains
 
-| Domain | Purpose |
-| --- | --- |
-| `api.picked.app` | API requests — project configuration, experiences, session tracking |
-| `evnts.pckd.dev` | Analytics event collection (Snowplow) |
+| Domain | Directive | Purpose |
+| --- | --- | --- |
+| `api.picked.app` | `connect-src` | API requests, project configuration, experiences, session tracking |
+| `evnts.pckd.dev` | `connect-src` | Analytics event collection (Snowplow) |
+| `img.picked-content.com` | `img-src` | Optimised images served via the [image optimisation service](../image-optimisation-service.md) |
 
 ## Configuration
 
 As an HTTP header:
 
 ```
-Content-Security-Policy: connect-src 'self' https://api.picked.app https://evnts.pckd.dev;
+Content-Security-Policy: connect-src 'self' https://api.picked.app https://evnts.pckd.dev; img-src 'self' https://img.picked-content.com;
 ```
 
 Or as a `<meta>` tag:
@@ -26,6 +27,6 @@ Or as a `<meta>` tag:
 ```html
 <meta
   http-equiv="Content-Security-Policy"
-  content="connect-src 'self' https://api.picked.app https://evnts.pckd.dev;"
+  content="connect-src 'self' https://api.picked.app https://evnts.pckd.dev; img-src 'self' https://img.picked-content.com;"
 />
 ```

package/dist/docs/sdk/features.md

@@ -14,7 +14,6 @@ Define features when creating the Picked client by passing a `features` object.
 import { createClient } from '@picked/client'
 
 const client = createClient({
-  organizationId: 'your-org-id',
   projectId: 'your-project-id',
   features: {
     'summer-sale': {

package/dist/docs/sdk/fields.md

@@ -193,7 +193,7 @@ const sensitiveField = createField({
   required: true,
   policies: {
     doNotTrackValue: true, // Don't send value to analytics
-    doNotStoreValue: true, // Don't persist value to backend
+    doNotStoreValue: true, // Don't persist value to browser storage
   },
 })
 ```
@@ -201,7 +201,7 @@ const sensitiveField = createField({
 **Privacy policies**:
 
 - `doNotTrackValue`: Excludes field value from analytics events (only field ID is tracked)
-- `doNotStoreValue`: Prevents field value from being persisted to backend storage
+- `doNotStoreValue`: Prevents field value from being persisted to browser storage
 
 Use these policies for sensitive data like SSNs, credit cards, or passwords that should only exist client-side.
 

package/dist/docs/sdk/index.md

@@ -20,7 +20,6 @@ import { windowObjectPlugin } from '@picked/client/plugins/window-object'
 import { singlePageAppPlugin } from '@picked/client/plugins/single-page-app'
 
 const picked = createClient({
-  organizationId: 'your-organization-id',
   projectId: 'your-project-id',
   plugins: [windowObjectPlugin(), singlePageAppPlugin()],
 })

package/dist/docs/sdk/plugins/create-experience.md

@@ -17,7 +17,6 @@ import { funnelExperience } from '../experiences/funnel-experience'
 import { widgetExperience } from '../experiences/widget-experience'
 
 const client = createClient({
-  organizationId: 'your-org-id',
   projectId: 'your-project-id',
   plugins: createExperiencePlugin({
     experiences: [funnelExperience, widgetExperience],

package/dist/docs/sdk/plugins/dynamic-experiences.md

@@ -15,7 +15,6 @@ import { createClient } from '@picked/client'
 import { dynamicExperiencesPlugin } from '@picked/client/plugins/dynamic-experiences'
 
 const client = createClient({
-  organizationId: 'your-org-id',
   projectId: 'your-project-id',
   plugins: [dynamicExperiencesPlugin()],
 })
@@ -35,14 +34,14 @@ When the client starts, the plugin resolves your project configuration using a t
 
 1. **Preview mode** — When you [enter preview mode from the dashboard](/workspaces#preview), the plugin fetches fresh config from the API. Feature decisions use session storage so they are not persisted beyond the current tab.
 
-2. **Build-time config** — If `projectConfig` was passed as a plugin option, or the [Vite Plugin](/tooling/vite-plugin) injected config at build time, the plugin uses that config with no network request.
+2. **Build-time config** — If `projectConfig` was passed as a plugin option, or the [Vite Plugin](/vite-plugin) injected config at build time, the plugin uses that config with no network request.
 
 3. **Runtime fetch** — Otherwise, the plugin fetches config from the API when the client starts.
 
 Once resolved, the plugin registers all features, conditions, fields, steps, and experiences with the client. Experiences then initialize according to their [conditions](/sdk/conditions) and [target selectors](/sdk/experiences).
 
 :::note
-The [Vite Plugin](/tooling/vite-plugin) eliminates the runtime API request in production by embedding your project config at build time. This is the recommended setup for Vite-based applications.
+The [Vite Plugin](/vite-plugin) eliminates the runtime API request in production by embedding your project config at build time. This is the recommended setup for Vite-based applications.
 :::
 
 ## Feature Allocation

package/dist/docs/sdk/plugins/window-object.md

@@ -13,7 +13,6 @@ import { createClient } from '@picked/client'
 import { windowObjectPlugin } from '@picked/client/plugins/window-object'
 
 const client = createClient({
-  organizationId: 'your-org-id',
   projectId: 'your-project-id',
   plugins: [windowObjectPlugin()],
 })

package/dist/docs/sdk/predicates.md

@@ -14,7 +14,6 @@ Define predicates when creating the Picked client by passing a `predicates` obje
 import { createClient } from '@picked/client'
 
 const client = createClient({
-  organizationId: 'your-org-id',
   projectId: 'your-project-id',
   predicates: {
     'is-example-page': ({ location }) => {

package/dist/docs/workspaces.mdx

@@ -18,6 +18,12 @@ A workspace is a version of your project's configuration. Use workspaces to stag
 
 Each project has a workspace that holds your experiences, features, and entity configurations. When you make changes in the dashboard — editing a flow, updating a feature, or modifying an entity — those changes exist in the workspace until you publish.
 
+A workspace is in one of three states:
+
+- **Live** — the workspace the SDK serves to visitors. There is exactly one live workspace per project.
+- **Draft** — a workspace not currently serving traffic. You can edit, preview, and publish a draft to make it live.
+- **Archived** — a draft you have set aside. Archived workspaces stay editable but are filtered out of the default workspaces list.
+
 ## Preview
 
 Preview your workspace to see how changes look before publishing.
@@ -34,10 +40,63 @@ Your site opens in a new tab with the unpublished workspace applied. Preview use
 Publishing creates an immutable snapshot of your workspace. Once published, the SDK serves the new configuration to visitors.
 
 1. Click **Publish** in the workspace toolbar.
-2. Confirm in the publish dialog.
+2. Review the change preview in the publish modal.
+3. Click **Publish** to confirm.
 
 The publish button is only enabled when there are unpublished changes. A status badge in the toolbar shows whether the workspace has unpublished changes or is up to date.
 
+## Change previews
+
+The publish modal shows a side-by-side change preview comparing the current workspace against the last published snapshot. Use it to verify exactly what your visitors will see after publishing.
+
+<Screenshot
+  route="/{orgSlug}/{projectId}/workspaces/{workspaceId}/experiences?action=publish"
+  alt="The publish modal showing a change preview with added experiences, steps, and conditions"
+  selector='[role="dialog"]'
+  wait='[role="dialog"]'
+  hide={['[data-testid="publish-diff-replaces-version"]']}
+  renderWidth={720}
+  renderHeight={579}
+/>
+
+The preview groups changes by entity type — experiences, features, steps, fields, actions, and conditions. Each row shows whether the entity was **added**, **removed**, or **modified**. For modifications, expand the row to see which properties changed.
+
+When the change preview includes breaking changes — for example, removing a field that other steps still reference — a banner highlights the breaking entries above the diff so you can reconsider before publishing.
+
+The first publish of a workspace has no previous snapshot to compare against, so the publish modal shows the workspace's contents as the initial publish without a diff.
+
 ## Unpublished changes
 
 The workspace tracks whether any changes have been made since the last publish. If you create or update an experience, feature, or entity after the last publish, the toolbar shows a warning badge indicating unpublished changes.
+
+## Workspace settings
+
+The workspace settings page (**Settings** in the workspace nav) covers renaming, archiving, and deleting a workspace.
+
+### Rename
+
+Change the workspace name in the **Name** field and click **Save**. Names are unique within a project — duplicates are rejected with a validation error.
+
+### Archive
+
+Archiving moves a draft workspace out of the default workspaces list without deleting it. Use it for drafts you want to set aside for later without losing the work.
+
+1. Open the workspace settings page.
+2. Click **Archive** in the page header.
+3. Confirm in the modal.
+
+Live workspaces cannot be archived directly — make a different workspace live first, then archive the previous one.
+
+### Unarchive
+
+Restore an archived workspace to draft status from the same page. The settings page detects the archived state and switches the toolbar button to **Unarchive**.
+
+### Delete
+
+Deleting a workspace permanently removes it and its entities. This is destructive and cannot be undone — prefer archive when in doubt.
+
+1. Open the workspace settings page.
+2. In the **Danger zone** card at the bottom, click **Delete**.
+3. Confirm in the modal.
+
+Live workspaces cannot be deleted. Archive or publish a different workspace first to free the workspace for deletion.

package/dist/dom-C3C6Fmwz.cjs

@@ -0,0 +1 @@
+const e=require(`./supports-Dsjg-82e.cjs`);function t(t){return!e.d()||!e.r()?[]:Array.from(window.document.querySelectorAll(t)).filter(e=>e instanceof HTMLElement)}var n=`open`;function r(t){if(!e.l())throw Error(`Shadow DOM is not supported in this environment`);return t.attachShadow({mode:n})}function i(){return new Promise((t,n)=>{if(!e.r()){n();return}document.readyState===`loading`?document.addEventListener(`readystatechange`,()=>t(),{once:!0}):t()})}function a(e,t){let n=new MutationObserver(r=>{document.contains(e)||(n.disconnect(),t())});n.observe(document.body,{childList:!0,subtree:!0})}var o=`picked-root`,s=`picked-target`,c=`picked-root`;function l(e,n){return[...e,{selector:`${c}[experience-id="${n}"]`,placement:`replace`}].flatMap(e=>{let r=t(e.selector).filter(e=>!f(e,n)&&!p(e,n));return{...e,elements:r}})}function u(e,t,n){return e.flatMap(e=>e.elements.map(r=>h(r,e.placement,t,n)))}function d(e,t){e.classList.add(s),e.classList.add(`${s}-${t}`)}function f(e,t){return t?e.classList.contains(`${s}-${t}`):e.classList.contains(`${s}`)}function p(e,t){return t?e.classList.contains(`${o}-${t}`):e.classList.contains(o)}function m(e,t){let n=document.createElement(`div`);return n.style.display=`block`,n.classList.add(o),n.classList.add(`${o}-${e}`),n.classList.add(`${o}-${t}`),n}function h(e,t,n,r){let i,a=m(n,r);if(e instanceof Document)i=e.body.appendChild(a);else{switch(t){case`replace`:e.replaceWith(a);break;case`before`:e.before(a);break;case`after`:e.after(a);break;case`prepend`:e.prepend(a);break;case`append`:e.append(a);break}i=a}return i}Object.defineProperty(exports,`a`,{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,`i`,{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return r}}),Object.defineProperty(exports,`o`,{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,`s`,{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return u}});

package/dist/dom-DGePXPpM.js

@@ -0,0 +1,84 @@
+import { d as e, l as t, r as n } from "./supports-0XIfd4-R.js";
+//#region src/utils/dom.ts
+function r(t) {
+	return !e() || !n() ? [] : Array.from(window.document.querySelectorAll(t)).filter((e) => e instanceof HTMLElement);
+}
+var i = "open";
+function a(e) {
+	if (!t()) throw Error("Shadow DOM is not supported in this environment");
+	return e.attachShadow({ mode: i });
+}
+function o() {
+	return new Promise((e, t) => {
+		if (!n()) {
+			t();
+			return;
+		}
+		document.readyState === "loading" ? document.addEventListener("readystatechange", () => e(), { once: !0 }) : e();
+	});
+}
+function s(e, t) {
+	let n = new MutationObserver((r) => {
+		document.contains(e) || (n.disconnect(), t());
+	});
+	n.observe(document.body, {
+		childList: !0,
+		subtree: !0
+	});
+}
+var c = "picked-root", l = "picked-target", u = "picked-root";
+function d(e, t) {
+	return [...e, {
+		selector: `${u}[experience-id="${t}"]`,
+		placement: "replace"
+	}].flatMap((e) => {
+		let n = r(e.selector).filter((e) => !m(e, t) && !h(e, t));
+		return {
+			...e,
+			elements: n
+		};
+	});
+}
+function f(e, t, n) {
+	return e.flatMap((e) => e.elements.map((r) => _(r, e.placement, t, n)));
+}
+function p(e, t) {
+	e.classList.add(l), e.classList.add(`${l}-${t}`);
+}
+function m(e, t) {
+	return t ? e.classList.contains(`${l}-${t}`) : e.classList.contains(`${l}`);
+}
+function h(e, t) {
+	return t ? e.classList.contains(`${c}-${t}`) : e.classList.contains(c);
+}
+function g(e, t) {
+	let n = document.createElement("div");
+	return n.style.display = "block", n.classList.add(c), n.classList.add(`${c}-${e}`), n.classList.add(`${c}-${t}`), n;
+}
+function _(e, t, n, r) {
+	let i, a = g(n, r);
+	if (e instanceof Document) i = e.body.appendChild(a);
+	else {
+		switch (t) {
+			case "replace":
+				e.replaceWith(a);
+				break;
+			case "before":
+				e.before(a);
+				break;
+			case "after":
+				e.after(a);
+				break;
+			case "prepend":
+				e.prepend(a);
+				break;
+			case "append":
+				e.append(a);
+				break;
+		}
+		i = a;
+	}
+	return i;
+}
+//#endregion
+export { h as a, d as i, a as n, s as o, o as r, p as s, f as t };

package/dist/esm/form/index.js

@@ -1,4 +1,4 @@
-import { t as e } from "../../rules-logic-BTIxfrJJ.js";
+import { t as e } from "../../rules-logic-D_CVBuv7.js";
 import { attach as t, combine as n, createEffect as r, createEvent as i, createStore as a, sample as o, split as s } from "effector";
 //#region src/form/build-responses.ts
 function c(e, t, n) {
@@ -389,7 +389,32 @@ function y(e) {
 	if (t instanceof HTMLInputElement) return t.type === "checkbox" ? t.checked : t.value;
 	if (t instanceof HTMLSelectElement || t instanceof HTMLTextAreaElement) return t.value;
 }
-function b(e, t, r, i) {
+function b(e, t, n) {
+	let r = e.currentTarget;
+	if (t.multiple) {
+		if (r instanceof HTMLInputElement && r.type === "checkbox") return x(e, r, n);
+		if (r instanceof HTMLSelectElement && r.multiple) return Array.from(r.selectedOptions, (e) => e.value);
+	}
+	return y(e);
+}
+function x(e, t, n) {
+	if (e.type === "input") return;
+	let r = Array.isArray(n) ? n.map(String) : [];
+	return e.type === "change" ? S(r, String(t.value)) : r;
+}
+function S(e, t) {
+	return e.includes(t) ? e.filter((e) => e !== t) : [...e, t];
+}
+function C(e, t, n) {
+	return (r) => {
+		let i = b(r, e, t);
+		i !== void 0 && n({
+			fieldKey: e.key,
+			value: i
+		});
+	};
+}
+function w(e, t, r, i) {
 	let { client: s, experienceInstance: c } = e, { currentStepStore: l, goToNextStep: u } = c, d = n(l, c, (e, t) => ({
 		stepId: e?.id,
 		experienceId: t.id
@@ -404,49 +429,31 @@ function b(e, t, r, i) {
 		},
 		target: f
 	});
-	let { fieldInputEvent: h, fieldChangeEvent: _, fieldBlurEvent: b, touchedStore: x, fieldErrorsStore: S, formErrorsStore: C } = g(s, p, f), w = n({
+	let { fieldInputEvent: h, fieldChangeEvent: _, fieldBlurEvent: y, touchedStore: b, fieldErrorsStore: x, formErrorsStore: S } = g(s, p, f), w = n({
 		fields: p,
 		responses: s.responses.listStore,
 		staged: f,
-		fieldErrors: S,
-		touched: x,
+		fieldErrors: x,
+		touched: b,
 		experienceAndStepId: d
 	}, ({ fields: e, responses: t, staged: n, fieldErrors: r, touched: i, experienceAndStepId: a }) => e.map((e) => {
-		let o = (t) => {
-			let n = y(t);
-			n !== void 0 && h({
-				fieldKey: e.key,
-				value: n
-			});
-		}, s = (t) => {
-			let n = y(t);
-			n !== void 0 && _({
-				fieldKey: e.key,
-				value: n
-			});
-		}, c = (t) => {
-			let n = y(t);
-			n !== void 0 && b({
-				fieldKey: e.key,
-				value: n
-			});
-		}, l = n[e.key] ?? t.find((t) => t.fieldKey === e.key)?.value ?? e.defaultValue, u = r[e.key], d = e.type === "number" ? "number" : "text", f = e.type === "boolean" ? "checkbox" : d, { experienceId: p, stepId: m } = a, g = `${p}-${m ?? "step"}-${e.id}`;
+		let o = n[e.key] ?? t.find((t) => t.fieldKey === e.key)?.value ?? e.defaultValue, s = C(e, o, h), c = C(e, o, _), l = C(e, o, y), u = r[e.key], d = e.type === "number" ? "number" : "text", f = e.type === "boolean" ? "checkbox" : d, { experienceId: p, stepId: m } = a, g = `${p}-${m ?? "step"}-${e.id}`;
 		return {
 			...e,
-			value: l,
+			value: o,
 			error: u,
 			touched: i[e.key] ?? !1,
 			props: {
 				id: g,
 				name: e.key,
 				key: e.key,
-				value: l,
+				value: o,
 				type: f,
 				required: e.required,
 				placeholder: e.placeholder,
-				oninput: o,
-				onchange: s,
-				onblur: c
+				oninput: s,
+				onchange: c,
+				onblur: l
 			}
 		};
 	})), { submitEvent: T, isFormSubmitting: E, onBeforeSubmit: D, onSuccess: O, onError: k, submitStarted: A, validationErrorsReceived: j } = v({
@@ -461,20 +468,20 @@ function b(e, t, r, i) {
 	return o({
 		clock: A,
 		fn: () => ({}),
-		target: x
+		target: b
 	}), o({
 		clock: A,
 		fn: () => ({}),
-		target: S
+		target: x
 	}), o({
 		clock: j,
 		source: p,
 		fn: (e, t) => Object.fromEntries(t.map((t) => [e.find((e) => e.key === t.fieldKey)?.key ?? t.fieldKey, t])),
-		target: S
+		target: x
 	}), {
 		form: {
 			props: { onsubmit: T },
-			errors: C,
+			errors: S,
 			submitting: E,
 			onBeforeSubmit: D,
 			onSuccess: O,
@@ -484,4 +491,4 @@ function b(e, t, r, i) {
 	};
 }
 //#endregion
-export { l as buildResponsesFromFormData, m as createFieldEvaluator, g as createFieldValidation, b as createForm, v as createSubmitPipeline, y as getEventValue, p as getStepFields };
+export { l as buildResponsesFromFormData, m as createFieldEvaluator, g as createFieldValidation, w as createForm, v as createSubmitPipeline, y as getEventValue, p as getStepFields };