@picked/svelte 0.0.42-next.1 → 0.0.42-next.3

package/dist/plugins/devtools/DevToolsExperience.svelte

@@ -10,6 +10,7 @@
   import ProjectScreen from './screens/project/ProjectScreen.svelte'
   import HistoryEntriesListScreen from './screens/history/HistoryEntriesListScreen.svelte'
   import ResponsesListScreen from './screens/responses/ResponsesListScreen.svelte'
+  import FeaturesListScreen from './screens/features/FeaturesListScreen.svelte'
   import EventsListScreen from './screens/events/EventsListScreen.svelte'
 
   const experience = getExperience()
@@ -57,6 +58,12 @@
       component: PredicatesListScreen,
       props: {},
     },
+    {
+      id: 'features',
+      label: 'Features',
+      component: FeaturesListScreen,
+      props: {},
+    },
     {
       id: 'components',
       label: 'Components',

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

@@ -0,0 +1,309 @@
+<script lang="ts">
+  import { createStore, createEvent } from 'effector'
+  import type { FeatureBucket } from '@picked/client'
+  import { getPicked, useUnit } from '../../../../hooks'
+
+  interface FeatureSelection {
+    included: boolean
+    value: string
+  }
+
+  const { features: { listStore: featuresStore } } = getPicked()
+  const featuresList = useUnit(featuresStore)
+
+  const initSelections = createEvent<FeatureBucket[]>()
+  const featureToggled = createEvent<string>()
+  const valueChanged = createEvent<{ id: string; value: string }>()
+  const copySucceeded = createEvent()
+  const copyReset = createEvent()
+
+  const selectionsStore = createStore<Record<string, FeatureSelection>>({})
+    // Triggered whenever the features list changes. Adds an entry for any feature
+    // not yet tracked, seeding its override value from the already-resolved bucket
+    // (or 'true' as a sensible default for unresolved boolean features).
+    .on(initSelections, (state, feats) => {
+      const next = { ...state }
+      feats.forEach((feature) => {
+        if (!(feature.id in next)) {
+          const bucket = feature.isResolved ? feature.getBucket().bucket : null
+          next[feature.id] = {
+            included: false,
+            value: bucket !== null ? String(bucket) : 'true',
+          }
+        }
+      })
+      return next
+    })
+    // Toggles whether the feature is included in the generated URL.
+    .on(featureToggled, (state, id) => ({
+      ...state,
+      [id]: { ...state[id], included: !state[id].included },
+    }))
+    // Updates the override value for a feature (edited via the text/select input).
+    .on(valueChanged, (state, { id, value }) => ({
+      ...state,
+      [id]: { ...state[id], value },
+    }))
+
+  const copySuccessStore = createStore(false)
+    .on(copySucceeded, () => true)  // Show "Copied!" feedback after a successful clipboard write.
+    .on(copyReset, () => false)     // Reset back to "Copy" after the feedback timeout.
+
+  const selections = useUnit(selectionsStore)
+  const copySuccess = useUnit(copySuccessStore)
+
+  $effect(() => {
+    initSelections($featuresList)
+  })
+
+  let urlInputRef: HTMLInputElement | null = $state(null)
+
+  function getBucketValue(feature: FeatureBucket): string | null {
+    return feature.isResolved ? String(feature.getBucket().bucket) : null
+  }
+
+  function isBooleanFeature(feature: FeatureBucket): boolean {
+    if (!feature.isResolved) return true
+    const bucket = getBucketValue(feature)
+    return bucket === 'true' || bucket === 'false'
+  }
+
+  const generatedUrl = $derived.by(() => {
+    const url = new URL(window.location.href)
+    url.searchParams.delete('picked-feature')
+    const featureParams = $featuresList
+      .filter((feature) => $selections[feature.id]?.included)
+      .map((feature) => `picked-feature=${feature.id}:${$selections[feature.id].value}`)
+    const base = url.toString()
+    if (featureParams.length === 0) return base
+    const separator = url.search ? '&' : '?'
+    return base + separator + featureParams.join('&')
+  })
+
+  const hasSelections = $derived(Object.values($selections).some((s) => s.included))
+
+  async function copyUrl() {
+    try {
+      await navigator.clipboard.writeText(generatedUrl)
+      copySucceeded()
+      setTimeout(copyReset, 2000)
+    } catch {
+      urlInputRef?.select()
+    }
+  }
+
+  function refreshPage() {
+    window.location.href = generatedUrl
+  }
+</script>
+
+<div class="url-builder">
+  <p class="description">
+    Select feature overrides to generate a URL. Anyone who loads this URL will get the selected
+    feature values from page load — before any resolution occurs.
+  </p>
+
+  <table>
+    <thead>
+      <tr>
+        <th style="width: 2.5rem;">Include</th>
+        <th>Feature</th>
+        <th>Current Value</th>
+        <th>Override Value</th>
+      </tr>
+    </thead>
+    <tbody>
+      {#each $featuresList as feature (feature.id)}
+        {@const selection = $selections[feature.id]}
+        {@const currentValue = getBucketValue(feature)}
+        {@const isBoolean = isBooleanFeature(feature)}
+        {#if selection}
+          <tr class:selected={selection.included}>
+            <td style="text-align: center;">
+              <input
+                type="checkbox"
+                checked={selection.included}
+                onchange={() => featureToggled(feature.id)}
+                aria-label="Include {feature.name} in URL"
+              />
+            </td>
+            <td>
+              <span style="font-weight: 500;">{feature.name}</span>
+              <code
+                style="
+                display: block;
+                font-size: 10px;
+                color: #888;
+                margin-top: 2px;
+              ">{feature.key}</code>
+            </td>
+            <td>
+              {#if currentValue !== null}
+                <code style="font-size: 11px;">{currentValue}</code>
+              {:else}
+                <button onclick={() => feature.getBucket()} style="margin-left: 0.5rem; font-size: 10px; padding: 0.125rem 0.25rem;">
+                  Click to resolve
+                </button>
+              {/if}
+            </td>
+            <td>
+              {#if isBoolean}
+                <select
+                  value={selection.value}
+                  onchange={(e) => valueChanged({ id: feature.id, value: e.currentTarget.value })}
+                  disabled={!selection.included}
+                  style="font-size: 11px; padding: 0.125rem 0.25rem;"
+                >
+                  <option value="true">true</option>
+                  <option value="false">false</option>
+                </select>
+              {:else}
+                <input
+                  type="text"
+                  value={selection.value}
+                  oninput={(e) => valueChanged({ id: feature.id, value: e.currentTarget.value })}
+                  disabled={!selection.included}
+                  style="width: 100%; font-size: 11px; padding: 0.125rem 0.25rem;"
+                  placeholder="value"
+                />
+              {/if}
+            </td>
+          </tr>
+        {/if}
+      {/each}
+    </tbody>
+  </table>
+
+  {#if $featuresList.length === 0}
+    <div style="padding: 2rem; text-align: center; color: #999;">No features registered</div>
+  {/if}
+
+  <div class="url-output">
+    <div class="url-label">Generated URL</div>
+    <div class="url-row">
+      <input
+        bind:this={urlInputRef}
+        type="text"
+        readonly
+        value={generatedUrl}
+        class="url-input"
+        onclick={(e) => e.currentTarget.select()}
+        aria-label="Generated URL"
+      />
+      <button
+        onclick={copyUrl}
+        class="action-button copy-button"
+        class:success={copySuccess}
+        title="Copy URL to clipboard"
+      >
+        {copySuccess ? 'Copied!' : 'Copy'}
+      </button>
+      <button
+        onclick={refreshPage}
+        class="action-button refresh-button"
+        disabled={!hasSelections}
+        title="Reload the page with this URL"
+      >
+        Reload
+      </button>
+    </div>
+    {#if !hasSelections}
+      <p class="hint">Select at least one feature above to add overrides to the URL.</p>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .url-builder {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+  }
+
+  .description {
+    margin: 0;
+    padding: 0.75rem 0.5rem;
+    font-size: 12px;
+    color: #555;
+    border-bottom: 1px solid lightgray;
+  }
+
+  tr.selected {
+    background-color: #f0f7ff;
+  }
+
+  .url-output {
+    padding: 0.75rem 0.5rem;
+    border-top: 1px solid lightgray;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .url-label {
+    font-size: 11px;
+    font-weight: 600;
+    color: #555;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .url-row {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+  }
+
+  .url-input {
+    flex: 1;
+    font-size: 11px;
+    font-family: monospace;
+    padding: 0.375rem 0.5rem;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    background-color: #f9f9f9;
+    color: #333;
+    min-width: 0;
+  }
+
+  .url-input:focus {
+    outline: 2px solid #0066cc;
+    outline-offset: -1px;
+  }
+
+  .action-button {
+    padding: 0.375rem 0.75rem;
+    font-size: 11px;
+    border: none;
+    border-radius: 3px;
+    cursor: pointer;
+    white-space: nowrap;
+    font-weight: 500;
+  }
+
+  .action-button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .copy-button {
+    background-color: #2196f3;
+    color: white;
+  }
+
+  .copy-button.success {
+    background-color: #4caf50;
+  }
+
+  .refresh-button {
+    background-color: #555;
+    color: white;
+  }
+
+  .hint {
+    margin: 0;
+    font-size: 11px;
+    color: #999;
+    font-style: italic;
+  }
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@picked/svelte",
-  "version": "0.0.42-next.1",
+  "version": "0.0.42-next.3",
   "dependencies": {
     "d3": "^7.9.0"
   },
@@ -75,7 +75,7 @@
   ],
   "module": "./dist/index.js",
   "peerDependencies": {
-    "@picked/client": "0.0.42-next.1",
+    "@picked/client": "0.0.42-next.3",
     "effector": "^23.3.0",
     "svelte": "^5.34.3"
   },