@svadmin/lite 0.25.7 → 0.27.0

package/dist/components/LiteSafeDeleteConfirm.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  export interface LiteDeleteImpact {
+    label: string;
+    count?: number;
+    description?: string;
+  }
+
+  interface Props {
+    title?: string;
+    description?: string;
+    impactItems?: LiteDeleteImpact[];
+    action: string;
+    method?: 'POST' | 'post';
+    confirmLabel?: string;
+    cancelHref?: string;
+    cancelLabel?: string;
+    confirmationText?: string;
+    name?: string;
+    class?: string;
+  }
+
+  let {
+    title = 'Delete this record?',
+    description = 'This action cannot be undone. Review the impact before continuing.',
+    impactItems = [],
+    action,
+    method = 'POST',
+    confirmLabel = 'Delete permanently',
+    cancelHref,
+    cancelLabel = 'Cancel',
+    confirmationText,
+    name = 'confirm',
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<section class="lite-safe-delete lite-card {className}" aria-label={title}>
+  <header>
+    <h2>{title}</h2>
+    <p>{description}</p>
+  </header>
+
+  {#if impactItems.length > 0}
+    <ul class="lite-safe-delete-impact">
+      {#each impactItems as item (item.label)}
+        <li>
+          <strong>{item.label}</strong>
+          {#if typeof item.count === 'number'}<span class="lite-safe-delete-count">{item.count}</span>{/if}
+          {#if item.description}<span class="lite-safe-delete-desc">{item.description}</span>{/if}
+        </li>
+      {/each}
+    </ul>
+  {/if}
+
+  <form method={method} action={action}>
+    {#if confirmationText}
+      <label for="lite-delete-confirmation">
+        Type <strong>{confirmationText}</strong> to confirm
+      </label>
+      <input id="lite-delete-confirmation" name={name} autocomplete="off" required />
+    {/if}
+    <div class="lite-safe-delete-actions">
+      <button type="submit" class="lite-safe-delete-danger">{confirmLabel}</button>
+      {#if cancelHref}<a href={cancelHref}>{cancelLabel}</a>{/if}
+    </div>
+  </form>
+</section>
+
+<style>
+  .lite-safe-delete { padding: 16px; border-color: #ffd8d2; }
+  .lite-safe-delete header h2 { margin: 0; color: #1d2129; font-size: 16px; }
+  .lite-safe-delete header p { margin: 6px 0 12px; color: #4e5969; font-size: 12px; line-height: 1.5; }
+  .lite-safe-delete-impact { margin: 0 0 12px; padding: 0; list-style: none; }
+  .lite-safe-delete-impact li { display: flex; align-items: baseline; padding: 7px 9px; border: 1px solid #ffe4e0; border-radius: 4px; background: #fff7f6; color: #4e5969; font-size: 12px; }
+  .lite-safe-delete-impact li > * + * { margin-left: 6px; }
+  .lite-safe-delete-impact li + li { margin-top: 6px; }
+  .lite-safe-delete-impact strong { color: #1d2129; }
+  .lite-safe-delete-count { padding: 1px 5px; border-radius: 999px; background: #f53f3f; color: #fff; font-size: 11px; }
+  .lite-safe-delete-desc { color: #86909c; }
+  .lite-safe-delete label { display: block; margin-bottom: 5px; color: #4e5969; font-size: 12px; }
+  .lite-safe-delete input { width: 100%; box-sizing: border-box; padding: 7px 9px; border: 1px solid #e5e6eb; border-radius: 4px; font: inherit; font-size: 13px; }
+  .lite-safe-delete-actions { display: flex; align-items: center; margin-top: 12px; }
+  .lite-safe-delete-actions > * + * { margin-left: 12px; }
+  .lite-safe-delete-danger { padding: 7px 12px; border: 0; border-radius: 4px; background: #f53f3f; color: #fff; font-size: 12px; cursor: pointer; }
+  .lite-safe-delete-actions a { color: #4e5969; font-size: 12px; }
+</style>

package/dist/components/LiteSafeDeleteConfirm.svelte.d.ts

@@ -0,0 +1,21 @@
+export interface LiteDeleteImpact {
+    label: string;
+    count?: number;
+    description?: string;
+}
+interface Props {
+    title?: string;
+    description?: string;
+    impactItems?: LiteDeleteImpact[];
+    action: string;
+    method?: 'POST' | 'post';
+    confirmLabel?: string;
+    cancelHref?: string;
+    cancelLabel?: string;
+    confirmationText?: string;
+    name?: string;
+    class?: string;
+}
+declare const LiteSafeDeleteConfirm: import("svelte").Component<Props, {}, "">;
+type LiteSafeDeleteConfirm = ReturnType<typeof LiteSafeDeleteConfirm>;
+export default LiteSafeDeleteConfirm;

package/dist/components/LiteSensitiveDataMask.svelte

@@ -1,8 +1,17 @@
 <script lang="ts">
   interface Props {
     value?: string | number | null;
-    type?: 'phone' | 'id-card' | 'email' | 'bank-card' | 'secret' | 'custom';
-    /** Caller class merged with the built-in class list. */
+    type?:
+      | 'phone'
+      | 'mobile'
+      | 'id-card'
+      | 'idCard'
+      | 'email'
+      | 'bank-card'
+      | 'bankCard'
+      | 'name'
+      | 'secret'
+      | 'custom';
     class?: string;
   }
 
@@ -14,13 +23,36 @@
 
   const rawString = $derived(String(value ?? ''));
 
+  function maskName(val: string): string {
+    const trimmed = val.trim();
+    if (!trimmed) return '—';
+    if (trimmed.includes(' ')) {
+      return trimmed
+        .split(/\s+/)
+        .map((part) => (part.length <= 1 ? '*' : `${part[0]}${'*'.repeat(Math.max(1, part.length - 2))}${part.length > 2 ? part.slice(-1) : '*'}`))
+        .join(' ');
+    }
+    const len = trimmed.length;
+    if (len <= 1) return '*';
+    if (len === 2) return `${trimmed[0]}*`;
+    if (len === 3) return `${trimmed[0]}*${trimmed[2]}`;
+    return `${trimmed[0]}${'*'.repeat(len - 2)}${trimmed.slice(-1)}`;
+  }
+
   function mask(val: string, maskType: string): string {
     if (!val) return '—';
     switch (maskType) {
       case 'phone':
+      case 'mobile':
         return val.length >= 7 ? `${val.slice(0, 3)}****${val.slice(-4)}` : '****';
       case 'id-card':
+      case 'idCard':
         return val.length >= 10 ? `${val.slice(0, 6)}********${val.slice(-4)}` : '********';
+      case 'bank-card':
+      case 'bankCard':
+        return val.length >= 8 ? `${val.slice(0, 4)} **** **** ${val.slice(-4)}` : '**** ****';
+      case 'name':
+        return maskName(val);
       case 'email': {
         const parts = val.split('@');
         const [name, domain] = parts;

package/dist/components/LiteSensitiveDataMask.svelte.d.ts

@@ -1,7 +1,6 @@
 interface Props {
     value?: string | number | null;
-    type?: 'phone' | 'id-card' | 'email' | 'bank-card' | 'secret' | 'custom';
-    /** Caller class merged with the built-in class list. */
+    type?: 'phone' | 'mobile' | 'id-card' | 'idCard' | 'email' | 'bank-card' | 'bankCard' | 'name' | 'secret' | 'custom';
     class?: string;
 }
 declare const LiteSensitiveDataMask: import("svelte").Component<Props, {}, "">;

package/dist/components/LiteSignaturePad.svelte

@@ -4,6 +4,7 @@
   interface Props {
     name?: string;
     value?: string;
+    alt?: string;
     label?: string;
     formAction?: string;
     disabled?: boolean;
@@ -13,6 +14,7 @@
   let {
     name = 'signature',
     value = '',
+    alt = 'Signature preview',
     label = 'Electronic Signature',
     formAction = '',
     disabled = false,
@@ -28,7 +30,7 @@
 
   {#if value}
     <div class="sv-lite-sig-preview">
-      <img src={value} alt="Signature Preview" class="sv-lite-sig-img" />
+      <img src={value} alt={alt} class="sv-lite-sig-img" />
     </div>
   {:else}
     <div class="sv-lite-sig-empty">

package/dist/components/LiteSignaturePad.svelte.d.ts

@@ -1,6 +1,7 @@
 interface Props {
     name?: string;
     value?: string;
+    alt?: string;
     label?: string;
     formAction?: string;
     disabled?: boolean;

package/dist/components/LiteStepWizard.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  export interface LiteStepItem {
+    id: string;
+    title: string;
+    description?: string;
+  }
+
+  interface Props {
+    steps: LiteStepItem[];
+    currentStep?: number;
+    action?: string;
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    steps = [],
+    currentStep = 0,
+    action,
+    class: className = '',
+    children,
+  }: Props = $props();
+</script>
+
+<div
+  class="lite-step-wizard {className}"
+  data-svadmin-component="LiteStepWizard"
+  data-current-step={currentStep}
+>
+  <nav class="lite-steps-nav" aria-label="Wizard Steps">
+    <ol class="lite-steps-list">
+      {#each steps as step, idx (step.id)}
+        {@const isDone = idx < currentStep}
+        {@const isCurrent = idx === currentStep}
+        <li
+          class="lite-step-item"
+          class:lite-step-done={isDone}
+          class:lite-step-active={isCurrent}
+        >
+          <span class="lite-step-badge">
+            {#if isDone}✓{:else}{idx + 1}{/if}
+          </span>
+          <span class="lite-step-info">
+            <span class="lite-step-title">{step.title}</span>
+            {#if step.description}
+              <span class="lite-step-desc">{step.description}</span>
+            {/if}
+          </span>
+          {#if idx < steps.length - 1}
+            <span class="lite-step-divider" aria-hidden="true"></span>
+          {/if}
+        </li>
+      {/each}
+    </ol>
+  </nav>
+
+  <div class="lite-step-body">
+    {#if children}{@render children()}{/if}
+  </div>
+
+  {#if action}
+    <form {action} method="POST" class="lite-step-actions">
+      <input type="hidden" name="currentStep" value={currentStep} />
+      {#if currentStep > 0}
+        <button type="submit" name="direction" value="prev" class="lite-btn-secondary">上一步</button>
+      {/if}
+      <button type="submit" name="direction" value="next" class="lite-btn-primary">
+        {currentStep >= steps.length - 1 ? '提交完成' : '下一步'}
+      </button>
+    </form>
+  {/if}
+</div>
+
+<style>
+  .lite-step-wizard { border: 1px solid #e5e6eb; border-radius: 8px; background: #ffffff; padding: 20px; }
+  .lite-steps-nav { margin-bottom: 24px; border-bottom: 1px solid #f2f3f5; padding-bottom: 16px; }
+  .lite-steps-list { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
+  .lite-step-item { display: flex; align-items: center; flex: 1; }
+  .lite-step-item > * + * { margin-left: 8px; }
+  .lite-step-badge {
+    width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center;
+    justify-content: center; font-size: 12px; font-weight: 700; background: #f2f3f5; color: #4e5969;
+  }
+  .lite-step-done .lite-step-badge { background: #00b42a; color: #fff; }
+  .lite-step-active .lite-step-badge { background: #165dff; color: #fff; }
+  .lite-step-info { display: flex; flex-direction: column; }
+  .lite-step-title { font-size: 13px; font-weight: 600; color: #1d2129; }
+  .lite-step-desc { font-size: 11px; color: #86909c; }
+  .lite-step-divider { flex: 1; height: 1px; background: #e5e6eb; margin: 0 12px; }
+  .lite-step-done .lite-step-divider { background: #00b42a; }
+  .lite-step-body { min-height: 120px; }
+  .lite-step-actions { display: flex; justify-content: flex-end; margin-top: 20px; border-top: 1px solid #f2f3f5; padding-top: 16px; }
+  .lite-step-actions > * + * { margin-left: 12px; }
+  .lite-btn-primary { padding: 6px 16px; background: #165dff; color: #fff; border: none; border-radius: 4px; font-size: 12px; cursor: pointer; }
+  .lite-btn-secondary { padding: 6px 16px; background: #f2f3f5; color: #4e5969; border: 1px solid #e5e6eb; border-radius: 4px; font-size: 12px; cursor: pointer; }
+</style>

package/dist/components/LiteStepWizard.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+export interface LiteStepItem {
+    id: string;
+    title: string;
+    description?: string;
+}
+interface Props {
+    steps: LiteStepItem[];
+    currentStep?: number;
+    action?: string;
+    class?: string;
+    children?: Snippet;
+}
+declare const LiteStepWizard: import("svelte").Component<Props, {}, "">;
+type LiteStepWizard = ReturnType<typeof LiteStepWizard>;
+export default LiteStepWizard;

package/dist/components/LiteTaskCenter.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">
+  export type LiteTaskStatus = 'running' | 'pending' | 'completed' | 'failed' | 'cancelled';
+
+  export interface LiteBackgroundTask {
+    id: string;
+    title: string;
+    status: LiteTaskStatus;
+    progress?: number;
+    processed?: number;
+    total?: number;
+    error?: string;
+    downloadHref?: string;
+    cancelAction?: string;
+    retryAction?: string;
+  }
+
+  interface Props {
+    tasks?: LiteBackgroundTask[];
+    title?: string;
+    emptyText?: string;
+    clearAction?: string;
+    clearLabel?: string;
+    class?: string;
+  }
+
+  let {
+    tasks = [],
+    title = 'Background tasks',
+    emptyText = 'No background tasks',
+    clearAction,
+    clearLabel = 'Clear completed',
+    class: className = '',
+  }: Props = $props();
+
+  const completedCount = $derived(tasks.filter((task) => task.status === 'completed').length);
+
+  function statusLabel(status: LiteTaskStatus): string {
+    switch (status) {
+      case 'running': return 'Running';
+      case 'pending': return 'Pending';
+      case 'completed': return 'Completed';
+      case 'failed': return 'Failed';
+      case 'cancelled': return 'Cancelled';
+    }
+  }
+
+  function boundedProgress(task: LiteBackgroundTask): number {
+    if (typeof task.progress === 'number') return Math.max(0, Math.min(100, task.progress));
+    if (task.total && task.total > 0 && typeof task.processed === 'number') {
+      return Math.max(0, Math.min(100, Math.round((task.processed / task.total) * 100)));
+    }
+    return task.status === 'completed' ? 100 : 0;
+  }
+</script>
+
+<section class="lite-task-center lite-card {className}" aria-label={title}>
+  <header>
+    <div>
+      <h2>{title}</h2>
+      <p>{tasks.length} task{tasks.length === 1 ? '' : 's'}{completedCount ? ` · ${completedCount} completed` : ''}</p>
+    </div>
+    {#if clearAction && completedCount > 0}
+      <form method="POST" action={clearAction}>
+        <button type="submit" class="lite-task-secondary">{clearLabel}</button>
+      </form>
+    {/if}
+  </header>
+
+  {#if tasks.length === 0}
+    <p class="lite-task-empty" role="status">{emptyText}</p>
+  {:else}
+    <table class="lite-table">
+      <thead>
+        <tr>
+          <th>Task</th>
+          <th>Status</th>
+          <th>Progress</th>
+          <th>Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        {#each tasks as task (task.id)}
+          <tr data-task-id={task.id} data-status={task.status}>
+            <td>
+              <strong>{task.title}</strong>
+              {#if task.error}<span class="lite-task-error">{task.error}</span>{/if}
+            </td>
+            <td><span class="lite-task-status" data-status={task.status}>{statusLabel(task.status)}</span></td>
+            <td>
+              <progress max="100" value={boundedProgress(task)} aria-label={`${task.title} progress`}></progress>
+              <span class="lite-task-progress-text">
+                {boundedProgress(task)}%{typeof task.processed === 'number' && typeof task.total === 'number'
+                  ? ` · ${task.processed} / ${task.total}`
+                  : ''}
+              </span>
+            </td>
+            <td class="lite-task-actions">
+              {#if task.downloadHref}<a href={task.downloadHref}>Download</a>{/if}
+              {#if task.retryAction}
+                <form method="POST" action={task.retryAction}><button type="submit" class="lite-task-link">Retry</button></form>
+              {/if}
+              {#if task.cancelAction && (task.status === 'running' || task.status === 'pending')}
+                <form method="POST" action={task.cancelAction}><button type="submit" class="lite-task-link">Cancel</button></form>
+              {/if}
+            </td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  {/if}
+</section>
+
+<style>
+  .lite-task-center { padding: 16px; }
+  .lite-task-center header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; }
+  .lite-task-center header > form { margin-left: 12px; }
+  .lite-task-center header h2 { margin: 0; color: #1d2129; font-size: 16px; }
+  .lite-task-center header p { margin: 4px 0 0; color: #4e5969; font-size: 12px; }
+  .lite-task-empty { margin: 0; padding: 20px; color: #86909c; text-align: center; }
+  .lite-task-error { display: block; margin-top: 3px; color: #f53f3f; font-size: 11px; }
+  .lite-task-status { display: inline-block; padding: 2px 6px; border-radius: 999px; background: #f2f3f5; color: #4e5969; font-size: 11px; }
+  .lite-task-status[data-status='running'] { background: #e8f3ff; color: #165dff; }
+  .lite-task-status[data-status='pending'] { background: #fff7e8; color: #d25f00; }
+  .lite-task-status[data-status='completed'] { background: #e8ffea; color: #00b42a; }
+  .lite-task-status[data-status='failed'] { background: #ffece8; color: #f53f3f; }
+  .lite-task-status[data-status='cancelled'] { background: #f2f3f5; color: #86909c; }
+  .lite-task-center progress { width: 100%; height: 6px; }
+  .lite-task-progress-text { display: block; margin-top: 3px; color: #86909c; font-size: 11px; }
+  .lite-task-actions { white-space: nowrap; }
+  .lite-task-actions form { display: inline; }
+  .lite-task-link { padding: 0; border: 0; background: none; color: #165dff; font: inherit; font-size: 12px; cursor: pointer; }
+  .lite-task-secondary { padding: 5px 9px; border: 1px solid #e5e6eb; border-radius: 4px; background: #fff; color: #4e5969; font-size: 11px; cursor: pointer; }
+</style>

package/dist/components/LiteTaskCenter.svelte.d.ts

@@ -0,0 +1,24 @@
+export type LiteTaskStatus = 'running' | 'pending' | 'completed' | 'failed' | 'cancelled';
+export interface LiteBackgroundTask {
+    id: string;
+    title: string;
+    status: LiteTaskStatus;
+    progress?: number;
+    processed?: number;
+    total?: number;
+    error?: string;
+    downloadHref?: string;
+    cancelAction?: string;
+    retryAction?: string;
+}
+interface Props {
+    tasks?: LiteBackgroundTask[];
+    title?: string;
+    emptyText?: string;
+    clearAction?: string;
+    clearLabel?: string;
+    class?: string;
+}
+declare const LiteTaskCenter: import("svelte").Component<Props, {}, "">;
+type LiteTaskCenter = ReturnType<typeof LiteTaskCenter>;
+export default LiteTaskCenter;

package/dist/components/LiteTextDiffViewer.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+  interface Props {
+    oldText?: string;
+    newText?: string;
+    oldTitle?: string;
+    newTitle?: string;
+    class?: string;
+  }
+
+  let {
+    oldText = '',
+    newText = '',
+    oldTitle = 'Baseline',
+    newTitle = 'Current',
+    class: className = '',
+  }: Props = $props();
+
+  interface DiffEntry {
+    type: 'same' | 'add' | 'del';
+    lineNo: number;
+    text: string;
+  }
+
+  const diffEntries = $derived.by<DiffEntry[]>(() => {
+    const oldLines = oldText.split(/\r?\n/u);
+    const newLines = newText.split(/\r?\n/u);
+    const result: DiffEntry[] = [];
+
+    let lineCounter = 1;
+    let i = 0;
+    let j = 0;
+
+    while (i < oldLines.length && j < newLines.length) {
+      if (oldLines[i] === newLines[j]) {
+        result.push({ type: 'same', lineNo: lineCounter++, text: oldLines[i] ?? '' });
+        i++;
+        j++;
+      } else {
+        result.push({ type: 'del', lineNo: lineCounter++, text: oldLines[i] ?? '' });
+        result.push({ type: 'add', lineNo: lineCounter++, text: newLines[j] ?? '' });
+        i++;
+        j++;
+      }
+    }
+    while (i < oldLines.length) {
+      result.push({ type: 'del', lineNo: lineCounter++, text: oldLines[i] ?? '' });
+      i++;
+    }
+    while (j < newLines.length) {
+      result.push({ type: 'add', lineNo: lineCounter++, text: newLines[j] ?? '' });
+      j++;
+    }
+
+    return result;
+  });
+</script>
+
+<div
+  class="lite-text-diff {className}"
+  data-svadmin-component="LiteTextDiffViewer"
+  role="region"
+  aria-label="Text Diff"
+>
+  <header class="lite-diff-header">
+    <span class="lite-diff-title">{oldTitle} ↔ {newTitle}</span>
+  </header>
+
+  <div class="lite-diff-body">
+    <table class="lite-diff-table">
+      <tbody>
+        {#each diffEntries as entry (entry.lineNo)}
+          <tr class="lite-diff-row lite-diff-{entry.type}">
+            <td class="lite-diff-line-no">{entry.lineNo}</td>
+            <td class="lite-diff-sign">
+              {#if entry.type === 'add'}+{/if}
+              {#if entry.type === 'del'}-{/if}
+            </td>
+            <td class="lite-diff-content">{entry.text}</td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  </div>
+</div>
+
+<style>
+  .lite-text-diff {
+    border: 1px solid #e5e6eb;
+    border-radius: 6px;
+    background: #ffffff;
+    font-family: monospace;
+    font-size: 12px;
+    overflow: hidden;
+  }
+  .lite-diff-header {
+    padding: 8px 12px;
+    background: #f7f8fa;
+    border-bottom: 1px solid #e5e6eb;
+    font-weight: 600;
+    color: #4e5969;
+  }
+  .lite-diff-body { max-height: 400px; overflow: auto; }
+  .lite-diff-table { width: 100%; border-collapse: collapse; }
+  .lite-diff-row td { padding: 2px 6px; }
+  .lite-diff-line-no { width: 40px; text-align: right; color: #86909c; user-select: none; border-right: 1px solid #f2f3f5; }
+  .lite-diff-sign { width: 20px; text-align: center; font-weight: 700; user-select: none; }
+  .lite-diff-content { white-space: pre-wrap; word-break: break-all; }
+  .lite-diff-add { background: #e8ffea; color: #00b42a; }
+  .lite-diff-del { background: #ffece8; color: #f53f3f; }
+  .lite-diff-same { color: #1d2129; }
+</style>

package/dist/components/LiteTextDiffViewer.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    oldText?: string;
+    newText?: string;
+    oldTitle?: string;
+    newTitle?: string;
+    class?: string;
+}
+declare const LiteTextDiffViewer: import("svelte").Component<Props, {}, "">;
+type LiteTextDiffViewer = ReturnType<typeof LiteTextDiffViewer>;
+export default LiteTextDiffViewer;

package/dist/components/LiteTour.svelte

@@ -3,6 +3,10 @@
     title: string;
     description?: string;
     href?: string;
+    /** SPA target selector; ignored by the server-rendered Lite fallback. */
+    target?: string;
+    /** SPA placement; ignored by the server-rendered Lite fallback. */
+    placement?: 'top' | 'bottom' | 'left' | 'right';
   }
 
   interface Props {

package/dist/components/LiteTour.svelte.d.ts

@@ -2,6 +2,10 @@ interface TourStep {
     title: string;
     description?: string;
     href?: string;
+    /** SPA target selector; ignored by the server-rendered Lite fallback. */
+    target?: string;
+    /** SPA placement; ignored by the server-rendered Lite fallback. */
+    placement?: 'top' | 'bottom' | 'left' | 'right';
 }
 interface Props {
     steps: TourStep[];