@picked/svelte 0.0.1-dev.1777594341273 → 0.0.1-dev.1777601813342

package/dist/hooks/action.d.ts

@@ -1,25 +1,38 @@
-import { Action } from '@picked/client';
-import { Store } from 'effector';
+import { ExperienceInstance } from '@picked/client';
 /**
  * Returns the reactive evokable action store for the given action key.
  *
+ * When `options.experience` is provided, the wrapped call passes that
+ * experience as the action's context, so manually-invoked handlers can
+ * behave as if they were triggered by that experience — for example to
+ * call `context.experience.close()` after a submit.
+ *
  * @param {string} actionKey - The registered action key.
+ * @param {object} [options] - Optional invocation overrides.
+ * @param {ExperienceInstance} options.experience - Experience to bind as the action's context.
  * @returns {Store<() => ReturnType<Action>>} A store containing the callable action function or undefined.
  * @example
  * ```ts
  * const actionStore = getAction('log-event')
+ * const bound = getAction('submit-form', { experience: getExperience() })
  * ```
  */
-export declare function getAction(actionKey: string): Store<() => ReturnType<Action>>;
+export declare function getAction(actionKey: string, options?: {
+    experience: ExperienceInstance;
+}): any;
 /**
  * Returns a reactive store holding the latest result of invoking the keyed action.
  * Re-evaluates automatically when the underlying action store updates.
  *
  * @param {string} actionKey - The registered action key.
+ * @param {object} [options] - Optional invocation overrides.
+ * @param {ExperienceInstance} options.experience - Experience to bind as the action's context.
  * @returns {Store<string | string[] | boolean | void | undefined>} A store containing the latest action return value.
  * @example
  * ```ts
  * const result = getActionResult('is-logged-in')
  * ```
  */
-export declare function getActionResult(actionKey: string): import('effector').StoreWritable<string | boolean | void | string[] | undefined>;
+export declare function getActionResult(actionKey: string, options?: {
+    experience: ExperienceInstance;
+}): import('effector').StoreWritable<string | boolean | void | string[] | undefined>;

package/dist/hooks/action.js

@@ -1 +1 @@
-import{getPicked as e}from"./client.js";import{attach as t,createEffect as n,createEvent as r,createStore as i,sample as a}from"effector";import"@picked/client";function o(t){return e().actions.getEvokableAction(t)}function s(e){let s=o(e),c=i(void 0,{skipVoid:!1}),l=r(),u=t({source:s,mapParams:(e,t)=>t,effect:n(async e=>{if(e)return await e()})});return a({clock:l,target:u}),a({clock:u.doneData,target:c}),l(),a({clock:s,target:l}),c}export{o as getAction,s as getActionResult};
+import{getPicked as e}from"./client.js";import{attach as t,createEffect as n,createEvent as r,createStore as i,sample as a}from"effector";import"@picked/client";function o(t,n){return e().actions.getEvokableAction(t,n)}function s(e,s){let c=o(e,s),l=i(void 0,{skipVoid:!1}),u=r(),d=t({source:c,mapParams:(e,t)=>t,effect:n(async e=>{if(e)return await e()})});return a({clock:u,target:d}),a({clock:d.doneData,target:l}),u(),a({clock:c,target:u}),l}export{o as getAction,s as getActionResult};

package/dist/hooks/events.d.ts

@@ -1,2 +1 @@
-import { AnalyticsProductList } from '@picked/analytics';
-export declare const getTrackRecommendationPresentEvent: () => import('effector').Effect<AnalyticsProductList, void, Error>;
+export declare const getTrackRecommendationPresentEvent: () => import('effector').Effect<AnalyticsProductList, any, Error>;

package/dist/hooks/feature.d.ts

@@ -1,4 +1,4 @@
-export declare function getFeature(featureName: string): import('effector').Store<() => Promise<boolean | string | undefined>>;
+export declare function getFeature(featureName: string): any;
 export declare function getFeatureResult(featureName: string): import('effector').StoreWritable<{
     id: string;
     bucket: string | boolean;

package/dist/hooks/predicate.d.ts

@@ -1,3 +1,2 @@
-import { Predicate } from '@picked/client';
-export declare function getPredicate(predicateName: string): import('effector').Store<() => ReturnType<Predicate>>;
+export declare function getPredicate(predicateName: string): any;
 export declare function getPredicateResult(predicateName: string): import('effector').StoreWritable<string | boolean | string[] | undefined>;

package/dist/plugins/devtools/DevToolsExperience.svelte

@@ -25,6 +25,7 @@
   const client = getPicked()
 
   const dashboardProjectUrl = `${client.dashboardUrl}/p/${client.projectId}`
+  const isPreview = Boolean(client.searchParams['preview-token']?.[0])
 
   const tabs = [
     {
@@ -122,14 +123,19 @@
     </div>
   </div>
 {:else}
-  <button
-    class="floating-button"
-    onclick={() => experience.open()}
-    aria-label="Open Picked Devtools"
-    title="Open Picked Devtools"
-  >
-    <PickedIcon height={25} width={25}/>
-  </button>
+  <div class="launcher">
+    {#if isPreview}
+      <span class="preview-tag" role="status" aria-live="polite">Preview mode</span>
+    {/if}
+    <button
+      class="floating-button"
+      onclick={() => experience.open()}
+      aria-label="Open Picked Devtools"
+      title="Open Picked Devtools"
+    >
+      <PickedIcon height={25} width={25}/>
+    </button>
+  </div>
 {/if}
 
 <style>
@@ -307,16 +313,21 @@
     padding-right: var(--space-4);
   }
 
-  .floating-button {
+  .launcher {
     position: fixed;
     bottom: 1rem;
     right: 1.5rem;
-    border-radius: 6px;
-    background-color: var(--color-white);
+    z-index: 999999;
+    display: flex;
+    align-items: stretch;
+  }
+
+  .floating-button {
+    border-radius: 0 6px 6px 0;
+    background-color: #ffffff;
     display: grid;
     place-items: center;
     cursor: pointer;
-    z-index: 999999;
     border: 0 transparent;
     padding: 6px;
     box-shadow: 2px 2px 4px #00000029;
@@ -326,6 +337,21 @@
     }
   }
 
+  .preview-tag {
+    display: flex;
+    align-items: center;
+    padding: 0 10px;
+    background: #2563eb;
+    color: #ffffff;
+    border-radius: 6px 0 0 6px;
+    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+      'Helvetica Neue', Arial, sans-serif;
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 1.4;
+    box-shadow: 2px 2px 4px #00000029;
+  }
+
   /** Compact inline form elements for use within table cells */
   .devtools :global(.inline-select),
   .devtools :global(.inline-input) {

package/dist/plugins/devtools/plugin.d.ts

@@ -2,7 +2,9 @@ import { Plugin } from '@picked/client';
 export interface SvelteDevtoolsPluginOptions {
     /**
      * When `true`, the devtools experience launches automatically on page load.
-     * When `false`, devtools can only be opened via the Picked Chrome extension.
+     * When `false`, devtools can only be opened via the Picked Chrome extension,
+     * **unless** a preview token is present — in which case the launcher always
+     * mounts so the previewed site remains inspectable in production builds.
      *
      * @default false
      */
@@ -12,8 +14,8 @@ export interface SvelteDevtoolsPluginOptions {
  * Registers the devtools experience for on-demand loading via the Chrome DevTools extension.
  * The devtools component is lazily loaded — it is never included in the initial bundle.
  *
- * @param options - Optional configuration for the devtools plugin.
- * @returns An array of plugins to register with the Picked client.
+ * @param {SvelteDevtoolsPluginOptions} [options] - Optional configuration for the devtools plugin.
+ * @returns {Plugin[]} An array of plugins to register with the Picked client.
  * @example
  * ```typescript
  * const client = new Picked({

package/dist/plugins/devtools/plugin.js

@@ -1 +1 @@
-import{adaptSvelteComponent as e}from"../../component.js";import{__vitePreload as t}from"../../_virtual/_vite/preload-helper.js";import{lazyComponent as n}from"@picked/client";import{createExperience as r,createExperiencePlugin as i}from"@picked/client/plugins/create-experience";var a=a=>{let o=r({id:`devtools`,key:`devtools`,name:`Picked Devtools`,condition:!1,initializeOpen:!1,targets:[{selector:`body`,placement:`append`}],component:e(n(()=>t(()=>import(`./DevToolsExperience.svelte`),[])))});return o.addStep({name:`Tools`}),[{name:`svelte-devtools`,setup:e=>{a?.enabled&&e.eventBus.watch(t=>{t.type===`ready`&&e.experiences.launch({key:o.key,options:{bypassCondition:!0}})})}},i({experiences:[o]})]};export{a as svelteDevtoolsPlugin};
+import{adaptSvelteComponent as e}from"../../component.js";import{__vitePreload as t}from"../../_virtual/_vite/preload-helper.js";import{lazyComponent as n}from"@picked/client";import{createExperience as r,createExperiencePlugin as i}from"@picked/client/plugins/create-experience";var a=a=>{let o=r({id:`devtools`,key:`devtools`,name:`Picked Devtools`,condition:!1,initializeOpen:!1,targets:[{selector:`body`,placement:`append`}],component:e(n(()=>t(()=>import(`./DevToolsExperience.svelte`),[])))});return o.addStep({name:`Tools`}),[{name:`svelte-devtools`,setup:e=>{let t=!!e.searchParams[`preview-token`]?.[0];!a?.enabled&&!t||e.eventBus.watch(t=>{t.type===`ready`&&e.experiences.launch({key:o.key,options:{bypassCondition:!0}})})}},i({experiences:[o]})]};export{a as svelteDevtoolsPlugin};

package/dist/render/browser.d.ts

@@ -3,4 +3,13 @@ export declare const renderSvelteComponent: (shadowRoot: ShadowRoot, component:
     stylesheets?: string[];
     css?: string[];
 }) => Promise<void>;
-export declare const unRenderSvelteComponent: (shadowRoot: ShadowRoot) => void;
+/**
+ * Tears down the Svelte component tree previously mounted into `shadowRoot` by
+ * {@link renderSvelteComponent}. No-op when no instance was mounted there.
+ *
+ * @param {ShadowRoot} shadowRoot - The shadow root whose Svelte tree should be unmounted.
+ * @returns {Promise<void>} Resolves once Svelte's `unmount` settles.
+ * @example
+ *   await unRenderSvelteComponent(shadowRoot)
+ */
+export declare const unRenderSvelteComponent: (shadowRoot: ShadowRoot) => Promise<void>;

package/dist/render/browser.js

@@ -1 +1 @@
-import{isValidAdaptedComponent as e}from"../component.js";import{CLIENT_CONTEXT_KEY as t,EXPERIENCE_CONTEXT_KEY as n}from"../context.js";import{mergeArrays as r}from"../utils/array.js";import{mount as i,unmount as a}from"svelte";import{isLazyLoader as o}from"@picked/client";import s from"../utils/ErrorBoundary.svelte";var c=new WeakMap;function l(e,r){return new Map([[t,e],[n,r]])}var u=async(t,n,a,u,d)=>{if(!e(n))throw Error(`The component is invalid.`);let f=r(n.style?.sheets,d.stylesheets),p=r(n.style?.css,d.css);f.length&&f.forEach(e=>{let n=document.createElement(`link`);n.setAttribute(`rel`,`stylesheet`),n.setAttribute(`href`,e),n.setAttribute(`type`,`text/css`),n.setAttribute(`picked-injected`,`true`),t.appendChild(n)}),p.length&&p.forEach(e=>{let n=document.createElement(`style`);n.textContent=e,n.setAttribute(`type`,`text/css`),n.setAttribute(`picked-injected`,`true`),t.appendChild(n)});let m=e=>{let n=i(s,{target:t,props:{component:e,componentProps:{client:a,experience:u}},context:l(a,u)});c.set(t,n)};if(o(n.component)){let{default:e}=await n.component.load();m(e);return}if(n.component instanceof Promise){let{default:e}=await n.component;m(e);return}m(n.component)},d=e=>{let t=c.get(e);t&&(a(t),c.delete(e))};export{u as renderSvelteComponent,d as unRenderSvelteComponent};
+import{isValidAdaptedComponent as e}from"../component.js";import{CLIENT_CONTEXT_KEY as t,EXPERIENCE_CONTEXT_KEY as n}from"../context.js";import{mergeArrays as r}from"../utils/array.js";import{mount as i,unmount as a}from"svelte";import{isLazyLoader as o}from"@picked/client";import s from"../utils/ErrorBoundary.svelte";var c=new WeakMap;function l(e,r){return new Map([[t,e],[n,r]])}var u=async(t,n,u,d,f)=>{if(!e(n))throw Error(`The component is invalid.`);let p=r(n.style?.sheets,f.stylesheets),m=r(n.style?.css,f.css);p.length&&p.forEach(e=>{let n=document.createElement(`link`);n.setAttribute(`rel`,`stylesheet`),n.setAttribute(`href`,e),n.setAttribute(`type`,`text/css`),n.setAttribute(`picked-injected`,`true`),t.appendChild(n)}),m.length&&m.forEach(e=>{let n=document.createElement(`style`);n.textContent=e,n.setAttribute(`type`,`text/css`),n.setAttribute(`picked-injected`,`true`),t.appendChild(n)});let h=async e=>{let n=c.get(t);if(n){try{await a(n)}catch{}c.delete(t)}let r=i(s,{target:t,props:{component:e,componentProps:{client:u,experience:d}},context:l(u,d)});c.set(t,r)};if(o(n.component)){let{default:e}=await n.component.load();await h(e);return}if(n.component instanceof Promise){let{default:e}=await n.component;await h(e);return}await h(n.component)},d=async e=>{let t=c.get(e);t&&(c.delete(e),await a(t))};export{u as renderSvelteComponent,d as unRenderSvelteComponent};

package/package.json

@@ -1,12 +1,10 @@
 {
   "name": "@picked/svelte",
-  "version": "0.0.1-dev.1777594341273",
+  "version": "0.0.1-dev.1777601813342",
   "dependencies": {
     "d3": "^7.9.0"
   },
   "devDependencies": {
-    "@picked/analytics": "workspace:*",
-    "@picked/client": "workspace:*",
     "@repo/eslint-config": "workspace:*",
     "@repo/typescript-config": "workspace:*",
     "@size-limit/file": "^12.0.0",
@@ -97,8 +95,6 @@
       "tsgo"
     ],
     "ignoreDependencies": [
-      "@picked/analytics",
-      "@picked/client",
       "@repo/eslint-config",
       "@repo/typescript-config",
       "@sveltejs/package",
@@ -107,7 +103,8 @@
   },
   "module": "./dist/index.js",
   "peerDependencies": {
-    "@picked/client": "0.0.1-dev.1777594341273",
+    "@picked/analytics": "workspace:*",
+    "@picked/client": "0.0.1-dev.1777601813342",
     "effector": "^23.3.0",
     "svelte": "^5.46.4"
   },