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

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

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

package/dist/plugins/devtools/plugin.js

@@ -1 +1 @@
-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};
+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};

package/dist/plugins/devtools/screens/components/ComponentsListScreen.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { getPicked } from '../../../../hooks'
-  import { Card, DataTable, EmptyState, Stack } from '../../ui'
+  import { DataTable, EmptyState } from '../../ui'
 
   const client = getPicked()
 
@@ -12,19 +12,15 @@
   ]
 </script>
 
-<Stack padding="medium">
-  <Card sectioned>
-    <DataTable columns={columns} rows={$components}>
-      {#snippet row(item)}
-        {@const component = item}
-        <tr>
-          <td>{component.name}</td>
-          <td>{component.component.frameworkName}</td>
-        </tr>
-      {/snippet}
-      {#snippet empty()}
-        <EmptyState message="No components" />
-      {/snippet}
-    </DataTable>
-  </Card>
-</Stack>
+<DataTable columns={columns} rows={$components}>
+  {#snippet row(item)}
+    {@const component = item}
+    <tr>
+      <td>{component.name}</td>
+      <td>{component.component.frameworkName}</td>
+    </tr>
+  {/snippet}
+  {#snippet empty()}
+    <EmptyState message="No components" />
+  {/snippet}
+</DataTable>

package/dist/plugins/devtools/screens/events/EventsTable.svelte

@@ -2,7 +2,7 @@
   import { combine, createStore, createEvent, sample } from 'effector'
   import { getPicked } from '../../../../hooks'
   import EventListItem from './EventListItem.svelte'
-  import { Card, DataTable, EmptyState, Stack } from '../../ui'
+  import { DataTable, EmptyState } from '../../ui'
   import type { EventHistoryEntry } from '@picked/client'
 
   const { events } = getPicked()
@@ -51,26 +51,22 @@
   }
 </script>
 
-<Stack padding="medium">
-  <Card sectioned>
-    <DataTable
-      columns={columns}
-      rows={$sortedEvents}
-      sortKey="time"
-      sortDirection={$sortDirectionStore}
-      onSort={handleSort}
-    >
-      {#snippet row(item)}
-        {@const event = item}
-        <EventListItem
-          {event}
-          isExpanded={expandedRowIds.has(event.id)}
-          onToggle={() => toggleRow(event.id)}
-        />
-      {/snippet}
-      {#snippet empty()}
-        <EmptyState message="No events yet. Interact with the page to see events." />
-      {/snippet}
-    </DataTable>
-  </Card>
-</Stack>
+<DataTable
+  columns={columns}
+  rows={$sortedEvents}
+  sortKey="time"
+  sortDirection={$sortDirectionStore}
+  onSort={handleSort}
+>
+  {#snippet row(item)}
+    {@const event = item}
+    <EventListItem
+      {event}
+      isExpanded={expandedRowIds.has(event.id)}
+      onToggle={() => toggleRow(event.id)}
+    />
+  {/snippet}
+  {#snippet empty()}
+    <EmptyState message="No events yet. Interact with the page to see events." />
+  {/snippet}
+</DataTable>

package/dist/plugins/devtools/screens/experience-instances/ExperienceInstancesListScreen.svelte

@@ -7,4 +7,6 @@
   $: experienceInstances = client.experienceInstances.listStore
 </script>
 
-<ExperienceInstancesTable experienceInstances={$experienceInstances} />
+<div>
+  <ExperienceInstancesTable experienceInstances={$experienceInstances} />
+</div>

package/dist/plugins/devtools/screens/experiences/ExperienceDetailsScreen.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { ExperienceStore } from '@picked/client'
   import { getPicked } from '../../../../hooks'
-  import { Button, Card, Text, CodeBlock, Stack } from '../../ui'
+  import { Button, Text, CodeBlock, Stack } from '../../ui'
 
   const client = getPicked()
   export let experience: ExperienceStore
@@ -10,38 +10,34 @@
 </script>
 
 <Stack direction="vertical" gap="medium" padding="medium">
-  <Stack direction="horizontal" gap="small">
+  <div>
     <Button variant="primary" size="small" onclick={() => client.launchExperienceById(experience.id)}>
       Launch experience
     </Button>
-  </Stack>
+  </div>
 
-  <Card sectioned>
-    <Stack direction="vertical" gap="medium" padding="medium">
-      <div>
-        <Text weight="semibold">Type</Text>
-        <Text>{$config.type}</Text>
-      </div>
+  <div>
+    <Text weight="semibold">Type</Text>
+    <Text>{$config.name}</Text>
+  </div>
 
-      <div>
-        <Text weight="semibold">Target selectors</Text>
-        <ul>
-          {#if $config.targetSelectors.length > 0}
-            {#each $config.targetSelectors as selector (selector)}
-              <li>
-                <CodeBlock code="{selector.selector} || {selector.placement}" />
-              </li>
-            {/each}
-          {:else}
-            <li><Text color="subdued">(none)</Text></li>
-          {/if}
-        </ul>
-      </div>
+  <div>
+    <Text weight="semibold">Target selectors</Text>
+    <ul>
+      {#if $config.targetSelectors.length > 0}
+        {#each $config.targetSelectors as selector (selector)}
+          <li>
+            <CodeBlock code="{selector.selector} || {selector.placement}" />
+          </li>
+        {/each}
+      {:else}
+        <li><Text color="subdued">(none)</Text></li>
+      {/if}
+    </ul>
+  </div>
 
-      <div>
-        <Text weight="semibold">Decision logic</Text>
-        <CodeBlock code={JSON.stringify($config.decisionLogic, null, 2)} />
-      </div>
-    </Stack>
-  </Card>
+  <div>
+    <Text weight="semibold">Decision logic</Text>
+    <CodeBlock code={JSON.stringify($config.decisionLogic, null, 2)} />
+  </div>
 </Stack>

package/dist/plugins/devtools/screens/experiences/ExperienceExperienceInstancesListScreen.svelte

@@ -10,4 +10,6 @@
   $: experienceInstances = client.experienceInstances.getByExperienceId(experience.id)
 </script>
 
-<ExperienceInstancesTable experienceInstances={$experienceInstances} />
+<div>
+  <ExperienceInstancesTable experienceInstances={$experienceInstances} />
+</div>

package/dist/plugins/devtools/screens/experiences/ExperienceTreeScreen.svelte

@@ -9,7 +9,7 @@
   let zoom = 1
   let selectedNode = null
   let highlightedPath: string[][] = []
-  let error = null
+  let error: string | null = null
   const loading = false
 
   let treeRenderingDone = false
@@ -139,7 +139,7 @@
         .attr(
           'd',
           d3
-            .linkHorizontal<d3.HierarchyPointLink<ProcessedNode>, ProcessedNode>()
+            .linkHorizontal<d3.HierarchyPointLink<ProcessedNode>, d3.HierarchyPointNode<ProcessedNode>>()
             .x((d) => d.y)
             .y((d) => d.x),
         )

package/dist/plugins/devtools/screens/features/FeaturesListScreen.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { createEvent, createStore } from 'effector'
+  import { createStore, createEvent } from 'effector'
   import type { FeatureBucket } from '@picked/client'
   import { getPicked, useUnit } from '../../../../hooks'
-  import { Button, Card, CodeBlock, CopyButton, DataTable, EmptyState, Stack, Text } from '../../ui'
+  import { DataTable, EmptyState, Button, Text, CopyButton, Card, CodeBlock, Stack } from '../../ui'
 
   interface FeatureSelection {
     included: boolean
@@ -87,9 +87,8 @@
     generated URL. Recipients will see the overridden values on page load.
   </Text>
 
-  <Card sectioned>
-    <DataTable columns={columns} rows={$featuresList}>
-      {#snippet row(item)}
+  <DataTable columns={columns} rows={$featuresList}>
+    {#snippet row(item)}
       {@const feature = item}
       {@const selection = $selections[feature.id]}
       {@const currentValue = getBucketValue(feature)}
@@ -106,7 +105,7 @@
           </td>
           <td>
             <Text size="small" weight="medium">{feature.name}</Text>
-            <CodeBlock code={feature.id + ':' + feature.key} inline />
+            <CodeBlock code={feature.key} inline />
           </td>
           <td>
             {#if currentValue !== null}
@@ -142,11 +141,10 @@
         </tr>
       {/if}
     {/snippet}
-      {#snippet empty()}
-        <EmptyState message="No features registered" />
-      {/snippet}
-    </DataTable>
-  </Card>
+    {#snippet empty()}
+      <EmptyState message="No features registered" />
+    {/snippet}
+  </DataTable>
 
   <Card>
     {#snippet header()}

package/dist/plugins/devtools/screens/frameworks/FrameworksListScreen.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { getPicked } from '../../../../hooks'
-  import { Card, DataTable, EmptyState, Stack } from '../../ui'
+  import { DataTable, EmptyState } from '../../ui'
 
   const client = getPicked()
 
@@ -9,18 +9,14 @@
   const columns = [{ key: 'name', header: 'Name' }]
 </script>
 
-<Stack padding="medium">
-  <Card sectioned>
-    <DataTable columns={columns} rows={$frameworks}>
-      {#snippet row(item)}
-        {@const framework = item}
-        <tr>
-          <td>{framework.name}</td>
-        </tr>
-      {/snippet}
-      {#snippet empty()}
-        <EmptyState message="No frameworks" />
-      {/snippet}
-    </DataTable>
-  </Card>
-</Stack>
+<DataTable columns={columns} rows={$frameworks}>
+  {#snippet row(item)}
+    {@const framework = item}
+    <tr>
+      <td>{framework.name}</td>
+    </tr>
+  {/snippet}
+  {#snippet empty()}
+    <EmptyState message="No frameworks" />
+  {/snippet}
+</DataTable>

package/dist/plugins/devtools/screens/history/HistoryEntriesTable.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { HistoryEntry } from '@picked/client'
   import HistoryEntryListItem from './HistoryEntryListItem.svelte'
-  import { Card, DataTable, EmptyState, Stack } from '../../ui'
+  import { DataTable, EmptyState } from '../../ui'
 
   export let historyEntries: HistoryEntry[]
 
@@ -14,16 +14,12 @@
   ]
 </script>
 
-<Stack padding="medium">
-  <Card sectioned>
-    <DataTable columns={columns} rows={historyEntries}>
-      {#snippet row(item)}
-        {@const historyEntry = item}
-        <HistoryEntryListItem {historyEntry} />
-      {/snippet}
-      {#snippet empty()}
-        <EmptyState message="No history entries" />
-      {/snippet}
-    </DataTable>
-  </Card>
-</Stack>
+<DataTable columns={columns} rows={historyEntries}>
+  {#snippet row(item)}
+    {@const historyEntry = item}
+    <HistoryEntryListItem {historyEntry} />
+  {/snippet}
+  {#snippet empty()}
+    <EmptyState message="No history entries" />
+  {/snippet}
+</DataTable>

package/dist/plugins/devtools/screens/predicates/PredicatesListScreen.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { getPicked } from '../../../../hooks'
-  import { Card, DataTable, EmptyState, Stack } from '../../ui'
+  import { DataTable, EmptyState } from '../../ui'
 
   const client = getPicked()
 
@@ -9,18 +9,14 @@
   const columns = [{ key: 'name', header: 'Name' }]
 </script>
 
-<Stack padding="medium">
-  <Card sectioned>
-    <DataTable columns={columns} rows={$predicates}>
-      {#snippet row(item)}
-        {@const predicate = item}
-        <tr>
-          <td>{predicate.name}</td>
-        </tr>
-      {/snippet}
-      {#snippet empty()}
-        <EmptyState message="No predicates" />
-      {/snippet}
-    </DataTable>
-  </Card>
-</Stack>
+<DataTable columns={columns} rows={$predicates}>
+  {#snippet row(item)}
+    {@const predicate = item}
+    <tr>
+      <td>{predicate.name}</td>
+    </tr>
+  {/snippet}
+  {#snippet empty()}
+    <EmptyState message="No predicates" />
+  {/snippet}
+</DataTable>

package/dist/plugins/devtools/screens/project/ProjectScreen.svelte

@@ -1,47 +1 @@
-<script lang="ts">
-  import { getPicked } from '../../../../hooks'
-  import { Button, Card, CodeBlock, DataTable, Stack, Text } from '../../ui'
-
-  const client = getPicked()
-
-  const dashboardProjectUrl = `${client.dashboardUrl}/p/${client.projectId}`
-
-  const columns = [
-    { key: 'label', header: 'Property' },
-    { key: 'value', header: 'Value' },
-  ]
-
-  const rows = [
-    { label: 'Project ID', value: client.projectId },
-    { label: 'Organization ID', value: client.organizationId },
-    { label: 'API URL', value: client.apiUrl },
-    { label: 'Dashboard URL', value: client.dashboardUrl },
-  ]
-</script>
-
-<Stack direction="vertical" gap="medium" padding="medium">
-  <Text size="caption" color="subdued">
-    Project configuration for this Picked client instance.
-  </Text>
-
-  <Card sectioned>
-    <DataTable {columns} {rows}>
-      {#snippet row(item)}
-        <tr>
-          <td>
-            <Text size="small" weight="medium">{item.label}</Text>
-          </td>
-          <td>
-            <CodeBlock code={item.value} inline />
-          </td>
-        </tr>
-      {/snippet}
-    </DataTable>
-  </Card>
-
-  <Stack direction="horizontal" gap="small">
-    <Button variant="primary" size="small" href={dashboardProjectUrl} target="_blank">
-      Open in Dashboard
-    </Button>
-  </Stack>
-</Stack>
+<p>todo: project</p>

package/dist/plugins/devtools/screens/responses/ResponseTableRow.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { ResponseListItem, PrimitiveFieldValue, Field } from '@picked/client'
+  import type { ResponseListItem, PrimitiveFieldValue, Field, FieldValue } from '@picked/client'
   import { getPicked } from '../../../../hooks'
   import { Button, Text, CodeBlock, Banner, Stack } from '../../ui'
 
@@ -11,9 +11,10 @@
   let isEditing = false
   let editValue = ''
   let editError = ''
-  let selectedOptions: Set<PrimitiveFieldValue> = new Set()
+  let selectedOptions: Set<FieldValue> = new Set()
 
-  $: hasOptions = field?.options && field.options.length > 0
+  $: hasOptions = Array.isArray(field?.options) && field.options.length > 0
+  $: staticOptions = Array.isArray(field?.options) ? field.options : null
   $: currentValue = response?.value ?? null
 
   function formatValue(value: unknown): string {
@@ -52,7 +53,7 @@
     selectedOptions = new Set()
   }
 
-  function toggleOption(optionValue: PrimitiveFieldValue) {
+  function toggleOption(optionValue: FieldValue) {
     if (field?.multiple) {
       if (selectedOptions.has(optionValue)) {
         selectedOptions.delete(optionValue)
@@ -65,7 +66,7 @@
     }
   }
 
-  function parseValue(input: string): unknown {
+  function parseValue(input: string): FieldValue {
     input = input.trim()
 
     if (input === '' || input === '-') {
@@ -99,14 +100,14 @@
 
   async function saveEdit() {
     try {
-      let newValue: unknown
+      let newValue: FieldValue
 
       if (hasOptions) {
         const values = Array.from(selectedOptions)
         if (field?.multiple) {
           newValue = values
         } else {
-          newValue = values[0] ?? null
+          newValue = values.at(0) ?? null
         }
       } else {
         newValue = parseValue(editValue)
@@ -142,9 +143,9 @@
   <td>
     {#if isEditing}
       <Stack direction="vertical" gap="small">
-        {#if hasOptions && field?.options}
+        {#if hasOptions && staticOptions}
           <Stack direction="vertical" gap="small">
-            {#each field.options as option (option.id)}
+            {#each staticOptions as option (option.id)}
               <label class="option-label">
                 {#if field.multiple}
                   <input

package/dist/plugins/devtools/screens/responses/ResponsesTable.svelte

@@ -2,7 +2,7 @@
   import type { ResponseListItem, Field } from '@picked/client'
   import { getPicked } from '../../../../hooks'
   import ResponseTableRow from './ResponseTableRow.svelte'
-  import { Card, DataTable, EmptyState, Button, RadioGroup, Stack } from '../../ui'
+  import { DataTable, EmptyState, Button, RadioGroup, Stack } from '../../ui'
 
   export let responses: ResponseListItem[] = []
 
@@ -51,29 +51,27 @@
   $: filterOptions[2] = { value: 'unset', label: `Unset (${allFields.length - responses.length})` }
 </script>
 
-<Stack padding="medium">
-  <Card sectioned>
-    <Stack direction="horizontal" gap="small" align="space-between" justify="center" padding="medium">
-      <RadioGroup
-        label="Show"
-        name="filter"
-        options={filterOptions}
-        value={filter}
-        onchange={(val) => { filter = val }}
-        orientation="horizontal"
-      />
-      {#if responses.length > 0}
-        <Button variant="destructive" size="small" onclick={handleClearAll}>Clear All</Button>
-      {/if}
-    </Stack>
-    <DataTable columns={columns} rows={fieldRows}>
-      {#snippet row(item)}
-        {@const rowData = item}
-        <ResponseTableRow field={rowData.field} response={rowData.response} />
-      {/snippet}
-      {#snippet empty()}
-        <EmptyState message="No fields registered yet" />
-      {/snippet}
-    </DataTable>
-  </Card>
+<Stack direction="vertical" gap="none">
+  <Stack direction="horizontal" gap="small" align="space-between" justify="center" padding="small">
+    <RadioGroup
+      label="Show"
+      name="filter"
+      options={filterOptions}
+      value={filter}
+      onchange={(val) => { filter = val }}
+      orientation="horizontal"
+    />
+    {#if responses.length > 0}
+      <Button variant="destructive" size="small" onclick={handleClearAll}>Clear All</Button>
+    {/if}
+  </Stack>
+  <DataTable columns={columns} rows={fieldRows}>
+    {#snippet row(item)}
+      {@const rowData = item}
+      <ResponseTableRow field={rowData.field} response={rowData.response} />
+    {/snippet}
+    {#snippet empty()}
+      <EmptyState message="No fields registered yet" />
+    {/snippet}
+  </DataTable>
 </Stack>

package/dist/plugins/devtools/ui/actions/Button.svelte

@@ -18,7 +18,6 @@
     type?: 'button' | 'submit' | 'reset'
     fullWidth?: boolean
     href?: string
-    target?: string
     onclick?: (event: MouseEvent) => void
   }
 
@@ -32,7 +31,6 @@
     type = 'button',
     fullWidth = false,
     href,
-    target,
     onclick,
   }: Props = $props()
 
@@ -45,8 +43,6 @@
     class:full-width={fullWidth}
     class:is-disabled={isDisabled}
     {href}
-    {target}
-    rel={target === '_blank' ? 'noopener noreferrer' : undefined}
     aria-disabled={isDisabled || undefined}
     tabindex={isDisabled ? -1 : undefined}
     onclick={isDisabled

package/dist/plugins/devtools/ui/data/DataTable.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" generics="T">
+<script lang="ts" generics="TRow">
   import type { Snippet } from 'svelte'
 
   interface Column {
@@ -9,8 +9,8 @@
 
   interface Props {
     columns: Column[]
-    rows: T[]
-    row: Snippet<[T, number]>
+    rows: TRow[]
+    row: Snippet<[TRow, number]>
     empty?: Snippet
     sortKey?: string | null
     sortDirection?: 'asc' | 'desc'
@@ -131,14 +131,4 @@
   :global(tbody tr.selected) {
     background-color: color-mix(in srgb, var(--color-blue-500) 8%, var(--color-white));
   }
-
-  th:first-child,
-  :global(tbody td:first-child) {
-    padding-left: var(--space-4);
-  }
-
-  th:last-child,
-  :global(tbody td:last-child) {
-    padding-right: var(--space-4);
-  }
 </style>

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

@@ -0,0 +1 @@
+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};

package/dist/render/browser.js

@@ -1 +1 @@
-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};
+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};