@picked/svelte 0.0.1-dev.1780464669265 → 0.0.1-dev.1780552550363

package/dist/experience/{Experience.svelte → ExperienceSlot.svelte}

@@ -28,7 +28,13 @@
   const client = getPicked()
   const selector = $derived(`.picked-slot-${name}`)
 
-  const PLACEMENT_ORDER: ExperienceTarget['placement'][] = ['before', 'prepend', 'append', 'after']
+  const PLACEMENT_ORDER: ExperienceTarget['placement'][] = [
+    'replace',
+    'before',
+    'prepend',
+    'append',
+    'after',
+  ]
 
   interface Candidate {
     experience: ExperienceStore
@@ -54,8 +60,8 @@
   }
 
   /**
-   * Maps an experience to a slot candidate, or null when it does not target this slot, uses the
-   * deferred `replace` placement, or carries an action-referencing condition.
+   * Maps an experience to a slot candidate, or null when it does not target this slot or carries
+   * an action-referencing condition.
    *
    * @param {ExperienceStore} experience - The experience to inspect.
    * @returns {Candidate | null} The candidate, or null when the experience is not an eligible slot match.
@@ -71,12 +77,6 @@
       return null
     }
 
-    // `replace` is deferred (first-wins semantics are not implemented yet), so skip it rather than
-    // letting it fall through and render appended-last.
-    if (target.placement === 'replace') {
-      return null
-    }
-
     // Action-referencing conditions are never cached (their side effect must re-run), so they can
     // never resolve through the synchronous `peek` the slot path relies on. Slots do not support
     // action-gated conditions in v1; excluding them also stops the selection effect from re-firing
@@ -102,13 +102,16 @@
 
   // Referencing `$conditionResults` keeps this recompute reactive to late condition writes
   // (the standalone cache-miss path), so a `peek` that returned `undefined` re-renders once
-  // the async evaluation resolves and writes the store.
-  const active = $derived(
-    candidates.filter((candidate) => {
-      void $conditionResults
-      return client.conditionResults.peek(candidate.hash) === true
-    }),
-  )
+  // the async evaluation resolves and writes the store. An active `replace` experience wins:
+  // the first one (it sorts first) renders alone, replacing any other slot matches.
+  const active = $derived.by(() => {
+    void $conditionResults
+    const activeCandidates = candidates.filter(
+      (candidate) => client.conditionResults.peek(candidate.hash) === true,
+    )
+    const firstReplace = activeCandidates.find((candidate) => candidate.placement === 'replace')
+    return firstReplace ? [firstReplace] : activeCandidates
+  })
 
   /**
    * Builds a plain, JSON-serialisable subset of the current URL for the evaluation context.

package/dist/experience/set-picked-context.d.ts

@@ -2,6 +2,7 @@ import { CreateClientOptions, Picked } from '@picked/client';
 import { PickedSnapshot } from '@picked/client/server';
 type SetPickedContextParams = {
     client: Picked;
+    snapshot?: PickedSnapshot;
 } | {
     options: CreateClientOptions;
     snapshot?: PickedSnapshot;
@@ -12,16 +13,17 @@ type SetPickedContextParams = {
  * Call this once at the top of a component's `<script>` so `setContext` and `onMount` run during
  * component initialisation. Pass `options` to create the client and synchronously hydrate it from an
  * optional SSR snapshot (a `versionId` mismatch is tolerated; the client reconciles via `start()`),
- * or pass an existing `client` (such as the app's already-running global client) to render
- * experiences against it. In the browser the client is started from `onMount`; `start()` is
+ * or pass an existing `client` (such as the app's single global client) to render experiences
+ * against it — supply `snapshot` alongside `client` to SSR-seed that shared client rather than
+ * creating a second one. In the browser the client is started from `onMount`; `start()` is
  * idempotent, so a client that was already started is left untouched.
  *
- * @param {SetPickedContextParams} params - Either `{ client }` or `{ options, snapshot? }`.
+ * @param {SetPickedContextParams} params - `{ client, snapshot? }` or `{ options, snapshot? }`.
  * @returns {Picked} The client placed into context.
  * @example
  * setPickedContext({ options })
  * @example
- * setPickedContext({ client: globalClient })
+ * setPickedContext({ client: globalClient, snapshot })
  */
 export declare function setPickedContext(params: SetPickedContextParams): Picked;
 export {};

package/dist/experience/set-picked-context.js

@@ -1 +1 @@
-import{CLIENT_CONTEXT_KEY as e}from"../context.js";import{onMount as t,setContext as n}from"svelte";import{createClient as r,supportsWindow as i}from"@picked/client";import{registerProjectConfig as a}from"@picked/client/server";function o(e,t){let n=r(e);if(t){let e=n.session.store.getState().id;a(n,t.projectConfig,{isPreview:!1,sessionId:e}),t.content.forEach(e=>n.registerContent(e)),n.conditionResults.seed(t.conditionResults)}return n}function s(r){let a=`client`in r?r.client:o(r.options,r.snapshot);return n(e,a),t(()=>{i()&&a.start()}),a}export{s as setPickedContext};
+import{CLIENT_CONTEXT_KEY as e}from"../context.js";import{onMount as t,setContext as n}from"svelte";import{createClient as r,supportsWindow as i}from"@picked/client";import{registerProjectConfig as a}from"@picked/client/server";function o(e,t){let n=e.session.store.getState().id;a(e,t.projectConfig,{isPreview:!1,sessionId:n}),t.content.forEach(t=>e.registerContent(t)),e.conditionResults.seed(t.conditionResults)}function s(e,t){let n=r(e);return t&&o(n,t),n}function c(r){let a;return`client`in r?(r.snapshot&&o(r.client,r.snapshot),a=r.client):a=s(r.options,r.snapshot),n(e,a),t(()=>{i()&&a.start()}),a}export{c as setPickedContext};

package/dist/index.d.ts

@@ -5,4 +5,4 @@ export { adaptSvelteComponent, isValidAdaptedComponent } from './component';
 export type { ComponentWithProps } from './component';
 export { LazyImage } from './components';
 export { setPickedContext } from './experience/set-picked-context';
-export { default as Experience } from './experience/Experience.svelte';
+export { default as ExperienceSlot } from './experience/ExperienceSlot.svelte';

package/dist/index.js

@@ -1 +1 @@
-import{adaptSvelteComponent as e,isValidAdaptedComponent as t}from"./component.js";import{LazyImage as n}from"./components/index.js";import{setPickedContext as r}from"./experience/set-picked-context.js";import i from"./experience/Experience.svelte";export{i as Experience,n as LazyImage,e as adaptSvelteComponent,t as isValidAdaptedComponent,r as setPickedContext};
+import{adaptSvelteComponent as e,isValidAdaptedComponent as t}from"./component.js";import{LazyImage as n}from"./components/index.js";import{setPickedContext as r}from"./experience/set-picked-context.js";import i from"./experience/ExperienceSlot.svelte";export{i as ExperienceSlot,n as LazyImage,e as adaptSvelteComponent,t as isValidAdaptedComponent,r as setPickedContext};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@picked/svelte",
-  "version": "0.0.1-dev.1780464669265",
+  "version": "0.0.1-dev.1780552550363",
   "dependencies": {
     "d3": "^7.9.0"
   },
@@ -106,7 +106,7 @@
   },
   "module": "./dist/index.js",
   "peerDependencies": {
-    "@picked/client": "0.0.1-dev.1780464669265",
+    "@picked/client": "0.0.1-dev.1780552550363",
     "effector": "^23.3.0",
     "svelte": "^5.46.4"
   },