@picked/svelte 0.0.59 → 0.0.60-next.2

package/dist/hooks/action.d.ts

@@ -1,25 +1,39 @@
-import { Action } from '@picked/client';
+import { Action, ExperienceInstance } from '@picked/client';
 import { Store } from 'effector';
 /**
  * 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;
+}): Store<() => ReturnType<Action>>;
 /**
  * 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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@picked/svelte",
-  "version": "0.0.59",
+  "version": "0.0.60-next.2",
   "dependencies": {
     "d3": "^7.9.0"
   },
@@ -88,7 +88,7 @@
   },
   "module": "./dist/index.js",
   "peerDependencies": {
-    "@picked/client": "0.0.59",
+    "@picked/client": "0.0.60-next.2",
     "effector": "^23.3.0",
     "svelte": "^5.46.4"
   },