@reddb-io/ui 0.1.1

package/src/lib/ConnectDropdown.svelte

@@ -0,0 +1,222 @@
+<script lang="ts">
+  import { onMount } from 'svelte'
+  import { connection, makeCustomConnection } from './connections.svelte'
+  import { Zap, Loader2, AlertCircle, CheckCircle2, Clock, X, Plug, ChevronDown } from 'lucide-svelte'
+
+  const DEFAULT_URL = 'red://localhost'
+
+  function pickDefaultUrl(): string {
+    if (connection.history[0]?.url) return connection.history[0].url
+    if (connection.history[0]?.label) return connection.history[0].label
+    if (connection.active.url) return connection.active.url
+    return DEFAULT_URL
+  }
+
+  let open = $state(false)
+  let url = $state(pickDefaultUrl())
+  let status = $state<'idle' | 'probing' | 'ok' | 'error'>('idle')
+  let error = $state<string | null>(null)
+  let rtt = $state<number | null>(null)
+  let menuEl: HTMLDivElement | undefined = $state()
+  let inputEl: HTMLInputElement | undefined = $state()
+
+  async function attempt(targetUrl: string) {
+    const cleaned = targetUrl.trim().replace(/\/$/, '')
+    if (!cleaned) return
+    url = cleaned
+    // Transport reachability guard (#34): never attempt a transport this
+    // Surface can't materialize — fail with a clear message instead of an
+    // opaque transport-unsupported error from the client.
+    if (!connection.canReach(cleaned)) {
+      status = 'error'
+      error = `This app can't reach that transport here — supported: ${supportedHint}`
+      return
+    }
+    status = 'probing'
+    error = null
+    rtt = null
+    const ok = await connection.tryConnect(makeCustomConnection(cleaned))
+    if (ok) {
+      status = 'ok'
+      rtt = connection.probe.rtt_ms ?? null
+      setTimeout(() => (open = false), 350)
+    } else {
+      status = 'error'
+      error = connection.probe.error ?? 'unreachable'
+    }
+  }
+
+  function submit(e: Event) {
+    e.preventDefault()
+    attempt(url)
+  }
+
+  function fmtRel(ms: number) {
+    const d = Date.now() - ms
+    if (d < 60_000) return 'just now'
+    if (d < 3_600_000) return `${Math.round(d / 60_000)}m ago`
+    if (d < 86_400_000) return `${Math.round(d / 3_600_000)}h ago`
+    return `${Math.round(d / 86_400_000)}d ago`
+  }
+
+  function forget(e: MouseEvent, id: string) {
+    e.stopPropagation()
+    connection.forgetById(id)
+  }
+
+  function toggle() {
+    open = !open
+    if (open) setTimeout(() => inputEl?.focus(), 0)
+  }
+
+  onMount(() => {
+    const onOpen = () => {
+      open = true
+      setTimeout(() => inputEl?.focus(), 0)
+    }
+    window.addEventListener('red:open-connect', onOpen)
+    return () => window.removeEventListener('red:open-connect', onOpen)
+  })
+
+  const dotClass = $derived(
+    connection.connected ? 'bg-ok' : status === 'error' ? 'bg-danger' : 'bg-fg-3'
+  )
+
+  const triggerLabel = $derived(
+    connection.connected ? connection.active.label : 'Connect'
+  )
+
+  const triggerStatus = $derived(
+    connection.connected && connection.probe.rtt_ms !== undefined
+      ? `${connection.probe.rtt_ms}ms`
+      : connection.connected
+        ? 'live'
+        : 'no connection'
+  )
+
+  // Transport reachability (#34): a human hint of the schemes this Surface can
+  // reach, and a history list filtered to reachable entries so unreachable
+  // transports are absent rather than shown-but-broken.
+  const supportedHint = $derived.by(() => {
+    const t = connection.supportedTransports
+    const schemes: string[] = []
+    // http(s):// is the only browser transport; red(s):// works everywhere as an
+    // http(s)://host:5055 alias (normalizeUrl) so it's not advertised separately.
+    if (t.includes('http') || t.includes('https')) schemes.push('http(s)://')
+    if (t.includes('unix')) schemes.push('file://')
+    return schemes.join(' · ')
+  })
+
+  const reachableHistory = $derived(
+    connection.history.filter((h) => !h.url || connection.canReach(h.url)),
+  )
+</script>
+
+<div class="relative">
+  <button
+    type="button"
+    onclick={toggle}
+    aria-haspopup="dialog"
+    aria-expanded={open}
+    title={connection.connected ? 'Switch connection' : 'Connect to reddb'}
+    class="inline-flex items-center gap-2 h-7 pl-2 pr-1.5 bg-bg-2 border border-line-2 rounded-md text-fg-1 cursor-pointer text-xs transition-colors hover:border-line-3 hover:text-fg-0"
+  >
+    <span class={['w-1.5 h-1.5 rounded-full shrink-0', dotClass].join(' ')}></span>
+    {#if !connection.connected}
+      <Plug class="size-3 text-fg-3" />
+    {/if}
+    <span class="font-mono">{triggerLabel}</span>
+    <span class="font-mono text-[10px] text-fg-3">{triggerStatus}</span>
+    <ChevronDown class="size-3 text-fg-3" />
+  </button>
+
+  {#if open}
+    <div class="fixed inset-0 z-40" onclick={() => (open = false)} role="presentation"></div>
+    <div
+      bind:this={menuEl}
+      class="absolute top-[calc(100%+6px)] left-0 z-50 w-[380px] bg-bg-1 border border-line-2 rounded-lg shadow-2xl p-4"
+      role="dialog"
+      aria-label="Connect to reddb"
+    >
+      <form onsubmit={submit}>
+        <label for="connect-url" class="type-label block mb-1.5">Instance URL</label>
+        <input
+          id="connect-url"
+          bind:this={inputEl}
+          bind:value={url}
+          spellcheck="false"
+          placeholder="red://localhost"
+          class="w-full h-9 px-3 mb-1 bg-bg-0 border border-line-2 rounded-md font-mono text-[13px] text-fg-0 outline-none transition-colors focus:border-accent placeholder:text-fg-3"
+        />
+
+        <div class="mb-2 text-[10px] font-mono text-fg-3">reachable here: {supportedHint}</div>
+
+        <button
+          type="submit"
+          disabled={status === 'probing' || !url.trim()}
+          class="w-full h-9 bg-accent text-white font-medium rounded-md cursor-pointer transition-colors hover:bg-[#ff3868] disabled:opacity-40 disabled:cursor-not-allowed flex items-center justify-center gap-2 text-[13px]"
+        >
+          {#if status === 'probing'}
+            <Loader2 class="size-3.5 animate-spin" />
+            Connecting…
+          {:else}
+            <Zap class="size-3.5" />
+            Connect
+          {/if}
+        </button>
+
+        <div class="h-5 mt-2 flex items-center gap-1.5 text-[11px] font-mono">
+          {#if status === 'ok'}
+            <CheckCircle2 class="size-3 text-ok" />
+            <span class="text-ok">Connected{rtt !== null ? ` · ${rtt}ms` : ''}</span>
+          {:else if status === 'error'}
+            <AlertCircle class="size-3 text-danger" />
+            <span class="text-danger truncate">{error}</span>
+          {/if}
+        </div>
+      </form>
+
+      {#if reachableHistory.length > 0}
+        <div class="mt-3 pt-3 border-t border-line-1">
+          <div class="flex items-center gap-1.5 mb-2">
+            <Clock class="size-3 text-fg-3" />
+            <span class="type-label">Recent</span>
+          </div>
+          <div class="grid gap-0.5 max-h-[180px] overflow-y-auto">
+            {#each reachableHistory as h}
+              <div class="group flex items-center gap-1 rounded hover:bg-bg-2 transition-colors">
+                <button
+                  type="button"
+                  onclick={() => {
+                    if (h.url) attempt(h.url)
+                    else {
+                      url = h.label
+                      setTimeout(() => inputEl?.focus(), 0)
+                    }
+                  }}
+                  disabled={status === 'probing'}
+                  title={h.url ? undefined : 'Enter credentials to reconnect'}
+                  class="flex-1 flex items-center justify-between gap-3 px-2 py-1.5 text-left cursor-pointer bg-transparent border-0 disabled:cursor-not-allowed disabled:opacity-50 min-w-0"
+                >
+                  <code class="font-mono text-[11px] text-fg-1 truncate">{h.url ?? h.label}</code>
+                  <span class="font-mono text-[10px] text-fg-3 shrink-0 flex items-center gap-1.5">
+                    {#if h.rtt_ms !== undefined}<span>{h.rtt_ms}ms</span>{/if}
+                    <span>{fmtRel(h.last_used)}</span>
+                  </span>
+                </button>
+                <button
+                  type="button"
+                  onclick={(e) => forget(e, h.id)}
+                  title="Remove from history"
+                  class="opacity-0 group-hover:opacity-100 p-1 mr-0.5 text-fg-3 hover:text-danger transition-all cursor-pointer bg-transparent border-0"
+                >
+                  <X class="size-3" />
+                </button>
+              </div>
+            {/each}
+          </div>
+        </div>
+      {/if}
+    </div>
+  {/if}
+</div>

package/src/lib/EmptyState.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  interface Props {
+    title: string
+    message?: string
+    /** lucide-svelte icon component */
+    icon?: any
+    hint?: string
+    actions?: import('svelte').Snippet
+  }
+  let { title, message, icon: Icon, hint, actions }: Props = $props()
+</script>
+
+<div class="flex flex-col items-center justify-center text-center py-16 px-6 min-h-[280px] bg-bg-1 border border-line-1 border-dashed rounded-lg">
+  {#if Icon}
+    <Icon class="size-9 text-fg-3 mb-4" strokeWidth={1.4} />
+  {/if}
+  <h2 class="type-h2 m-0 mb-2">{title}</h2>
+  {#if message}
+    <p class="text-fg-2 text-[13px] m-0 max-w-md leading-relaxed">{message}</p>
+  {/if}
+  {#if hint}
+    <code class="font-mono text-[11px] text-fg-3 mt-3 px-2 py-1 bg-bg-2 border border-line-1 rounded">{hint}</code>
+  {/if}
+  {#if actions}
+    <div class="flex items-center gap-2 mt-5">{@render actions()}</div>
+  {/if}
+</div>

package/src/lib/LiveChanges.svelte

@@ -0,0 +1,195 @@
+<script lang="ts">
+  import { onDestroy } from 'svelte'
+  import { CDCStreamClient, type ChangeEvent, type Subscription } from '#reddb'
+  import { connection } from '$lib/connections.svelte'
+  import { Pause, Play, Activity, Filter, X } from 'lucide-svelte'
+
+  interface Props {
+    collection?: string
+  }
+  let { collection }: Props = $props()
+
+  type Op = 'insert' | 'update' | 'delete'
+  const OPS: Op[] = ['insert', 'update', 'delete']
+
+  let events = $state<ChangeEvent[]>([])
+  let paused = $state(false)
+  let filter = $state<Record<Op, boolean>>({ insert: true, update: true, delete: true })
+  let error = $state<string | null>(null)
+  let subscription: Subscription | null = null
+  let reader: ReadableStreamDefaultReader<ChangeEvent> | null = null
+  const MAX = 500
+
+  function startStream() {
+    stopStream()
+    error = null
+    events = []
+    const client = connection.client
+    if (!client) {
+      error = 'No active connection.'
+      return
+    }
+    const cdc = new CDCStreamClient({
+      client,
+      // CDC is poll-only on reddb today: the server exposes `GET /changes`
+      // (handlers_backup.rs / routing.rs) and there is NO `/changes/stream` SSE
+      // route (verified against ../reddb 2026-06-01). Polling `GET /changes` is
+      // therefore the optimal — and only — live-changes transport for every
+      // Surface. The CDCStreamClient keeps full SSE plumbing dormant for a
+      // hypothetical future server push endpoint; do NOT enable it until reddb
+      // actually ships `/changes/stream`, or every subscription 404s. When it
+      // lands this becomes:
+      //   sseFactory: (url) => new EventSource(url),
+      //   sseProbe: async () => (await fetch(url, { method: 'HEAD' })).ok,
+      sseFactory: null,
+    })
+    subscription = cdc.subscribe({ collection })
+    reader = subscription.events.getReader()
+    void pump()
+  }
+
+  async function pump() {
+    if (!reader) return
+    try {
+      while (true) {
+        const { value, done } = await reader.read()
+        if (done) return
+        if (paused) continue
+        if (!value) continue
+        events = [value, ...events].slice(0, MAX)
+      }
+    } catch (e) {
+      error = (e as Error).message
+    }
+  }
+
+  function stopStream() {
+    if (reader) {
+      try { reader.cancel() } catch {}
+      reader = null
+    }
+    if (subscription) {
+      subscription.close()
+      subscription = null
+    }
+  }
+
+  $effect(() => {
+    // Restart whenever connection or collection changes.
+    void connection.connected
+    void collection
+    if (connection.connected) startStream()
+    else stopStream()
+  })
+
+  onDestroy(stopStream)
+
+  function relative(ts: number): string {
+    const diff = Date.now() - ts
+    if (diff < 1000) return 'now'
+    if (diff < 60_000) return `${Math.floor(diff / 1000)}s ago`
+    if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}m ago`
+    return `${Math.floor(diff / 3_600_000)}h ago`
+  }
+
+  function absolute(ts: number): string {
+    return new Date(ts).toISOString().replace('T', ' ').replace('Z', '')
+  }
+
+  const visible = $derived(events.filter((e) => filter[e.operation as Op] ?? true))
+  const scope = $derived(collection ? `collection: ${collection}` : 'global')
+</script>
+
+<div class="h-full flex flex-col bg-bg-0">
+  <header class="px-3 py-2 border-b border-line-1 flex items-center gap-3 text-fg-3">
+    <Activity class="size-3.5" />
+    <span class="type-label">Live changes</span>
+    <span class="text-[11px] font-mono text-fg-3">· {scope}</span>
+
+    <div class="ml-auto flex items-center gap-1">
+      <button
+        type="button"
+        class="inline-flex items-center gap-1 px-2 py-1 text-[11px] font-mono rounded border border-line-1 hover:bg-bg-2 text-fg-2"
+        onclick={() => (paused = !paused)}
+        title={paused ? 'Resume stream' : 'Pause stream'}
+      >
+        {#if paused}
+          <Play class="size-3" /> resume
+        {:else}
+          <Pause class="size-3" /> pause
+        {/if}
+      </button>
+
+      <div class="inline-flex items-center gap-1 px-2 py-1 text-[11px] font-mono rounded border border-line-1 text-fg-3">
+        <Filter class="size-3" />
+        {#each OPS as op (op)}
+          <label class="inline-flex items-center gap-1 cursor-pointer">
+            <input
+              type="checkbox"
+              checked={filter[op]}
+              onchange={(ev) => (filter = { ...filter, [op]: (ev.currentTarget as HTMLInputElement).checked })}
+              class="accent-accent size-3"
+            />
+            <span class={filter[op] ? 'text-fg-1' : 'text-fg-3'}>{op}</span>
+          </label>
+        {/each}
+      </div>
+
+      {#if events.length > 0}
+        <button
+          type="button"
+          class="inline-flex items-center gap-1 px-2 py-1 text-[11px] font-mono rounded border border-line-1 hover:bg-bg-2 text-fg-3"
+          onclick={() => (events = [])}
+          title="Clear buffer"
+        >
+          <X class="size-3" /> clear
+        </button>
+      {/if}
+    </div>
+  </header>
+
+  <div class="flex-1 overflow-auto">
+    {#if error}
+      <div class="p-6 text-[12px] font-mono text-fg-3">
+        <span class="text-accent">error:</span> {error}
+      </div>
+    {:else if !connection.connected}
+      <div class="p-6 text-[12px] font-mono text-fg-3">
+        Not connected. Use the topbar Connect button to open a stream.
+      </div>
+    {:else if visible.length === 0}
+      <div class="p-6 text-[12px] font-mono text-fg-3">
+        {paused ? 'Paused — no events captured.' : 'Listening for changes…'}
+      </div>
+    {:else}
+      <ul class="divide-y divide-line-1 font-mono text-[12px]">
+        {#each visible as e (e.lsn)}
+          <li class="px-3 py-1.5 flex items-center gap-3 hover:bg-bg-1">
+            <span class="text-fg-3 w-16 shrink-0" title={absolute(e.timestamp)}>
+              {relative(e.timestamp)}
+            </span>
+            <span class="text-fg-3 w-16 shrink-0">lsn {e.lsn}</span>
+            <span
+              class={[
+                'inline-block w-14 text-center text-[10px] uppercase rounded px-1 py-0.5 shrink-0 border',
+                e.operation === 'insert' && 'border-ok/40 text-ok',
+                e.operation === 'update' && 'border-warn/40 text-warn',
+                e.operation === 'delete' && 'border-accent/40 text-accent',
+              ]
+                .filter(Boolean)
+                .join(' ')}
+            >
+              {e.operation}
+            </span>
+            <span class="text-fg-2 truncate">{e.collection}</span>
+            <span class="text-fg-3">·</span>
+            <span class="text-fg-3 truncate">{e.kind}</span>
+            {#if e.rid !== undefined}
+              <span class="text-fg-3 ml-auto">rid {e.rid}</span>
+            {/if}
+          </li>
+        {/each}
+      </ul>
+    {/if}
+  </div>
+</div>

package/src/lib/MasterPasswordDialog.svelte

@@ -0,0 +1,168 @@
+<script lang="ts">
+  import { Lock, Loader2, AlertCircle, KeyRound, Trash2 } from 'lucide-svelte'
+  import { secureStore } from './secureStore.svelte'
+  import { connection } from './connections.svelte'
+
+  let password = $state('')
+  let confirm = $state('')
+  let busy = $state(false)
+  let confirmingWipe = $state(false)
+  let inputEl: HTMLInputElement | undefined = $state()
+
+  function startWipe() {
+    secureStore.error = null
+    confirmingWipe = true
+  }
+
+  function cancelWipe() {
+    confirmingWipe = false
+  }
+
+  function doWipe() {
+    secureStore.wipe()
+    password = ''
+    confirm = ''
+    confirmingWipe = false
+    setTimeout(() => inputEl?.focus(), 0)
+  }
+
+  const needsSetup = $derived(secureStore.needsSetup)
+  const error = $derived(secureStore.error)
+  const title = $derived(needsSetup ? 'Set a master password' : 'Unlock credentials')
+  const hint = $derived(
+    needsSetup
+      ? 'Picks a key that encrypts your connection history at rest. The password lives in this browser session only — there is no recovery.'
+      : 'Enter the master password used to encrypt your saved connections.'
+  )
+
+  $effect(() => {
+    if (secureStore.locked) setTimeout(() => inputEl?.focus(), 0)
+  })
+
+  async function submit(e: Event) {
+    e.preventDefault()
+    if (busy) return
+    if (!password) return
+    if (needsSetup && password !== confirm) {
+      secureStore.error = "Passwords don't match"
+      return
+    }
+    busy = true
+    const ok = await secureStore.unlock(password)
+    busy = false
+    if (ok) {
+      password = ''
+      confirm = ''
+      // Belt + suspenders: the layout's reactive $effect already kicks
+      // connection.refresh() once locked flips, but firing it here too
+      // means the connect dot updates within the same microtask the
+      // dialog disappears — no "I unlocked but nothing happened" lag.
+      connection.refresh()
+    }
+  }
+</script>
+
+{#if secureStore.backend === 'web' && secureStore.locked}
+  <div
+    class="fixed inset-0 z-[100] flex items-center justify-center bg-bg-0/70 backdrop-blur-sm motion-reduce:backdrop-blur-none"
+    role="dialog"
+    aria-modal="true"
+    aria-labelledby="mp-title"
+  >
+    <form
+      onsubmit={submit}
+      class="w-[380px] bg-bg-1 border border-line-2 rounded-lg shadow-2xl p-5"
+    >
+      <div class="flex items-center gap-2 mb-1.5 text-fg-0">
+        {#if needsSetup}
+          <KeyRound class="size-4 text-accent" />
+        {:else}
+          <Lock class="size-4 text-accent" />
+        {/if}
+        <h2 id="mp-title" class="type-h2 m-0">{title}</h2>
+      </div>
+      <p class="text-fg-3 text-[12px] leading-relaxed m-0 mb-3">{hint}</p>
+
+      <label for="mp-pwd" class="type-label block mb-1">Master password</label>
+      <input
+        id="mp-pwd"
+        bind:this={inputEl}
+        bind:value={password}
+        type="password"
+        autocomplete={needsSetup ? 'new-password' : 'current-password'}
+        spellcheck="false"
+        class="w-full h-9 px-3 mb-2 bg-bg-0 border border-line-2 rounded-md font-mono text-[13px] text-fg-0 outline-none transition-colors focus:border-accent"
+      />
+
+      {#if needsSetup}
+        <label for="mp-confirm" class="type-label block mb-1">Confirm</label>
+        <input
+          id="mp-confirm"
+          bind:value={confirm}
+          type="password"
+          autocomplete="new-password"
+          spellcheck="false"
+          class="w-full h-9 px-3 mb-2 bg-bg-0 border border-line-2 rounded-md font-mono text-[13px] text-fg-0 outline-none transition-colors focus:border-accent"
+        />
+      {/if}
+
+      <button
+        type="submit"
+        disabled={busy || !password || (needsSetup && !confirm)}
+        class="w-full h-9 mt-1 bg-accent text-white font-medium rounded-md cursor-pointer transition-colors hover:bg-[#ff3868] disabled:opacity-40 disabled:cursor-not-allowed flex items-center justify-center gap-2 text-[13px]"
+      >
+        {#if busy}
+          <Loader2 class="size-3.5 animate-spin" />
+          {needsSetup ? 'Setting up…' : 'Unlocking…'}
+        {:else}
+          {needsSetup ? 'Set password' : 'Unlock'}
+        {/if}
+      </button>
+
+      <div class="h-5 mt-2 flex items-center gap-1.5 text-[11px] font-mono">
+        {#if error}
+          <AlertCircle class="size-3 text-danger" />
+          <span class="text-danger truncate">{error}</span>
+        {/if}
+      </div>
+
+      <!-- Start fresh: when the user can't unlock (forgot the password,
+           wedged state, etc.) the only path forward is to wipe the
+           encrypted store entirely. There's no recovery — the password
+           is the key. Two-step confirmation prevents accidental clicks. -->
+      <div class="mt-3 pt-3 border-t border-line-1 text-[11px] font-mono">
+        {#if !confirmingWipe}
+          <button
+            type="button"
+            onclick={startWipe}
+            class="inline-flex items-center gap-1.5 text-fg-3 hover:text-danger transition-colors cursor-pointer bg-transparent border-0 p-0"
+          >
+            <Trash2 class="size-3" />
+            <span>Start fresh — wipe this browser</span>
+          </button>
+        {:else}
+          <div class="flex items-center justify-between gap-2">
+            <span class="text-danger">Erase the encrypted store and all saved connections?</span>
+          </div>
+          <div class="flex items-center gap-2 mt-1.5">
+            <button
+              type="button"
+              onclick={doWipe}
+              class="inline-flex items-center gap-1.5 px-2 py-1 rounded border border-danger/40 bg-danger/10 text-danger hover:bg-danger/20 cursor-pointer"
+            >
+              <Trash2 class="size-3" />
+              Yes, wipe
+            </button>
+            <button
+              type="button"
+              onclick={cancelWipe}
+              class="px-2 py-1 rounded border border-line-2 text-fg-2 hover:text-fg-0 cursor-pointer"
+            >
+              Cancel
+            </button>
+          </div>
+        {/if}
+      </div>
+    </form>
+  </div>
+{/if}

package/src/lib/PageHeader.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  interface Props {
+    title: string
+    /** mono uppercase eyebrow above the title — e.g. "Explore", "Admin" */
+    eyebrow?: string
+    /** subtle subtitle/description below — single line, fg-2 */
+    subtitle?: string
+    actions?: import('svelte').Snippet
+    children?: import('svelte').Snippet
+  }
+  let { title, eyebrow, subtitle, actions, children }: Props = $props()
+</script>
+
+<header class="flex items-end justify-between gap-4 pb-4 mb-4 border-b border-line-1">
+  <div class="min-w-0">
+    {#if eyebrow}
+      <div class="type-label mb-1.5">{eyebrow}</div>
+    {/if}
+    <div class="flex items-baseline gap-3 flex-wrap">
+      <h1 class="type-h1 m-0">{title}</h1>
+      {@render children?.()}
+    </div>
+    {#if subtitle}
+      <p class="type-caption m-0 mt-1.5">{subtitle}</p>
+    {/if}
+  </div>
+  {#if actions}
+    <div class="flex items-center gap-2 shrink-0">
+      {@render actions()}
+    </div>
+  {/if}
+</header>