@picked/svelte 0.0.62-next.9 → 0.0.63-next.1

package/dist/components/LazyImage.svelte

@@ -88,7 +88,7 @@
       if (isConvincelyDomain(url)) {
         const encodedUrl = encodeURIComponent(url.toString())
         const optimizedSize = findClosestSize(targetWidth)
-        return `https://img.convincely.io/_next/image?url=${encodedUrl}&w=${optimizedSize}&q=75`
+        return `https://img.picked-content.com/_next/image?url=${encodedUrl}&w=${optimizedSize}&q=75`
       }
 
       // For other domains, return the original URL

package/dist/experience/ExperienceHost.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+  /**
+   * @file Internal host that instantiates a single experience, exposes the instance via context,
+   * and renders the resolved Svelte component.
+   *
+   * Lazy loaders and promise-wrapped components load asynchronously via `{#await}`: they render
+   * nothing on the server and on the hydration first paint, then swap in once resolved on the
+   * client, so the server and the client's first paint agree.
+   */
+  import { setContext } from 'svelte'
+  import type { Component } from 'svelte'
+  import type { ExperienceStore, Picked } from '@picked/client'
+  import { createExperienceInstance } from '@picked/client/server'
+  import { isLazyLoader } from '@picked/client'
+  import { EXPERIENCE_CONTEXT_KEY } from '../context'
+  import { useUnit } from '../hooks'
+
+  interface Props {
+    experience: ExperienceStore
+    client: Picked
+  }
+
+  const { experience, client }: Props = $props()
+
+  // `client` and `experience` are stable for this host's lifetime — `Experience` keys each host
+  // by `experience.id`, so a different experience mounts a new host rather than mutating props.
+  // Capturing their initial values is therefore intentional.
+  // svelte-ignore state_referenced_locally
+  const instance = createExperienceInstance({ client, experience })
+
+  setContext(EXPERIENCE_CONTEXT_KEY, instance)
+
+  const resolved = useUnit(instance.componentAndFrameworkStore)
+  // svelte-ignore state_referenced_locally
+  const ready = useUnit(client.readyStore)
+
+  // Slot-rendered experiences have no DOM target, so the normal lifecycle never loads their CMS
+  // content. Once the client is ready (so `client.contentLoader` is set by `start()`), load it
+  // here; `getStepContent` picks it up reactively. `$effect` does not run during SSR, where
+  // content arrives pre-registered via the snapshot.
+  $effect(() => {
+    if ($ready) {
+      // Content fetch failures (e.g. a 404 when the content endpoint is unavailable) are already
+      // swallowed inside the effect; the explicit catch guarantees no unhandled rejection even if
+      // that contract changes, so a missing/erroring content endpoint never breaks rendering.
+      experience.prepareExperienceContentFx().catch(() => undefined)
+    }
+  })
+
+  /**
+   * Narrows to a directly-renderable Svelte component, excluding lazy loaders and promises.
+   *
+   * @param {unknown} value - The adapted component's `component` field.
+   * @returns {boolean} True when the value is a direct Svelte component.
+   * @example
+   * isDirectSvelteComponent(SomeComponent)
+   */
+  function isDirectSvelteComponent(value: unknown): value is Component {
+    return typeof value === 'function' && !isLazyLoader(value) && !(value instanceof Promise)
+  }
+
+  /**
+   * Returns `value` when it is a directly-renderable Svelte component.
+   *
+   * @param {unknown} value - The candidate component (a loaded module's default export).
+   * @returns {Component} The Svelte component.
+   * @throws {Error} When the value is not a Svelte component.
+   * @example
+   * toComponent((await loader.load()).default)
+   */
+  function toComponent(value: unknown): Component {
+    if (isDirectSvelteComponent(value)) {
+      return value
+    }
+
+    throw new Error('Lazy experience component did not resolve to a Svelte component.')
+  }
+
+  /**
+   * Returns a promise resolving to the component for a lazy loader or promise-wrapped component,
+   * or null for a direct component (or when there is no component).
+   *
+   * @param {unknown} value - The adapted component's `component` field.
+   * @returns {Promise<Component> | null} The loader promise, or null.
+   * @example
+   * toComponentLoader(lazyLoader)
+   */
+  function toComponentLoader(value: unknown): Promise<Component> | null {
+    if (isLazyLoader(value)) {
+      return value.load().then((mod) => toComponent(mod.default))
+    }
+
+    if (value instanceof Promise) {
+      return value.then((mod) => toComponent(mod.default))
+    }
+
+    return null
+  }
+
+  const adapted = $derived($resolved?.component.component)
+  const svelteComponent = $derived(adapted ? adapted.component : undefined)
+  const componentLoader = $derived(toComponentLoader(svelteComponent))
+</script>
+
+{#if isDirectSvelteComponent(svelteComponent)}
+  {@const Comp = svelteComponent}
+  <Comp {client} experience={instance} />
+{:else if componentLoader}
+  {#await componentLoader then Comp}
+    <Comp {client} experience={instance} />
+  {/await}
+{/if}

package/dist/experience/ExperienceSlot.svelte

@@ -0,0 +1,143 @@
+<script lang="ts">
+  /**
+   * @file Slot-based experience renderer. Renders every registered experience that targets the
+   * named slot and whose condition is active, ordered by placement. Active is read synchronously
+   * from the seeded condition-results store (sync on SSR / hydration first paint); on a cache miss
+   * (standalone, no snapshot) the condition is evaluated asynchronously and the store update
+   * re-renders reactively.
+   */
+  import type { ExperienceStore, ExperienceTarget } from '@picked/client'
+  import { evaluateConditionMemo, hashRule, ruleReferencesAction } from '@picked/client/server'
+  import { getPicked, useUnit } from '../hooks'
+  import ExperienceHost from './ExperienceHost.svelte'
+
+  type ExperienceConfig = ReturnType<ExperienceStore['configStore']['getState']>
+  type ConditionRule = ExperienceConfig['decisionLogic']
+
+  interface Props {
+    /**
+     * Slot name. Maps to the `.picked-slot-<name>` selector that targeted experiences declare.
+     * Named `name` rather than `slot` because Svelte's compiler reserves the `slot` attribute for
+     * legacy named-slot assignment, so it cannot be used as a component prop.
+     */
+    name: string
+  }
+
+  const { name }: Props = $props()
+
+  const client = getPicked()
+  const selector = $derived(`.picked-slot-${name}`)
+
+  const PLACEMENT_ORDER: ExperienceTarget['placement'][] = [
+    'replace',
+    'before',
+    'prepend',
+    'append',
+    'after',
+  ]
+
+  interface Candidate {
+    experience: ExperienceStore
+    placement: ExperienceTarget['placement']
+    condition: ConditionRule
+    hash: string
+  }
+
+  const experiences = useUnit(client.experiences.listStore)
+  const conditionResults = useUnit(client.conditionResults.store)
+
+  /**
+   * Returns the sort rank for a placement; unknown placements sort last.
+   *
+   * @param {ExperienceTarget['placement']} placement - The target placement.
+   * @returns {number} The placement's index in the precedence order.
+   * @example
+   * placementRank('append')
+   */
+  function placementRank(placement: ExperienceTarget['placement']): number {
+    const index = PLACEMENT_ORDER.indexOf(placement)
+    return index === -1 ? PLACEMENT_ORDER.length : index
+  }
+
+  /**
+   * Maps an experience to a slot candidate, or null when it does not target this slot or carries
+   * an action-referencing condition.
+   *
+   * @param {ExperienceStore} experience - The experience to inspect.
+   * @returns {Candidate | null} The candidate, or null when the experience is not an eligible slot match.
+   * @example
+   * toCandidate(experienceStore)
+   */
+  function toCandidate(experience: ExperienceStore): Candidate | null {
+    const config = experience.configStore.getState()
+    const target = config.targetSelectors.find(
+      (selectorTarget) => selectorTarget.selector === selector,
+    )
+    if (!target) {
+      return null
+    }
+
+    // Action-referencing conditions are never cached (their side effect must re-run), so they can
+    // never resolve through the synchronous `peek` the slot path relies on. Slots do not support
+    // action-gated conditions in v1; excluding them also stops the selection effect from re-firing
+    // the action on every render.
+    if (ruleReferencesAction(config.decisionLogic)) {
+      return null
+    }
+
+    return {
+      experience,
+      placement: target.placement,
+      condition: config.decisionLogic,
+      hash: hashRule(config.decisionLogic),
+    }
+  }
+
+  const candidates = $derived(
+    $experiences
+      .map(toCandidate)
+      .filter((candidate): candidate is Candidate => candidate !== null)
+      .sort((a, b) => placementRank(a.placement) - placementRank(b.placement)),
+  )
+
+  // Referencing `$conditionResults` keeps this recompute reactive to late condition writes
+  // (the standalone cache-miss path), so a `peek` that returned `undefined` re-renders once
+  // the async evaluation resolves and writes the store. An active `replace` experience wins:
+  // the first one (it sorts first) renders alone, replacing any other slot matches.
+  const active = $derived.by(() => {
+    void $conditionResults
+    const activeCandidates = candidates.filter(
+      (candidate) => client.conditionResults.peek(candidate.hash) === true,
+    )
+    const firstReplace = activeCandidates.find((candidate) => candidate.placement === 'replace')
+    return firstReplace ? [firstReplace] : activeCandidates
+  })
+
+  /**
+   * Builds a plain, JSON-serialisable subset of the current URL for the evaluation context.
+   * The live `Location` object is intentionally not passed: json-logic predicates read plain
+   * values, and this mirrors the `SerializeLocation` shape the server selects against.
+   *
+   * @returns {Record<string, string>} The plain location subset.
+   * @example
+   * buildLocationContext()
+   */
+  function buildLocationContext(): Record<string, string> {
+    const { href, pathname, search, hostname, origin, protocol, port, host, hash } = window.location
+    return { href, pathname, search, hostname, origin, protocol, port, host, hash }
+  }
+
+  $effect(() => {
+    for (const candidate of candidates) {
+      if (client.conditionResults.peek(candidate.hash) === undefined) {
+        void evaluateConditionMemo(client, candidate.condition, {
+          context: { location: buildLocationContext() },
+        })
+      }
+    }
+  })
+</script>
+
+{#each active as candidate (candidate.experience.id)}
+  <ExperienceHost experience={candidate.experience} {client} />
+{/each}

package/dist/experience/set-picked-context.d.ts

@@ -0,0 +1,29 @@
+import { CreateClientOptions, Picked } from '@picked/client';
+import { PickedSnapshot } from '@picked/client/server';
+type SetPickedContextParams = {
+    client: Picked;
+    snapshot?: PickedSnapshot;
+} | {
+    options: CreateClientOptions;
+    snapshot?: PickedSnapshot;
+};
+/**
+ * Provides a Picked client to descendant components through Svelte context, starting it in the browser.
+ *
+ * Call this once at the top of a component's `<script>` so `setContext` and `onMount` run during
+ * component initialisation. Pass `options` to create the client and synchronously hydrate it from an
+ * optional SSR snapshot (a `versionId` mismatch is tolerated; the client reconciles via `start()`),
+ * or pass an existing `client` (such as the app's single global client) to render experiences
+ * against it — supply `snapshot` alongside `client` to SSR-seed that shared client rather than
+ * creating a second one. In the browser the client is started from `onMount`; `start()` is
+ * idempotent, so a client that was already started is left untouched.
+ *
+ * @param {SetPickedContextParams} params - `{ client, snapshot? }` or `{ options, snapshot? }`.
+ * @returns {Picked} The client placed into context.
+ * @example
+ * setPickedContext({ options })
+ * @example
+ * setPickedContext({ client: globalClient, snapshot })
+ */
+export declare function setPickedContext(params: SetPickedContextParams): Picked;
+export {};

package/dist/experience/set-picked-context.js

@@ -0,0 +1 @@
+import{CLIENT_CONTEXT_KEY as e}from"../context.js";import{onMount as t,setContext as n}from"svelte";import{createClient as r,supportsWindow as i}from"@picked/client";import{registerProjectConfig as a}from"@picked/client/server";function o(e,t){let n=e.session.store.getState().id;a(e,t.projectConfig,{isPreview:!1,sessionId:n}),t.content.forEach(t=>e.registerContent(t)),e.conditionResults.seed(t.conditionResults)}function s(e,t){let n=r(e);return t&&o(n,t),n}function c(r){let a;return`client`in r?(r.snapshot&&o(r.client,r.snapshot),a=r.client):a=s(r.options,r.snapshot),n(e,a),t(()=>{i()&&a.start()}),a}export{c as setPickedContext};

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,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};
+import{getPicked as e}from"./client.js";import"@picked/client";import{attach as t,createEffect as n,createEvent as r,createStore as i,sample as a}from"effector";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/hooks/predicate.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().predicates.getEvokablePredicate(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 getPredicate,s as getPredicateResult};
+import{getPicked as e}from"./client.js";import"@picked/client";import{attach as t,createEffect as n,createEvent as r,createStore as i,sample as a}from"effector";function o(t){return e().predicates.getEvokablePredicate(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 getPredicate,s as getPredicateResult};

package/dist/hooks/step.js

@@ -1 +1 @@
-import{STEP_CONTEXT_KEY as e}from"../context.js";import{getPicked as t}from"./client.js";import{getStepRouter as n}from"../router/context.js";import{combine as r}from"effector";import{getContext as i,setContext as a}from"svelte";import{createForm as o}from"../form/create-form.svelte";function s(i){let s=t(),{activeStep:c}=n(),l=c.map(e=>e?.key===i),u=s.steps.listStore.map(e=>e.find(e=>e.key===i)??{id:i,key:i,name:``,fieldKeys:[]}),d=o(i,u.map(e=>e.name),u.map(e=>e.fieldKeys));return a(e,{step:u,layoutContentStore:r(u,s.contents.indexStore,(e,t)=>e.layoutContentId?t[e.layoutContentId]??null:null,{skipVoid:!1}),isActive:l,isActiveStep:l,...d})}function c(){return i(e)}function l(){let{layoutContentStore:e}=c();return e.map(e=>e?.data??null,{skipVoid:!1})}export{c as getStep,l as getStepContent,s as setStepContext};
+import{STEP_CONTEXT_KEY as e}from"../context.js";import{getExperience as t,getPicked as n}from"./client.js";import{getStepRouter as r}from"../router/context.js";import{getContext as i,setContext as a}from"svelte";import{combine as o}from"effector";import{createForm as s}from"../form/create-form.svelte";function c(t){let i=n(),{activeStep:c}=r(),l=c.map(e=>e?.key===t),u=i.steps.listStore.map(e=>e.find(e=>e.key===t)??{id:t,key:t,name:``,fieldKeys:[]}),d=s(t,u.map(e=>e.name),u.map(e=>e.fieldKeys));return a(e,{step:u,layoutContentStore:o(u,i.contents.indexStore,(e,t)=>e.layoutContentId?t[e.layoutContentId]??null:null,{skipVoid:!1}),isActive:l,isActiveStep:l,...d})}function l(){return i(e)}function u(){return(i(e)?.layoutContentStore??d()).map(e=>e?.data??null,{skipVoid:!1})}function d(){let e=t(),r=n();return o(e.treeStore,r.contents.indexStore,(e,t)=>{let n=e.steps.find(e=>e.layoutContentId);return n?.layoutContentId?t[n.layoutContentId]??null:null})}export{l as getStep,u as getStepContent,c as setStepContext};

package/dist/hooks/stores.js

@@ -1 +1 @@
-import{SCOPE_CONTEXT_KEY as e}from"../context.js";import{createWatch as t,fork as n,is as r,scopeBind as i}from"effector";import{getContext as a,setContext as o}from"svelte";var s=t=>o(e,n(t)),c=()=>a(e);function l(e){let n=c();return n?r.effect(e)||r.event(e)&&typeof e==`function`?i(e,{scope:n}):{subscribe:r=>(r(n.getState(e)),t({unit:e,fn:r,scope:n}))}:e}export{c as getContextScope,s as setContextScope,l as useUnit};
+import{SCOPE_CONTEXT_KEY as e}from"../context.js";import{getContext as t,setContext as n}from"svelte";import{createWatch as r,fork as i,is as a,scopeBind as o}from"effector";var s=t=>n(e,i(t)),c=()=>t(e);function l(e){let t=c();return t?a.effect(e)||a.event(e)&&typeof e==`function`?o(e,{scope:t}):{subscribe:n=>(n(t.getState(e)),r({unit:e,fn:n,scope:t}))}:e}export{c as getContextScope,s as setContextScope,l as useUnit};

package/dist/index.d.ts

@@ -1,3 +1,8 @@
+/**
+ * @file Public entry for the `@picked/svelte` package.
+ */
 export { adaptSvelteComponent, isValidAdaptedComponent } from './component';
 export type { ComponentWithProps } from './component';
 export { LazyImage } from './components';
+export { setPickedContext } from './experience/set-picked-context';
+export { default as ExperienceSlot } from './experience/ExperienceSlot.svelte';

package/dist/index.js

@@ -1 +1 @@
-import{adaptSvelteComponent as e,isValidAdaptedComponent as t}from"./component.js";import{LazyImage as n}from"./components/index.js";export{n as LazyImage,e as adaptSvelteComponent,t as isValidAdaptedComponent};
+import{adaptSvelteComponent as e,isValidAdaptedComponent as t}from"./component.js";import{LazyImage as n}from"./components/index.js";import{setPickedContext as r}from"./experience/set-picked-context.js";import i from"./experience/ExperienceSlot.svelte";export{i as ExperienceSlot,n as LazyImage,e as adaptSvelteComponent,t as isValidAdaptedComponent,r as setPickedContext};

package/dist/plugins/devtools/DevToolsExperience.svelte

@@ -15,8 +15,12 @@
   import ComponentsListScreen from './screens/components/ComponentsListScreen.svelte'
   import FrameworksListScreen from './screens/frameworks/FrameworksListScreen.svelte'
   import ProjectScreen from './screens/project/ProjectScreen.svelte'
+  import ConfigScreen from './screens/config/ConfigScreen.svelte'
+  import IdentityScreen from './screens/identity/IdentityScreen.svelte'
   import HistoryEntriesListScreen from './screens/history/HistoryEntriesListScreen.svelte'
   import ResponsesListScreen from './screens/responses/ResponsesListScreen.svelte'
+  import FieldsListScreen from './screens/fields/FieldsListScreen.svelte'
+  import ContentListScreen from './screens/content/ContentListScreen.svelte'
   import FeaturesListScreen from './screens/features/FeaturesListScreen.svelte'
   import EventsListScreen from './screens/events/EventsListScreen.svelte'
   import PickedIcon from './PickedIcon.svelte'
@@ -35,21 +39,27 @@
       props: {},
     },
     {
-      id: 'history',
-      label: 'History',
-      component: HistoryEntriesListScreen,
+      id: 'components',
+      label: 'Components',
+      component: ComponentsListScreen,
       props: {},
     },
     {
-      id: 'events',
-      label: 'Events',
-      component: EventsListScreen,
+      id: 'config',
+      label: 'Config',
+      component: ConfigScreen,
       props: {},
     },
     {
-      id: 'responses',
-      label: 'Responses',
-      component: ResponsesListScreen,
+      id: 'content',
+      label: 'Content',
+      component: ContentListScreen,
+      props: {},
+    },
+    {
+      id: 'events',
+      label: 'Events',
+      component: EventsListScreen,
       props: {},
     },
     {
@@ -64,12 +74,6 @@
       component: ExperiencesListScreen,
       props: {},
     },
-    {
-      id: 'predicates',
-      label: 'Predicates',
-      component: PredicatesListScreen,
-      props: {},
-    },
     {
       id: 'features',
       label: 'Features',
@@ -77,9 +81,9 @@
       props: {},
     },
     {
-      id: 'components',
-      label: 'Components',
-      component: ComponentsListScreen,
+      id: 'fields',
+      label: 'Fields',
+      component: FieldsListScreen,
       props: {},
     },
     {
@@ -88,6 +92,30 @@
       component: FrameworksListScreen,
       props: {},
     },
+    {
+      id: 'history',
+      label: 'History',
+      component: HistoryEntriesListScreen,
+      props: {},
+    },
+    {
+      id: 'identity',
+      label: 'Identity',
+      component: IdentityScreen,
+      props: {},
+    },
+    {
+      id: 'predicates',
+      label: 'Predicates',
+      component: PredicatesListScreen,
+      props: {},
+    },
+    {
+      id: 'responses',
+      label: 'Responses',
+      component: ResponsesListScreen,
+      props: {},
+    },
   ]
 
   const isOpen = experience.isOpenStore
@@ -118,7 +146,7 @@
         </div>
       </header>
       <section class="main">
-        <Tabs {tabs} initialTab={1} />
+        <Tabs {tabs} initialTab={0} />
       </section>
     </div>
   </div>
@@ -129,6 +157,7 @@
     {/if}
     <button
       class="floating-button"
+      class:has-preview-tag={isPreview}
       onclick={() => experience.open()}
       aria-label="Open Picked Devtools"
       title="Open Picked Devtools"
@@ -316,14 +345,22 @@
   .launcher {
     position: fixed;
     bottom: 1rem;
-    right: 1.5rem;
+    right: 0;
     z-index: 999999;
     display: flex;
     align-items: stretch;
+    cursor: pointer;
+    transform: translateX(calc(100% - 8px));
+    transition: transform 180ms ease-out;
+
+    &:hover,
+    &:focus-within {
+      transform: translateX(0);
+    }
   }
 
   .floating-button {
-    border-radius: 0 6px 6px 0;
+    border-radius: 6px;
     background-color: #ffffff;
     display: grid;
     place-items: center;
@@ -337,6 +374,10 @@
     }
   }
 
+  .floating-button.has-preview-tag {
+    border-radius: 0 6px 6px 0;
+  }
+
   .preview-tag {
     display: flex;
     align-items: center;

package/dist/plugins/devtools/components/Tabs.svelte

@@ -1,30 +1,36 @@
-<script lang="ts">
+<script lang="ts" generics="P extends Record<string, unknown> = Record<string, never>">
   /** @file Accessible tab container that renders dynamic Svelte components per tab. */
   import type { Component } from 'svelte'
 
   interface Tab {
     id: string
     label: string
-    component: Component<Record<string, unknown>>
-    props?: Record<string, unknown>
+    component: Component<P>
+    props: P
   }
 
   export let tabs: Tab[]
   export let initialTab = 0
 
   let activeTab = initialTab
+  // Keyed by tab index — written at render time via Svelte `bind:this`. A
+  // record rather than an array sidesteps `sonarjs/no-empty-collection`,
+  // whose flow analysis can't see the bind writes.
+  const tabButtons: Record<number, HTMLButtonElement | undefined> = {}
 
   /**
-   * Sets the active tab to the given index.
+   * Sets the active tab to the given index and scrolls the corresponding button into the
+   * horizontal viewport so keyboard navigation never lands off-screen.
    *
    * @param {number} index - The zero-based tab index to activate.
    * @example
    * ```typescript
-   * activateTab(2) // switches to the third tab
+   * activateTab(2) // switches to the third tab and scrolls it into view
    * ```
    */
   function activateTab(index: number) {
     activeTab = index
+    tabButtons[index]?.scrollIntoView({ inline: 'nearest', block: 'nearest', behavior: 'smooth' })
   }
 
   /**
@@ -66,6 +72,7 @@
   <div role="tablist" tabindex="0" on:keydown={handleKeydown} class="tab-list">
     {#each tabs as tab, i (tab.id)}
       <button
+        bind:this={tabButtons[i]}
         role="tab"
         id="tab-{tab.id}"
         aria-controls="panel-{tab.id}"
@@ -90,7 +97,7 @@
       hidden={activeTab !== i}
     >
       {#if activeTab === i}
-        <svelte:component this={tab.component} {...tab.props || {}} />
+        <svelte:component this={tab.component} {...tab.props} />
       {/if}
     </div>
   {/each}
@@ -110,6 +117,23 @@
     border-bottom: 1px solid var(--color-gray-200);
     flex-shrink: 0;
     overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-gray-300) transparent;
+    scroll-behavior: smooth;
+  }
+
+  .tab-list::-webkit-scrollbar {
+    height: 6px;
+  }
+
+  .tab-list::-webkit-scrollbar-thumb {
+    background-color: var(--color-gray-300);
+    border-radius: var(--radius-full);
+  }
+
+  .tab-list::-webkit-scrollbar-track {
+    background-color: transparent;
   }
 
   .tab-button {