@picked/svelte 0.0.59-next.1 → 0.0.60-next.1

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-next.1",
+  "version": "0.0.60-next.1",
   "dependencies": {
     "d3": "^7.9.0"
   },
@@ -88,7 +88,7 @@
   },
   "module": "./dist/index.js",
   "peerDependencies": {
-    "@picked/client": "0.0.59-next.1",
+    "@picked/client": "0.0.60-next.1",
     "effector": "^23.3.0",
     "svelte": "^5.46.4"
   },