@picked/svelte 0.0.1-dev.1771907441854 → 0.0.1-dev.1771981674305

package/dist/_virtual/preload-helper.js

@@ -0,0 +1 @@
+const p="modulepreload",v=function(l){return"/"+l},u={},y=function(d,c,E){let i=Promise.resolve();if(c&&c.length>0){let f=function(e){return Promise.all(e.map(o=>Promise.resolve(o).then(s=>({status:"fulfilled",value:s}),s=>({status:"rejected",reason:s}))))};document.getElementsByTagName("link");const r=document.querySelector("meta[property=csp-nonce]"),t=r?.nonce||r?.getAttribute("nonce");i=f(c.map(e=>{if(e=v(e),e in u)return;u[e]=!0;const o=e.endsWith(".css"),s=o?'[rel="stylesheet"]':"";if(document.querySelector(`link[href="${e}"]${s}`))return;const n=document.createElement("link");if(n.rel=o?"stylesheet":p,o||(n.as="script"),n.crossOrigin="",n.href=e,t&&n.setAttribute("nonce",t),document.head.appendChild(n),o)return new Promise((m,h)=>{n.addEventListener("load",m),n.addEventListener("error",()=>h(new Error(`Unable to preload CSS for ${e}`)))})}))}function a(r){const t=new Event("vite:preloadError",{cancelable:!0});if(t.payload=r,window.dispatchEvent(t),!t.defaultPrevented)throw r}return i.then(r=>{for(const t of r||[])t.status==="rejected"&&a(t.reason);return d().catch(a)})};export{y as __vitePreload};

package/dist/component.d.ts

@@ -1,9 +1,9 @@
-import { AdaptedComponent, AdaptedComponentStyle } from '@picked/client';
+import { AdaptedComponent, AdaptedComponentStyle, LazyComponentLoader } from '@picked/client';
 import { Component } from 'svelte';
 export type ComponentWithProps = Component<any>;
 export declare const adaptSvelteComponent: (component: ComponentWithProps | Promise<{
     default: ComponentWithProps;
-}>, style?: AdaptedComponentStyle) => AdaptedComponent<"svelte", ComponentWithProps | Promise<{
+}> | LazyComponentLoader<ComponentWithProps>, style?: AdaptedComponentStyle) => AdaptedComponent<"svelte", ComponentWithProps | Promise<{
     default: ComponentWithProps;
-}>>;
+}> | LazyComponentLoader<ComponentWithProps>>;
 export declare const isValidAdaptedComponent: (component: AdaptedComponent<string, unknown>) => component is AdaptedComponent<"svelte", ComponentWithProps>;

package/dist/plugins/devtools/DevToolsExperience.svelte

@@ -126,7 +126,7 @@
     class="floating-button"
     onclick={() => experience.open()}
     aria-label="Open Picked Devtools"
-    title="Open Picked Devtools (or press .)"
+    title="Open Picked Devtools"
   >
     <PickedIcon height={25} width={25}/>
   </button>
@@ -139,6 +139,80 @@
   }
 
   .devtools {
+    /* Colors — match Tailwind's default palette exactly */
+    --color-blue-500: #3b82f6;
+    --color-blue-600: #2563eb;
+    --color-blue-700: #1d4ed8;
+    --color-blue-800: #1e40af;
+    --color-gray-50: #f9fafb;
+    --color-gray-100: #f3f4f6;
+    --color-gray-200: #e5e7eb;
+    --color-gray-300: #d1d5db;
+    --color-gray-500: #6b7280;
+    --color-gray-600: #4b5563;
+    --color-gray-700: #374151;
+    --color-gray-900: #111827;
+    --color-red-500: #ef4444;
+    --color-red-600: #dc2626;
+    --color-red-700: #b91c1c;
+    --color-red-800: #991b1b;
+    --color-green-100: #dcfce7;
+    --color-green-700: #15803d;
+    --color-green-800: #166534;
+    --color-yellow-100: #fef9c3;
+    --color-yellow-700: #a16207;
+    --color-yellow-800: #854d0e;
+    --color-white: #ffffff;
+    --color-black: #000000;
+
+    /* Typography — match Tailwind's type scale */
+    --text-xs: 0.75rem;
+    --text-sm: 0.875rem;
+    --text-base: 1rem;
+    --text-lg: 1.125rem;
+    --text-xl: 1.25rem;
+    --text-2xl: 1.5rem;
+    --font-normal: 400;
+    --font-medium: 500;
+    --font-semibold: 600;
+
+    /* Spacing — match Tailwind's spacing scale */
+    --space-0: 0;
+    --space-0-5: 0.125rem;
+    --space-1: 0.25rem;
+    --space-1-5: 0.375rem;
+    --space-2: 0.5rem;
+    --space-2-5: 0.625rem;
+    --space-3: 0.75rem;
+    --space-4: 1rem;
+    --space-5: 1.25rem;
+    --space-6: 1.5rem;
+    --space-8: 2rem;
+
+    /* Radii */
+    --radius-sm: 0.125rem;
+    --radius-md: 0.375rem;
+    --radius-lg: 0.5rem;
+    --radius-xl: 0.75rem;
+    --radius-full: 9999px;
+
+    /* Shadows */
+    --shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+
+    /* Focus ring — matches dashboard's ring-2 ring-blue-500 ring-offset-2 */
+    --ring-color: var(--color-blue-500);
+    --ring-width: 2px;
+    --ring-offset: 2px;
+
+    /* Base typography reset */
+    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+      'Helvetica Neue', Arial, sans-serif;
+    font-size: var(--text-sm);
+    line-height: 1.5;
+    color: var(--color-gray-900);
+
     position: fixed;
     inset: 0;
     z-index: 999999999;
@@ -252,7 +326,72 @@
     }
   }
 
+  /** Compact inline form elements for use within table cells */
+  .devtools :global(.inline-select),
+  .devtools :global(.inline-input) {
+    font-size: var(--text-xs);
+    padding: var(--space-0-5) var(--space-1);
+    border: 1px solid var(--color-gray-300);
+    border-radius: var(--radius-sm);
+    font-family: inherit;
+  }
+
+  .devtools :global(.inline-input) {
+    width: 100%;
+  }
+
+  .devtools :global(.inline-select:focus),
+  .devtools :global(.inline-input:focus) {
+    outline: none;
+    box-shadow: 0 0 0 var(--ring-width) var(--ring-color);
+  }
+
+  /** Textarea elements within devtools */
+  .devtools :global(textarea) {
+    width: 100%;
+    min-height: 60px;
+    font-family: monospace;
+    font-size: var(--text-xs);
+    padding: var(--space-1);
+    border: 1px solid var(--color-gray-300);
+    border-radius: var(--radius-md);
+  }
+
+  .devtools :global(textarea:focus) {
+    outline: none;
+    box-shadow: 0 0 0 var(--ring-width) var(--ring-color);
+  }
+
+  /** Event detail panel styling */
+  .devtools :global(.details-cell) {
+    background-color: var(--color-gray-50);
+    padding: var(--space-4);
+    border-left: 3px solid var(--color-blue-500);
+  }
+
+  /** Expand/collapse icon for table rows */
+  .devtools :global(.expand-icon) {
+    margin-right: var(--space-2);
+    display: inline-block;
+    width: 12px;
+  }
 
+  /** Clickable table rows (e.g., expandable event rows) */
+  .devtools :global(.event-row) {
+    cursor: pointer;
+  }
 
+  /** Centered checkbox cell in tables */
+  .devtools :global(.include-cell) {
+    text-align: center;
+    width: 2.5rem;
+  }
 
+  /** Inline option label for checkbox/radio lists in table cells */
+  .devtools :global(.option-label) {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    cursor: pointer;
+  }
 </style>

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

@@ -1,7 +1,15 @@
 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.
+     *
+     * @default false
+     */
+    enabled?: boolean;
+}
 /**
- * Enables Svelte component rendering compatability.
- * This plugin registers the Svelte framework and allows rendering Svelte components
- * with the client's experience data.
+ * 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.
  */
-export declare const svelteDevtoolsPlugin: () => Plugin[];
+export declare const svelteDevtoolsPlugin: (options?: SvelteDevtoolsPluginOptions) => Plugin[];

package/dist/plugins/devtools/plugin.js

@@ -1 +1 @@
-import{supportsDocument as c,isPickedRoot as a}from"@picked/client";import{createExperiencePlugin as g}from"@picked/client/plugins/create-experience";import{devtoolsExperience as r}from"./experience.js";const m=()=>[{name:"svelte-devtools",setup:t=>{if(!c())return;const s=t.experienceInstances.getByExperienceId(r.id),i=e=>{if(!(!e.target||!("tagName"in e.target)||typeof e.target.tagName!="string")&&e.key==="."&&!["INPUT","TEXTAREA"].includes(e.target.tagName)&&!(e.currentTarget instanceof HTMLElement&&a(e.currentTarget))&&!(e.target instanceof HTMLElement&&a(e.target))){const n=s.getState();n.length>0?n.forEach(o=>o.toggleOpen()):t.launchExperienceById(r.id)}};document.addEventListener("keydown",i),t.eventBus.watch(e=>{e.type==="ready"&&t.launchExperienceById(r.id)})}},g({experiences:[r]})];export{m as svelteDevtoolsPlugin};
+import{__vitePreload as t}from"../../_virtual/preload-helper.js";import{lazyComponent as n}from"@picked/client";import{createExperience as r,createExperiencePlugin as i}from"@picked/client/plugins/create-experience";import{adaptSvelteComponent as l}from"../../component.js";const d=o=>{const e=r({id:"devtools",name:"Picked Devtools",condition:o?.enabled??!1,initializeOpen:!1,targets:[{selector:"body",placement:"append"}],component:l(n(()=>t(()=>import("./DevToolsExperience.svelte"),[])))});return e.addStep({label:"Tools"}),[i({experiences:[e]})]};export{d as svelteDevtoolsPlugin};

package/dist/render/browser.js

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

package/dist/render/server.js

@@ -1 +1 @@
-import{render as a}from"svelte/server";import{isValidAdaptedComponent as E}from"../component.js";import{CLIENT_CONTEXT_KEY as p,EXPERIENCE_CONTEXT_KEY as f}from"../context.js";import{mergeArrays as n}from"../utils/array.js";function d(t,s){return new Map([[p,t],[f,s]])}const C=async(t,s,e,o)=>{if(!E(t))throw new Error("The component is invalid.");const h=n(t.style?.sheets,o.stylesheets),m=n(t.style?.css,o.css),r=t.component instanceof Promise?a((await t.component).default,{props:{client:s,experience:e},context:d(s,e)}):a(t.component,{props:{client:s,experience:e},context:d(s,e)});return{stylesheets:h,css:m,head:r.head,html:r.html,body:r.body,hashes:r.hashes}};export{d as createContext,C as staticRenderSvelteComponent};
+import{isLazyLoader as m}from"@picked/client";import{render as l}from"svelte/server";import{isValidAdaptedComponent as h}from"../component.js";import{CLIENT_CONTEXT_KEY as f,EXPERIENCE_CONTEXT_KEY as p}from"../context.js";import{mergeArrays as n}from"../utils/array.js";function c(e,t){return new Map([[f,e],[p,t]])}const w=async(e,t,o,a)=>{if(!h(e))throw new Error("The component is invalid.");const d=n(e.style?.sheets,a.stylesheets),i=n(e.style?.css,a.css);let s;m(e.component)?s=(await e.component.load()).default:e.component instanceof Promise?s=(await e.component).default:s=e.component;const r=l(s,{props:{client:t,experience:o},context:c(t,o)});return{stylesheets:d,css:i,head:r.head,html:r.html,body:r.body,hashes:r.hashes}};export{c as createContext,w as staticRenderSvelteComponent};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@picked/svelte",
-  "version": "0.0.1-dev.1771907441854",
+  "version": "0.0.1-dev.1771981674305",
   "dependencies": {
     "d3": "^7.9.0"
   },
@@ -86,7 +86,7 @@
   },
   "module": "./dist/index.js",
   "peerDependencies": {
-    "@picked/client": "0.0.1-dev.1771907441854",
+    "@picked/client": "0.0.1-dev.1771981674305",
     "effector": "^23.3.0",
     "svelte": "^5.34.3"
   },

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

@@ -1 +0,0 @@
-export declare const devtoolsExperience: import('@picked/client/plugins/create-experience').SerializableExperience;

package/dist/plugins/devtools/experience.js

@@ -1 +0,0 @@
-import{createExperience as e}from"@picked/client/plugins/create-experience";import{adaptSvelteComponent as o}from"../../component.js";import t from"./DevToolsExperience.svelte";import p from"./ui/tokens.css.js";const r=e({id:"devtools",name:"Picked Devtools",decide:{},targets:[{selector:"body",placement:"append"}],component:o(t,{css:[p]})});r.addStep({label:"Tools"});export{r as devtoolsExperience};

package/dist/plugins/devtools/ui/tokens.css.js

@@ -1 +0,0 @@
-const e=".devtools{--color-blue-500: #3b82f6;--color-blue-600: #2563eb;--color-blue-700: #1d4ed8;--color-blue-800: #1e40af;--color-gray-50: #f9fafb;--color-gray-100: #f3f4f6;--color-gray-200: #e5e7eb;--color-gray-300: #d1d5db;--color-gray-500: #6b7280;--color-gray-600: #4b5563;--color-gray-700: #374151;--color-gray-900: #111827;--color-red-500: #ef4444;--color-red-600: #dc2626;--color-red-700: #b91c1c;--color-red-800: #991b1b;--color-green-100: #dcfce7;--color-green-700: #15803d;--color-green-800: #166534;--color-yellow-100: #fef9c3;--color-yellow-700: #a16207;--color-yellow-800: #854d0e;--color-white: #ffffff;--color-black: #000000;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--font-normal: 400;--font-medium: 500;--font-semibold: 600;--space-0: 0;--space-0-5: .125rem;--space-1: .25rem;--space-1-5: .375rem;--space-2: .5rem;--space-2-5: .625rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--radius-sm: .125rem;--radius-md: .375rem;--radius-lg: .5rem;--radius-xl: .75rem;--radius-full: 9999px;--shadow-card: 0 1px 2px 0 rgba(0, 0, 0, .03);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);--ring-color: var(--color-blue-500);--ring-width: 2px;--ring-offset: 2px;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:var(--text-sm);line-height:1.5;color:var(--color-gray-900)}.devtools .inline-select,.devtools .inline-input{font-size:var(--text-xs);padding:var(--space-0-5) var(--space-1);border:1px solid var(--color-gray-300);border-radius:var(--radius-sm);font-family:inherit}.devtools .inline-input{width:100%}.devtools .inline-select:focus,.devtools .inline-input:focus{outline:none;box-shadow:0 0 0 var(--ring-width) var(--ring-color)}.devtools textarea{width:100%;min-height:60px;font-family:monospace;font-size:var(--text-xs);padding:var(--space-1);border:1px solid var(--color-gray-300);border-radius:var(--radius-md)}.devtools textarea:focus{outline:none;box-shadow:0 0 0 var(--ring-width) var(--ring-color)}.devtools .details-cell{background-color:var(--color-gray-50);padding:var(--space-4);border-left:3px solid var(--color-blue-500)}.devtools .expand-icon{margin-right:var(--space-2);display:inline-block;width:12px}.devtools .event-row{cursor:pointer}.devtools .include-cell{text-align:center;width:2.5rem}.devtools .option-label{display:flex;align-items:center;gap:var(--space-2);cursor:pointer}";export{e as default};