@presage-kit/svelte

Svelte bindings for Presage — reactive stores and context for Svelte 4 and 5.

Install

pnpm add @presage-kit/core @presage-kit/svelte

Quick Start

1. Set up context in root layout

<!-- +layout.svelte -->
<script>
  import { setAdaptiveClient } from '@presage-kit/svelte'
  import { adaptiveClient } from '$lib/adaptive-client'

  setAdaptiveClient(adaptiveClient)
</script>

<slot />

2. Use in components

<script lang="ts">
  import { useAdaptive } from '@presage-kit/svelte'

  const { selectedVariant, track } = useAdaptive('feature-panel', {
    variants: ['simple', 'advanced'] as const,
    defaultVariant: 'simple',
  })
</script>

{#if $selectedVariant === 'advanced'}
  <AdvancedPanel />
{:else}
  <SimplePanel />
{/if}
<button on:click={() => track('panel_clicked')}>Action</button>

3. Adaptive ordering (any list)

<script lang="ts">
  import { useAdaptiveOrder } from '@presage-kit/svelte'

  const cards = useAdaptiveOrder('feature-cards', [
    { id: 'export', title: 'Export' },
    { id: 'import', title: 'Import' },
    { id: 'sync', title: 'Sync' },
  ])
</script>

{#each $cards as card (card.id)}
  <Card title={card.title} />
{/each}

4. Adaptive navigation

useAdaptiveNav is a thin wrapper around useAdaptiveOrder for navigation use cases.

<script lang="ts">
  import { useAdaptiveNav } from '@presage-kit/svelte'

  const navItems = useAdaptiveNav('main-nav', [
    { id: 'dashboard', label: 'Dashboard', href: '/dashboard' },
    { id: 'analytics', label: 'Analytics', href: '/analytics' },
  ])
</script>

<nav>
  {#each $navItems as item (item.id)}
    <a href={item.href}>{item.label}</a>
  {/each}
</nav>

5. Lightweight variant access

<script lang="ts">
  import { useVariant } from '@presage-kit/svelte'

  const variant = useVariant('layout', {
    variants: ['compact', 'comfortable'] as const,
    defaultVariant: 'comfortable',
  })
</script>

API

| Export | Description | |--------|-------------| | setAdaptiveClient | Set the client in Svelte context (call in root layout) | | getAdaptiveClient | Get the client from context (use in child components) | | useAdaptive | Full adaptation — returns readable stores for variant, resolution, context + track fn | | useVariant | Lightweight — returns a readable store with just the variant string | | useAdaptiveOrder | Reorders any list of items based on rules | | useAdaptiveNav | Navigation ordering (thin wrapper around useAdaptiveOrder) |

Docs

presage-kit.dev

License

Proprietary. See LICENSE.