@svgrid/grid 1.2.34 → 2.0.0

package/dist/SvToaster.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+  /**
+   * SvToaster - renders the shared toast queue (see `toast-store`). Mount ONCE
+   * near the app root; call `toast()` from anywhere to push notifications. The
+   * container is an `aria-live` region as a visual backstop, though each toast
+   * is also announced through the shared live region by the store.
+   *
+   * ```svelte
+   * <SvToaster position="bottom-right" />
+   * ```
+   */
+  import { portalToBody } from './popover'
+  import { toastStore, dismissToast, pauseToast, resumeToast, type Toast } from './toast-store.svelte'
+
+  type Position =
+    | 'top-left' | 'top-center' | 'top-right'
+    | 'bottom-left' | 'bottom-center' | 'bottom-right'
+
+  type Props = {
+    /** Corner/edge the stack anchors to. Default 'bottom-right'. */
+    position?: Position
+    /** Max toasts shown at once (older ones stay queued in the store). */
+    max?: number
+  }
+
+  let { position = 'bottom-right', max = 5 }: Props = $props()
+
+  const visible = $derived(toastStore.toasts.slice(-max))
+  const icon = (v: Toast['variant']) =>
+    v === 'success' ? '✓' : v === 'error' ? '✕' : v === 'warning' ? '⚠' : 'ℹ'
+
+  // Swipe-to-dismiss: drag a toast sideways past ~60px to dismiss it.
+  let drag = $state<{ id: number; startX: number; dx: number } | null>(null)
+  function onDown(e: PointerEvent, id: number) {
+    drag = { id, startX: e.clientX, dx: 0 }
+    ;(e.currentTarget as HTMLElement).setPointerCapture?.(e.pointerId)
+    pauseToast(id)
+  }
+  function onMove(e: PointerEvent) {
+    if (drag) drag = { ...drag, dx: e.clientX - drag.startX }
+  }
+  function onUp(id: number) {
+    if (!drag || drag.id !== id) return
+    const dx = drag.dx
+    drag = null
+    if (Math.abs(dx) > 60) dismissToast(id)
+    else resumeToast(id)
+  }
+  const dragDx = (id: number) => (drag?.id === id ? drag.dx : 0)
+</script>
+
+<div class="sv-toaster sv-toaster--{position}" use:portalToBody role="region" aria-label="Notifications">
+  {#each visible as t (t.id)}
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div
+      class="sv-toast sv-toast--{t.variant}"
+      class:is-dragging={drag?.id === t.id}
+      role={t.variant === 'error' || t.variant === 'warning' ? 'alert' : 'status'}
+      style:transform={dragDx(t.id) ? `translateX(${dragDx(t.id)}px)` : undefined}
+      style:opacity={dragDx(t.id) ? 1 - Math.min(Math.abs(dragDx(t.id)) / 160, 0.7) : undefined}
+      onmouseenter={() => pauseToast(t.id)}
+      onmouseleave={() => resumeToast(t.id)}
+      onfocusin={() => pauseToast(t.id)}
+      onfocusout={() => resumeToast(t.id)}
+      onpointerdown={(e) => onDown(e, t.id)}
+      onpointermove={onMove}
+      onpointerup={() => onUp(t.id)}
+      onpointercancel={() => onUp(t.id)}
+    >
+      <span class="sv-toast__icon" aria-hidden="true">{icon(t.variant)}</span>
+      <div class="sv-toast__content">
+        {#if t.title}<div class="sv-toast__title">{t.title}</div>{/if}
+        <div class="sv-toast__msg">{t.message}</div>
+      </div>
+      {#if t.dismissible}
+        <button type="button" class="sv-toast__x" aria-label="Dismiss" onclick={() => dismissToast(t.id)}>&times;</button>
+      {/if}
+    </div>
+  {/each}
+</div>
+
+<style>
+  :global(.sv-toaster) {
+    position: fixed; z-index: 2147483001; display: flex; flex-direction: column; gap: 8px;
+    padding: 16px; max-width: min(92vw, 380px); pointer-events: none;
+  }
+  :global(.sv-toaster--top-left) { top: 0; left: 0; }
+  :global(.sv-toaster--top-center) { top: 0; left: 50%; transform: translateX(-50%); align-items: center; }
+  :global(.sv-toaster--top-right) { top: 0; right: 0; }
+  :global(.sv-toaster--bottom-left) { bottom: 0; left: 0; flex-direction: column-reverse; }
+  :global(.sv-toaster--bottom-center) { bottom: 0; left: 50%; transform: translateX(-50%); align-items: center; flex-direction: column-reverse; }
+  :global(.sv-toaster--bottom-right) { bottom: 0; right: 0; flex-direction: column-reverse; }
+
+  :global(.sv-toast) {
+    pointer-events: auto;
+    display: flex; align-items: flex-start; gap: 10px; width: 100%; box-sizing: border-box;
+    padding: 11px 12px; border-radius: 10px; font-size: 13px; line-height: 1.45;
+    background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
+    border: 1px solid var(--sg-border, #e2e8f0);
+    border-inline-start: 3px solid var(--_accent, var(--sg-accent, #2563eb));
+    box-shadow: 0 12px 32px -12px rgba(15, 23, 42, 0.4);
+    animation: sv-toast-in 0.18s cubic-bezier(0.16, 1, 0.3, 1) both;
+    transition: transform 0.2s ease, opacity 0.2s ease;
+    touch-action: pan-y; /* let vertical scroll through; capture horizontal swipe */
+  }
+  :global(.sv-toast.is-dragging) { transition: none; cursor: grabbing; user-select: none; }
+  @keyframes sv-toast-in { from { opacity: 0; transform: translateY(6px) scale(0.98) } to { opacity: 1 } }
+  @media (prefers-reduced-motion: reduce) { :global(.sv-toast) { animation: none } }
+
+  :global(.sv-toast--success) { --_accent: var(--sg-success, #16a34a); }
+  :global(.sv-toast--error) { --_accent: var(--sg-danger, #dc2626); }
+  :global(.sv-toast--warning) { --_accent: var(--sg-warning, #f59e0b); }
+  :global(.sv-toast--info) { --_accent: var(--sg-accent, #2563eb); }
+
+  :global(.sv-toast__icon) { flex: none; width: 18px; height: 18px; display: grid; place-items: center; color: var(--_accent); font-weight: 700; }
+  :global(.sv-toast__content) { flex: 1; min-width: 0; }
+  :global(.sv-toast__title) { font-weight: 650; margin-bottom: 1px; }
+  :global(.sv-toast__msg) { color: var(--sg-fg, #0f172a); overflow-wrap: anywhere; }
+  :global(.sv-toast__x) {
+    flex: none; width: 22px; height: 22px; display: grid; place-items: center; margin: -2px -2px 0 0;
+    background: none; border: 0; color: var(--sg-muted, #64748b); cursor: pointer; border-radius: 5px; font-size: 17px; line-height: 1;
+  }
+  :global(.sv-toast__x:hover) { background: var(--sg-row-hover-bg, #f1f5f9); color: var(--sg-fg, #0f172a); }
+</style>

package/dist/SvToaster.svelte.d.ts

@@ -0,0 +1,10 @@
+type Position = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+type Props = {
+    /** Corner/edge the stack anchors to. Default 'bottom-right'. */
+    position?: Position;
+    /** Max toasts shown at once (older ones stay queued in the store). */
+    max?: number;
+};
+declare const SvToaster: import("svelte").Component<Props, {}, "">;
+type SvToaster = ReturnType<typeof SvToaster>;
+export default SvToaster;

package/dist/SvToggleButton.svelte

@@ -4,18 +4,34 @@
    * Parity: Smart `smart-toggle-button`. Controlled via `pressed` + `onChange`.
    */
   import type { Snippet } from 'svelte'
+  import SvField from './SvField.svelte'
+  import { nextEditorId, type SvEditorProps } from './editor-contract'
   import { createToggle } from './createToggle.svelte'
 
-  type Props = {
+  type Props = SvEditorProps & {
     pressed?: boolean
     onChange?: (pressed: boolean) => void
-    disabled?: boolean
-    size?: 'sm' | 'md' | 'lg'
-    ariaLabel?: string
     children?: Snippet
   }
 
-  let { pressed = false, onChange, disabled = false, size = 'md', ariaLabel, children }: Props = $props()
+  let {
+    pressed = false,
+    onChange,
+    disabled = false,
+    size = 'md',
+    ariaLabel,
+    invalid = false,
+    required = false,
+    error,
+    label,
+    hint,
+    dir,
+    id,
+    children,
+  }: Props = $props()
+
+  const autoId = nextEditorId('sv-toggle')
+  const uid = $derived(id ?? autoId)
 
   // The styled toggle is just a renderer over the headless core.
   const t = createToggle({
@@ -23,16 +39,24 @@
     onChange: (v) => onChange?.(v),
     disabled: () => disabled,
     ariaLabel: () => ariaLabel,
+    id: () => uid,
+    invalid: () => invalid,
+    required: () => required,
+    error: () => error,
+    hint: () => hint,
   })
 </script>
 
-<button
-  class="sv-toggle sv-toggle--{size}"
-  class:is-pressed={pressed}
-  {...t.buttonProps()}
->
-  {#if children}{@render children()}{/if}
-</button>
+<SvField id={uid} {label} {hint} {error} {required} {dir}>
+  <button
+    class="sv-toggle sv-toggle--{size}"
+    class:is-pressed={pressed}
+    class:is-invalid={invalid}
+    {...t.buttonProps()}
+  >
+    {#if children}{@render children()}{/if}
+  </button>
+</SvField>
 
 <style>
   .sv-toggle {
@@ -53,5 +77,6 @@
     background: var(--_accent); color: var(--sg-on-accent, #fff); border-color: var(--_accent);
   }
   .sv-toggle[disabled] { opacity: 0.55; cursor: not-allowed; }
+  .sv-toggle.is-invalid { border-color: var(--sg-danger, #dc2626); }
   .sv-toggle:focus-visible { outline: 2px solid var(--sg-focus-ring, var(--_accent)); outline-offset: 2px; }
 </style>

package/dist/SvToggleButton.svelte.d.ts

@@ -3,12 +3,10 @@
    * Parity: Smart `smart-toggle-button`. Controlled via `pressed` + `onChange`.
    */
 import type { Snippet } from 'svelte';
-type Props = {
+import { type SvEditorProps } from './editor-contract';
+type Props = SvEditorProps & {
     pressed?: boolean;
     onChange?: (pressed: boolean) => void;
-    disabled?: boolean;
-    size?: 'sm' | 'md' | 'lg';
-    ariaLabel?: string;
     children?: Snippet;
 };
 declare const SvToggleButton: import("svelte").Component<Props, {}, "">;

package/dist/SvTooltip.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+  /**
+   * SvTooltip - a small hover/focus tooltip anchored to its child, portalled to
+   * <body> so it is never clipped. Shows after a short delay, hides on leave /
+   * blur / Escape, and is wired via `aria-describedby` (role="tooltip"). Respects
+   * keyboard users (opens on focus).
+   *
+   * ```svelte
+   * <SvTooltip text="Delete row"><button aria-label="Delete">🗑</button></SvTooltip>
+   * ```
+   */
+  import type { Snippet } from 'svelte'
+  import { portalToBody, popIn } from './popover'
+  import { nextEditorId } from './editor-contract'
+
+  type Props = {
+    text: string
+    placement?: 'top' | 'bottom'
+    /** Show delay in ms. Default 300. */
+    delay?: number
+    disabled?: boolean
+    children?: Snippet
+  }
+
+  let { text, placement = 'top', delay = 300, disabled = false, children }: Props = $props()
+
+  let anchorEl = $state<HTMLSpanElement | null>(null)
+  let tipEl = $state<HTMLDivElement | null>(null)
+  let open = $state(false)
+  let pos = $state({ top: 0, left: 0, arrowX: 12 })
+  const tid = nextEditorId('sv-tip')
+  let showTimer: ReturnType<typeof setTimeout> | undefined
+
+  function place() {
+    if (!anchorEl) return
+    const r = anchorEl.getBoundingClientRect()
+    const tipH = tipEl?.offsetHeight ?? 30
+    const tipW = tipEl?.offsetWidth ?? 0
+    const top = placement === 'top' ? r.top - tipH - 8 : r.bottom + 8
+    let left = r.left + r.width / 2 - tipW / 2
+    left = Math.max(4, Math.min(left, window.innerWidth - tipW - 4))
+    // Keep the arrow under the anchor's center even when the tip is clamped.
+    const arrowX = Math.max(10, Math.min(tipW - 10, r.left + r.width / 2 - left))
+    pos = { top, left, arrowX }
+  }
+
+  function show() {
+    if (disabled || !text) return
+    clearTimeout(showTimer)
+    showTimer = setTimeout(() => { open = true; queueMicrotask(place) }, delay)
+  }
+  function hide() { clearTimeout(showTimer); open = false }
+
+  $effect(() => {
+    if (!open) return
+    place()
+    const rp = () => place()
+    window.addEventListener('scroll', rp, true)
+    window.addEventListener('resize', rp)
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') hide() }
+    document.addEventListener('keydown', onKey)
+    return () => {
+      window.removeEventListener('scroll', rp, true)
+      window.removeEventListener('resize', rp)
+      document.removeEventListener('keydown', onKey)
+    }
+  })
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<span
+  bind:this={anchorEl}
+  class="sv-tip__anchor"
+  aria-describedby={open ? tid : undefined}
+  onpointerenter={show}
+  onpointerleave={hide}
+  onfocusin={show}
+  onfocusout={hide}
+>
+  {@render children?.()}
+</span>
+
+{#if open}
+  <div
+    bind:this={tipEl}
+    id={tid}
+    class="sv-tip"
+    role="tooltip"
+    use:portalToBody
+    use:popIn={{ up: placement === 'top', duration: 110, scale: 0.9 }}
+    class:sv-tip--bottom={placement === 'bottom'}
+    style:position="fixed"
+    style:top={`${pos.top}px`}
+    style:left={`${pos.left}px`}
+    style:--tip-arrow-x={`${pos.arrowX}px`}
+  >{text}<span class="sv-tip__arrow" aria-hidden="true"></span></div>
+{/if}
+
+<style>
+  .sv-tip__anchor { display: inline-flex; }
+  :global(.sv-tip) {
+    z-index: 2147483647; pointer-events: none; position: relative;
+    max-width: 240px; padding: 5px 9px; font-size: 12px; line-height: 1.4; font-weight: 500;
+    background: var(--sg-fg, #0f172a); color: var(--sg-bg, #fff);
+    border-radius: 6px; box-shadow: 0 6px 20px -6px rgba(15, 23, 42, 0.5); white-space: normal;
+  }
+  :global(.sv-tip__arrow) {
+    position: absolute; inset-inline-start: var(--tip-arrow-x, 12px); width: 8px; height: 8px;
+    background: var(--sg-fg, #0f172a); transform: translateX(-50%) rotate(45deg);
+  }
+  :global(.sv-tip:not(.sv-tip--bottom) .sv-tip__arrow) { bottom: -3px; }
+  :global(.sv-tip--bottom .sv-tip__arrow) { top: -3px; }
+</style>

package/dist/SvTooltip.svelte.d.ts

@@ -0,0 +1,22 @@
+/**
+   * SvTooltip - a small hover/focus tooltip anchored to its child, portalled to
+   * <body> so it is never clipped. Shows after a short delay, hides on leave /
+   * blur / Escape, and is wired via `aria-describedby` (role="tooltip"). Respects
+   * keyboard users (opens on focus).
+   *
+   * ```svelte
+   * <SvTooltip text="Delete row"><button aria-label="Delete">🗑</button></SvTooltip>
+   * ```
+   */
+import type { Snippet } from 'svelte';
+type Props = {
+    text: string;
+    placement?: 'top' | 'bottom';
+    /** Show delay in ms. Default 300. */
+    delay?: number;
+    disabled?: boolean;
+    children?: Snippet;
+};
+declare const SvTooltip: import("svelte").Component<Props, {}, "">;
+type SvTooltip = ReturnType<typeof SvTooltip>;
+export default SvTooltip;

package/dist/SvTour.svelte

@@ -0,0 +1,151 @@
+<script lang="ts" module>
+  export type { TourStep } from './ui-app.types'
+</script>
+
+<script lang="ts">
+  /**
+   * SvTour - a guided product tour / onboarding: it spotlights each step's target
+   * element (a dimmed backdrop with a cut-out), anchors a popover with the step's
+   * title/content near it, and steps Back / Next / Done. Arrow keys navigate,
+   * Escape skips. Portalled to <body>. Controlled via `open`.
+   *
+   * ```svelte
+   * <SvTour bind:open steps={[
+   *   { target: '#new-btn', title: 'Create', content: 'Start here.' },
+   *   { target: '.grid', title: 'Your data', content: 'It shows up here.' },
+   * ]} />
+   * ```
+   */
+  import type { TourStep } from './ui-app.types'
+  import { portalToBody } from './popover'
+
+  type Props = {
+    steps: ReadonlyArray<TourStep>
+    open?: boolean
+    onFinish?: () => void
+    onSkip?: () => void
+    onStep?: (index: number) => void
+  }
+
+  let { steps, open = $bindable(false), onFinish, onSkip, onStep }: Props = $props()
+
+  let index = $state(0)
+  let rect = $state<DOMRect | null>(null)
+  const step = $derived(steps[index])
+
+  function targetEl(): HTMLElement | null {
+    const t = step?.target
+    if (!t) return null
+    return typeof t === 'string' ? document.querySelector<HTMLElement>(t) : t
+  }
+  function measure() {
+    const el = targetEl()
+    el?.scrollIntoView({ block: 'center', behavior: 'smooth' })
+    rect = el ? el.getBoundingClientRect() : null
+  }
+  function goto(i: number) {
+    index = Math.max(0, Math.min(i, steps.length - 1))
+    onStep?.(index)
+    queueMicrotask(measure)
+  }
+  function next() { if (index >= steps.length - 1) finish(); else goto(index + 1) }
+  function back() { goto(index - 1) }
+  function finish() { open = false; onFinish?.() }
+  function skip() { open = false; onSkip?.() }
+
+  $effect(() => {
+    if (!open) return
+    index = 0
+    queueMicrotask(measure)
+    const reflow = () => measure()
+    window.addEventListener('resize', reflow)
+    window.addEventListener('scroll', reflow, true)
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') { e.preventDefault(); skip() }
+      else if (e.key === 'ArrowRight') { e.preventDefault(); next() }
+      else if (e.key === 'ArrowLeft') { e.preventDefault(); back() }
+    }
+    window.addEventListener('keydown', onKey)
+    return () => {
+      window.removeEventListener('resize', reflow)
+      window.removeEventListener('scroll', reflow, true)
+      window.removeEventListener('keydown', onKey)
+    }
+  })
+
+  const POP_W = 300
+  const pop = $derived.by(() => {
+    if (typeof window === 'undefined' || !rect) {
+      return { top: '50%', left: '50%', transform: 'translate(-50%, -50%)', place: 'center' as const }
+    }
+    const left = Math.max(12, Math.min(rect.left, window.innerWidth - POP_W - 12))
+    const below = window.innerHeight - rect.bottom
+    if (below > 190) return { top: `${rect.bottom + 10}px`, left: `${left}px`, transform: 'none', place: 'bottom' as const }
+    return { top: `${rect.top - 10}px`, left: `${left}px`, transform: 'translateY(-100%)', place: 'top' as const }
+  })
+</script>
+
+{#if open && step}
+  <div class="sv-tour" use:portalToBody>
+    {#if rect}
+      <div
+        class="sv-tour__spot"
+        style:top={`${rect.top - 6}px`}
+        style:left={`${rect.left - 6}px`}
+        style:width={`${rect.width + 12}px`}
+        style:height={`${rect.height + 12}px`}
+      ></div>
+    {:else}
+      <div class="sv-tour__backdrop"></div>
+    {/if}
+
+    <div
+      class="sv-tour__pop sv-tour__pop--{pop.place}"
+      style:top={pop.top}
+      style:left={pop.left}
+      style:transform={pop.transform}
+      role="dialog"
+      aria-modal="true"
+      aria-label={step.title ?? 'Tour step'}
+    >
+      {#if step.title}<div class="sv-tour__title">{step.title}</div>{/if}
+      <div class="sv-tour__body">{step.content}</div>
+      <div class="sv-tour__foot">
+        <span class="sv-tour__count">{index + 1} / {steps.length}</span>
+        <div class="sv-tour__btns">
+          <button type="button" class="sv-tour__skip" onclick={skip}>Skip</button>
+          {#if index > 0}<button type="button" class="sv-tour__back" onclick={back}>Back</button>{/if}
+          <button type="button" class="sv-tour__next" onclick={next}>{index === steps.length - 1 ? 'Done' : 'Next'}</button>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  :global(.sv-tour) { position: fixed; inset: 0; z-index: 2147483000; }
+  :global(.sv-tour__backdrop) { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); }
+  :global(.sv-tour__spot) {
+    position: fixed; border-radius: 8px; pointer-events: none;
+    box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.55); transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+  }
+  :global(.sv-tour__pop) {
+    position: fixed; z-index: 1; width: 300px; max-width: calc(100vw - 24px);
+    background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
+    border: 1px solid var(--sg-border, #e2e8f0); border-radius: 12px; padding: 14px 16px;
+    box-shadow: 0 20px 48px -16px rgba(15, 23, 42, 0.5);
+    animation: sv-tour-in 0.16s cubic-bezier(0.16, 1, 0.3, 1) both;
+  }
+  @keyframes sv-tour-in { from { opacity: 0; transform: translateY(4px) } }
+  :global(.sv-tour__pop--top) { animation: none; }
+  :global(.sv-tour__title) { font-size: 14.5px; font-weight: 650; margin-bottom: 4px; }
+  :global(.sv-tour__body) { font-size: 13px; line-height: 1.55; color: var(--sg-fg, #334155); }
+  :global(.sv-tour__foot) { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
+  :global(.sv-tour__count) { font-size: 12px; color: var(--sg-muted, #94a3b8); font-variant-numeric: tabular-nums; }
+  :global(.sv-tour__btns) { display: flex; gap: 6px; }
+  :global(.sv-tour__skip), :global(.sv-tour__back), :global(.sv-tour__next) {
+    font: inherit; font-size: 12.5px; padding: 5px 12px; border-radius: 7px; cursor: pointer; border: 1px solid var(--sg-border, #cbd5e1); background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a);
+  }
+  :global(.sv-tour__skip) { border-color: transparent; background: none; color: var(--sg-muted, #64748b); }
+  :global(.sv-tour__next) { background: var(--sg-accent, #2563eb); border-color: var(--sg-accent, #2563eb); color: var(--sg-on-accent, #fff); }
+</style>

package/dist/SvTour.svelte.d.ts

@@ -0,0 +1,25 @@
+export type { TourStep } from './ui-app.types';
+/**
+   * SvTour - a guided product tour / onboarding: it spotlights each step's target
+   * element (a dimmed backdrop with a cut-out), anchors a popover with the step's
+   * title/content near it, and steps Back / Next / Done. Arrow keys navigate,
+   * Escape skips. Portalled to <body>. Controlled via `open`.
+   *
+   * ```svelte
+   * <SvTour bind:open steps={[
+   *   { target: '#new-btn', title: 'Create', content: 'Start here.' },
+   *   { target: '.grid', title: 'Your data', content: 'It shows up here.' },
+   * ]} />
+   * ```
+   */
+import type { TourStep } from './ui-app.types';
+type Props = {
+    steps: ReadonlyArray<TourStep>;
+    open?: boolean;
+    onFinish?: () => void;
+    onSkip?: () => void;
+    onStep?: (index: number) => void;
+};
+declare const SvTour: import("svelte").Component<Props, {}, "open">;
+type SvTour = ReturnType<typeof SvTour>;
+export default SvTour;