@svadmin/ui 0.63.0 → 0.65.0

package/dist/components/GanttChart.svelte

@@ -0,0 +1,144 @@
+<script lang="ts">
+  import { Badge } from './ui/badge/index.js';
+  import { cn } from '../utils.js';
+
+  export interface GanttTask {
+    id: string;
+    title: string;
+    startDay: number; // 0-based offset
+    durationDays: number;
+    progress?: number; // 0 to 100
+    category?: string;
+    assignee?: string;
+    status?: 'planned' | 'in_progress' | 'completed' | 'delayed';
+  }
+
+  interface Props {
+    tasks: GanttTask[];
+    totalDays?: number;
+    dayLabelPrefix?: string;
+    onselecttask?: (task: GanttTask) => void;
+    class?: string;
+  }
+
+  let {
+    tasks = [],
+    totalDays = 14,
+    dayLabelPrefix = 'D',
+    onselecttask,
+    class: className = '',
+  }: Props = $props();
+
+  const days = $derived(
+    Array.from({ length: totalDays }, (_, i) => `${dayLabelPrefix}${i + 1}`)
+  );
+
+  function getStatusBadgeVariant(status?: string) {
+    switch (status) {
+      case 'completed':
+        return 'bg-success/15 text-success border-success/30';
+      case 'delayed':
+        return 'bg-destructive/15 text-destructive border-destructive/30';
+      case 'in_progress':
+        return 'bg-primary/15 text-primary border-primary/30';
+      default:
+        return 'bg-muted text-muted-foreground border-border/40';
+    }
+  }
+
+  function getBarColor(status?: string) {
+    switch (status) {
+      case 'completed':
+        return 'bg-success text-success-foreground';
+      case 'delayed':
+        return 'bg-destructive text-destructive-foreground';
+      default:
+        return 'bg-primary text-primary-foreground';
+    }
+  }
+</script>
+
+<div class={cn('rounded-xl border border-border bg-card p-4 shadow-xs text-xs space-y-3', className)}>
+  <div class="flex items-center justify-between pb-2 border-b border-border/60">
+    <div class="font-semibold text-foreground">
+      Project Gantt Schedule <span class="text-muted-foreground font-normal">({tasks.length} tasks / {totalDays} days)</span>
+    </div>
+  </div>
+
+  <div class="overflow-x-auto rounded-lg border border-border/60">
+    <div class="min-w-[700px]">
+      <!-- Timeline Header -->
+      <div class="flex border-b border-border/60 bg-muted/40 font-semibold text-muted-foreground">
+        <div class="w-56 p-2.5 border-r border-border/60 text-left shrink-0">Task Name</div>
+        <div class="flex-1 flex">
+          {#each days as day (day)}
+            <div class="flex-1 p-2 text-center border-r border-border/40 text-[11px] font-mono last:border-r-0">
+              {day}
+            </div>
+          {/each}
+        </div>
+      </div>
+
+      <!-- Task Rows -->
+      <div class="divide-y divide-border/40">
+        {#each tasks as task (task.id)}
+          {@const leftPct = (task.startDay / totalDays) * 100}
+          {@const widthPct = (task.durationDays / totalDays) * 100}
+          <div
+            role="button"
+            tabindex="0"
+            class="flex items-center hover:bg-muted/20 transition-colors cursor-pointer"
+            onclick={() => onselecttask?.(task)}
+            onkeydown={(e) => { if (e.key === 'Enter') onselecttask?.(task); }}
+          >
+            <!-- Task Info Column -->
+            <div class="w-56 p-2.5 border-r border-border/60 flex items-center justify-between gap-2 shrink-0">
+              <div class="truncate font-medium text-foreground">{task.title}</div>
+              {#if task.status}
+                <Badge variant="outline" class={cn('text-[9px] px-1 py-0 uppercase', getStatusBadgeVariant(task.status))}>
+                  {task.status}
+                </Badge>
+              {/if}
+            </div>
+
+            <!-- Task Bar Grid Area -->
+            <div class="flex-1 relative h-10 flex items-center px-1">
+              <!-- Grid vertical guideline background -->
+              <div class="absolute inset-0 flex pointer-events-none">
+                {#each days as _, idx (idx)}
+                  <div class="flex-1 border-r border-border/20 last:border-r-0"></div>
+                {/each}
+              </div>
+
+              <!-- Bar element -->
+              <div
+                class={cn(
+                  'relative h-6 rounded-md shadow-xs flex items-center justify-between px-2 text-[10px] font-medium overflow-hidden transition-all group hover:brightness-110',
+                  getBarColor(task.status)
+                )}
+                style={`margin-left: ${leftPct}%; width: ${Math.max(widthPct, 4)}%;`}
+              >
+                <!-- Inner progress fill -->
+                {#if task.progress !== undefined}
+                  <div
+                    class="absolute inset-y-0 left-0 bg-foreground/20 pointer-events-none"
+                    style={`width: ${task.progress}%;`}
+                  ></div>
+                {/if}
+
+                <span class="truncate relative z-10">{task.title}</span>
+                {#if task.progress !== undefined}
+                  <span class="relative z-10 text-[9px] opacity-90 font-mono">{task.progress}%</span>
+                {/if}
+              </div>
+            </div>
+          </div>
+        {/each}
+
+        {#if tasks.length === 0}
+          <div class="py-8 text-center text-muted-foreground">No schedule tasks available</div>
+        {/if}
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,20 @@
+export interface GanttTask {
+    id: string;
+    title: string;
+    startDay: number;
+    durationDays: number;
+    progress?: number;
+    category?: string;
+    assignee?: string;
+    status?: 'planned' | 'in_progress' | 'completed' | 'delayed';
+}
+interface Props {
+    tasks: GanttTask[];
+    totalDays?: number;
+    dayLabelPrefix?: string;
+    onselecttask?: (task: GanttTask) => void;
+    class?: string;
+}
+declare const GanttChart: import("svelte").Component<Props, {}, "">;
+type GanttChart = ReturnType<typeof GanttChart>;
+export default GanttChart;

package/dist/components/ImageCropper.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+  import { Button } from './ui/button/index.js';
+  import { RotateCw, ZoomIn, ZoomOut, Crop } from '@lucide/svelte';
+  import { cn } from '../utils.js';
+
+  interface Props {
+    imageUrl: string;
+    aspectRatio?: number;
+    zoom?: number;
+    rotation?: number;
+    oncrop?: (croppedDataUrl: string) => void;
+    oncancel?: () => void;
+    class?: string;
+  }
+
+  let {
+    imageUrl,
+    aspectRatio = 1,
+    zoom = $bindable(1),
+    rotation = $bindable(0),
+    oncrop,
+    oncancel,
+    class: className = '',
+  }: Props = $props();
+
+  let canvasEl = $state<HTMLCanvasElement | null>(null);
+
+  function handleRotate() {
+    rotation = (rotation + 90) % 360;
+  }
+
+  function handleCrop() {
+    if (!canvasEl) return;
+    const img = new Image();
+    img.crossOrigin = 'anonymous';
+    img.onload = () => {
+      const ctx = canvasEl?.getContext('2d');
+      if (!ctx || !canvasEl) return;
+
+      const size = 300;
+      canvasEl.width = size;
+      canvasEl.height = size / aspectRatio;
+
+      ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
+      ctx.save();
+      ctx.translate(canvasEl.width / 2, canvasEl.height / 2);
+      ctx.rotate((rotation * Math.PI) / 180);
+      ctx.scale(zoom, zoom);
+      ctx.drawImage(img, -size / 2, (-size / 2) / aspectRatio, size, size / aspectRatio);
+      ctx.restore();
+
+      const dataUrl = canvasEl.toDataURL('image/png');
+      oncrop?.(dataUrl);
+    };
+    img.src = imageUrl;
+  }
+</script>
+
+<div class={cn('rounded-xl border border-border bg-card p-4 shadow-xs space-y-4 text-xs', className)}>
+  <div class="flex items-center justify-between pb-2 border-b border-border/60">
+    <h4 class="font-semibold text-foreground flex items-center gap-1.5">
+      <Crop class="h-4 w-4 text-primary" />
+      Image Cropper
+    </h4>
+  </div>
+
+  <!-- Crop Viewport -->
+  <div class="relative flex items-center justify-center h-64 w-full rounded-lg bg-muted/40 border border-border/60 overflow-hidden select-none">
+    <div
+      style="transform: scale({zoom}) rotate({rotation}deg); transition: transform 150ms ease;"
+      class="max-h-56 max-w-56 flex items-center justify-center"
+    >
+      <img src={imageUrl} alt="Crop Preview" class="object-contain max-h-56 max-w-56 rounded pointer-events-none" />
+    </div>
+
+    <!-- Aspect Ratio Overlay Grid -->
+    <div
+      style="aspect-ratio: {aspectRatio};"
+      class="absolute w-48 border-2 border-primary/80 rounded pointer-events-none shadow-[0_0_0_9999px_rgba(0,0,0,0.45)]"
+    ></div>
+  </div>
+
+  <!-- Controls Bar -->
+  <div class="flex items-center justify-between gap-3 pt-2">
+    <div class="flex items-center gap-2">
+      <Button
+        variant="outline"
+        size="sm"
+        class="h-7 text-xs gap-1"
+        onclick={() => { zoom = Math.max(0.5, Number((zoom - 0.1).toFixed(1))); }}
+      >
+        <ZoomOut class="h-3 w-3" />
+      </Button>
+      <span class="tabular-nums font-mono text-[11px] text-muted-foreground w-10 text-center">{Math.round(zoom * 100)}%</span>
+      <Button
+        variant="outline"
+        size="sm"
+        class="h-7 text-xs gap-1"
+        onclick={() => { zoom = Math.min(3, Number((zoom + 0.1).toFixed(1))); }}
+      >
+        <ZoomIn class="h-3 w-3" />
+      </Button>
+
+      <Button variant="outline" size="sm" class="h-7 text-xs gap-1 ml-2" onclick={handleRotate}>
+        <RotateCw class="h-3 w-3" />
+        Rotate
+      </Button>
+    </div>
+
+    <div class="flex items-center gap-2">
+      {#if oncancel}
+        <Button variant="outline" size="sm" class="h-7 text-xs" onclick={oncancel}>Cancel</Button>
+      {/if}
+      <Button size="sm" class="h-7 text-xs gap-1" onclick={handleCrop}>
+        Apply Crop
+      </Button>
+    </div>
+  </div>
+
+  <!-- Hidden Working Canvas -->
+  <canvas bind:this={canvasEl} class="hidden"></canvas>
+</div>

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

@@ -0,0 +1,12 @@
+interface Props {
+    imageUrl: string;
+    aspectRatio?: number;
+    zoom?: number;
+    rotation?: number;
+    oncrop?: (croppedDataUrl: string) => void;
+    oncancel?: () => void;
+    class?: string;
+}
+declare const ImageCropper: import("svelte").Component<Props, {}, "zoom" | "rotation">;
+type ImageCropper = ReturnType<typeof ImageCropper>;
+export default ImageCropper;

package/dist/components/ImportWizard.svelte

@@ -0,0 +1,336 @@
+<script lang="ts">
+  import { getResource, captureAdminContext } from '@svadmin/core';
+  import { useTranslation } from '@svadmin/core/i18n';
+  import { parseCSV, toCsv } from '@svadmin/core';
+  import * as Dialog from './ui/dialog/index.js';
+  import { Button } from './ui/button/index.js';
+  import { Progress } from './ui/progress/index.js';
+  import { Badge } from './ui/badge/index.js';
+  import { Upload, ArrowRight, ArrowLeft, AlertCircle, Download, FileSpreadsheet, Loader2 } from '@lucide/svelte';
+
+  interface Props {
+    resourceName: string;
+    open?: boolean;
+    batchSize?: number;
+    onSuccess?: (result: { succeeded: number; failed: number }) => void;
+  }
+
+  let {
+    resourceName,
+    open = $bindable(false),
+    batchSize = 20,
+    onSuccess,
+  }: Props = $props();
+
+  const i18n = useTranslation();
+  const adminContext = captureAdminContext();
+  const resource = $derived(getResource(resourceName));
+  const availableFields = $derived(
+    resource.fields.filter((f) => f.key !== (resource.primaryKey ?? 'id') && f.showInForm !== false)
+  );
+
+  let currentStep = $state<1 | 2 | 3>(1);
+  let fileName = $state('');
+  let rawHeaders = $state<string[]>([]);
+  let rawRows = $state<string[][]>([]);
+  let columnMapping = $state<Record<string, string>>({}); // header -> fieldKey or ''
+
+  let isImporting = $state(false);
+  let processedCount = $state(0);
+  let succeededCount = $state(0);
+  let failedRecords = $state<Array<{ row: Record<string, unknown>; error: string }>>([]);
+
+  const progressPercent = $derived(
+    rawRows.length > 0 ? Math.min(100, Math.round((processedCount / rawRows.length) * 100)) : 0
+  );
+
+  async function handleFileSelect(selectedFile: File) {
+    fileName = selectedFile.name;
+    const text = await selectedFile.text();
+    const cleanText = text.charCodeAt(0) === 0xfeff ? text.slice(1) : text;
+
+    if (fileName.endsWith('.json')) {
+      try {
+        const json = JSON.parse(cleanText);
+        if (Array.isArray(json) && json.length > 0) {
+          const keys = Object.keys(json[0]);
+          rawHeaders = keys;
+          rawRows = json.map((item) => keys.map((k) => String(item[k] ?? '')));
+        }
+      } catch {
+        /* invalid json */
+      }
+    } else {
+      const rows = parseCSV(cleanText);
+      if (rows.length > 0) {
+        rawHeaders = rows[0];
+        rawRows = rows.slice(1).filter((r: string[]) => r.some((cell: string) => cell.trim().length > 0));
+      }
+    }
+
+    // Auto-match headers to fields by key or label
+    const initialMapping: Record<string, string> = {};
+    for (const h of rawHeaders) {
+      const normalized = h.toLowerCase().trim().replace(/[-_]/g, '');
+      const match = availableFields.find(
+        (f) =>
+          f.key.toLowerCase().replace(/[-_]/g, '') === normalized ||
+          f.label.toLowerCase().replace(/[-_]/g, '') === normalized
+      );
+      initialMapping[h] = match ? match.key : '';
+    }
+    columnMapping = initialMapping;
+    currentStep = 2;
+  }
+
+  function handleDrop(e: DragEvent) {
+    e.preventDefault();
+    if (e.dataTransfer?.files?.[0]) {
+      handleFileSelect(e.dataTransfer.files[0]);
+    }
+  }
+
+  async function startImport() {
+    currentStep = 3;
+    isImporting = true;
+    processedCount = 0;
+    succeededCount = 0;
+    failedRecords = [];
+
+    const provider = adminContext.getDataProviderForResource(resourceName);
+
+    // Build mapped records
+    const recordsToImport: Record<string, unknown>[] = [];
+    for (const row of rawRows) {
+      const record: Record<string, unknown> = {};
+      rawHeaders.forEach((header, idx) => {
+        const targetFieldKey = columnMapping[header];
+        if (targetFieldKey) {
+          const fieldDef = availableFields.find((f) => f.key === targetFieldKey);
+          let val: unknown = row[idx] ?? '';
+          if (fieldDef?.type === 'number') {
+            const num = Number(val);
+            val = isNaN(num) ? val : num;
+          } else if (fieldDef?.type === 'boolean') {
+            val = val === 'true' || val === '1' || val === 'yes' || val === '是';
+          }
+          record[targetFieldKey] = val;
+        }
+      });
+      recordsToImport.push(record);
+    }
+
+    // Execute in batches
+    for (let i = 0; i < recordsToImport.length; i += batchSize) {
+      const batch = recordsToImport.slice(i, i + batchSize);
+      if (provider.createMany) {
+        try {
+          await provider.createMany({ resource: resourceName, variables: batch });
+          succeededCount += batch.length;
+        } catch (err) {
+          batch.forEach((item) => {
+            failedRecords.push({ row: item, error: err instanceof Error ? err.message : String(err) });
+          });
+        }
+      } else {
+        for (const item of batch) {
+          try {
+            await provider.create({ resource: resourceName, variables: item });
+            succeededCount++;
+          } catch (err) {
+            failedRecords.push({ row: item, error: err instanceof Error ? err.message : String(err) });
+          }
+        }
+      }
+      processedCount = Math.min(recordsToImport.length, i + batch.length);
+    }
+
+    isImporting = false;
+    onSuccess?.({ succeeded: succeededCount, failed: failedRecords.length });
+  }
+
+  function downloadErrors() {
+    if (failedRecords.length === 0 || typeof document === 'undefined') return;
+    const errorRows = failedRecords.map((f) => ({
+      ...f.row,
+      _error_reason: f.error,
+    }));
+    const csvContent = toCsv(errorRows);
+    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = `${resourceName}-import-errors.csv`;
+    link.click();
+    URL.revokeObjectURL(url);
+  }
+
+  function reset() {
+    currentStep = 1;
+    fileName = '';
+    rawHeaders = [];
+    rawRows = [];
+    columnMapping = {};
+    processedCount = 0;
+    succeededCount = 0;
+    failedRecords = [];
+    isImporting = false;
+  }
+</script>
+
+{#if open}
+  <Dialog.Dialog bind:open>
+    <Dialog.DialogContent class="sm:max-w-2xl max-h-[85vh] overflow-y-auto">
+      <Dialog.DialogHeader>
+        <Dialog.DialogTitle class="flex items-center gap-2">
+          <FileSpreadsheet class="h-5 w-5 text-primary" />
+          <span>{i18n.t('common.import', { defaultValue: 'Import' })} {resource.label}</span>
+        </Dialog.DialogTitle>
+      </Dialog.DialogHeader>
+
+      <!-- Step Indicator -->
+      <div class="flex items-center justify-between text-xs font-medium text-muted-foreground pb-2 border-b border-border/50">
+        <span class={currentStep === 1 ? 'text-primary font-semibold' : ''}>1. {i18n.t('common.uploadFile', { defaultValue: 'Upload File' })}</span>
+        <span>→</span>
+        <span class={currentStep === 2 ? 'text-primary font-semibold' : ''}>2. {i18n.t('common.mapColumns', { defaultValue: 'Map Columns' })}</span>
+        <span>→</span>
+        <span class={currentStep === 3 ? 'text-primary font-semibold' : ''}>3. {i18n.t('common.importProgress', { defaultValue: 'Import & Verify' })}</span>
+      </div>
+
+      <!-- Step 1: Upload -->
+      {#if currentStep === 1}
+        <div
+          class="border-2 border-dashed border-border/80 hover:border-primary/60 rounded-xl p-8 text-center transition-colors cursor-pointer bg-muted/20"
+          ondragover={(e) => e.preventDefault()}
+          ondrop={handleDrop}
+          role="region"
+          aria-label="Upload Dropzone"
+        >
+          <Upload class="h-10 w-10 mx-auto text-muted-foreground/60 mb-3" />
+          <p class="text-sm font-medium text-foreground mb-1">
+            {i18n.t('common.dropFileHere', { defaultValue: 'Drag and drop CSV or JSON file here' })}
+          </p>
+          <p class="text-xs text-muted-foreground mb-4">
+            {i18n.t('common.fileFormatHint', { defaultValue: 'Supports .csv, .json with UTF-8 encoding' })}
+          </p>
+          <label class="inline-flex">
+            <input
+              type="file"
+              accept=".csv,.json"
+              class="hidden"
+              onchange={(e) => {
+                const target = e.currentTarget;
+                if (target.files?.[0]) handleFileSelect(target.files[0]);
+              }}
+            />
+            <span class="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-xs font-medium text-primary-foreground shadow hover:bg-primary/90 cursor-pointer">
+              {i18n.t('common.selectFile', { defaultValue: 'Browse File' })}
+            </span>
+          </label>
+        </div>
+      {/if}
+
+      <!-- Step 2: Column Mapping -->
+      {#if currentStep === 2}
+        <div class="space-y-4">
+          <div class="flex items-center justify-between text-xs text-muted-foreground bg-muted/30 p-2.5 rounded-lg border border-border/60">
+            <span>{i18n.t('common.detectedRows', { defaultValue: 'Detected' })}: <strong class="text-foreground">{rawRows.length}</strong> {i18n.t('common.records', { defaultValue: 'records' })}</span>
+            <Badge variant="secondary" class="text-[11px] font-mono">{fileName}</Badge>
+          </div>
+
+          <div class="max-h-72 overflow-y-auto space-y-2 pr-1 border border-border/40 rounded-lg p-2">
+            {#each rawHeaders as header (header)}
+              <div class="flex items-center justify-between gap-3 p-2 rounded-md bg-card border border-border/40 text-xs">
+                <div class="flex-1 truncate">
+                  <span class="font-medium text-foreground">{header}</span>
+                  {#if rawRows[0]}
+                    <span class="block text-[11px] text-muted-foreground truncate opacity-70">
+                      Sample: {rawRows[0][rawHeaders.indexOf(header)] ?? '—'}
+                    </span>
+                  {/if}
+                </div>
+                <div class="w-48 shrink-0">
+                  <select
+                    class="h-8 w-full rounded-md border border-input bg-background px-2 text-xs focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                    bind:value={columnMapping[header]}
+                  >
+                    <option value="">— {i18n.t('common.ignoreColumn', { defaultValue: 'Ignore' })} —</option>
+                    {#each availableFields as field (field.key)}
+                      <option value={field.key}>
+                        {field.label} ({field.key}) {field.required ? '*' : ''}
+                      </option>
+                    {/each}
+                  </select>
+                </div>
+              </div>
+            {/each}
+          </div>
+
+          <div class="flex items-center justify-between pt-2">
+            <Button variant="outline" size="sm" onclick={() => { currentStep = 1; }}>
+              <ArrowLeft class="h-3.5 w-3.5 mr-1" />
+              {i18n.t('common.back', { defaultValue: 'Back' })}
+            </Button>
+            <Button size="sm" onclick={startImport}>
+              {i18n.t('common.startImport', { defaultValue: 'Start Import' })}
+              <ArrowRight class="h-3.5 w-3.5 ml-1" />
+            </Button>
+          </div>
+        </div>
+      {/if}
+
+      <!-- Step 3: Progress & Summary -->
+      {#if currentStep === 3}
+        <div class="space-y-5 py-2">
+          <div class="space-y-2">
+            <div class="flex items-center justify-between text-xs">
+              <span class="text-muted-foreground">{isImporting ? i18n.t('common.importing', { defaultValue: 'Importing...' }) : i18n.t('common.completed', { defaultValue: 'Completed' })}</span>
+              <span class="font-semibold text-foreground tabular-nums">{progressPercent}%</span>
+            </div>
+            <Progress value={progressPercent} class="h-2" />
+          </div>
+
+          <div class="grid grid-cols-2 gap-3 text-center">
+            <div class="p-3 rounded-lg bg-success/10 border border-success/20">
+              <span class="text-xs text-muted-foreground block">{i18n.t('common.succeeded', { defaultValue: 'Succeeded' })}</span>
+              <span class="text-xl font-bold text-success tabular-nums">{succeededCount}</span>
+            </div>
+            <div class="p-3 rounded-lg bg-destructive/10 border border-destructive/20">
+              <span class="text-xs text-muted-foreground block">{i18n.t('common.failed', { defaultValue: 'Failed' })}</span>
+              <span class="text-xl font-bold text-destructive tabular-nums">{failedRecords.length}</span>
+            </div>
+          </div>
+
+          {#if failedRecords.length > 0}
+            <div class="flex items-center justify-between p-3 rounded-lg bg-destructive/5 border border-destructive/15 text-xs">
+              <div class="flex items-center gap-2 text-destructive">
+                <AlertCircle class="h-4 w-4" />
+                <span>{failedRecords.length} {i18n.t('common.failedRowsHint', { defaultValue: 'records failed to import.' })}</span>
+              </div>
+              <Button variant="outline" size="sm" class="h-7 text-xs gap-1" onclick={downloadErrors}>
+                <Download class="h-3.5 w-3.5" />
+                {i18n.t('common.downloadErrors', { defaultValue: 'Download Failed CSV' })}
+              </Button>
+            </div>
+          {/if}
+
+          <div class="flex items-center justify-end gap-2 pt-3 border-t border-border/50">
+            {#if !isImporting}
+              <Button variant="outline" size="sm" onclick={reset}>
+                {i18n.t('common.importAnother', { defaultValue: 'Import Another' })}
+              </Button>
+              <Button size="sm" onclick={() => { open = false; }}>
+                {i18n.t('common.close', { defaultValue: 'Close' })}
+              </Button>
+            {:else}
+              <Button size="sm" disabled class="gap-2">
+                <Loader2 class="h-3.5 w-3.5 animate-spin" />
+                {i18n.t('common.processing', { defaultValue: 'Processing...' })}
+              </Button>
+            {/if}
+          </div>
+        </div>
+      {/if}
+    </Dialog.DialogContent>
+  </Dialog.Dialog>
+{/if}

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

@@ -0,0 +1,12 @@
+interface Props {
+    resourceName: string;
+    open?: boolean;
+    batchSize?: number;
+    onSuccess?: (result: {
+        succeeded: number;
+        failed: number;
+    }) => void;
+}
+declare const ImportWizard: import("svelte").Component<Props, {}, "open">;
+type ImportWizard = ReturnType<typeof ImportWizard>;
+export default ImportWizard;