@svadmin/ui 0.29.3 → 0.30.0

package/dist/components/ProfilePage.svelte

@@ -0,0 +1,284 @@
+<script lang="ts">
+  import { useGetIdentity, useUpdatePassword, getAuthProvider } from '@svadmin/core';
+  import { t } from '@svadmin/core/i18n';
+  import { Button } from './ui/button/index.js';
+  import { Label } from './ui/label/index.js';
+  import { Input } from './ui/input/index.js';
+  import * as Card from './ui/card/index.js';
+  import * as Alert from './ui/alert/index.js';
+  import PasswordInput from './PasswordInput.svelte';
+  import { User, Mail, Lock, Loader2, AlertCircle, CheckCircle, Camera } from '@lucide/svelte';
+
+  const identity = useGetIdentity();
+  const updatePw = useUpdatePassword();
+
+  // Check if auth provider supports updateProfile
+  let authProvider: ReturnType<typeof getAuthProvider> | null = null;
+  try { authProvider = getAuthProvider(); } catch { /* no auth */ }
+  const canUpdateProfile = !!authProvider?.updateProfile;
+
+  // Profile edit state
+  let editingProfile = $state(false);
+  let editName = $state('');
+  let profileSaving = $state(false);
+  let profileSuccess = $state(false);
+  let profileError = $state('');
+
+  function startEditProfile() {
+    editName = identity.data?.name ?? '';
+    editingProfile = true;
+    profileSuccess = false;
+    profileError = '';
+  }
+
+  async function saveProfile() {
+    if (!authProvider?.updateProfile) return;
+    profileSaving = true;
+    profileError = '';
+    try {
+      const result = await authProvider.updateProfile({ name: editName });
+      if (result.success) {
+        profileSuccess = true;
+        editingProfile = false;
+        identity.refetch();
+      } else {
+        profileError = result.error?.message ?? t('common.operationFailed');
+      }
+    } catch (e) {
+      profileError = (e as Error).message;
+    } finally {
+      profileSaving = false;
+    }
+  }
+
+  // Avatar upload
+  let avatarUploading = $state(false);
+  let fileInput = $state<HTMLInputElement>(null!);
+
+  async function handleAvatarChange(e: Event) {
+    const file = (e.target as HTMLInputElement).files?.[0];
+    if (!file || !authProvider?.updateProfile) return;
+    avatarUploading = true;
+    try {
+      const result = await authProvider.updateProfile({ avatar: file });
+      if (result.success) identity.refetch();
+    } finally {
+      avatarUploading = false;
+    }
+  }
+
+  // Password change form
+  let currentPassword = $state('');
+  let newPassword = $state('');
+  let confirmPassword = $state('');
+  let pwError = $state('');
+  let pwSuccess = $state(false);
+
+  async function handlePasswordChange(e: SubmitEvent) {
+    e.preventDefault();
+    pwError = '';
+    pwSuccess = false;
+
+    if (!newPassword) { pwError = t('auth.passwordRequired'); return; }
+    if (newPassword !== confirmPassword) { pwError = t('auth.passwordMismatch'); return; }
+
+    const result = await updatePw.mutate({
+      password: newPassword,
+      currentPassword,
+      confirmPassword,
+    });
+    if (result.success) {
+      pwSuccess = true;
+      currentPassword = '';
+      newPassword = '';
+      confirmPassword = '';
+    } else {
+      pwError = result.error?.message ?? t('common.operationFailed');
+    }
+  }
+
+  // Avatar initials
+  const initials = $derived(
+    identity.data?.name
+      ? identity.data.name.split(' ').map((n: string) => n[0]).join('').toUpperCase().slice(0, 2)
+      : '?'
+  );
+</script>
+
+<div class="space-y-6">
+  <div>
+    <h2 class="text-xl font-semibold text-foreground">{t('profile.title')}</h2>
+  </div>
+
+  <!-- Profile Info -->
+  <Card.Card>
+    <Card.CardHeader>
+      <Card.CardTitle class="flex items-center gap-2 text-base">
+        <User class="h-4 w-4 text-muted-foreground" />
+        {t('profile.title')}
+      </Card.CardTitle>
+    </Card.CardHeader>
+    <Card.CardContent>
+      {#if identity.isLoading}
+        <div class="flex items-center gap-2 text-muted-foreground">
+          <Loader2 class="h-4 w-4 animate-spin" />
+          {t('common.loading')}
+        </div>
+      {:else if identity.data}
+        {#if profileSuccess}
+          <Alert.Root class="border-success/30 bg-success/5 text-success mb-4">
+            <CheckCircle class="h-4 w-4" />
+            <Alert.Description>{t('common.updateSuccess')}</Alert.Description>
+          </Alert.Root>
+        {/if}
+
+        <div class="flex items-start gap-6">
+          <!-- Avatar -->
+          <div class="shrink-0 relative group">
+            {#if identity.data.avatar}
+              <img
+                src={identity.data.avatar}
+                alt={identity.data.name ?? ''}
+                class="h-20 w-20 rounded-lg object-cover ring-2 ring-primary/20"
+              />
+            {:else}
+              <div class="h-20 w-20 rounded-lg bg-primary/10 text-primary flex items-center justify-center text-2xl font-bold">
+                {initials}
+              </div>
+            {/if}
+            {#if canUpdateProfile}
+              <button
+                class="absolute inset-0 rounded-lg bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer"
+                onclick={() => fileInput.click()}
+                disabled={avatarUploading}
+              >
+                {#if avatarUploading}
+                  <Loader2 class="h-5 w-5 text-white animate-spin" />
+                {:else}
+                  <Camera class="h-5 w-5 text-white" />
+                {/if}
+              </button>
+              <input
+                bind:this={fileInput}
+                type="file"
+                accept="image/*"
+                class="hidden"
+                onchange={handleAvatarChange}
+              />
+            {/if}
+          </div>
+
+          <!-- Info -->
+          <div class="space-y-3 flex-1 min-w-0">
+            {#if editingProfile}
+              <div class="space-y-3 max-w-sm">
+                <div>
+                  <Label for="edit-name" class="text-xs text-muted-foreground">{t('profile.name')}</Label>
+                  <Input id="edit-name" bind:value={editName} class="mt-1" />
+                </div>
+                {#if profileError}
+                  <p class="text-xs text-destructive">{profileError}</p>
+                {/if}
+                <div class="flex gap-2">
+                  <Button size="sm" onclick={saveProfile} disabled={profileSaving}>
+                    {#if profileSaving}<Loader2 class="h-3 w-3 animate-spin mr-1" />{/if}
+                    {t('common.save')}
+                  </Button>
+                  <Button size="sm" variant="outline" onclick={() => { editingProfile = false; }}>
+                    {t('common.cancel')}
+                  </Button>
+                </div>
+              </div>
+            {:else}
+              <div>
+                <Label class="text-xs text-muted-foreground">{t('profile.name')}</Label>
+                <p class="text-lg font-semibold truncate">{identity.data.name ?? '—'}</p>
+              </div>
+
+              {#if identity.data.email || identity.data.username}
+                <div class="flex items-center gap-2 text-sm text-muted-foreground">
+                  {#if identity.data.email}
+                    <Mail class="h-4 w-4 shrink-0" />
+                  {:else}
+                    <User class="h-4 w-4 shrink-0" />
+                  {/if}
+                  <span class="truncate">{identity.data.email || identity.data.username}</span>
+                </div>
+              {/if}
+
+              {#if identity.data.id}
+                <div class="text-xs text-muted-foreground/60 font-mono">
+                  ID: {identity.data.id}
+                </div>
+              {/if}
+
+              {#if canUpdateProfile}
+                <Button size="sm" variant="outline" onclick={startEditProfile}>
+                  {t('common.edit')}
+                </Button>
+              {/if}
+            {/if}
+          </div>
+        </div>
+      {:else}
+        <p class="text-sm text-muted-foreground">{t('profile.notAvailable')}</p>
+      {/if}
+    </Card.CardContent>
+  </Card.Card>
+
+  <!-- Change Password -->
+  <Card.Card>
+    <Card.CardHeader>
+      <Card.CardTitle class="flex items-center gap-2 text-base">
+        <Lock class="h-4 w-4 text-muted-foreground" />
+        {t('profile.changePassword')}
+      </Card.CardTitle>
+    </Card.CardHeader>
+    <Card.CardContent>
+      <form onsubmit={handlePasswordChange} class="space-y-4 max-w-sm">
+        {#if pwError}
+          <Alert.Root variant="destructive">
+            <AlertCircle class="h-4 w-4" />
+            <Alert.Description>{pwError}</Alert.Description>
+          </Alert.Root>
+        {/if}
+
+        {#if pwSuccess}
+          <Alert.Root class="border-success/30 bg-success/5 text-success">
+            <CheckCircle class="h-4 w-4" />
+            <Alert.Description>{t('profile.passwordChanged')}</Alert.Description>
+          </Alert.Root>
+        {/if}
+
+        <PasswordInput
+          id="current-password"
+          label={t('profile.currentPassword')}
+          bind:value={currentPassword}
+          autocomplete="current-password"
+        />
+
+        <PasswordInput
+          id="new-password"
+          label={t('auth.password')}
+          bind:value={newPassword}
+          autocomplete="new-password"
+          showStrength
+        />
+
+        <PasswordInput
+          id="confirm-new-password"
+          label={t('auth.confirmPassword')}
+          bind:value={confirmPassword}
+          autocomplete="new-password"
+        />
+
+        <Button type="submit" disabled={updatePw.isLoading}>
+          {#if updatePw.isLoading}
+            <Loader2 class="h-4 w-4 animate-spin mr-2" />
+          {/if}
+          {t('profile.updatePassword')}
+        </Button>
+      </form>
+    </Card.CardContent>
+  </Card.Card>
+</div>

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

@@ -0,0 +1,3 @@
+declare const ProfilePage: import("svelte").Component<Record<string, never>, {}, "">;
+type ProfilePage = ReturnType<typeof ProfilePage>;
+export default ProfilePage;

package/dist/components/RegisterPage.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+  import { useRegister } from '@svadmin/core';
+  import { t } from '@svadmin/core/i18n';
+  import { navigate } from '@svadmin/core/router';
+  import { Button } from './ui/button/index.js';
+  import { Input } from './ui/input/index.js';
+  import { Label } from './ui/label/index.js';
+  import * as Card from './ui/card/index.js';
+  import * as Alert from './ui/alert/index.js';
+  import PasswordInput from './PasswordInput.svelte';
+  import { UserPlus, User, Loader2, AlertCircle } from '@lucide/svelte';
+
+  let { title = 'Admin', onSuccess } = $props<{
+    title?: string;
+    onSuccess?: () => void;
+  }>();
+
+  const register = useRegister();
+
+  let identifier = $state('');
+  let password = $state('');
+  let confirmPassword = $state('');
+  let error = $state('');
+
+  async function handleSubmit(e: SubmitEvent) {
+    e.preventDefault();
+    error = '';
+
+    if (!identifier) { error = t('auth.usernameOrEmailRequired'); return; }
+    if (!password) { error = t('auth.passwordRequired'); return; }
+    if (password !== confirmPassword) { error = t('auth.passwordMismatch'); return; }
+
+    const result = await register.mutate({ email: identifier, username: identifier, password });
+    if (result.success) {
+      onSuccess?.();
+    } else {
+      error = result.error?.message ?? t('common.operationFailed');
+    }
+  }
+</script>
+
+<div class="min-h-screen flex items-center justify-center bg-background p-4">
+  <div class="w-full max-w-[380px]">
+    <Card.Card>
+      <Card.CardHeader class="text-center pb-2">
+        <div class="inline-flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10 text-primary mx-auto mb-3">
+          <UserPlus class="h-5 w-5" />
+        </div>
+        <Card.CardTitle class="text-xl">{t('auth.createAccount')}</Card.CardTitle>
+        <p class="text-sm text-muted-foreground">{t('auth.createAccountMessage')}</p>
+      </Card.CardHeader>
+      <Card.CardContent>
+        <form onsubmit={handleSubmit} class="space-y-4">
+          {#if error}
+            <Alert.Root variant="destructive">
+              <AlertCircle class="h-4 w-4" />
+              <Alert.Description>{error}</Alert.Description>
+            </Alert.Root>
+          {/if}
+
+          <div class="space-y-2">
+            <Label for="register-identifier">{t('auth.usernameOrEmail')}</Label>
+            <div class="relative">
+              <User class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none z-[1]" />
+              <Input
+                id="register-identifier"
+                type="text"
+                placeholder={t('auth.identifierPlaceholder')}
+                bind:value={identifier}
+                class="pl-9"
+                autocomplete="username"
+              />
+            </div>
+          </div>
+
+          <PasswordInput
+            id="register-password"
+            label={t('auth.password')}
+            bind:value={password}
+            autocomplete="new-password"
+            showStrength
+          />
+
+          <PasswordInput
+            id="register-confirm"
+            label={t('auth.confirmPassword')}
+            bind:value={confirmPassword}
+            autocomplete="new-password"
+          />
+
+          <Button type="submit" class="w-full" disabled={register.isLoading}>
+            {#if register.isLoading}
+              <Loader2 class="h-4 w-4 animate-spin mr-2" />
+            {/if}
+            {t('auth.registerButton')}
+          </Button>
+        </form>
+
+        <div class="flex items-center justify-center gap-1 mt-5 pt-5 border-t">
+          <span class="text-sm text-muted-foreground">{t('auth.hasAccount')}</span>
+          <Button variant="link" class="text-sm h-auto p-0 font-medium" onclick={() => navigate('/login')}>
+            {t('auth.login')}
+          </Button>
+        </div>
+      </Card.CardContent>
+    </Card.Card>
+
+    <p class="text-xs text-muted-foreground mt-4 text-center opacity-60">
+      Powered by {title}
+    </p>
+  </div>
+</div>

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

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    title?: string;
+    onSuccess?: () => void;
+};
+declare const RegisterPage: import("svelte").Component<$$ComponentProps, {}, "">;
+type RegisterPage = ReturnType<typeof RegisterPage>;
+export default RegisterPage;

package/dist/components/RolesSettings.svelte

@@ -0,0 +1,146 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  import { getAuthProvider, getResources } from '@svadmin/core';
+  import type { Role } from '@svadmin/core';
+  import PermissionMatrix from './PermissionMatrix.svelte';
+  import type { RoleInfo, ResourceInfo, ActionInfo } from '../types.js';
+  import { toast } from '@svadmin/core/toast';
+  import { AlertCircle } from '@lucide/svelte';
+
+  const authProvider = getAuthProvider();
+  const rawResources = getResources();
+
+  let roles = $state<RoleInfo[]>([]);
+  let selectedRoleCode = $state<string>('');
+  
+  // Matrix format: { "roleId": { "resourceName": ["action1", "action2"] } }
+  let permissionsCache = $state<Record<string, Record<string, string[]>>>({});
+  
+  let loadingRoles = $state(true);
+  let loadingPermissions = $state(false);
+  let saving = $state(false);
+  let error = $state<string | null>(null);
+
+  // Convert system resources to MatrixResource format
+  let matrixResources = $derived<ResourceInfo[]>(
+    rawResources.map(r => ({
+      code: r.name,
+      name: r.label || r.name,
+    }))
+  );
+
+  let matrixActions = $state<ActionInfo[]>([
+    { code: 'create', name: t('common.create') ?? 'Create' },
+    { code: 'read', name: t('common.detail') ?? 'Read' },
+    { code: 'update', name: t('common.edit') ?? 'Update' },
+    { code: 'delete', name: t('common.delete') ?? 'Delete' },
+  ]);
+
+  async function loadRoles() {
+    if (!authProvider?.getRoles) {
+      error = t('settings.rbacNotSupported') ?? 'RBAC not supported by AuthProvider';
+      loadingRoles = false;
+      return;
+    }
+    try {
+      const fetchedRoles = await authProvider.getRoles();
+      roles = fetchedRoles.map(r => ({ code: r.id, ...r }));
+      if (roles.length > 0 && !selectedRoleCode) {
+        selectedRoleCode = roles[0].code;
+      }
+    } catch (e) {
+      error = (e as Error).message;
+    } finally {
+      loadingRoles = false;
+    }
+  }
+
+  async function loadPermissionsForRole(roleId: string) {
+    if (!authProvider?.getRolePermissions || permissionsCache[roleId]) return;
+    
+    loadingPermissions = true;
+    try {
+      const perms = await authProvider.getRolePermissions(roleId);
+      permissionsCache[roleId] = perms;
+    } catch (e) {
+      toast.error((e as Error).message);
+    } finally {
+      loadingPermissions = false;
+    }
+  }
+
+  // Load permissions whenever the selected role changes
+  $effect(() => {
+    if (selectedRoleCode && !permissionsCache[selectedRoleCode] && !loadingPermissions) {
+      loadPermissionsForRole(selectedRoleCode);
+    }
+  });
+
+  $effect(() => {
+    loadRoles();
+  });
+
+  // isGranted logic
+  function checkGrant(roleCode: string, resourceCode: string, actionCode: string) {
+    const rolePerms = permissionsCache[roleCode];
+    if (!rolePerms) return false;
+    return rolePerms[resourceCode]?.includes(actionCode) ?? false;
+  }
+
+  async function handleToggle(roleCode: string, resourceCode: string, actionCode: string, grant: boolean) {
+    if (!authProvider?.updateRolePermissions) return;
+    
+    // Copy state
+    const currentRolePerms = { ...(permissionsCache[roleCode] || {}) };
+    const currentResPerms = [...(currentRolePerms[resourceCode] || [])];
+
+    // Optimistic update
+    if (grant) {
+      if (!currentResPerms.includes(actionCode)) currentResPerms.push(actionCode);
+    } else {
+      const idx = currentResPerms.indexOf(actionCode);
+      if (idx > -1) currentResPerms.splice(idx, 1);
+    }
+    
+    currentRolePerms[resourceCode] = currentResPerms;
+    permissionsCache[roleCode] = currentRolePerms;
+
+    saving = true;
+    try {
+      // Send the entire role's permissions back (as defined by our AuthProvider interface)
+      const result = await authProvider.updateRolePermissions(roleCode, currentRolePerms);
+      if (result.success) {
+        // Success silently
+      } else {
+         throw new Error(result.error?.message ?? t('common.operationFailed'));
+      }
+    } catch (e) {
+      toast.error((e as Error).message);
+      // Rollback on fail
+      delete permissionsCache[roleCode];
+      loadPermissionsForRole(roleCode);
+    } finally {
+      saving = false;
+    }
+  }
+</script>
+
+{#if error}
+  <div class="h-full flex items-center justify-center">
+    <div class="max-w-md p-6 border border-destructive/20 bg-destructive/10 text-destructive rounded-lg flex flex-col items-center gap-3 text-center">
+      <AlertCircle class="h-8 w-8" />
+      <h3 class="font-bold text-lg">{t('common.error') ?? 'Error'}</h3>
+      <p>{error}</p>
+    </div>
+  </div>
+{:else}
+  <PermissionMatrix 
+    {roles}
+    resources={matrixResources}
+    actions={matrixActions}
+    isGranted={checkGrant}
+    bind:selectedRole={selectedRoleCode}
+    loading={loadingRoles || loadingPermissions || saving}
+    onToggle={handleToggle}
+  />
+{/if}

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

@@ -0,0 +1,3 @@
+declare const RolesSettings: import("svelte").Component<Record<string, never>, {}, "">;
+type RolesSettings = ReturnType<typeof RolesSettings>;
+export default RolesSettings;

package/dist/components/SettingsPage.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  import { navigate } from '@svadmin/core/router';
+  import { currentPath } from '@svadmin/core/router';
+  import { User, Palette, Info, Shield, FileSearch } from '@lucide/svelte';
+  import ProfilePage from './ProfilePage.svelte';
+  import AppearanceSettings from './AppearanceSettings.svelte';
+  import AboutSettings from './AboutSettings.svelte';
+  import RolesSettings from './RolesSettings.svelte';
+  import AuditLogViewer from './AuditLogViewer.svelte';
+
+  const sections = [
+    {
+      group: 'settings.general',
+      items: [
+        { key: 'profile', path: '/settings/profile', icon: User, label: 'settings.profile' },
+        { key: 'appearance', path: '/settings/appearance', icon: Palette, label: 'settings.appearance' },
+      ],
+    },
+    {
+      group: 'settings.system',
+      items: [
+        { key: 'roles', path: '/settings/roles', icon: Shield, label: 'settings.rolesAndPermissions' },
+        { key: 'audit', path: '/settings/audit', icon: FileSearch, label: 'settings.auditLogs' },
+        { key: 'about', path: '/settings/about', icon: Info, label: 'settings.about' },
+      ],
+    },
+  ];
+
+  let activeKey = $derived.by(() => {
+    const path = currentPath();
+    if (path.includes('/settings/appearance')) return 'appearance';
+    if (path.includes('/settings/roles')) return 'roles';
+    if (path.includes('/settings/audit')) return 'audit';
+    if (path.includes('/settings/about')) return 'about';
+    return 'profile';
+  });
+
+  // Default redirect to profile
+  $effect(() => {
+    const path = currentPath();
+    if (path === '/settings') {
+      navigate('/settings/profile');
+    }
+  });
+</script>
+
+<div class="flex flex-col lg:flex-row gap-0 min-h-full">
+  <!-- Left sidebar navigation -->
+  <nav class="w-full lg:w-56 shrink-0 bg-muted/10 shadow-[inset_0_-1px_0_rgba(0,0,0,0.05)] lg:shadow-[inset_-1px_0_0_rgba(0,0,0,0.05)] dark:shadow-[inset_-1px_0_0_rgba(255,255,255,0.05)]">
+    <!-- Mobile: horizontal scroll tabs -->
+    <div class="flex lg:hidden overflow-x-auto px-4 py-2 gap-1">
+      {#each sections as section}
+        {#each section.items as item}
+          {@const active = activeKey === item.key}
+          <button
+            class="flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-md whitespace-nowrap transition-colors
+              {active ? 'bg-background text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground hover:bg-background/50'}"
+            onclick={() => navigate(item.path)}
+          >
+            <item.icon class="h-4 w-4" />
+            {t(item.label)}
+          </button>
+        {/each}
+      {/each}
+    </div>
+
+    <!-- Desktop: vertical nav with groups -->
+    <div class="hidden lg:block py-6 px-3 space-y-6">
+      <div class="px-3">
+        <h2 class="text-lg font-semibold text-foreground">{t('settings.title')}</h2>
+        <p class="text-xs text-muted-foreground mt-1">{t('settings.settingsDescription')}</p>
+      </div>
+      {#each sections as section}
+        <div>
+          <h3 class="px-3 mb-1 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/60">
+            {t(section.group)}
+          </h3>
+          <div class="space-y-0.5">
+            {#each section.items as item}
+              {@const active = activeKey === item.key}
+              <button
+                class="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm transition-all
+                  {active
+                    ? 'bg-primary/10 text-primary font-medium'
+                    : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'}"
+                onclick={() => navigate(item.path)}
+              >
+                <item.icon class="h-4 w-4 shrink-0" />
+                {t(item.label)}
+              </button>
+            {/each}
+          </div>
+        </div>
+      {/each}
+    </div>
+  </nav>
+
+  <!-- Right content area -->
+  <div class="flex-1 p-6 lg:p-8 {activeKey === 'roles' || activeKey === 'audit' ? 'max-w-6xl' : 'max-w-3xl'}">
+    {#if activeKey === 'profile'}
+      <ProfilePage />
+    {:else if activeKey === 'appearance'}
+      <AppearanceSettings />
+    {:else if activeKey === 'roles'}
+      <RolesSettings />
+    {:else if activeKey === 'audit'}
+      <AuditLogViewer />
+    {:else if activeKey === 'about'}
+      <AboutSettings />
+    {/if}
+  </div>
+</div>

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

@@ -0,0 +1,3 @@
+declare const SettingsPage: import("svelte").Component<Record<string, never>, {}, "">;
+type SettingsPage = ReturnType<typeof SettingsPage>;
+export default SettingsPage;